diff --git a/.github/workflows/copilot-workshops-sync.lock.yml b/.github/workflows/copilot-workshops-sync.lock.yml index 01932d136..dac2c9e92 100644 --- a/.github/workflows/copilot-workshops-sync.lock.yml +++ b/.github/workflows/copilot-workshops-sync.lock.yml @@ -1,4 +1,4 @@ -# gh-aw-metadata: {"schema_version":"v4","frontmatter_hash":"108ab49b9f7ff64384b1684e4dbb96b2ed20248f7ce44aadd105412ad344d54f","body_hash":"9bd5e98ebc05ca6910b0b4c105429140bf9548773bd210f42fde28c823505b4f","compiler_version":"v0.88.8","strict":true,"agent_id":"copilot","engine_versions":{"copilot":"1.0.80"}} +# gh-aw-metadata: {"schema_version":"v4","frontmatter_hash":"108ab49b9f7ff64384b1684e4dbb96b2ed20248f7ce44aadd105412ad344d54f","body_hash":"6e81cbc8874790e8f9fcbfa22396b331c56c602a97fef9d13b55b0230a0e4bed","compiler_version":"v0.88.8","strict":true,"agent_id":"copilot","engine_versions":{"copilot":"1.0.80"}} # gh-aw-manifest: {"version":1,"secrets":["GH_AW_CI_TRIGGER_TOKEN","GH_AW_DEFAULT_OTLP_HEADERS","GH_AW_GITHUB_MCP_SERVER_TOKEN","GH_AW_GITHUB_TOKEN","GITHUB_TOKEN"],"actions":[{"repo":"actions/cache/restore","sha":"55cc8345863c7cc4c66a329aec7e433d2d1c52a9","version":"v6.1.0"},{"repo":"actions/cache/save","sha":"55cc8345863c7cc4c66a329aec7e433d2d1c52a9","version":"v6.1.0"},{"repo":"actions/checkout","sha":"3d3c42e5aac5ba805825da76410c181273ba90b1","version":"v7.0.1"},{"repo":"actions/download-artifact","sha":"3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c","version":"v8.0.1"},{"repo":"actions/github-script","sha":"3a2844b7e9c422d3c10d287c895573f7108da1b3","version":"v9.0.0"},{"repo":"actions/setup-node","sha":"820762786026740c76f36085b0efc47a31fe5020","version":"v7.0.0"},{"repo":"actions/upload-artifact","sha":"043fb46d1a93c77aae656e7c1c64a875d1fc6a0a","version":"v7.0.1"},{"repo":"github/gh-aw-actions/setup","sha":"5e508589e03a7757a7e05b26e834292f5445bfb6","version":"v0.88.8"}],"containers":[{"image":"ghcr.io/github/gh-aw-firewall/agent:0.28.14","digest":"sha256:f7df036c86575527b61f3f7df91c4412349a12b2a74988d929eafa2999230c98","pinned_image":"ghcr.io/github/gh-aw-firewall/agent:0.28.14@sha256:f7df036c86575527b61f3f7df91c4412349a12b2a74988d929eafa2999230c98"},{"image":"ghcr.io/github/gh-aw-firewall/api-proxy:0.28.14","digest":"sha256:6f95e2234dd9bd6333a8ff28ccea7ecf0204acd4a09108723844dbd2bf6268c5","pinned_image":"ghcr.io/github/gh-aw-firewall/api-proxy:0.28.14@sha256:6f95e2234dd9bd6333a8ff28ccea7ecf0204acd4a09108723844dbd2bf6268c5"},{"image":"ghcr.io/github/gh-aw-firewall/squid:0.28.14","digest":"sha256:2ce8df3abf3e9b76e9c0cf5863da41f1ab3f89b20ad14b988806ab89e7bf2cd5","pinned_image":"ghcr.io/github/gh-aw-firewall/squid:0.28.14@sha256:2ce8df3abf3e9b76e9c0cf5863da41f1ab3f89b20ad14b988806ab89e7bf2cd5"},{"image":"ghcr.io/github/gh-aw-mcpg:v0.4.18","digest":"sha256:85b940556a8faa4e1fdbef124bfd75f2c4ebd855a10b88a1c3b6f3e97f6f1a53","pinned_image":"ghcr.io/github/gh-aw-mcpg:v0.4.18@sha256:85b940556a8faa4e1fdbef124bfd75f2c4ebd855a10b88a1c3b6f3e97f6f1a53"},{"image":"ghcr.io/github/gh-aw-node","digest":"sha256:0d9f1fb5fd6610c0ac1f5194a38e45a8a1e81f8a390d5142d8e4e6f26a4b3196","pinned_image":"ghcr.io/github/gh-aw-node@sha256:0d9f1fb5fd6610c0ac1f5194a38e45a8a1e81f8a390d5142d8e4e6f26a4b3196"},{"image":"ghcr.io/github/github-mcp-server:v1.11.0","digest":"sha256:fbec75de11c255213fa08d80fb166abe73d851fff631c51c0079872967720699","pinned_image":"ghcr.io/github/github-mcp-server:v1.11.0@sha256:fbec75de11c255213fa08d80fb166abe73d851fff631c51c0079872967720699"}],"mcp_servers":[{"name":"github","tools":["get_commit","get_file_contents","get_latest_release","get_release_by_tag","get_tag","list_branches","list_commits","list_releases","list_starred_repositories","list_tags","search_code","search_repositories"]},{"name":"safeoutputs","tools":["create_pull_request","missing_data","missing_tool","noop"]}]} # This file was automatically generated by gh-aw (v0.88.8). DO NOT EDIT. To debug this workflow, load the skill at https://github.com/github/gh-aw/blob/main/debug.md # diff --git a/.github/workflows/copilot-workshops-sync.md b/.github/workflows/copilot-workshops-sync.md index 123986858..afd991825 100644 --- a/.github/workflows/copilot-workshops-sync.md +++ b/.github/workflows/copilot-workshops-sync.md @@ -29,16 +29,23 @@ You are a documentation sync agent for the **awesome-copilot** Learning Hub. You > [!NOTE] > The markdown body of this workflow can be edited directly on GitHub.com without recompilation. If the upstream repository is renamed or the content moves, update the repository, ref, or path values in this section and in the layout descriptions below. -The upstream course is a single workshop, **"Hands-on with GitHub Copilot's agents"**, presented as four independent **harnesses** the learner can choose between. The content lives directly under `docs/` (plain GitHub-flavoured markdown — this is the same content rendered on github.com and, separately, by the upstream repo's own Astro site): +The upstream repository has two workshop families: **First steps**, which builds a Space Quiz from an empty folder, and **Real-world development**, which uses the Tailspin Toys application and backlog. The content lives under `docs/` (plain GitHub-flavoured markdown — this is the same content rendered on github.com and, separately, by the upstream repo's own Astro site): ``` docs/ -├── README.md # "choose your harness" landing page (frontmatter slug: index) -├── _images/ # shared screenshots referenced by all harnesses (via ../_images/…) -├── vscode/ # README.md (overview) + 0-prerequisites … 6-iterating -├── cli/ # README.md (overview) + 0-prerequisites … 8-review -├── app/ # README.md (overview) + 0-prerequisites … 8-review -├── cloud/ # README.md (overview) + 0-prerequisites … 5-iterating +├── README.md # workshop-family landing page (frontmatter slug: index) +├── _images/ # shared screenshots and SVG illustrations +├── first-steps/ +│ ├── README.md # First steps overview +│ ├── copilot-app/ # README.md + 0-prerequisites … 12-review +│ ├── copilot-cli/ # README.md + 0-prerequisites … 10-review +│ └── vscode/ # README.md + 0-prerequisites … 10-review +├── real-world-development/ +│ ├── README.md # Tailspin Toys overview +│ ├── vscode/ +│ ├── cli/ +│ ├── app/ +│ └── cloud/ ├── es-es/ # localized content (see "Localizations" below) ├── ja-jp/ ├── ko-kr/ @@ -50,7 +57,7 @@ Key conventions in the upstream content: - **Overview pages are `README.md`** (not `index.md`), each with frontmatter `title`, `slug`, `authors`, `lastUpdated`. - **Lesson pages** are `-.md` with frontmatter `title`, often `description`, `authors`, `lastUpdated`. -- **Images** are referenced relative to the harness folder as `../_images/.png`, resolving to `docs/_images/`. +- **Images** are referenced using one or more `../` segments before `_images/`, resolving to `docs/_images/`. Preserve both screenshots and SVG illustrations. - **Intra-course links** are reference-style relative paths, e.g. `0-prerequisites/`, `vscode/`, `../cli/3-generating-code/`. - **Callouts** use GitHub admonition syntax (`> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!WARNING]`, `> [!CAUTION]`). @@ -60,9 +67,16 @@ The canonical English mirror lives under the Learning Hub: ``` website/src/content/docs/learning-hub/copilot-workshops/ -├── index.md # mirrored landing page (from upstream docs/README.md) +├── index.md # workshop-family landing page (from upstream docs/README.md) +├── first-steps/ +│ ├── index.md # from upstream docs/first-steps/README.md +│ ├── copilot-app/ # index.md + all lessons +│ ├── copilot-cli/ # index.md + all lessons +│ └── vscode/ # index.md + all lessons +├── real-world-development/ +│ └── index.md # from upstream docs/real-world-development/README.md ├── vscode/ -│ ├── index.md # from upstream docs/vscode/README.md +│ ├── index.md # from upstream docs/real-world-development/vscode/README.md │ ├── 0-prerequisites.md │ └── … (one file per lesson) ├── cli/ @@ -70,13 +84,15 @@ website/src/content/docs/learning-hub/copilot-workshops/ └── cloud/ ``` +**Preserve the existing real-world workshop URLs.** Upstream moved the original harnesses under `docs/real-world-development/`, but their local mirrors stay at `copilot-workshops/{vscode,cli,app,cloud}/`. Do not move, delete, or duplicate these local harnesses merely because upstream reorganized them. Only the real-world family overview uses `copilot-workshops/real-world-development/`. + Mirrored images live under `website/public/images/learning-hub/copilot-workshops/` (mirror the upstream `_images/` filenames; keep them flat unless upstream introduces subfolders). ### Localizations -The upstream repo ships localized content under per-locale folders (`docs//…`) using these locale directories: `es-es`, `ja-jp`, `ko-kr`, `pt-br`, `zh-cn`. Localization coverage is partial and grows over time (at time of writing, the localized `app` harness plus a localized landing `README.md` exist for each locale; other harnesses may not be translated yet). +The upstream repo ships localized content under per-locale folders (`docs//…`) using these locale directories: `es-es`, `ja-jp`, `ko-kr`, `pt-br`, `zh-cn`. Localization coverage is partial and grows over time. Real-world harnesses now live under `docs//real-world-development/`; First steps translations must only be mirrored if they actually exist upstream. -The website uses **Starlight internationalization** with English as the root (unprefixed) locale. Localized pages therefore live under a locale-prefixed content path that mirrors the English tree: +The website uses **Astro internationalization** with English as the root (unprefixed) locale. Localized pages therefore live under a locale-prefixed content path that mirrors the English tree: ``` website/src/content/docs//learning-hub/copilot-workshops/… @@ -87,26 +103,39 @@ For example, the Spanish version of the app harness overview maps like this: | Upstream | Local mirror | | --- | --- | | `docs/es-es/README.md` | `website/src/content/docs/es-es/learning-hub/copilot-workshops/index.md` | -| `docs/es-es/app/README.md` | `website/src/content/docs/es-es/learning-hub/copilot-workshops/app/index.md` | -| `docs/es-es/app/2-add-star-rating.md` | `website/src/content/docs/es-es/learning-hub/copilot-workshops/app/2-add-star-rating.md` | +| `docs/es-es/first-steps/README.md` | `website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/index.md` | +| `docs/es-es/first-steps/copilot-cli/0-prerequisites.md` | `website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md` | +| `docs/es-es/real-world-development/app/README.md` | `website/src/content/docs/es-es/learning-hub/copilot-workshops/app/index.md` | +| `docs/es-es/real-world-development/app/2-add-star-rating.md` | `website/src/content/docs/es-es/learning-hub/copilot-workshops/app/2-add-star-rating.md` | -Use the **same locale directory names as upstream** (`es-es`, `ja-jp`, `ko-kr`, `pt-br`, `zh-cn`) so they match the `locales` keys configured in `website/astro.config.mjs`. Starlight automatically falls back to the English page for any localized page that does not exist upstream, so you only need to mirror the localized files that actually exist — do **not** invent translations or copy English text into locale folders. +Use the **same locale directory names as upstream** (`es-es`, `ja-jp`, `ko-kr`, `pt-br`, `zh-cn`) so they match the `locales` keys configured in `website/astro.config.mjs`. Astro automatically falls back to the English page for any localized page that does not exist upstream, so you only need to mirror the localized files that actually exist — do **not** invent translations or copy English text into locale folders. Localized pages share the English images: keep their image references pointing at the same site-absolute `/images/learning-hub/copilot-workshops/…` paths (do not duplicate images per locale). +The workshop landing page, real-world app harness, and complete First steps family have translations in all five locales. Keep `hasTranslations` in `website/src/lib/learning-hub-routes.ts` aligned with actual mirrored coverage so these pages offer the language selector. Do not enable it for English-only harnesses or family overviews. + ## Navigation wiring -Navigation is wired in three places: +Navigation is wired in these places: -- `website/astro.config.mjs` — the sidebar group **"Copilot Workshops"**, with a nested sub-group per harness. Starlight applies one sidebar across all locales and auto-prefixes links for the active locale, so you only configure the English (root) slugs here. +- `website/src/pages/learning-hub/index.astro` — `WORKSHOP_LANDING_IDS` explicitly lists the workshop-family and harness overview entries shown in the Learning Hub. +- `website/src/components/brand/LearningHubIndex.tsx` — the recommended Workshops card links to the workshop-family landing page. - `website/src/content/docs/learning-hub/index.md` — a short entry linking to the workshop. -- `website/src/content/docs/learning-hub/copilot-workshops/index.md` — the mirrored landing page whose harness/lesson tables link to the local pages. +- `website/src/content/docs/learning-hub/copilot-workshops/index.md` and each family/harness `index.md` — mirrored landing pages whose links and lesson tables point to the local pages. + +The site no longer uses a Starlight sidebar. Do not add sidebar configuration to `website/astro.config.mjs`; routes are generated from the content collection. ## Step 1 — Determine what's new upstream > [!IMPORTANT] > The **initial import has already been completed manually** (seeded from `github-samples/copilot-workshops@b543d2fe8cc7454d9118b094f168f7a0dd818b4a`), because a full first-run import exceeds the maximum number of files a safe-output pull request can contain. Treat the mirror as existing, and only ever produce **incremental** updates from here on. If the mirror ever appears to be missing entirely, do **not** attempt to recreate it in a single run — call the `noop` safe output with an explanation so a human can re-seed it manually. +The First steps family and the workshop-family overview pages were subsequently imported from `0711e76fc68c8746bc70900525025cfb3dc57734`. This is an additional import baseline, not evidence that the existing real-world harnesses have been synced to that revision. + +First steps and the complete real-world **app** harness, including all five app translations and the optional Foundry modules, were then synced to `bfedfd25a1c7c0b3e3d0af191ac60bd39679273b` ([upstream PR #194](https://github.com/github-samples/copilot-workshops/pull/194)). This does not advance the baseline for the real-world CLI, VS Code, or cloud harnesses. Compare each harness independently rather than treating this revision as a global sync checkpoint. + +All five First steps translations (39 pages per locale) and the five localized workshop-family landing pages were subsequently imported from `b44e5eb2772b5769d6d4e09e9910e7d15ec2473e` ([upstream PR #195](https://github.com/github-samples/copilot-workshops/pull/195)). This advances only those translated pages, not the other harness baselines. + 1. Read `cache-memory` and look for a file named `copilot-workshops-sync-state.json`. It may contain: - `last_synced_sha` — the most recent commit SHA you processed on your previous run - `last_synced_at` — a filesystem-safe timestamp in the format `YYYY-MM-DD-HH-MM-SS` @@ -158,11 +187,15 @@ Edit the local docs, assets, and navigation so the website remains a **source-fa ### File mapping rules - Upstream `docs/README.md` → `learning-hub/copilot-workshops/index.md` -- Upstream `docs//README.md` → `learning-hub/copilot-workshops//index.md` -- Upstream `docs//-*.md` → `learning-hub/copilot-workshops//-*.md` +- Upstream `docs/first-steps/README.md` → `learning-hub/copilot-workshops/first-steps/index.md` +- Upstream `docs/first-steps//README.md` → `learning-hub/copilot-workshops/first-steps//index.md` +- Upstream `docs/first-steps//-*.md` → `learning-hub/copilot-workshops/first-steps//-*.md` +- Upstream `docs/real-world-development/README.md` → `learning-hub/copilot-workshops/real-world-development/index.md` +- Upstream `docs/real-world-development//README.md` → `learning-hub/copilot-workshops//index.md` +- Upstream `docs/real-world-development//-*.md` → `learning-hub/copilot-workshops//-*.md` +- Preserve nested optional module folders: `docs/real-world-development/app/8-foundry-canvas/README.md` → `learning-hub/copilot-workshops/app/8-foundry-canvas/index.md`, and its module `.md` files keep the same relative paths. - Upstream `docs//README.md` → `/learning-hub/copilot-workshops/index.md` -- Upstream `docs///README.md` → `/learning-hub/copilot-workshops//index.md` -- Upstream `docs///-*.md` → `/learning-hub/copilot-workshops//-*.md` +- Apply the same family/harness rules to `docs//first-steps/…` and `docs//real-world-development/…`, prefixing the local content path with `/`. - Upstream `docs/_images/` → `website/public/images/learning-hub/copilot-workshops/` ### Mirror-first authoring rules @@ -173,23 +206,26 @@ Edit the local docs, assets, and navigation so the website remains a **source-fa - **Frontmatter.** Keep the upstream `title` (and `description` if present). **Remove the upstream `slug` field** (routing on this site is path-based, and a stray `slug` would break the mirror's routes). Ensure these two fields the Learning Hub uses are present on every mirrored page: - `authors:` — replace the upstream author list with a single-item list `- GitHub Copilot Learning Hub Team` - `lastUpdated:` — today's date in `YYYY-MM-DD` format (bump only on pages whose mirrored content changed; otherwise preserve the existing value) + - Preserve local overview `description` and `tags` metadata, including `workshop` and `cli` tags, so Learning Hub discovery and filters remain useful. - **GitHub admonitions.** The website renders GitHub admonition syntax (`> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!WARNING]`, `> [!CAUTION]`) via a remark plugin, so **preserve admonitions exactly as written upstream** — do not convert them to Starlight `:::` asides and do not strip the `[!...]` markers. Keep the marker on its own `>`-prefixed line with the body on subsequent `>`-prefixed lines. - - **Image paths.** Rewrite upstream relative image references to site-absolute paths under `/images/learning-hub/copilot-workshops/`. Upstream uses a relative `_images/` reference whose depth depends on the file's location: English harness pages use `../_images/.png`, while localized pages (which sit one directory deeper under `docs///`) use `../../_images/.png`. **Collapse any leading run of `../` segments** before `_images/` — i.e. rewrite `(../)+_images/` to `/images/learning-hub/copilot-workshops/` regardless of how many `../` precede it (verify no stray `..//images/...` remains). Copy the referenced image files into `website/public/images/learning-hub/copilot-workshops/`. Localized pages reuse the same English image files and paths. - - **Internal course links.** Rewrite upstream intra-course links so they resolve on the website. Reference-style relative links like `0-prerequisites/`, `vscode/`, or `../cli/3-generating-code/` must point at the local mirror routes under `/learning-hub/copilot-workshops///` (with a trailing slash, matching the site's `trailingSlash: always` setting). An overview link that upstream targets a harness folder (e.g. `vscode/`) maps to `/learning-hub/copilot-workshops/vscode/`. Preserve reference-style link definitions when upstream uses them. **For localized pages, the target path must include the page's locale prefix**, e.g. on a `es-es` page link to `/es-es/learning-hub/copilot-workshops///`. Astro/Starlight does **not** rewrite absolute links written in Markdown body content for the active locale (the locale helpers only apply to `.astro` components), so an unprefixed `/learning-hub/…` link inside a translated page would send readers to the English page. Only cross-locale-safe option other than prefixing is to keep the link relative (e.g. `../3-generating-code/`), which resolves within the current locale automatically — prefer explicit locale-prefixed absolute links for clarity. + - **Image paths.** Rewrite upstream relative image references to site-absolute paths under `/images/learning-hub/copilot-workshops/`. **Collapse any leading run of `../` segments** before `_images/` — i.e. rewrite `(../)+_images/` to `/images/learning-hub/copilot-workshops/` regardless of depth or file extension (verify no stray `..//images/...` remains). Copy the referenced image files into `website/public/images/learning-hub/copilot-workshops/`. Localized pages reuse the same English image files and paths. + - **Internal course links.** Rewrite both inline links and reference-style definitions to the local routes in the file mapping rules, with a trailing slash and any original anchor preserved. First steps links stay under `/learning-hub/copilot-workshops/first-steps//`; real-world harness links retain `/learning-hub/copilot-workshops//`. For example, the First steps app review page's `../../copilot-cli/` maps to `/learning-hub/copilot-workshops/first-steps/copilot-cli/`, while its `../../../real-world-development/app/` maps to `/learning-hub/copilot-workshops/app/`. Resolve lesson links relative to the rendered lesson directory (`/`), not the markdown file's containing folder. Preserve reference-style definitions when upstream uses them. **For localized pages, prefix each target with the page's locale**, e.g. `/es-es/learning-hub/copilot-workshops/app/`. Astro does not rewrite absolute links in Markdown body content for the active locale. - **Repo-root relative links.** Convert links that are only valid inside the upstream repo (for example `../../.github/...`, `./.github/...`, or `src/...` source-file references) into absolute links to the upstream repo: use `https://github.com/github-samples/copilot-workshops/tree/main/...` for directories and `https://github.com/github-samples/copilot-workshops/blob/main/...` for files. 3. If upstream adds, removes, or renames harnesses or lessons: - - Create, delete, or rename the corresponding markdown files under `website/src/content/docs/learning-hub/copilot-workshops//` (and the localized equivalents under `website/src/content/docs//learning-hub/copilot-workshops//`). - - Update the **"Copilot Workshops"** sidebar group in `website/astro.config.mjs` so its nested per-harness sub-groups list the Overview link plus each lesson in upstream order, using the upstream lesson titles as labels. - - Update `website/src/content/docs/learning-hub/copilot-workshops/index.md` and any harness `index.md` lesson tables to match. + - Create, delete, or rename the corresponding markdown files using the family/harness mapping rules above (and the localized equivalents). An upstream directory relocation alone is not a reason to remove existing public routes. + - Preserve the real-world app lesson redirects in `website/astro.config.mjs` for all locales. Renamed lessons are served at their current source paths, while the older lesson URLs redirect to the matching replacement; do not recreate obsolete Markdown pages that would shadow those redirects. If upstream renames another published lesson, add a redirect rather than breaking existing links. + - Update `WORKSHOP_LANDING_IDS` in `website/src/pages/learning-hub/index.astro` for any new or removed family/harness overview. + - Update `website/src/content/docs/learning-hub/copilot-workshops/index.md`, the family overview pages, and any harness `index.md` lesson tables to match. - Update the `website/src/content/docs/learning-hub/index.md` entry only if the workshop's landing description or link must change. ### Navigation wiring details -- In `website/astro.config.mjs`, add or maintain a top-level sidebar group labelled `"Copilot Workshops"`. Give it an `items` array containing one nested group per harness (labels: `VS Code`, `Copilot CLI`, `Copilot App`, `Copilot Cloud Agent`). Each nested group should start with an `Overview` entry that links to `/learning-hub/copilot-workshops//` and then list each lesson slug (e.g. `learning-hub/copilot-workshops/app/0-prerequisites`). Follow the exact style already used by the existing `"Copilot CLI for Beginners"` group. -- Place the new group in a sensible position relative to the existing Learning Hub groups (after `"Copilot CLI for Beginners"` is a natural fit). -- Do **not** add locale-prefixed slugs to the sidebar; Starlight derives localized navigation from the single root sidebar automatically. -- Every root slug you add to the sidebar **must** correspond to a real mirrored English markdown file, or the website build will fail. +- Add English overview entry IDs (ending in `/index`) to `WORKSHOP_LANDING_IDS` in `website/src/pages/learning-hub/index.astro`. Include family and harness overviews, but do not list individual lessons in the Learning Hub article grid. +- Give overview pages a useful description and the `workshop` tag; CLI overviews also use `cli`. Preserve those fields on later syncs. +- Keep the recommended Workshops card in `website/src/components/brand/LearningHubIndex.tsx` and the entry in `website/src/content/docs/learning-hub/index.md` aligned with the workshop-family landing page. +- Every overview ID and local lesson link must correspond to a real mirrored English markdown file. Verify cross-family links and images, then run `npm run website:build`. +- Do not fabricate First steps translations. Preserve attribution and the bundled MIT `LICENSE` in the First steps mirror. ## Step 5 — Update the sync state cache @@ -222,10 +258,10 @@ If there is nothing to change after your analysis, do **not** open a PR. Instead - The canonical course content lives in `website/src/content/docs/learning-hub/copilot-workshops/` (English) and `website/src/content/docs//learning-hub/copilot-workshops/` (localized); do not recreate legacy duplicates elsewhere. - Prefer changes within the course docs and `website/public/images/learning-hub/copilot-workshops/`. -- Only edit `website/astro.config.mjs` or `website/src/content/docs/learning-hub/index.md` when upstream course structure or navigation truly requires it. +- Only edit Learning Hub discovery files or `website/src/content/docs/learning-hub/index.md` when upstream course structure or navigation truly requires it. - Preserve existing frontmatter fields; remove only the upstream `slug`, and add/update `authors` and `lastUpdated` (and `description` if genuinely warranted). - Preserve GitHub admonition syntax exactly; the site renders it natively. -- Only mirror localized files that actually exist upstream; rely on Starlight's fallback for the rest, and never fabricate translations. +- Only mirror localized files that actually exist upstream; rely on Astro's fallback for the rest, and never fabricate translations. - Keep the course source-faithful; avoid summaries or interpretive rewrites. - The repository runs `codespell` in CI. Localized locale directories are already excluded in `.codespellrc`, but a new upstream English page may still trip a false positive on a valid word. **Never edit mirrored prose to satisfy the spell checker** — add the word to `ignore-words-list` in `.codespellrc` (with a comment explaining why) as part of the same PR. - Do not auto-merge; the PR is for human review. diff --git a/website/astro.config.mjs b/website/astro.config.mjs index 6d8e98bf0..d7bbe231f 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -48,6 +48,23 @@ const githubAdmonitionMapping = { }; const site = "https://awesome-copilot.github.com/"; +const workshopLessonRenames = { + "3-custom-instructions": "4-custom-instructions", + "4-build-filtering": "3-agent-modes", + "5-mcp-playwright": "6-mcp-playwright", + "6-agent-merge": "8-create-pull-request", + "7-canvases": "9-canvases", + "8-review": "10-review", +}; +const workshopRedirects = Object.fromEntries( + ["", "es-es", "ja-jp", "ko-kr", "pt-br", "zh-cn"].flatMap((locale) => { + const prefix = `/${locale ? `${locale}/` : ""}learning-hub/copilot-workshops/app/`; + return Object.entries(workshopLessonRenames).map(([previous, current]) => [ + `${prefix}${previous}/`, + `${prefix}${current}/`, + ]); + }), +); // https://astro.build/config export default defineConfig({ @@ -101,6 +118,7 @@ export default defineConfig({ }, integrations: [react(), sitemap(), pagefindResources()], redirects: { + ...workshopRedirects, "/samples/": "/learning-hub/cookbook/", "/hooks/": "https://github.com/github/awesome-copilot/tree/main/hooks", "/workflows/": "https://github.com/github/awesome-copilot/tree/main/workflows", diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-deploy-to-foundry.png b/website/public/images/learning-hub/copilot-workshops/app-8-deploy-to-foundry.png new file mode 100644 index 000000000..d349a7e22 Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-deploy-to-foundry.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-e2e-test-results.png b/website/public/images/learning-hub/copilot-workshops/app-8-e2e-test-results.png new file mode 100644 index 000000000..9d0734ce3 Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-e2e-test-results.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-foundry-project-created.png b/website/public/images/learning-hub/copilot-workshops/app-8-foundry-project-created.png new file mode 100644 index 000000000..63e063a76 Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-foundry-project-created.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-generate-catalog-export.png b/website/public/images/learning-hub/copilot-workshops/app-8-generate-catalog-export.png new file mode 100644 index 000000000..a0fcf9a61 Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-generate-catalog-export.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-grounded-recommendation.png b/website/public/images/learning-hub/copilot-workshops/app-8-grounded-recommendation.png new file mode 100644 index 000000000..979af3d9c Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-grounded-recommendation.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-install-foundry-plugin.png b/website/public/images/learning-hub/copilot-workshops/app-8-install-foundry-plugin.png new file mode 100644 index 000000000..a1d821ac1 Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-install-foundry-plugin.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-local-proxy-test.png b/website/public/images/learning-hub/copilot-workshops/app-8-local-proxy-test.png new file mode 100644 index 000000000..1897a14c2 Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-local-proxy-test.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-scaffold-backer-concierge.png b/website/public/images/learning-hub/copilot-workshops/app-8-scaffold-backer-concierge.png new file mode 100644 index 000000000..6df48177c Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-scaffold-backer-concierge.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-select-model.png b/website/public/images/learning-hub/copilot-workshops/app-8-select-model.png new file mode 100644 index 000000000..06cbd43a8 Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-select-model.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-validate-project-model.png b/website/public/images/learning-hub/copilot-workshops/app-8-validate-project-model.png new file mode 100644 index 000000000..84138607a Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-validate-project-model.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/app-8-view-catalog.png b/website/public/images/learning-hub/copilot-workshops/app-8-view-catalog.png new file mode 100644 index 000000000..9d184468d Binary files /dev/null and b/website/public/images/learning-hub/copilot-workshops/app-8-view-catalog.png differ diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-app-automations.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-app-automations.svg new file mode 100644 index 000000000..9784eaa53 --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-app-automations.svg @@ -0,0 +1,108 @@ + +The Automations view in the Copilot app with weekly automation cards + + + + + +NewPull requestsIssuesAutomationsCustomizeMore + +Projects + + +space-quiz +Automations +Templates +New automation +All +Local +Cloud + + +Search automations… + +Your automations +Use agents to handle recurring work on a cadence you choose. + +Issue triage +Weekly +Review the latest GitHub issues +and rank them by severity… + +space-quiz · Local + +2d ago + + +Accessibility audit +Weekly +Review PRs merged this week +and summarize a11y issues… + +space-quiz · Local + +Each run opens its own session, so an automation never disturbs your work. + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg new file mode 100644 index 000000000..69afebd91 --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg @@ -0,0 +1,90 @@ + +A Kanban canvas with issue cards, one being dragged from Backlog into Plan +Repository Issues Kanban + + +BACKLOG +PLAN +READY +IMPLEMENT + + + + + + +#12 +Per-question timer + +#13 +Review screen + + + +#13 +Review screen +Drop a card into a lane and the app opens a session with that issue already loaded. + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg new file mode 100644 index 000000000..e790b967c --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg @@ -0,0 +1,86 @@ + +The Changes tab in the app flyout showing a file diff +space-quiz · session + + +Changes +Terminal +1 file changed ++142 −8 + +index.html + ++ <div class="progress"> ++ <span id="score">0</span> +− <h1>Quiz</h1> + +SESSION +Implement issue #12 + +Added the per-question timer +Review the diff before you accept it → + + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-app-issues.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-app-issues.svg new file mode 100644 index 000000000..b12d73d5d --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-app-issues.svg @@ -0,0 +1,97 @@ + +The Issues view in the Copilot app with the sidebar and a list of issues assigned to you + + + + + +NewPull requestsIssuesAutomationsCustomizeMore + +Projects + + +space-quiz +Issues +All repositories ⌄ +New issue +Assigned to me +Created by me +Mentioning me +Done + + + +Search… + +State isOpen + +Assignee is@me + +Add a per-question timer #12jamesmontemagno/space-quiz · 5m ago +Show a review screen after the last question #13jamesmontemagno/space-quiz · 5m ago +Save a local high score board #14jamesmontemagno/space-quiz · 5m ago +Open any issue and start a session on it without leaving the app. + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg new file mode 100644 index 000000000..4d6f824f0 --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg @@ -0,0 +1,87 @@ + +The Copilot app New session screen with the prompt box and folder, mode, and agent pickers + + + +Ask anything or paste a URL. Use / for commands, & sessions, # issues… ++ +Interactive +Auto · Balance +Default agent + + + + +space-quiz + +Local + +main + + +Start from New → Open folder +Pick the folder, the mode, and the agent before you send the first prompt. + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg new file mode 100644 index 000000000..eeec3bb8d --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg @@ -0,0 +1,110 @@ + +The Copilot app session details panel showing path, project, agent, changes, tokens, and context usage +Space Quiz build· space-quiz/main + +main +from +origin/main + + +Remote controlNot enabled +Path~/Projects/spa… +Projectspace-quiz +Session nameSpace Quiz build +Session ID509d8b9a-cc2e… +AgentDefaultChange + + +Changes1 file changed + +Tokens +↑ 6.8M(6.8M cached) +↓ 35.1K(6.9K reasoning) +Context +27%328K + + + + +Session spend20.7 AI credits + + + +Enable remote control +Rename session +View session insights +Share as secret gist +Archive session + + +Which folder andbranch this really is + +The number to watchAs context fills, starta fresh session + +More options forthe session + + + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-cli-context.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-context.svg new file mode 100644 index 000000000..d60c46e5d --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-context.svg @@ -0,0 +1,82 @@ + +Terminal showing the slash context command and a context usage meter +copilot — /context + +>/context +Context window +61% used + + + + + +Conversation +Files read +Instructions + + +Running low? Use /compact to summarize, or start a fresh session. + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg new file mode 100644 index 000000000..0722e92d0 --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg @@ -0,0 +1,95 @@ + +The Copilot CLI side panel showing the Issues tab with an open issue selected and the keyboard hints along the bottom +space-quiz — copilot + + +Current +Sessions +Issues +Pull requests +Gists + + +is: +issue +is: +open +involves: +@me +repo: +space-quiz +1 / 1 + + + +Add a score screen at the end of the quiz +#2 · jamesmontemagno opened 1w ago + +←opens this panel · tab moves between the tabs + + +/ search · enter details · o open · w worktree · c chat · a all + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg new file mode 100644 index 000000000..b0bc02c7e --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg @@ -0,0 +1,81 @@ + +Copilot CLI welcome screen in a terminal window +space-quiz — copilot + + +┌─────────────────────────────┐ +│ GitHub Copilot CLI │ +└─────────────────────────────┘ +Trust the files in this folder? +> 1. Yes, proceed + 2. No, exit + + +/modelchoose the model for this session + +/helplist every slash command +>Create a space exploration quiz + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg new file mode 100644 index 000000000..67ff145f8 --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg @@ -0,0 +1,74 @@ + +Terminal output from the slash worktree command creating an isolated checkout +copilot — /worktree + + +>/worktree +✓ Created worktree ../space-quiz-13 + branch: issue-13-review-screen + this session now works there; main is untouched + + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg new file mode 100644 index 000000000..f3ced6f57 --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg @@ -0,0 +1,88 @@ + +The Copilot Chat harness picker in VS Code switching from Local to Cloud +Copilot Chat + + +Add three new colour themes + +Working in the cloud… +Follow the session on GitHub + +Ask Copilot + +Harness ⌄ + +Harness +Copilot + +Local + +Cloud +✓ + +Claude +Codex + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg new file mode 100644 index 000000000..58a10358d --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg @@ -0,0 +1,89 @@ + +The VS Code Source Control view with the Copilot sparkle button on the commit message box +space-quiz — Visual Studio Code + + + + + + +SOURCE CONTROL + +Message (⌘Enter to commit) + + +Commit +CHANGES +index.htmlM +.github/copilot-instructions.mdU + +Copilot wrote your message +Add per-question timer to the quiz + +Create Pull Request +Commit first, then this button appears +right inside Source Control. + diff --git a/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg b/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg new file mode 100644 index 000000000..eae711650 --- /dev/null +++ b/website/public/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg @@ -0,0 +1,85 @@ + +The copilot-instructions.md file open in VS Code +copilot-instructions.md — space-quiz + + +EXPLORER +▾ .github + +copilot-instructions.md +index.html + +copilot-instructions.md + +# Space Quiz +Single index.html. No dependencies, no build step. +Every answer must be reachable by keyboard. +Respect prefers-color-scheme in both themes. +## How I like code written +Small functions, early returns, no clever one-liners. +Comment only what is genuinely surprising. + + diff --git a/website/src/components/brand/LearningArticleLayout.tsx b/website/src/components/brand/LearningArticleLayout.tsx index 507a8790a..7a07f99af 100644 --- a/website/src/components/brand/LearningArticleLayout.tsx +++ b/website/src/components/brand/LearningArticleLayout.tsx @@ -150,7 +150,7 @@ export type LearningArticleLayoutProps = { /** * Only pages that actually have a mirrored translation should offer a * language switch. Defaults to false; the Learning Hub article body passes - * true for the `copilot-workshops/app` track. + * true for the translated workshop landing page, app track, and First Steps. */ showLanguageSelect?: boolean; /** Article body — a sequence of `
` blocks (and any ProTip). */ diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx index 7a5d85a3e..f126ac21d 100644 --- a/website/src/components/brand/LearningHubIndex.tsx +++ b/website/src/components/brand/LearningHubIndex.tsx @@ -192,9 +192,9 @@ const recommendedCards = [ id: "workshop", page: "copilot-workshops", labels: [] as string[], - title: "Workshop", + title: "Workshops", description: - "Prefer to learn by building? Work through Hands-on with GitHub Copilot's agents — a hands-on workshop with four harnesses (VS Code, Copilot CLI, Copilot app, and cloud agent) built around a shared Tailspin Toys backlog.", + "Prefer to learn by building? Start with First Steps to build and ship a Space Quiz in VS Code, Copilot CLI, or the Copilot app. Then explore real-world development workshops with a shared Tailspin Toys backlog.", }, ]; diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/0-prerequisites.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/0-prerequisites.md index 54d4cfa81..f668b25a7 100644 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/0-prerequisites.md +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/0-prerequisites.md @@ -3,7 +3,7 @@ title: "Lección 0 - Requisitos previos" description: "Prepara el entorno para las lecciones de la aplicación GitHub Copilot: instala Node.js para el proyecto Tailspin Toys y crea tu propia copia del repositorio a partir de la plantilla." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- La aplicación GitHub Copilot es una aplicación de escritorio que actúa como centro de operaciones tanto para Copilot como para GitHub. Proporciona acceso rápido a incidencias y solicitudes de incorporación de cambios y, por supuesto, permite desarrollar con GitHub Copilot. Durante este taller trabajarás en local con la aplicación Tailspin Toys, creada con Astro, y con la aplicación GitHub Copilot. Antes de empezar, vamos a comprobar que Node.js esté instalado en local y, después, instalaremos la aplicación Copilot. @@ -15,18 +15,18 @@ En esta lección: ## Instalar Node.js -En varias lecciones se pide a un agente que desarrolle funcionalidades y ejecute en local el conjunto de pruebas de Tailspin Toys, para lo que se necesita [**Node.js**][nodejs], el único entorno de ejecución que requiere el proyecto. Instala la versión **22 o posterior**; la versión **LTS** actual es una opción segura. +En varias lecciones se pide a un agente que desarrolle funcionalidades y ejecute en local el conjunto de pruebas de Tailspin Toys, para lo que se necesita [**Node.js**][nodejs], el único entorno de ejecución que requiere el proyecto. Instala la versión **LTS** actual. La opción más sencilla en cualquier plataforma es usar el instalador oficial: 1. En el sistema operativo, abre una ventana de terminal con Windows Terminal, Terminal de macOS o la aplicación que utilices habitualmente. -2. Ejecuta el comando siguiente para confirmar que tienes instalada la versión 22 de Node.js o una posterior: +2. Ejecuta el comando siguiente para comprobar la versión de Node.js instalada: ```shell node --version ``` -3. Si aparece `v22` o un número superior, puedes pasar a la sección siguiente. +3. Si cumple los requisitos del README y `package.json` del proyecto, puedes pasar a la sección siguiente. > [!TIP] > Solo tienes que completar estos pasos si no tienes Node instalado o si necesitas actualizarlo. @@ -41,10 +41,10 @@ La opción más sencilla en cualquier plataforma es usar el instalador oficial: node --version ``` -9. Debería aparecer `v22.x.x` o una versión posterior. +9. Debería aparecer la versión que has instalado. -> [!TIP] -> ¿Prefieres usar contenedores? Si tienes [**Docker**][docker], puedes utilizar el [contenedor de desarrollo][dev-containers] del repositorio en lugar de instalar Node.js en local; el contenedor ya incluye Node. No necesitas ambas opciones. +> [!IMPORTANT] +> Cada worktree también necesita las dependencias del proyecto y Chromium de Playwright para las comprobaciones E2E. Sigue el README del repositorio de Tailspin Toys al preparar un worktree y revisa cualquier solicitud de instalación antes de aprobarla. ## Configurar el repositorio del laboratorio @@ -64,11 +64,16 @@ Trabajarás con tu propia copia del proyecto Tailspin Toys. Créala ahora a part > [!NOTE] > Al crear el repositorio a partir de la plantilla, se genera automáticamente una lista de incidencias de trabajo pendiente. Trabajarás con estas incidencias durante todo el taller; no necesitas crear ninguna. +Utiliza una copia nueva de la plantilla del taller. Incluye instrucciones del repositorio, código de la aplicación, pruebas, una habilidad quality-checks y una extensión de lienzo existente. Personalizarás la habilidad y crearás un agente QA durante el taller. Si utilizas una copia anterior, comprueba con quien imparte el taller que contiene los archivos que necesitarás. + ## Resumen y pasos siguientes -Ya tienes el entorno preparado. Has instalado Node.js para poder compilar y probar el proyecto en tu equipo y has creado tu propia copia del repositorio Tailspin Toys a partir de la plantilla. +Ya tienes el entorno preparado. En esta lección: -A continuación, instalarás la aplicación GitHub Copilot, conectarás el repositorio que acabas de crear y conocerás el espacio de trabajo. Continúa con la [Lección 1 - Instalar la aplicación GitHub Copilot][next-lesson]. +- has instalado Node.js para poder compilar y probar el proyecto en tu equipo. +- has creado tu propia copia del repositorio Tailspin Toys a partir de la plantilla. + +A continuación, [instalarás la aplicación GitHub Copilot][next-lesson], conectarás el repositorio que acabas de crear y conocerás el espacio de trabajo. ## Recursos @@ -79,7 +84,5 @@ A continuación, instalarás la aplicación GitHub Copilot, conectarás el repos [next-lesson]: /es-es/learning-hub/copilot-workshops/app/1-install-copilot-app/ [nodejs]: https://nodejs.org/ [node-download]: https://nodejs.org/en/download -[docker]: https://www.docker.com/products/docker-desktop/ -[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers [template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/1-install-copilot-app.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/1-install-copilot-app.md index 69b6d437b..727b8495b 100644 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/1-install-copilot-app.md +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/1-install-copilot-app.md @@ -3,7 +3,7 @@ title: "Lección 1 - Instalar la aplicación GitHub Copilot" description: "Instala la aplicación GitHub Copilot, conecta el repositorio que has creado a partir de la plantilla, familiarízate con el espacio de trabajo y prueba un chat rápido." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- La [**aplicación GitHub Copilot**][about-copilot-app] es una aplicación de escritorio para el desarrollo dirigido por agentes. Se basa en GitHub Copilot CLI y se integra de forma nativa con GitHub, por lo que los repositorios, las ramas y las canalizaciones de CI funcionan sin configuración adicional. Está diseñada para flujos de trabajo en los que diriges varios agentes en paralelo, cada uno en su propio espacio de trabajo aislado, en lugar de realizar todo el trabajo y automatizar las tareas repetitivas por tu cuenta. Con Node.js instalado y tu copia del proyecto preparada, el siguiente paso es instalar la aplicación y conectar ese repositorio. @@ -41,32 +41,39 @@ Como cabe esperar, el primer paso para utilizar la aplicación GitHub Copilot es Con el proyecto conectado, dedica un momento a conocer el espacio de trabajo. La aplicación organiza todo en varias áreas de la barra lateral: +- **New**: como cabe esperar, aquí puedes iniciar una nueva sesión de chat con Copilot. +- **Pull requests**: tus solicitudes de incorporación de cambios, disponibles mediante la integración nativa con GitHub de la aplicación. Desde aquí puedes examinar y filtrar solicitudes de incorporación de cambios, comprobar el estado de CI y revisar solicitudes de incorporación de cambios, todo ello sin salir de la aplicación. +- **Issues**: tus incidencias, disponibles del mismo modo. Desde aquí puedes examinar y filtrar incidencias e iniciar una sesión a partir de una incidencia. +- **Automations**: tareas de agente guardadas que se ejecutan según una programación o bajo demanda. Son útiles para gestionar listas de tareas, realizar el mantenimiento periódico del proyecto o delegar otras tareas tediosas. El resumen final enlaza a ellas como siguiente paso, no como otro ejercicio del taller. +- **Customize**: añade funcionalidades a la aplicación Copilot mediante servidores MCP, plugins, habilidades y otros componentes. Lo utilizarás para configurar MCP de Playwright. +- **Chats**: conversaciones ligeras para preguntas y lluvias de ideas que no necesitan una rama ni un espacio de trabajo propios. Probarás una al final de esta lección. - **Sessions**: donde los agentes realizan su trabajo. Cada sesión se ejecuta en su propio espacio de trabajo aislado, por lo que puedes ejecutar varias a la vez sin que sus cambios entren en conflicto. Iniciarás tu primera sesión en la siguiente lección. -- **Quick chats**: conversaciones ligeras para preguntas y lluvias de ideas que no necesitan una rama ni un espacio de trabajo propios. Probarás una al final de esta lección. -- **My work**: tus incidencias y solicitudes de incorporación de cambios, disponibles mediante la **integración nativa con GitHub** de la aplicación. Desde aquí puedes examinar y filtrar incidencias y solicitudes de incorporación de cambios, comprobar el estado de CI, iniciar una sesión a partir de una incidencia y revisar solicitudes de incorporación de cambios, todo ello sin salir de la aplicación. -- **Automations**: tareas de agente guardadas que se ejecutan según una programación o bajo demanda. Crearás una casi al final de este recorrido. + +A lo largo del taller, explorarás el espacio de trabajo. + +> [!TIP] +> Si tienes dudas, pregunta a Copilot. Si no sabes cómo hacer algo o si es posible, puedes preguntarle y te ayudará a orientarte. ### Localizar la lista de trabajo pendiente inicial -Como la aplicación se integra de forma nativa con GitHub, el trabajo pendiente del repositorio aparece directamente en ella. Cuando creaste el repositorio a partir de la plantilla, se generó una lista de incidencias. Vamos a comprobar que esté disponible. +Prácticamente todos los proyectos tienen trabajo pendiente, y Tailspin Toys no es una excepción. Vamos a explorar la lista de incidencias que se generó al crear el repositorio a partir de la plantilla. -1. Selecciona **My work** en la barra lateral. -2. La plantilla ha creado ocho incidencias en tu lista de trabajo pendiente. Este módulo se centra en las tres siguientes; confirma que puedes verlas: +1. Selecciona **Issues** en la barra lateral. +2. Busca estas incidencias por su título en lugar de dar por hecho su número: - Allow users to filter games by category and publisher - Update our repository coding standards - - Implement pagination on the game list page -3. Selecciona una incidencia para leer sus detalles. Cada incidencia también sirve como punto de partida para una sesión de agente. Más adelante iniciarás el trabajo desde estas incidencias. +3. Selecciona una incidencia para leer sus detalles. Cada incidencia también sirve como punto de partida para una sesión de agente. Partirás de la incidencia de filtrado después de completar un primer cambio rápido. > [!NOTE] -> La lista de elementos de **My work** se filtra automáticamente para mostrar solo los elementos de los repositorios que has añadido a la aplicación Copilot. Para ver elementos de trabajo de otros repositorios, añádelos a la aplicación. +> Las listas de elementos de **Issues** y **Pull requests** se filtran automáticamente para mostrar solo los elementos de los repositorios que has añadido a la aplicación Copilot. Para ver elementos de trabajo de otros repositorios, añádelos a la aplicación. ## Probar un chat rápido Una buena forma de familiarizarse con la aplicación es utilizarla para conocer la *propia aplicación*, y un **chat rápido** es la herramienta adecuada. Los chats rápidos permiten formular una pregunta o plantear ideas sin crear una rama ni un árbol de trabajo, por lo que son perfectos para una consulta rápida y desechable que no requiere una sesión. -1. En la barra lateral, selecciona **+** junto a **Quick chats** para abrir un chat nuevo. +1. En la barra lateral, selecciona **+** junto a **Chats** para abrir un chat nuevo. 2. Pregunta a la aplicación cómo funcionan sus sesiones: ```plaintext @@ -81,10 +88,10 @@ Has instalado la aplicación GitHub Copilot, conectado el proyecto y explorado e - instalar la aplicación e iniciar sesión en GitHub. - añadir un proyecto desde su repositorio de GitHub. -- familiarizarte con el espacio de trabajo y localizar la lista de trabajo pendiente inicial en **My work**. +- familiarizarte con el espacio de trabajo y localizar la lista de trabajo pendiente inicial en **Issues**. - utilizar un chat rápido para formular una pregunta breve y desechable. -A continuación, iniciarás tu primera sesión de agente y realizarás el primer cambio en el proyecto: mostrar una valoración por estrellas en las tarjetas de los juegos. Continúa con la [Lección 2 - Ejecutar tu primera sesión de agente][next-lesson]. +A continuación, iniciarás tu primera sesión de agente y realizarás el primer cambio en el proyecto: mostrar una valoración por estrellas en las tarjetas de los juegos. Continúa con la [Lección 2 - Añadir valoraciones por estrellas: una mejora rápida][next-lesson]. ## Recursos @@ -92,7 +99,6 @@ A continuación, iniciarás tu primera sesión de agente y realizarás el primer - [Introducción a la aplicación GitHub Copilot][getting-started] - [Trabajar con sesiones de agente en la aplicación GitHub Copilot][agent-sessions] -[ex0]: /es-es/learning-hub/copilot-workshops/app/0-prerequisites/ [next-lesson]: /es-es/learning-hub/copilot-workshops/app/2-add-star-rating/ [about-copilot-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 diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/10-review.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/10-review.md new file mode 100644 index 000000000..edb288ee0 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/10-review.md @@ -0,0 +1,77 @@ +--- +title: "Lección 10 - Repaso y pasos siguientes" +description: "Repasa el flujo de la aplicación, los dos hitos de PR, los ejercicios de lienzo y las prácticas de calidad reutilizables; después, explora otros recursos." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Has utilizado la aplicación GitHub Copilot durante un flujo continuo de Tailspin Toys. Has aprendido a: + +- conectar un repositorio, explorar el espacio de trabajo y la lista de trabajo pendiente inicial de la aplicación y probar un chat rápido. +- iniciar una sesión específica de valoraciones por estrellas, revisar el resultado en un lienzo de navegador y combinar manualmente tu primera solicitud de incorporación de cambios (PR). +- partir de la incidencia de filtrado, definir el enfoque en modo **Plan**, desarrollarlo en modo **Autopilot** y revisarlo en modo **Interactive**. +- orientar al agente con instrucciones personalizadas y después personalizar la habilidad `quality-checks` existente y utilizarla para ejecutar pruebas unitarias, lint y comprobaciones de tipos. +- probar el trabajo con el servidor MCP de Playwright en un navegador real. +- crear y seleccionar un agente personalizado QA para evaluar requisitos, cobertura, resultados de scripts de la habilidad y pruebas de observación del navegador. +- revisar el cambio completo de filtrado y autorizar **Agent Merge** para la segunda PR. +- utilizar el lienzo Database Explorer existente y, después, crear y probar un lienzo de clasificación respaldado por el repositorio. + +## Qué has entregado + +El taller tiene dos hitos de PR, cada uno en su propia rama a partir de `main` actualizado: + +1. **Valoraciones por estrellas:** mostrar el `starRating` existente y un estado explícito sin valoración en las tarjetas de juegos. +2. **Filtrado y flujo de calidad:** implementar el filtrado, actualizar las instrucciones y aplicarlas a la funcionalidad, personalizar el informe de `quality-checks`, crear un perfil QA e incluir las pruebas asociadas. + +Desde la planificación del filtrado hasta la apertura de su PR, utilizaste la misma sesión, worktree y rama. Reunimos ese trabajo en una sola PR para agilizar el taller. Después, utilizaste Database Explorer y creaste un lienzo de clasificación respaldado por el repositorio sin repetir el flujo de PR. + +## Distintos tipos de verificación + +Comprobaste el código de varias formas: pruebas automatizadas, tu propia inspección en el navegador y la exploración de Copilot en el navegador mediante MCP. La habilidad `quality-checks` ejecutó pruebas unitarias, lint y comprobaciones de tipos y presentó los resultados con el nuevo formato. QA reunió esos resultados junto con una revisión de los requisitos y la cobertura de pruebas antes de la PR. + +Las pruebas añadidas deben cubrir carencias reales; una ejecución QA que no necesita pruebas nuevas puede ser correcta. Las herramientas ausentes, las comprobaciones omitidas y los fallos son bloqueos visibles, no resultados satisfactorios. Revisa el código y las pruebas de verificación antes de autorizar la combinación y actualiza las afectadas después de los cambios. + +## Procedimientos recomendados + +El contexto y las herramientas que proporcionas a Copilot influyen en su trabajo. En este taller has actualizado instrucciones, personalizado una habilidad, creado un perfil QA, configurado un servidor MCP y creado un lienzo. Reutiliza estas personalizaciones entre sesiones y ajústalas a medida que cambien las necesidades del equipo. Las instrucciones establecen estándares, las habilidades describen tareas repetibles, los agentes personalizados definen roles especializados, los servidores MCP conectan herramientas externas y los lienzos proporcionan superficies interactivas compartidas. Revisa los cambios reales y los resultados de las herramientas, no solo el resumen del agente. + +Adapta el **modo y el modelo** a la tarea. Utiliza **Plan** para razonar sobre un enfoque antes de desarrollar, **Interactive** para mantener el control durante cambios concretos y **Autopilot** solo para tareas aisladas y bien delimitadas. Elige un modelo más rápido para las modificaciones rutinarias y otro más capaz, con mayor esfuerzo de razonamiento, para el trabajo complejo. + +El contexto sigue siendo tan importante como la infraestructura. Describir con claridad *qué* quieres crear, *por qué* y *cómo* cambia sustancialmente el resultado. Los chats rápidos son un buen lugar para delimitar una idea antes de dedicarle una sesión completa. + +## Más opciones para explorar + +Ya conoces el flujo de trabajo principal. Estas son algunas funcionalidades adicionales que merece la pena explorar: + +- [**Automatizaciones**][using-automations] para tareas recurrentes o bajo demanda, como resumir el trabajo reciente. Revisa la programación, los permisos y el alcance antes de adoptar una; crear una automatización es un siguiente paso, no parte de este taller. +- **Rubber duck** para razonar sobre un problema y obtener comentarios pertinentes antes de desarrollar. +- [`/chronicle`][chronicle] para generar una narración de lo sucedido en una sesión. +- [Usar tu propia clave (BYOK)][byok] para utilizar modelos de tu propio proveedor, incluidos modelos locales mediante Ollama, Foundry Local o LM Studio. +- [Vínculos profundos][deep-links] para abrir la aplicación directamente en un repositorio, una sesión o una indicación. + +## Pasos siguientes + +La mejor forma de mejorar con cualquier herramienta es seguir utilizándola. Úsala para código de producción, proyectos personales o esa pequeña aplicación que llevas años pensando en crear. Comparte lo que aprendas con el equipo y aprende de sus experiencias. Y, como siempre, consulta la documentación. + +Para explorar más elementos del ecosistema de GitHub Copilot, consulta el [recorrido de VS Code][vscode-harness], el [recorrido de Copilot CLI][cli-harness] o el [recorrido del agente en la nube][cloud-harness]. + +## Recursos + +- [Acerca de la aplicación GitHub Copilot][about-copilot-app] +- [Introducción a la aplicación GitHub Copilot][getting-started] +- [Personalizar la aplicación GitHub Copilot][customize] +- [Utilizar automatizaciones][using-automations] +- [Trabajar con extensiones de lienzo][canvas-docs] + +[vscode-harness]: /es-es/learning-hub/copilot-workshops/vscode/ +[cli-harness]: /es-es/learning-hub/copilot-workshops/cli/ +[cloud-harness]: /es-es/learning-hub/copilot-workshops/cloud/ +[about-copilot-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 +[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle +[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models +[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/2-add-star-rating.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/2-add-star-rating.md index 88e16090e..feb48372a 100644 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/2-add-star-rating.md +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/2-add-star-rating.md @@ -1,9 +1,9 @@ --- -title: "Lección 2 - Ejecutar tu primera sesión de agente" +title: "Lección 2 - Añadir valoraciones por estrellas: una mejora rápida" description: "Inicia tu primera sesión de agente en la aplicación GitHub Copilot, realiza un pequeño cambio en las tarjetas de los juegos y combínalo como tu primera solicitud de incorporación de cambios." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- En la lección anterior recorriste el espacio de trabajo y utilizaste un chat rápido. Ahora es el momento de iniciar una **sesión de agente** y realizar el primer cambio en el proyecto. Será un cambio pequeño: los juegos ya tienen una valoración por estrellas en sus datos, pero las tarjetas de la página de inicio todavía no la muestran. Pedirás al agente que la muestre, revisarás el cambio y lo combinarás como tu primera solicitud de incorporación de cambios. @@ -31,21 +31,15 @@ Dentro de una sesión verás tres elementos: la **conversación** con el agente, Vamos a iniciar una sesión nueva para comenzar a explorar el proyecto e implementar la funcionalidad. En una [lección anterior][prior-lesson] añadiste el proyecto desde su repositorio de GitHub. Crearemos una sesión nueva para ese repositorio y solicitaremos el cambio. 1. Vuelve a la aplicación GitHub Copilot o ábrela. -2. Selecciona **Home screen**. -3. Comprueba que `tailspin-toys` esté seleccionado como repositorio. +2. Selecciona **+** junto a **Projects**. +3. Selecciona `tailspin-toys` como repositorio. +4. Elige **new working tree** y el modo **Interactive** debajo del cuadro de indicaciones. Utiliza la indicación siguiente para solicitar el cambio: - ![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/learning-hub/copilot-workshops/app-2-start-session.png) + ```plaintext + Show each game's starRating out of 5 in the game cards on the list page. If the rating is null, show "No rating yet". Keep the card layout as it is, add tests, and run the relevant checks. + ``` -4. Utiliza la indicación siguiente para solicitar el cambio: - - ```plaintext - On the game cards, show each game's star rating. The Game type already includes a starRating field — it's a number out of 5, or null when a game hasn't been rated yet. Display it on each card in src/components/GameCard.astro, and when starRating is null show "No rating yet" instead. Keep the change small and don't restructure the card layout. - ``` - -> [!NOTE] -> Observa que la indicación contiene el nombre del archivo que Copilot debe actualizar. Aunque no es necesario especificar los archivos que Copilot debe incluir en su trabajo, orientarlo ayuda a que genere el código con rapidez y reduzca el uso de tokens. - -5. Selecciona Enter para enviar la indicación a Copilot. +5. Pulsa Enter para enviar la indicación a Copilot. La aplicación Copilot comienza por crear un árbol de trabajo nuevo, una copia aislada del proyecto. Después explora el proyecto, localiza los archivos que debe actualizar para añadir la funcionalidad y crea el código necesario. Ya has añadido una nueva funcionalidad con la aplicación Copilot. @@ -55,7 +49,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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/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`: @@ -76,40 +70,36 @@ Todos los cambios generados por IA deben revisarse antes de combinarlos, incluso ## Comprobar los cambios -No debemos limitarnos a leer el código y dar por hecho que funciona. También debemos probarlo visualmente. Para ello, iniciaremos la aplicación desde la terminal y confirmaremos que todo funciona. La aplicación Copilot incluye una terminal integrada. +Revisa los resultados de las comprobaciones automatizadas del agente antes de abrir un navegador. Confirma que las pruebas cubren un `starRating` numérico y la alternativa para `null`. Un requisito previo ausente o una comprobación omitida no cuentan como superados; revisa cualquier solicitud de instalación antes de aprobarla. -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**. +Por supuesto, no basta con leer el código y dar por hecho que funciona. Vamos a pedir a Copilot que abra el sitio web para examinar la interfaz actualizada. Para ello, le pediremos que inicie el sitio y lo abra en un lienzo de navegador. - ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](/images/learning-hub/copilot-workshops/app-terminal-screenshot.png) +> [!TIP] +> Un lienzo es un widget interactivo disponible dentro de la aplicación Copilot. Más adelante explorarás algunos personalizados e incluso crearás uno, pero por ahora utilizaremos el lienzo de navegador integrado. -2. Introduce el comando siguiente en la ventana de terminal para iniciar el servidor de desarrollo de la aplicación web: +1. Utiliza la siguiente indicación para pedir a Copilot que inicie la aplicación y abra la página en el lienzo de navegador: - ```shell - npm run dev - ``` + ```plaintext + Start the app and open it in the browser canvas. + ``` -3. Cuando se inicie el servidor, lo que solo tardará un momento, abre una ventana del navegador. -4. Ve a http://localhost:4321. -5. Ahora deberías ver valoraciones por estrellas en todos los juegos de la página de inicio. -6. Vuelve a la ventana de terminal. -7. Selecciona Ctrl+C para detener el servidor de desarrollo. +2. En unos instantes, la aplicación se iniciará y se abrirá una ventana de navegador dentro de la aplicación Copilot. +3. Confirma que las tarjetas de juegos valorados muestran su puntuación sobre cinco. +4. Cuando termines, pide a Copilot que detenga el servidor de desarrollo que ha iniciado para esta sesión con la indicación siguiente: + + ```plaintext + Stop the dev server and close the browser canvas. + ``` ## Abrir y combinar tu primera solicitud de incorporación de cambios -El cambio tiene buen aspecto; ha llegado el momento de publicarlo. Pedirás al agente que abra una solicitud de incorporación de cambios y, después, la revisarás y combinarás en github.com. Por ahora, gestionarás este proceso de forma manual. En una próxima lección descubrirás cómo Copilot puede encargarse automáticamente de parte del trabajo. - -1. En la esquina superior derecha, selecciona **Create PR**. +1. Selecciona **Create PR** en la esquina superior derecha. 2. Si se solicita, selecciona **Sign in with your browser** y sigue las indicaciones para autenticarte. -3. Copilot comenzará a crear la solicitud de incorporación de cambios. - -Una vez creada, Copilot supervisará los flujos de trabajo del repositorio que deban ejecutarse. Después de unos instantes, el botón de la esquina superior derecha cambiará a **Ready to merge**. Esto indica que la solicitud está lista para combinarse. - +3. Copilot comenzará a crear la PR. 4. Selecciona la burbuja **PR** situada justo encima del chat para abrir la solicitud en el panel de revisión. Puedes revisarla aquí según sea necesario. 5. Cuando esté lista, selecciona **Ready to merge**. 6. Selecciona **Merge pull request** en el nuevo cuadro de diálogo para combinar la solicitud. -Ya has publicado una nueva funcionalidad en el sitio web. - ## Resumen y pasos siguientes Has iniciado tu primera sesión de agente y publicado tu primer cambio. En concreto: @@ -118,9 +108,9 @@ Has iniciado tu primera sesión de agente y publicado tu primer cambio. En concr - has indicado al agente que realice un cambio pequeño y específico en las tarjetas de los juegos. - has revisado el cambio en la vista de diferencias del espacio de trabajo. - has ejecutado la aplicación en local para confirmar la valoración por estrellas en el navegador. -- has abierto una solicitud de incorporación de cambios y la has combinado personalmente en github.com. +- has abierto la PR 1, revisado sus comprobaciones y autorizado explícitamente su combinación. -A continuación, utilizarás la aplicación para añadir al repositorio un estándar de instrucciones personalizadas a partir de una de las incidencias de la lista de trabajo pendiente. Continúa con la [Lección 3 - Guiar a Copilot con instrucciones personalizadas][next-lesson]. +A continuación, [partirás de la incidencia de filtrado y utilizarás los modos Plan y Autopilot][next-lesson] para desarrollar una funcionalidad más amplia. ## Recursos @@ -128,8 +118,8 @@ A continuación, utilizarás la aplicación para añadir al repositorio un está - [Acerca de la aplicación GitHub Copilot][about-copilot-app] - [Gestionar incidencias y solicitudes de incorporación de cambios con la aplicación GitHub Copilot][managing-issues-prs] -[prior-lesson]: /es-es/learning-hub/copilot-workshops/app/1-install-copilot-app/#instalar-y-configurar-la-aplicacion-github-copilot -[next-lesson]: /es-es/learning-hub/copilot-workshops/app/3-custom-instructions/ +[prior-lesson]: /es-es/learning-hub/copilot-workshops/app/1-install-copilot-app/#instalar-y-configurar-la-aplicaci%C3%B3n-github-copilot +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/3-agent-modes/ [agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app [managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/3-agent-modes.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/3-agent-modes.md new file mode 100644 index 000000000..fc0b8ea06 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/3-agent-modes.md @@ -0,0 +1,131 @@ +--- +title: "Lección 3 - Modos de agente: Plan y Autopilot" +description: "Explora los modos de agente: utiliza Plan para acordar un enfoque, Autopilot para crear el filtrado a partir de una incidencia e Interactive para revisar y verificar el resultado." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Empezamos añadiendo una pequeña funcionalidad al proyecto. Sin embargo, los cambios más amplios requieren un proceso más sólido. Por suerte, la aplicación GitHub Copilot está diseñada para adaptarse al flujo existente de una organización y garantizar que creamos lo adecuado de la forma correcta. Esta es la primera de varias lecciones en las que seguirás un proceso de desarrollo habitual dirigido por agentes: partirás de una incidencia para generar una funcionalidad, comprobarás que el código es válido y que la funcionalidad se comporta como se espera y, finalmente, la combinarás correctamente con el proyecto. + +> [!NOTE] +> Utilizarás la misma sesión durante todo el flujo de la funcionalidad. Normalmente usarías sesiones o PR distintas para los diferentes tipos de archivo, pero tomaremos un atajo para centrarnos en los conceptos principales. + +En esta lección: + +- iniciarás una nueva sesión de agente desde una incidencia de GitHub. +- definirás los requisitos en modo **Plan**. +- implementarás la nueva funcionalidad con el modo **Autopilot**. +- revisarás el código. +- validarás manualmente la funcionalidad en un lienzo de navegador. + +Mientras continúas con esta funcionalidad, actualizarás las instrucciones del repositorio, personalizarás la habilidad quality-checks existente, añadirás validación mediante MCP, crearás un agente QA y abrirás la PR de la funcionalidad. + +## Escenario + +El catálogo de Tailspin Toys está creciendo y sus visitantes necesitan acotar los juegos por categoría y editor. La incidencia de la lista de trabajo pendiente describe la funcionalidad, pero hay que acordar detalles como la combinación de categorías antes de programar. Utilizarás el modo Plan para resolver esas decisiones y, después, autorizarás una implementación acotada con Autopilot. + +## Contexto + +Introducir agentes de programación con IA en el flujo de desarrollo no cambia los principios fundamentales. De hecho, adquieren aún más importancia. La mayoría de los desarrolladores siguen un flujo similar al siguiente: + +1. Abrir una incidencia que detalle lo que debe hacerse. +2. Crear un plan de lo que debe desarrollarse. +3. Crear y revisar el código. +4. Ejecutar las pruebas para validar el código. +5. Validar manualmente la nueva funcionalidad. +6. Crear una solicitud de incorporación de cambios (PR). +7. Una vez revisado el código y completado correctamente el proceso de integración continua, combinarlo. + +> [!NOTE] +> Los detalles concretos variarán según el equipo y la organización, pero la mayoría de los procesos serán una variante del flujo anterior. + +Al mantener este enfoque estándar, te aseguras de que el código generado por IA cumpla los requisitos establecidos y pase por el mismo proceso de validación que el código escrito manualmente. + +## Modos de sesión + +El **modo de sesión** controla el grado de autonomía del agente. Puedes establecerlo en el menú desplegable situado debajo del campo de indicaciones y cambiarlo en cualquier momento: + +- **Interactive**: trabajas junto con el agente. El agente sugiere cambios y espera tus indicaciones antes de continuar. +- **Plan**: el agente crea primero un plan. Revisas y apruebas el plan antes de que el agente lo ejecute. +- **Autopilot**: el agente trabaja de forma totalmente autónoma: escribe código, ejecuta pruebas e itera sin esperar indicaciones. + +Empieza en modo Plan, revisa el plan y, después, utiliza Autopilot para implementarlo. + +## Iniciar una sesión desde la incidencia + +Antes de empezar, confirma que la PR de valoraciones por estrellas está combinada y que tu rama `main` local está actualizada. + +1. Selecciona **Issues** y abre **Allow users to filter games by category and publisher**. +2. Selecciona **New session** y elige un **new working tree** basado en la rama `main` actualizada. + + ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) + +3. Confirma que la incidencia está adjunta a la sesión y selecciona **Plan** en el selector de modo. + +## Planificar la funcionalidad de filtrado + +La planificación te permite revisar el enfoque antes de que Copilot escriba código. Como has iniciado la sesión desde la incidencia, Copilot ya tiene la solicitud de la funcionalidad como contexto. Envía: + +```plaintext +Build this feature. +``` + +Responde a las preguntas de Copilot y compara el plan con los criterios de aceptación de la incidencia. Comprueba que incluye el filtrado por categoría y editor, controles accesibles, cambios de acceso a datos y pruebas. Aclara cualquier comportamiento poco definido, como la combinación de varias categorías o qué ocurre cuando ningún juego coincide. + +El plan debe incluir lint, pruebas unitarias, pruebas E2E y comprobación de tipos con las herramientas existentes del proyecto. Céntralo en implementar y probar el filtrado; crearás la PR después de completar el flujo de calidad. Solicita cambios en el plan antes de aprobarlo y conserva la URL de la incidencia y las aclaraciones acordadas para la validación posterior. + +## Aprobar Autopilot explícitamente + +Cuando estés conforme con el plan, selecciona **Approve and implement with autopilot** o la opción equivalente de tu versión. Confirma que el indicador de modo muestra **Autopilot**. + +Copilot comenzará a implementar la funcionalidad. Verás cómo itera por el proceso, sigue el plan establecido, genera código e incluso ejecuta pruebas. + +> [!NOTE] +> La aprobación puede iniciar la implementación inmediatamente, así que revisa el plan primero. Si Copilot informa de dependencias ausentes o de un conflicto de puerto, resuelve el problema de configuración antes de dar las comprobaciones por completadas. Detén solo los servidores que hayas iniciado. + +## Revisar y verificar la implementación + +Una vez generado el código, hay que revisarlo antes de combinarlo, igual que cualquier otro código. Revisemos el código y ejecutemos el sitio para comprobar que todo funciona correctamente. + +1. Abre **Changes** y examina la implementación del filtrado y las pruebas. +2. Compara el resultado con la incidencia y las aclaraciones aprobadas, incluidas las combinaciones de varias categorías y editores. Comprueba que los cambios siguen las instrucciones existentes del repositorio. +3. Examina la salida de lint, las pruebas unitarias, las pruebas E2E y la comprobación de tipos. Una comprobación omitida no cuenta como superada. +4. Resuelve los fallos y repite las comprobaciones afectadas antes de aceptar la implementación. La configuración E2E de Playwright compila y sirve una vista previa y puede reutilizar un servidor local; asegúrate de que el servidor probado pertenece a este worktree, no a una lección anterior. + +## Explorar la nueva funcionalidad + +El código parece correcto, pero ¿se ejecuta? Iniciemos la aplicación como antes y abramos el sitio en un lienzo de navegador. + +1. Utiliza la indicación siguiente para pedir a Copilot que inicie la aplicación y abra la página en el lienzo de navegador: + + ```plaintext + Start the app and open it in the browser canvas. + ``` + +2. En unos instantes, la aplicación se iniciará y se abrirá una ventana de navegador dentro de la aplicación Copilot. +3. Confirma que las tarjetas de juegos valorados muestran su puntuación sobre cinco. +4. Cuando termines, pide a Copilot que detenga el servidor de desarrollo que ha iniciado para esta sesión con la indicación siguiente: + + ```plaintext + Stop the dev server and close the browser canvas. + ``` + +## Resumen y pasos siguientes + +Has utilizado distintos modos de agente para desarrollar y revisar una funcionalidad. En esta lección: + +- has iniciado una nueva sesión de agente desde una incidencia de GitHub. +- has definido los requisitos en modo **Plan**. +- has implementado la nueva funcionalidad con el modo **Autopilot**. +- has revisado el código. +- has validado manualmente la funcionalidad en un lienzo de navegador. + +A continuación, profundizarás en cómo se genera el código y te asegurarás de que siga las prácticas documentadas mediante el [uso de instrucciones personalizadas][next-lesson]. + +## Recursos + +- [Trabajar con sesiones de agente en la aplicación GitHub Copilot][agent-sessions] + +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/4-custom-instructions/ +[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/3-custom-instructions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/3-custom-instructions.md deleted file mode 100644 index 62cd64437..000000000 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/3-custom-instructions.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "Lección 3 - Guiar a Copilot con instrucciones personalizadas" -description: "Utiliza la aplicación GitHub Copilot para añadir al repositorio un estándar de instrucciones personalizadas a partir de una incidencia de la lista de trabajo pendiente y combina el cambio como una solicitud de incorporación de cambios." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -El contexto es fundamental al trabajar con IA generativa. Si una tarea debe realizarse de una forma concreta o Copilot necesita conocer información de fondo, conviene que ese contexto esté disponible. Una de las herramientas más potentes para proporcionarlo son los [archivos de instrucciones][instruction-files], que describen no solo *qué* código quieres, sino también *cómo* debe estructurarse. En esta lección añadirás un estándar de documentación al repositorio y lo harás como realizarás la mayor parte del trabajo a partir de ahora: comenzarás desde una incidencia de la lista de trabajo pendiente y dejarás que el agente realice el cambio. - -En esta lección: - -- explorarás cómo llegan al agente las instrucciones del repositorio y los archivos de instrucciones limitados por ruta. -- iniciarás una sesión desde la incidencia sobre instrucciones de la lista de trabajo pendiente. -- pedirás al agente que añada un estándar de documentación a `.github/copilot-instructions.md`. -- revisarás el cambio y lo combinarás como una solicitud de incorporación de cambios. - -## Escenario - -Como cualquier buen equipo de desarrollo, Tailspin Toys dispone de directrices y requisitos para las prácticas de desarrollo. Entre ellos se incluyen: - -- Se debe añadir documentación al código mediante comentarios de documentación TSDoc. -- El formato se debe documentar y aplicar mediante linting. - -Mediante los archivos de instrucciones, garantizarás que Copilot disponga de la información adecuada para realizar las tareas conforme a estas prácticas. - -## Archivos de instrucciones - -Las instrucciones personalizadas permiten proporcionar contexto y preferencias a Copilot para que comprenda mejor el estilo y los requisitos de programación. Esta potente funcionalidad ayuda a orientar a Copilot para obtener sugerencias y fragmentos de código más pertinentes. Puedes especificar las convenciones de programación, las bibliotecas e incluso los tipos de comentarios que prefieres incluir en el código. También puedes crear instrucciones para todo el repositorio o para tipos de archivo concretos, con contexto específico para una tarea. - -Hay dos tipos de archivos de instrucciones: - -- `.github/copilot-instructions.md`, un único archivo de instrucciones que se envía a Copilot con **cada** solicitud del repositorio. Debe contener información del proyecto que sea pertinente para la mayoría de las solicitudes de chat o CLI enviadas a Copilot, como la pila tecnológica, una descripción general de lo que se está creando, procedimientos recomendados y otras directrices globales. -- Los archivos `.github/instructions/*.instructions.md` se pueden crear para tareas o tipos de archivo concretos. Puedes utilizarlos para proporcionar directrices para lenguajes específicos, como TypeScript o Astro, o para tareas como crear un componente de interfaz de usuario o un nuevo conjunto de pruebas unitarias. - -> [!NOTE] -> Copilot admite otros estándares para incorporar instrucciones mediante AGENTS.md, CLAUDE.md y GEMINI.md, de modo que siempre disponga del contexto adecuado. - -### Procedimientos recomendados para gestionar archivos de instrucciones - -Una explicación completa sobre la creación de archivos de instrucciones queda fuera del alcance del taller. No obstante, los ejemplos del proyecto de muestra presentan un enfoque representativo. En términos generales: - -- Mantén las instrucciones de `copilot-instructions.md` centradas en directrices de ámbito de proyecto, como una descripción de lo que se está creando, la estructura del proyecto y los estándares globales de programación. -- Utiliza archivos `*.instructions.md` para proporcionar instrucciones específicas para tipos de archivo, como pruebas unitarias, componentes de Astro o la capa de datos, o para tareas concretas. -- Utiliza lenguaje natural. Redacta directrices claras. Proporciona ejemplos de cómo debe y no debe ser el código. - -No existe una única forma de crear archivos de instrucciones, del mismo modo que no existe una única forma de utilizar la IA. La experimentación te permitirá descubrir qué funciona mejor para tu proyecto. - -> [!TIP] -> Todos los proyectos que utilicen GitHub Copilot deberían disponer de una colección sólida de archivos de instrucciones. Al explorar los de este proyecto, observarás que hay archivos de instrucciones para muchos tipos de archivos de código. -> -> ¿Buscas plantillas o un punto de partida? Explora [Awesome Copilot][awesome-copilot], un repositorio repleto de archivos de instrucciones, agentes personalizados y otros recursos. - -## Explorar los archivos de instrucciones personalizadas del proyecto - -Dedica un momento a leer los archivos de instrucciones incluidos en este repositorio: hay un archivo principal `copilot-instructions.md` y una colección de archivos `*.instructions.md` para distintas tareas. Ábrelos en el editor o en la interfaz web de GitHub. - -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/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. Selecciona **+** para añadir un elemento nuevo al panel de revisión. -3. Selecciona **File**. -4. Busca `copilot-instructions.md`. -5. Selecciona `copilot-instructions.md` en la lista de archivos para abrirlo. -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/learning-hub/copilot-workshops/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`. -10. Examina las instrucciones específicas para crear pruebas unitarias en este proyecto. -11. Por último, abre `.github/instructions/drizzle.instructions.md` y desplázate hasta el final. Observa los vínculos a otros archivos de instrucciones, como `unit-tests.instructions.md`, y a archivos existentes del proyecto. De este modo puedes dividir conjuntos de instrucciones grandes en archivos más pequeños y reutilizables, y señalar a Copilot ejemplos que debe seguir al generar código. Las rutas son relativas al archivo de instrucciones, no a la raíz del repositorio. - -> [!NOTE] -> La sección **Code formatting requirements** de `copilot-instructions.md` documenta los estándares de programación del proyecto, pero todavía no exige documentación dentro del código. En los pasos siguientes añadirás reglas para comentarios de documentación TSDoc y comentarios de cabecera de archivo. - -## Empezar desde la incidencia sobre instrucciones - -En la lección anterior iniciaste una sesión con una indicación directa. Sin embargo, la mayor parte del trabajo comienza con una incidencia. Vamos a crear una sesión basada en una incidencia presentada para actualizar los archivos de instrucciones y, después, solicitaremos la actualización. - -> [!NOTE] -> Como los archivos de instrucciones influyen mucho en el código que genera Copilot, debes asegurarte de que lo orienten con claridad. Pedir a Copilot que cree una primera versión, como harás en esta lección, es un buen enfoque, siempre que después la revises para confirmar que las actualizaciones cumplen tus requisitos. - -1. Selecciona **My work** en la barra lateral. -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/learning-hub/copilot-workshops/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: - - ```plaintext - Following this issue, make the updates to the instructions files in this project to meet the requirements documented. Don't create the PR quite yet! - ``` - -Copilot realizará las actualizaciones. - -## Revisar el cambio - -Vamos a leer las actualizaciones de Copilot y también a pedirle un ejemplo del código que generará a partir de las instrucciones actualizadas. - -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/learning-hub/copilot-workshops/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. - -> [!NOTE] -> Como la IA es probabilística y no determinista, el texto exacto puede variar. - -3. Utiliza la indicación siguiente para pedir a Copilot que cree un ejemplo del código que generará ahora: - - ```plaintext - Do not make any updates, but show me what the code would look like. Based on the new instructions, if I asked Copilot to create a new library component to return all Publishers what would that code look like? - ``` - -4. Revisa el código que propone Copilot. Observa los comentarios de documentación TSDoc y el comentario de cabecera de archivo que incluye, exactamente lo que solicitan las instrucciones actualizadas. - -Ya has actualizado los archivos de instrucciones del proyecto y has comprobado el efecto que tendrán. - -## Abrir y combinar la solicitud de incorporación de cambios - -Los archivos de instrucciones pasan a ser recursos del repositorio y, por tanto, se comparten con el resto del equipo. Vamos a crear una solicitud de incorporación de cambios con nuestro trabajo, igual que haríamos con cualquier otro recurso. - -1. En la esquina superior derecha, selecciona **Create PR**. -2. Si se solicita, selecciona **Sign in with your browser** y sigue las indicaciones para autenticarte. -3. Copilot comenzará a crear la solicitud de incorporación de cambios. - -Una vez creada, Copilot supervisará los flujos de trabajo del repositorio que deban ejecutarse. Después de unos instantes, el botón de la esquina superior derecha cambiará a **Ready to merge**. Esto indica que la solicitud está lista para combinarse. - -4. Selecciona **Ready to merge**. -5. Selecciona **Merge pull request** en el nuevo cuadro de diálogo para combinar la solicitud. - -> [!NOTE] -> Una vez combinado el estándar en la rama predeterminada, pasa a formar parte del proyecto para todo el equipo y para cada sesión nueva. Cuando inicies la sesión de filtrado de la siguiente lección desde una rama predeterminada actualizada, el agente seguirá este estándar automáticamente. Verás que el código TypeScript que genera incluye comentarios de documentación TSDoc sin que se lo pidas: una demostración pequeña pero real de cómo las instrucciones determinan el código generado. - -## Resumen y pasos siguientes - -Has explorado cómo la aplicación obtiene contexto de los archivos de instrucciones y, después, has utilizado una sesión para añadir y combinar un estándar para todo el repositorio. En concreto: - -- has explorado el archivo `copilot-instructions.md` del repositorio y los archivos `*.instructions.md` limitados por ruta. -- has iniciado una sesión desde la incidencia sobre instrucciones de la lista de trabajo pendiente. -- has pedido al agente que añada un estándar de documentación a `.github/copilot-instructions.md`. -- has revisado el cambio y lo has combinado como una solicitud de incorporación de cambios. - -A continuación, crearás la funcionalidad de filtrado en una sesión nueva y comprobarás cómo adopta el estándar que acabas de combinar. Continúa con la [Lección 4 - Crear una funcionalidad con Autopilot][next-lesson]. - -## Recursos - -- [Archivos de instrucciones para personalizar GitHub Copilot][instruction-files] -- [Personalizar la aplicación GitHub Copilot][customize-app] -- [Procedimientos recomendados para crear instrucciones personalizadas][instructions-best-practices] -- [Awesome Copilot: colección de archivos de instrucciones y otros recursos][awesome-copilot] - -[next-lesson]: /es-es/learning-hub/copilot-workshops/app/4-build-filtering/ -[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository -[awesome-copilot]: https://awesome-copilot.github.com/ -[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support -[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md -[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/4-build-filtering.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/4-build-filtering.md deleted file mode 100644 index 613a1c869..000000000 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/4-build-filtering.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: "Lección 4 - Crear una funcionalidad con Autopilot" -description: "Utiliza los modos Plan y Autopilot de la aplicación GitHub Copilot para crear una funcionalidad de filtrado estática en el cliente, comprobar que hereda el estándar de documentación y verificarla con una habilidad de agente." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Hasta ahora hemos realizado un par de pequeñas actualizaciones en el proyecto. Sin embargo, los cambios más amplios requieren un proceso más sólido. La aplicación GitHub Copilot está diseñada para integrarse en nuestro flujo actual y garantizar que creemos lo correcto de la forma adecuada. Esta es la primera de tres lecciones en las que seguirás un proceso de desarrollo habitual: empezarás por utilizar una incidencia para generar una funcionalidad nueva y una habilidad de agente para ejecutar las pruebas de validación y los linters. - -En esta lección: - -- iniciarás una sesión nueva desde la incidencia sobre filtrado. -- utilizarás el modo **Plan** para planificar la funcionalidad y, después, **Autopilot** para crearla. -- confirmarás que el código generado sigue el estándar de documentación que combinaste anteriormente. -- verificarás el trabajo con la habilidad `quality-checks` del proyecto. - -## Escenario - -La página de inicio muestra todos los juegos, pero los visitantes no pueden restringir la lista. La incidencia sobre filtrado solicita que puedan filtrar los juegos por **categoría** y **editor**. Vamos a utilizar Copilot para implementar esta funcionalidad. - -## Contexto - -Introducir agentes de programación con IA en el flujo de desarrollo no cambia los principios fundamentales. De hecho, adquieren aún más importancia. La mayoría de los desarrolladores siguen un flujo similar al siguiente: - -1. Abrir una incidencia que detalle lo que debe hacerse. -2. Crear un plan de lo que debe desarrollarse. -3. Crear y revisar el código. -4. Ejecutar las pruebas para validar el código. -5. Validar manualmente la nueva funcionalidad. -6. Crear una solicitud de incorporación de cambios (PR). -7. Una vez revisado el código y completado correctamente el proceso de integración continua, combinarlo. - -> [!NOTE] -> Los detalles concretos variarán según el equipo y la organización, pero la mayoría de los procesos serán una variante del flujo anterior. - -Al mantener este enfoque estándar, te aseguras de que el código generado por IA cumpla los requisitos establecidos y pase por el mismo proceso de validación que el código escrito manualmente. - -## Modos de sesión - -El **modo de sesión** controla el grado de autonomía del agente. Puedes establecerlo en el menú desplegable situado debajo del campo de indicaciones y cambiarlo en cualquier momento: - -- **Interactive**: trabajas junto con el agente. El agente sugiere cambios y espera tus indicaciones antes de continuar. -- **Plan**: el agente crea primero un plan. Revisas y apruebas el plan antes de que el agente lo ejecute. -- **Autopilot**: el agente trabaja de forma totalmente autónoma, escribe código, ejecuta pruebas e itera sin esperar indicaciones. - -## Planificar la funcionalidad de filtrado - -El mejor momento para detectar un posible problema es antes de escribir código, y una breve planificación previa es la mejor forma de hacerlo. Al planificar con Copilot, le pedirás que genere una serie de pasos y documente el enfoque que seguirá. Después podrás revisar el plan y proponer mejoras antes de permitir que Copilot genere el código a partir de él. - -Vamos a abrir la incidencia, iniciar una sesión nueva y crear un plan. Para ello, cambiaremos al modo Plan y enviaremos la solicitud. - -1. Selecciona **My work** en la pestaña de navegación. -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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/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: - - ```plaintext - Plan the work based on the requirements documented in the issue. Please ask any clarifying questions you might have as you build the plan. - ``` - -6. El agente puede plantear preguntas de seguimiento mientras crea el plan. Respóndelas según cómo desarrollarías la funcionalidad. - -> [!NOTE] -> Como Copilot es probabilístico, las preguntas de seguimiento exactas pueden variar. Incluso es posible que no formule ninguna. Es completamente normal. - -7. Cuando termine, Copilot ofrecerá un resumen del plan. Revísalo. Debería proponer crear consultas, añadir controles de filtrado y, por supuesto, pruebas. Si quieres, proporciona comentarios para perfeccionarlo; el agente incorporará las sugerencias en una versión nueva. - -## Crear la funcionalidad con Autopilot - -Con el plan preparado, vamos a dejar que Copilot cree la implementación. - -1. En la lista de opciones del cuadro de diálogo **Plan summary**, selecciona la opción más parecida a **Approve and implement with autopilot**. - -Copilot comenzará a trabajar en la implementación. - -> [!NOTE] -> Si Copilot no empieza a crear automáticamente el código necesario, puedes pedírselo con una indicación como "Go ahead and start building out the plan!". -> -> Las actualizaciones necesarias tardarán varios minutos. El agente edita y crea archivos, escribe y ejecuta pruebas e itera. Es un buen momento para repasar lo que has explorado hasta ahora o tomar algo. - -## Revisar los cambios - -Todo el código generado por IA debe revisarse antes de combinarlo. Vamos a revisar el código y ejecutar el sitio para comprobar que todo funciona correctamente. - -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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/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: - - ```shell - npm run dev - ``` - -5. Cuando se inicie el servidor, lo que solo tardará un momento, abre una ventana del navegador. -6. Ve a http://localhost:4321. -7. Ahora deberías ver filtros en la página de inicio. -8. Si algo no parece correcto, puedes pedir a Copilot que lo actualice. -9. Cuando estés conforme, vuelve a la ventana de terminal. -10. Selecciona Ctrl+C para detener el servidor de desarrollo. - -## Verificar el trabajo con la habilidad quality-checks - -Podrías revisar visualmente las diferencias y dar el trabajo por terminado, pero el equipo ha definido un nivel de calidad y una forma repetible de comprobarlo. - -Las **habilidades de agente** permiten proporcionar a Copilot directrices para realizar tareas repetibles, como ejecutar pruebas, generar compilaciones o crear solicitudes de incorporación de cambios. Una habilidad es una carpeta con instrucciones, scripts y recursos que el agente puede cargar bajo demanda. [Agent Skills es un estándar abierto][agent-skills-repo] que utilizan distintos agentes, por lo que la misma habilidad funciona en Copilot Chat en modo agente, el agente en la nube de Copilot, Copilot CLI y la aplicación GitHub Copilot. - -Las habilidades se almacenan en la carpeta `.github/skills` de un proyecto o de forma global en `~/.copilot/skills`. Cada habilidad es una carpeta que contiene un archivo `SKILL.md` con frontmatter YAML, formado por un `name` y una `description`, seguido de las instrucciones en Markdown: - -```yaml ---- -name: quality-checks -description: Run the project's test suites and linter to verify code changes are ready to commit, push, or merge. ---- -``` - -Las habilidades también pueden incluir subcarpetas con scripts, recursos y material de referencia. La estructura completa se describe en la [especificación de habilidades de agente][agent-skills-spec]. - -> [!TIP] -> Las habilidades se cargan de forma dinámica. El agente decide cuál se aplica según el campo `description`; una descripción clara y específica del escenario marca la diferencia entre una habilidad que se utiliza y otra que se ignora. - -## Explorar la habilidad quality-checks - -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/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. Selecciona **+** para añadir un elemento nuevo al panel de revisión. -3. Selecciona **File**. -4. Busca `SKILL.md`. -5. Selecciona `SKILL.md .github/skills/quality-checks` en la lista de archivos para abrirlo. -6. Observa los campos `name` y `description`. La descripción indica al agente *cuándo* debe utilizar la habilidad: siempre que sea necesario probar, analizar con un linter o verificar cambios de código antes de una confirmación, un envío o una combinación. -7. Lee la habilidad. Observa que documenta qué script ejecuta cada conjunto de pruebas, como las pruebas unitarias, las pruebas de un extremo a otro de Playwright y ESLint, en qué orden y cómo depurar errores habituales. Así, el agente ejecuta las comprobaciones según el proceso del equipo en lugar de adivinarlo. - -## Ejecutar las comprobaciones - -En la misma sesión de filtrado, pide al agente que verifique el trabajo. No mencionarás el nombre de la habilidad; el agente la identificará a partir de la solicitud. - -1. Vuelve a la aplicación Copilot. -2. Llama directamente a la habilidad mediante el comando de barra diagonal `/quality-checks` y selecciona Enter. -3. Siguiendo la habilidad, el agente ejecutará las pruebas unitarias, el linter y las pruebas de un extremo a otro, y comunicará los resultados. Si algo falla, pídele que corrija el problema y vuelva a ejecutar las comprobaciones hasta que todo se complete correctamente. -4. **Mantén abierta esta sesión.** En la siguiente lección añadirás el servidor MCP de Playwright y lo utilizarás para comprobar la funcionalidad de filtrado en un navegador real. - -## Resumen y pasos siguientes - -Has creado una funcionalidad real de principio a fin y la has verificado según el nivel de calidad del equipo. En concreto: - -- has iniciado una sesión nueva desde la incidencia sobre filtrado en un proyecto actualizado. -- has utilizado el modo Plan para planificar la funcionalidad y Autopilot para crearla. -- has confirmado que la función auxiliar generada sigue el estándar de documentación que combinaste en la Lección 3. -- has verificado el trabajo con la habilidad `quality-checks`. - -A continuación, conectarás el servidor MCP de Playwright y pedirás al agente que explore la funcionalidad de filtrado en un navegador real. Continúa con la [Lección 5 - Realizar pruebas con el servidor MCP de Playwright][next-lesson]. - -## Recursos - -- [Trabajar con sesiones de agente en la aplicación GitHub Copilot][agent-sessions] -- [Acerca de Agent Skills][about-agent-skills] -- [Personalizar la aplicación GitHub Copilot][customize-app] -- [Acerca de los entornos aislados locales y en la nube para GitHub Copilot][sandboxes] - -[ex0]: /es-es/learning-hub/copilot-workshops/app/0-prerequisites/ -[ex2]: /es-es/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /es-es/learning-hub/copilot-workshops/app/3-custom-instructions/ -[next-lesson]: /es-es/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions -[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[agent-skills-repo]: https://github.com/agentskills/agentskills -[agent-skills-spec]: https://agentskills.io/specification \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/4-custom-instructions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/4-custom-instructions.md new file mode 100644 index 000000000..3c5807d42 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/4-custom-instructions.md @@ -0,0 +1,121 @@ +--- +title: "Lección 4 - Guiar a Copilot con instrucciones personalizadas" +description: "Explora las instrucciones del repositorio, añade un estándar de documentación y aplícalo al código de filtrado." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +El contexto es fundamental al trabajar con IA generativa. Si una tarea debe realizarse de una forma concreta, conviene que esas directrices estén disponibles para Copilot. Los [archivos de instrucciones][instruction-files] describen no solo *qué* código quieres, sino también *cómo* debe estructurarse. Ahora que has creado el filtrado, explorarás las instrucciones que ha utilizado Copilot, añadirás un estándar de documentación y lo aplicarás al código. + +En esta lección: + +- explorarás cómo llegan al agente las instrucciones del repositorio y los archivos de instrucciones limitados por ruta. +- actualizarás el archivo de instrucciones para garantizar que se sigan los estándares de programación. +- observarás el efecto de los archivos de instrucciones en el código. + +## Escenario + +Como cualquier buen equipo de desarrollo, Tailspin Toys dispone de directrices y requisitos para las prácticas de desarrollo. Entre ellos se incluyen: + +- Los comentarios deben explicar la intención y las decisiones no evidentes, en lugar de repetir lo que hace el código. +- Las funciones exportadas de `db/` y `src/lib/` deben documentar su propósito, parámetros y valores de retorno mediante TSDoc/JSDoc, incluido un argumento `db` inyectable cuando exista. +- Los componentes reutilizables de Astro deben documentar sus contratos de `Props`, y los comentarios deben mantenerse actualizados cuando cambie el código relacionado. +- Deben conservarse las directrices existentes de formato y lint. + +Mediante los archivos de instrucciones, garantizarás que Copilot disponga de la información adecuada para realizar las tareas conforme a estas prácticas. + +## Archivos de instrucciones + +Las instrucciones personalizadas permiten proporcionar contexto y preferencias a Copilot para que comprenda mejor el estilo y los requisitos de programación. Esta potente funcionalidad ayuda a orientar a Copilot para obtener sugerencias y fragmentos de código más pertinentes. Puedes especificar las convenciones de programación, las bibliotecas e incluso los tipos de comentarios que prefieres incluir en el código. También puedes crear instrucciones para todo el repositorio o para tipos de archivo concretos, con contexto específico para una tarea. + +Hay dos tipos de archivos de instrucciones: + +- `.github/copilot-instructions.md`, un único archivo de instrucciones que se envía a Copilot con **cada** solicitud del repositorio. Debe contener información del proyecto que sea pertinente para la mayoría de las solicitudes de chat o CLI enviadas a Copilot, como la pila tecnológica, una descripción general de lo que se está creando, procedimientos recomendados y otras directrices globales. +- Los archivos `.github/instructions/*.instructions.md` se pueden crear para tareas o tipos de archivo concretos. Puedes utilizarlos para proporcionar directrices para lenguajes específicos, como TypeScript o Astro, o para tareas como crear un componente de interfaz de usuario o un nuevo conjunto de pruebas unitarias. + +> [!NOTE] +> Los demás formatos de instrucciones y su compatibilidad varían según el entorno. Consulta la [referencia de compatibilidad de instrucciones personalizadas][custom-instructions-support] antes de depender de un formato concreto. + +## Explorar los archivos de instrucciones personalizadas del proyecto + +Para facilitar el inicio, el proyecto incluye un conjunto de archivos de instrucciones. Explora lo que ya existe antes de realizar un cambio para observar su efecto. + +1. Vuelve a la sesión de la lección anterior. +2. 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/learning-hub/copilot-workshops/app-2-review-panel.png) + +3. Selecciona el icono **+** para abrir un panel nuevo. +4. Selecciona **Files**. +5. Selecciona el icono **Gear** y comprueba que **Show hidden files** esté marcado. +6. Ve a `.github/copilot-instructions.md`. +7. 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. +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`. +10. Examina las instrucciones específicas para crear pruebas unitarias en este proyecto. +11. Por último, abre `.github/instructions/drizzle.instructions.md` y desplázate hasta el final. Observa los vínculos a otros archivos de instrucciones, como `unit-tests.instructions.md`, y a archivos existentes del proyecto. De este modo puedes dividir conjuntos de instrucciones grandes en archivos más pequeños y reutilizables, y señalar a Copilot ejemplos que debe seguir al generar código. Las rutas son relativas al archivo de instrucciones, no a la raíz del repositorio. + +## Actualizar los archivos de instrucciones según las directrices del equipo + +Aunque los archivos existentes son un buen punto de partida, todavía hay algunas carencias. Modifiquemos el archivo principal `copilot-instructions.md` para garantizar que se añadan [comentarios TSDoc][tsdoc] a todos los archivos de TypeScript que se generen. + +> [!NOTE] +> Como los archivos de instrucciones influyen mucho en el código que genera Copilot, debes asegurarte de que lo orienten con claridad. Puedes pedir a Copilot que cree una primera versión y, después, revisarla para comprobar que las actualizaciones cumplen los requisitos. También puedes consultar una [colección de archivos de instrucciones en Awesome Copilot][awesome-copilot] como punto de partida. + +1. En el mismo lienzo de archivos, ve a `.github/copilot-instructions.md`. +2. Busca el encabezado **Code formatting requirements**, aproximadamente a mitad del archivo. +3. Añade lo siguiente como último punto debajo de ese encabezado: + + ```plaintext + All new TypeScript should contain TSDocs comments for documentation purposes. + ``` + +El archivo se guarda automáticamente y está listo para usarlo. + +## Utilizar las directrices actualizadas + +Con el archivo de instrucciones actualizado, observa su efecto en el código que genera Copilot pidiéndole que revise la actualización y realice los cambios necesarios. + +> [!NOTE] +> Indicaremos explícitamente a Copilot que utilice el archivo de instrucciones porque acabamos de modificarlo. Al crear código cuando los archivos de instrucciones ya existen, Copilot los utiliza automáticamente sin que tengas que indicárselo. + +1. Pide a Copilot que utilice los archivos de instrucciones para adaptar el código a los nuevos requisitos: + + ```plaintext + We just updated our instructions and code guidance. Can you please update the code you generated to match that guidance? + ``` + +2. 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/learning-hub/copilot-workshops/app-select-changes.png) + +3. Examina los archivos de TypeScript. Observa los nuevos comentarios TSDoc generados. + +## Resumen y pasos siguientes + +Has explorado cómo obtiene la aplicación contexto de los archivos de instrucciones y has aplicado un nuevo estándar a la funcionalidad. En concreto: + +- has explorado el archivo `copilot-instructions.md` del repositorio y los archivos `*.instructions.md` limitados por ruta. +- has actualizado el archivo de instrucciones para garantizar que se sigan los estándares de programación. +- has observado el efecto de los archivos de instrucciones en el código generado. + +A continuación, [personalizarás y ejecutarás la habilidad reutilizable quality-checks][next-lesson] para garantizar que lint y las pruebas se ejecuten de forma coherente. + +## Recursos + +- [Archivos de instrucciones para personalizar GitHub Copilot][instruction-files] +- [Personalizar la aplicación GitHub Copilot][customize-app] +- [Procedimientos recomendados para crear instrucciones personalizadas][instructions-best-practices] +- [Awesome Copilot: colección de archivos de instrucciones y otros recursos][awesome-copilot] + +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/5-agent-skills/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[instructions-best-practices]: https://docs.github.com/copilot/concepts/prompting/response-customization#writing-effective-custom-instructions +[awesome-copilot]: https://awesome-copilot.github.com/ +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +[tsdoc]: https://tsdoc.org/ +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/5-agent-skills.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/5-agent-skills.md new file mode 100644 index 000000000..9da579e21 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/5-agent-skills.md @@ -0,0 +1,108 @@ +--- +title: "Lección 5 - Personalizar y utilizar una habilidad quality-checks" +description: "Explora la habilidad quality-checks existente, personaliza el formato de su informe y utilízala para validar el filtrado." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Escribir código implica mucho más que limitarse a escribirlo. Hemos podido validar manualmente que funciona y hemos utilizado archivos de instrucciones para garantizar que sigue nuestros estándares. Pero ¿qué ocurre con las pruebas, lint y el resto de las tareas de integración continua (CI)? + +Para este tipo de tareas, las **habilidades de agente** son la mejor opción. Las habilidades ayudan a Copilot a comprender cómo ejecutar correctamente operaciones como estas. + +En esta lección: + +- explorarás la habilidad `quality-checks` existente. +- personalizarás el formato de sus resultados. +- ejecutarás la habilidad y revisarás su salida. + +## Escenario + +Tailspin Toys utiliza la habilidad `quality-checks` para las pruebas unitarias, lint y las comprobaciones de tipos. El equipo quiere mejorar el informe para facilitar la lectura de los resultados. + +## Instrucciones, scripts y recursos + +Las habilidades de agente reúnen instrucciones de tareas reutilizables, scripts ejecutables y recursos de apoyo que un agente carga cuando los necesita. En esencia, son una carpeta con el nombre de la habilidad y un archivo Markdown llamado `SKILL.md`. Este archivo contiene frontmatter con un nombre y una descripción que definen la habilidad, una introducción sobre lo que hace e indicaciones sobre cuándo debe invocarse. La carpeta también puede contener subcarpetas con scripts y otros recursos que utilizará la habilidad. + +> [!NOTE] +> Una habilidad no necesita carpetas ni archivos adicionales. En nuestro ejemplo, la habilidad ejecutará comandos `npm` para iniciar las pruebas y los linters, así que no necesitamos archivos auxiliares. + +Las habilidades pueden residir en la carpeta `.github/skills` de un proyecto para convertirse en un recurso del repositorio que el resto del equipo pueda compartir y reutilizar, o en la carpeta raíz de Copilot, que suele ser `~/.copilot/skills`. + +## Explorar la habilidad + +1. Si todavía no tienes abierto un lienzo **Files**, selecciona **+** en el panel de revisión y, después, **File**. +2. Busca `.github/skills/quality-checks/SKILL.md`. +3. Lee `name` y `description` al principio. Observa que la descripción ayuda a Copilot a comprender cuándo debe invocar la habilidad. +4. Lee las instrucciones y observa cómo orientan a Copilot durante el proceso de pruebas y lint. + +## Ejecutar la habilidad antes de realizar un cambio + +Las habilidades se pueden invocar directamente mediante un comando con barra diagonal (`/`) o con lenguaje natural. Pidamos a Copilot que ejecute las tres comprobaciones de la habilidad. + +1. Selecciona el modo **Interactive** en el menú desplegable para confirmar que Copilot lo utiliza. +2. Utiliza la indicación siguiente para invocar la habilidad: + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. Observa el informe final. + +## Personalizar el informe + +Queremos un informe mejor que indique qué se ha ejecutado, si ha tenido éxito y qué han comunicado realmente las herramientas. Actualicemos la habilidad para generar ese informe. + +1. Vuelve al lienzo **Files**. +2. Si aún no está abierto, abre `.github/skills/quality-checks/SKILL.md`. +3. Añade la siguiente sección al final del archivo: + + ```markdown + ## Results output formatting + + Upon completion, report each command that ran and whether it passed, failed, or was blocked. Include test counts, durations, errors, warnings, and other metrics only when the tool reports them. Identify the next action for any failure or blocker, and never describe a skipped or incomplete check as passed. + ``` + +El archivo se guardará automáticamente. + +## Ejecutar la habilidad actualizada + +Una vez realizado el cambio, veamos cómo funciona. Utilizaremos exactamente la misma indicación que antes. + +1. Selecciona el modo **Interactive** en el menú desplegable para confirmar que Copilot lo utiliza. +2. Utiliza la indicación siguiente para invocar la habilidad: + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. Observa el informe final. + +## Resumen y pasos siguientes + +Has personalizado y utilizado una habilidad de agente existente. En esta lección: + +- has explorado la habilidad `quality-checks` para las pruebas unitarias, lint y las comprobaciones de tipos. +- has personalizado el formato de sus resultados. +- has ejecutado la habilidad y revisado su salida. + +Este cambio acompañará al filtrado en la PR de la funcionalidad. A continuación, permitirás que Copilot interactúe directamente con el sitio [mediante el servidor MCP de Playwright][next-lesson]. + +## Más ejemplos de habilidades + +Estos ejemplos de la comunidad son referencias, no tareas adicionales. Revisa sus requisitos previos y su comportamiento antes de adoptarlos: + +- [Especificación de Agent Skills][skill-spec]. +- [Flujo de contribución: `make-repo-contribution`][contribution-example]. +- [Documentos de requisitos: `prd`][prd-example]. +- [Diagramas y un script de exportación incluido: `drawio`][drawio-example]. +- [Pruebas de navegador: `webapp-testing`][browser-example]. + +El ejemplo de contribución original se llama `make-repo-contribution`; las plantillas antiguas de Tailspin utilizaban otro nombre, `make-contribution`. Este taller no depende de ninguna de esas habilidades de contribución. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[skill-spec]: https://agentskills.io/specification +[contribution-example]: https://github.com/github/awesome-copilot/tree/main/skills/make-repo-contribution +[prd-example]: https://github.com/github/awesome-copilot/tree/main/skills/prd +[drawio-example]: https://github.com/github/awesome-copilot/tree/main/skills/drawio +[browser-example]: https://github.com/github/awesome-copilot/tree/main/skills/webapp-testing diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/6-agent-merge.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/6-agent-merge.md deleted file mode 100644 index f69e03981..000000000 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/6-agent-merge.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "Lección 6 - Combinar cambios con Agent Merge" -description: "Abre la solicitud de incorporación de cambios del filtrado, revísala en My work y deja que Agent Merge corrija los bloqueos y la combine por ti, el nivel más alto de la automatización de combinaciones." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -La funcionalidad de filtrado está creada, verificada y en funcionamiento en un navegador. El último paso es combinarla. Ya has combinado dos cambios en este recorrido; en ambos casos abriste la solicitud de incorporación de cambios y la combinaste personalmente en github.com. Esta vez dejarás que la aplicación se encargue del trabajo con **Agent Merge**, que guía una solicitud durante todo su ciclo de vida desde la aplicación. - -En esta lección: - -- aprenderás qué es Agent Merge y cómo automatiza el ciclo de vida de una combinación. -- habilitarás Agent Merge en la sesión de filtrado. -- observarás cómo crea la solicitud de incorporación de cambios, ejecuta CI y la combina cuando todo se completa correctamente. - -## Escenario - -En los últimos módulos has explorado distintos niveles de automatización, desde crear código hasta permitir que Copilot valide directamente una interfaz de usuario. Para acelerar aún más el desarrollo, Tailspin Toys quiere averiguar si las solicitudes de incorporación de cambios que ya se han revisado y validado pueden combinarse automáticamente. - -## Introducción a Agent Merge - -**Agent Merge** permite automatizar el último tramo de la incorporación de una solicitud de cambios mediante la aplicación Copilot. Al habilitarlo, la sesión de la aplicación lee la solicitud y resuelve lo que la bloquea: corrige comprobaciones de CI con errores, responde a comentarios de revisión y reorganiza la base cuando es necesario. Después la combina en cuanto GitHub lo permite. Se ejecuta en segundo plano, continúa tras reiniciar la aplicación y se desactiva cuando se combina la solicitud. - -Hasta ahora, tú seleccionabas **Merge pull request** en github.com. Agent Merge transfiere esa responsabilidad al agente para que puedas pasar a la siguiente tarea mientras este guía la solicitud hasta completarla. Sigues revisando y aprobando el trabajo; el agente se ocupa del proceso mecánico final. - -## Utilizar Agent Merge para gestionar la solicitud - -Has revisado el código manualmente, ejecutado pruebas e incluso permitido que Copilot valide la interfaz de usuario. Ha llegado el momento de combinar el código nuevo con el código base. Vamos a permitir que Agent Merge guíe la solicitud durante la integración continua (CI) y la combine. - -1. Vuelve a la sesión que mantuviste abierta en el módulo anterior mientras añadías la funcionalidad de filtrado. -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/learning-hub/copilot-workshops/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. - -La aplicación Copilot comenzará a crear y gestionar la solicitud. Primero explora el proyecto para determinar la mejor forma de crearla y, después, genera la nueva solicitud. - -Transcurridos unos instantes, observarás que Copilot vuelve a trabajar y examina las condiciones de la solicitud, incluido el proceso de CI que ejecuta todas las pruebas del repositorio. Comunicará el estado de las revisiones de otros miembros del equipo, las comprobaciones que deben ejecutarse y si la solicitud puede combinarse. - -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/learning-hub/copilot-workshops/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. - -## Resumen y pasos siguientes - -Has automatizado varias partes del proceso de desarrollo, como la generación, las pruebas y la validación de código, y ahora también el proceso de solicitud de incorporación de cambios. En concreto: - -- has aprendido qué es Agent Merge y cómo automatiza el ciclo de vida de una combinación. -- has habilitado Agent Merge en la sesión de filtrado. -- has observado cómo crea la solicitud de incorporación de cambios, ejecuta CI y la combina cuando todo se completa correctamente. - -A continuación, explorarás los **lienzos**, una forma más completa de planificar y visualizar el trabajo con el agente. Continúa con la [Lección 7 - Planificar con lienzos][next-lesson]. - -## Recursos - -- [Gestionar incidencias y solicitudes de incorporación de cambios con la aplicación GitHub Copilot][managing-issues-prs] -- [Acerca de la aplicación GitHub Copilot][about-copilot-app] - -[next-lesson]: /es-es/learning-hub/copilot-workshops/app/7-canvases/ -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/5-mcp-playwright.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/6-mcp-playwright.md similarity index 52% rename from website/src/content/docs/es-es/learning-hub/copilot-workshops/app/5-mcp-playwright.md rename to website/src/content/docs/es-es/learning-hub/copilot-workshops/app/6-mcp-playwright.md index 909a54d9e..b36836652 100644 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/5-mcp-playwright.md +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/6-mcp-playwright.md @@ -1,17 +1,17 @@ --- -title: "Lección 5 - Realizar pruebas con el servidor MCP de Playwright" -description: "Añade el servidor MCP de Playwright a la aplicación GitHub Copilot y pide al agente que pruebe manualmente la funcionalidad de filtrado en un navegador real." +title: "Lección 6 - Validar la funcionalidad con MCP de Playwright" +description: "Configura MCP de Playwright mediante Customize y observa el filtrado en un navegador desde el worktree existente de la funcionalidad." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -En la lección anterior creaste y verificaste la funcionalidad de filtrado con el conjunto de pruebas automatizadas del proyecto. Las pruebas automatizan la validación del código, pero permitir que el agente confirme el comportamiento también resulta muy útil. Así puede responder a los problemas que detecte en la interfaz de usuario que está creando. Vamos a explorar cómo MCP proporciona a los agentes de IA acceso a capacidades externas y a añadir el servidor MCP de Playwright para que Copilot pueda interactuar directamente con el sitio que estás desarrollando. +Como ya hemos destacado, escribir código implica mucho más que limitarse a escribirlo. Necesitamos trabajar con datos y servicios externos e incluso permitir que Copilot disponga de automatizaciones adicionales. Aquí es donde entran en juego los servidores MCP. Estos permiten a Copilot ir más allá de lo que incorpora la aplicación y le proporcionan aún más herramientas y servicios. En esta lección: - comprenderás qué es Model Context Protocol (MCP) y cómo lo utiliza la aplicación GitHub Copilot. -- añadirás el servidor MCP de Playwright desde la configuración de la aplicación. +- añadirás el servidor MCP de Playwright. - pedirás al agente que controle un navegador y explore la funcionalidad de filtrado. ## Escenario @@ -36,43 +36,42 @@ Hay muchos otros servidores MCP que proporcionan acceso a distintas herramientas ## Añadir el servidor MCP de Playwright -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. +Los servidores MCP se gestionan desde **Customize** en la barra lateral. Los servidores configurados para tus repositorios o Copilot CLI pueden estar ya disponibles en la aplicación, así que compruébalo antes de añadir un duplicado. La [documentación de personalización de la aplicación][customize-app] explica las opciones disponibles. -1. Selecciona Ctrl+, 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**. -5. Selecciona **Add server** para añadirlo a la lista de servidores MCP disponibles. -6. Selecciona Esc para cerrar el cuadro de diálogo de configuración. +1. Selecciona **Customize** en la barra lateral. +2. Selecciona **MCP** y comprueba en **Installed** si ya existe un servidor de Playwright. +3. Si es necesario, busca **Playwright** entre los servidores disponibles o utiliza el procedimiento de servidor personalizado documentado por el editor. +4. Revisa el editor, la configuración y cualquier solicitud de instalación antes de aprobarla. Sigue las indicaciones para añadir el servidor; las directivas de la organización o la falta de requisitos previos pueden bloquear la configuración. +5. Vuelve a la sesión de filtrado en modo **Interactive** y confirma que las herramientas MCP de Playwright están disponibles. -Ya has añadido el servidor MCP de Playwright. +Si la configuración falla, resuelve el problema de configuración o permisos antes de continuar. ## Pedir a Copilot que explore la funcionalidad mediante Playwright -Vamos a pedir a Copilot que pruebe manualmente la funcionalidad mediante el servidor MCP de Playwright. +La incidencia y tus decisiones de planificación ya están en el contexto. Detén cualquier servidor de desarrollo que hayas iniciado antes de pedir a Copilot que inicie uno. 1. Utiliza la indicación siguiente para pedir a Copilot que valide la nueva funcionalidad: - ```plaintext - Start the dev server then use the Playwright MCP server to validate the functionality you just added exists. Use the details in the issue to ensure the newly added behavior matches the specs. - ``` + ```plaintext + Start the app and use Playwright MCP to check filtering against the issue and our plan. Tell me what works and what doesn't, without making changes. Stop the server you started when you're done. + ``` -Copilot iniciará un navegador mediante el servidor MCP de Playwright, recorrerá cada paso y comunicará lo que encuentre. Verás cómo abre un navegador en el sistema para realizar las tareas. + > [!NOTE] + > No es obligatorio indicar a Copilot que utilice un servidor MCP concreto; normalmente encontrará el adecuado según el contexto actual. Sin embargo, nunca está de más indicarle algo que consideras importante. -2. Compara el resumen con los criterios de aceptación de la incidencia. Si algo no parece correcto, formula preguntas de seguimiento o pide al agente que corrija el código antes de abrir una solicitud de incorporación de cambios. -3. Mantén abierta esta sesión, ya que la completaremos en la siguiente lección. + 2. Observa cómo trabaja. -Copilot también ha validado la funcionalidad en el navegador mediante la exploración de la característica como lo haría un usuario. + Copilot iniciará el servidor, abrirá un navegador e interactuará con el sitio web. Cuando termine, detendrá el servidor y te proporcionará un informe. ## Resumen y pasos siguientes -Has utilizado el servidor MCP de Playwright para explorar la funcionalidad en un navegador real desde la aplicación GitHub Copilot. En resumen: +Has utilizado el servidor MCP de Playwright para explorar la funcionalidad en un navegador real desde la aplicación GitHub Copilot. En concreto: -- has aprendido qué es Model Context Protocol (MCP) y cómo la aplicación pone a disposición las herramientas MCP. -- has añadido el servidor MCP de Playwright desde la configuración de la aplicación. +- has aprendido qué es Model Context Protocol (MCP) y cómo lo utiliza la aplicación GitHub Copilot. +- has añadido el servidor MCP de Playwright. - has pedido al agente que controle un navegador y explore la funcionalidad de filtrado. -La funcionalidad está creada, verificada y en funcionamiento. Ahora toca publicarla mediante **Agent Merge**, que abrirá y combinará la solicitud de incorporación de cambios. Continúa con la [Lección 6 - Combinar cambios con Agent Merge][next-lesson]. +A continuación, [crearás un agente personalizado de QA][next-lesson] que reúne la habilidad y las herramientas del navegador en un rol especializado. ## Recursos @@ -80,7 +79,7 @@ La funcionalidad está creada, verificada y en funcionamiento. Ahora toca public - [Servidor MCP de Playwright de Microsoft][playwright-mcp-server] - [Configurar servidores MCP en la aplicación GitHub Copilot][customize-app] -[next-lesson]: /es-es/learning-hub/copilot-workshops/app/6-agent-merge/ +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/7-qa-agent/ [mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ [playwright-mcp-server]: https://github.com/microsoft/playwright-mcp [customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/7-canvases.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/7-canvases.md deleted file mode 100644 index 4a0c74812..000000000 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/7-canvases.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: "Lección 7 - Planificar con lienzos" -description: "Crea un lienzo compartido y dirigido por agentes en la aplicación GitHub Copilot para planificar y realizar el seguimiento del trabajo junto con el agente." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Hasta ahora has dirigido a los agentes mediante el chat. Sin embargo, gran parte del trabajo no reside en una conversación, sino en un tablero, un documento o una lista de comprobación. Los **lienzos** ofrecen al agente y a ti una superficie compartida para ese tipo de trabajo, directamente en la aplicación. En esta lección crearás un lienzo sencillo para planificar y realizar el seguimiento de la lista de trabajo pendiente que has estado abordando. - -En esta lección: - -- comprenderás qué es un lienzo y cuándo utilizarlo. -- crearás un lienzo compartido con un tablero Kanban para clasificar la lista de trabajo pendiente. -- guardarás el lienzo en el repositorio y lo combinarás para el equipo. -- abrirás el lienzo en una sesión nueva y empezarás a trabajar desde él. - -## Escenario - -Examinar una lista de incidencias puede resultar abrumador, incluso en las mejores circunstancias. Los desarrolladores de Tailspin Toys buscan una herramienta que les permita clasificar las incidencias con rapidez y empezar a trabajar en ellas desde la aplicación Copilot. - -## ¿Qué es un lienzo? - -Un [lienzo][canvas-docs] es una superficie interactiva y compartida para un recurso de trabajo, como un plan, un tablero de clasificación, una lista de comprobación de versiones, un panel o un documento. Aunque el chat resulta adecuado para describir intenciones y razonar sobre ambigüedades, la mayor parte del trabajo se realiza en una *superficie*. Los lienzos permiten colaborar con el agente directamente sobre ella. - -Los lienzos son **bidireccionales**: el agente puede actualizar el lienzo mientras trabaja y tú puedes editar la misma superficie. Cuando creas un lienzo, el agente lo genera a partir de la indicación y el flujo de trabajo, y puedes pedirle que añada, elimine o revise capacidades a medida que avanzas. Una vez creado, el lienzo se abre en el panel derecho de la aplicación. - -Algunos ejemplos habituales son: - -- **Lienzos de Markdown** para planificar el día y priorizar incidencias y solicitudes de incorporación de cambios. -- **Tableros Kanban con agentes** en los que las personas y los agentes añaden tarjetas y desplazan el trabajo entre columnas. -- **Tableros de clasificación de incidencias** que resumen las incidencias principales y los temas recurrentes de un repositorio. - -## ¿Por qué utilizar un lienzo? - -Utiliza un lienzo cuando una tarea requiera estructura, iteración y verificación, y un chat no sea suficiente. Un lienzo permite: - -- basar el trabajo del agente en un recurso real que se adapte al flujo de trabajo. -- orientar o corregir el trabajo directamente en la superficie compartida y, después, permitir que el agente continúe a partir de los cambios. -- inspeccionar el progreso como cambios visibles en un recurso, no solo como respuestas del chat. - -## Crear un lienzo para realizar el seguimiento del trabajo - -Has publicado numerosos cambios: la valoración por estrellas, el estándar de documentación y la funcionalidad de filtrado ya están combinados. Sin embargo, todavía quedan elementos en la lista de trabajo pendiente. Vamos a crear el lienzo para clasificar el trabajo con rapidez. - -1. Vuelve a la aplicación GitHub Copilot o ábrela. -2. Selecciona **Home screen**. -3. Comprueba que `tailspin-toys` esté seleccionado como repositorio. -4. En el cuadro de indicaciones, utiliza la indicación siguiente para crear un lienzo que satisfaga nuestras necesidades: - - ```plaintext - Create a basic Kanban board canvas that allows me to quickly triage work. Highlight the three issues which are most likely to need attention right now, with the remainder in a second section down below. The top three cards should include a description of the issue's content and a justification of why they're at the top of the list. Each issue should have a button that allows me to add it to the current context for the current session so I can get to work on it straightaway. - ``` - -Copilot comenzará a crear el lienzo. - -> [!NOTE] -> La creación tardará unos minutos. Como se trata de una tarea compleja, es posible que la primera versión no te satisfaga. Puedes seguir enviando indicaciones hasta crear la herramienta que necesitas. - -## Guardar el lienzo y combinarlo con el repositorio - -Los lienzos pueden convertirse en recursos del repositorio, al igual que los archivos de instrucciones y las habilidades. Vamos a pedir a Copilot que lo añada al repositorio y lo combine para que pueda utilizarlo todo el equipo. - -1. En la misma sesión, pide a Copilot que guarde el lienzo en el repositorio mediante la indicación siguiente: - - ```plaintext - Let's save this canvas definition to the repository so I can share it with my development team - ``` - -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/learning-hub/copilot-workshops/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. - -La aplicación Copilot comenzará a crear y gestionar la solicitud. Primero explora el proyecto para determinar la mejor forma de crearla y, después, la genera. - -Transcurridos unos instantes, observarás que Copilot vuelve a trabajar y examina las condiciones de la solicitud, incluido el proceso de CI que ejecuta todas las pruebas del repositorio. Comunicará el estado de las revisiones de otros miembros del equipo, las comprobaciones que deben ejecutarse y si la solicitud puede combinarse. - -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/learning-hub/copilot-workshops/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. - -Ya has creado un lienzo compartido para el equipo. - -## Trabajar en el lienzo - -Con el lienzo creado, vamos a iniciar una sesión nueva y utilizarlo. - -1. En la aplicación Copilot, selecciona **New session** junto a **tailspin-toys** para iniciar una sesión nueva. -2. Pide a Copilot que abra el lienzo de clasificación mediante la indicación siguiente: - - ```plaintext - Open the triage issues canvas - ``` - -3. El lienzo que has creado debería abrirse en la sesión nueva. -4. Selecciona **Add to current context** en una de las incidencias que más te interese. -5. Copilot empezará a trabajar en la incidencia. - -Has utilizado un lienzo creado por ti para agilizar el proceso de desarrollo. - -## Resumen y pasos siguientes - -Has creado una superficie compartida en la que puedes colaborar con el agente. En concreto: - -- has aprendido qué son los lienzos y cuándo utilizarlos. -- has creado con el agente un lienzo compartido con un tablero Kanban para clasificar incidencias. -- has guardado y combinado el lienzo con el repositorio mediante Agent Merge. -- has abierto el lienzo en una sesión nueva y lo has utilizado para empezar a trabajar. - -Con la lista de trabajo pendiente organizada, da un paso atrás para revisar todo lo que has creado y descubrir cómo continuar. Continúa con la [Lección 8 - Repaso y pasos siguientes][next-lesson]. - -## Recursos - -- [Trabajar con extensiones de lienzo en la aplicación GitHub Copilot][canvas-docs] -- [Lienzos en Awesome Copilot][awesome-copilot-canvases] -- [Acerca de la aplicación GitHub Copilot][about-copilot-app] - -[next-lesson]: /es-es/learning-hub/copilot-workshops/app/8-review/ -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/7-qa-agent.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/7-qa-agent.md new file mode 100644 index 000000000..7465c8185 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/7-qa-agent.md @@ -0,0 +1,78 @@ +--- +title: "Lección 7 - Crear y utilizar un agente de QA" +description: "Crea un perfil de QA que parta de los requisitos y combine cobertura de pruebas, la habilidad quality-checks y observaciones directas del navegador." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Has utilizado la habilidad `quality-checks` para ejecutar comprobaciones automatizadas y MCP de Playwright para observar la experiencia de filtrado en un navegador. Ahora reunirás estas capacidades en un agente personalizado con un proceso de QA claramente definido. + +En esta lección: + +- comprenderás cómo trabaja un agente personalizado con instrucciones, habilidades y herramientas MCP. +- crearás y examinarás un perfil de QA reutilizable. +- seleccionarás el agente de QA y revisarás sus conclusiones frente a la incidencia de filtrado. + +## Escenario + +Tailspin Toys quiere revisar de forma coherente los requisitos, la calidad del código, las comprobaciones automatizadas, la cobertura de pruebas y el comportamiento en el navegador antes de abrir una solicitud de incorporación de cambios (PR). Un agente personalizado puede coordinar ese proceso de QA y proporcionar un informe reutilizable. + +## ¿Qué es un agente personalizado? + +Un agente personalizado es una versión especializada de Copilot definida en un perfil Markdown. El perfil describe el propósito, las instrucciones y las herramientas disponibles del agente. En este taller, definirás un rol de QA en `.github/agents/qa.agent.md` y lo seleccionarás en la aplicación. + +Las personalizaciones que has creado tienen funciones distintas. Las instrucciones del repositorio describen los estándares del equipo. La habilidad quality-checks reúne comprobaciones repetibles. MCP de Playwright proporciona herramientas de navegador. El perfil de QA indica a Copilot cómo usar esas capacidades para evaluar requisitos e informar de sus conclusiones. No las sustituye ni requiere otra sesión de agente. + +## Crear el perfil de QA + +Antes de abrir la PR de la funcionalidad, pedirás a Copilot que cree un perfil de QA reutilizable. El perfil definirá tanto las comprobaciones que realiza QA como los límites que debe respetar. + +1. Confirma que la sesión está en modo **Interactive**. +2. Envía la siguiente indicación a Copilot para crear el nuevo agente personalizado: + + ```plaintext + Create a custom agent named QA in .github/agents/qa.agent.md. It should check features against their issues and agreed requirements, follow the repository instructions, run the quality-checks skill, use Playwright MCP to verify behavior, and add tests when coverage is missing. + + Have it report each requirement as pass, fail, or blocked with supporting evidence. It must ask before changing implementation code, and it must not commit changes or open pull requests. Use the current model and available tools. Just create the profile for now so I can review it. + ``` + +## Examinar el perfil + +1. Abre **Changes** y selecciona `.github/agents/qa.agent.md`. +2. Lee el frontmatter. `description` es obligatorio; `name` es opcional, pero incluirlo proporciona al agente un nombre visible claro. +3. Lee las instrucciones del perfil y confirma que QA parte de los requisitos, sigue las instrucciones del repositorio, ejecuta la habilidad `quality-checks` y utiliza MCP de Playwright. +4. Confirma que QA aporta pruebas de verificación, pregunta antes de cambiar el código de implementación y no crea commits ni abre solicitudes de incorporación de cambios. +5. Si al perfil generado le falta alguna de estas responsabilidades o límites, pide al agente general de Copilot que lo revise antes de continuar. + +## Ejecutar QA frente a la incidencia + +Después de revisar el perfil, selecciona QA en la sesión actual para que pueda utilizar la incidencia de filtrado y las decisiones de planificación que ya contiene el contexto. Confirma el agente activo antes de pedirle que inicie la revisión. + +1. En la sesión actual, abre el selector de agentes del cuadro de indicaciones. +2. Selecciona **QA** y verifica que la aplicación identifica visiblemente a **QA** como agente activo antes de enviar la indicación de ejecución. +3. Envía la indicación siguiente para pedir a QA que revise la funcionalidad: + + ```plaintext + Review the filtering feature against the issue and the decisions in our plan. Is it ready for a PR? + ``` + +4. Confirma que QA utiliza la incidencia y las decisiones de planificación correctas. Proporciona la URL de la incidencia o el contexto que falte si lo solicita. +5. Lee el informe que proporciona cuando termina el trabajo. + +## Resumen y pasos siguientes + +Has añadido un rol especializado reutilizable al flujo de trabajo y has revisado su trabajo. En esta lección: + +- has explorado cómo trabaja un agente personalizado con instrucciones, habilidades y herramientas MCP. +- has creado y examinado un perfil de QA reutilizable que parte de los requisitos. +- has seleccionado el agente QA y revisado sus conclusiones frente a la incidencia de filtrado. + +Ya tienes la implementación, la actualización de la habilidad, el perfil de QA, las pruebas y el informe de verificación listos para revisar. Continúa con la [Lección 8 - Crear y combinar la PR de la funcionalidad][next-lesson] para reunirlos y utilizar Agent Merge. + +## Recursos + +- [Personalizar la aplicación GitHub Copilot, incluida la selección de agentes personalizados][customize-app] + +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/8-create-pull-request/ +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-create-pull-request.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-create-pull-request.md new file mode 100644 index 000000000..9c98850a8 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-create-pull-request.md @@ -0,0 +1,73 @@ +--- +title: "Lección 8 - Crear y combinar la PR de la funcionalidad" +description: "Revisa conjuntamente el filtrado, las instrucciones, la actualización de la habilidad, el perfil QA y las pruebas; después, crea una PR y utiliza Agent Merge." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +La implementación del filtrado, las actualizaciones de instrucciones y de la habilidad, el perfil de control de calidad (QA) y las pruebas están guardados en una sola rama. Es hora de revisarlos juntos y abrir una solicitud de incorporación de cambios. Ya has combinado personalmente la solicitud de incorporación de cambios (PR) de valoraciones por estrellas; esta vez permitirás que **Agent Merge** gestione el proceso. + +> [!NOTE] +> Normalmente separaríamos la funcionalidad, las actualizaciones de instrucciones y de la habilidad y el agente QA en varias PR. Para agilizar el taller, has mantenido todo el flujo de filtrado y calidad en una sesión y una rama, y todo ese trabajo se incluirá en esta PR. + +En esta lección: + +- aprenderás qué es Agent Merge y cómo automatiza el ciclo de vida de una combinación. +- examinarás la PR completa de la funcionalidad y las pruebas de verificación. +- autorizarás Agent Merge solo después de la revisión y confirmarás que la PR está combinada. + +## Escenario + +A lo largo del flujo de filtrado, has utilizado Copilot para planificar, implementar y verificar una funcionalidad. Ahora Tailspin Toys quiere automatizar el trabajo restante de la PR y mantener la autorización para combinar bajo el control del desarrollador. + +## Introducción a Agent Merge + +**Agent Merge** permite automatizar el último tramo de la incorporación de una solicitud de cambios mediante la aplicación Copilot. Al habilitarlo, la sesión de la aplicación lee la solicitud y resuelve lo que la bloquea: corrige comprobaciones de CI con errores, responde a comentarios de revisión y reorganiza la base cuando es necesario. Después la combina en cuanto GitHub lo permite. Se ejecuta en segundo plano, continúa tras reiniciar la aplicación y se desactiva cuando se combina la solicitud. + +Hasta ahora has seleccionado **Merge pull request** personalmente. Agent Merge puede asumir esa responsabilidad, pero su capacidad de editar código y combinar sigue necesitando tu autorización explícita. Revisa sus acciones permitidas y el trabajo antes de conceder permiso para combinar. + +## Utilizar Agent Merge para gestionar la PR + +Con todo el código creado y revisado, permitamos que Agent Merge gestione el proceso de PR. + +1. Utiliza el selector de agentes para seleccionar **Default agent**. +2. Selecciona el menú desplegable junto a **Create PR**. +3. Selecciona **Agent merge**. El botón cambia a **Agent merge**. +4. Selecciona **Agent merge** para iniciar el proceso. + +El proceso de Agent Merge comienza. Hará lo siguiente: + +- Crear la solicitud de incorporación de cambios con un título y una descripción. +- Si iniciaste la sesión desde una incidencia, incluir una referencia a ella en el cuerpo de la descripción. +- Reorganizar la base o gestionar posibles conflictos de combinación con la rama de destino. +- Supervisar el proceso de CI para garantizar que se superen todas las comprobaciones. +- Supervisar la PR para detectar comentarios de otros desarrolladores o de la revisión de código de Copilot. Realizará actualizaciones para resolverlos. +- De forma opcional, combinar automáticamente la PR cuando todo se haya completado correctamente. + +Permitamos que Agent Merge también combine la PR cuando se supere todo. + +5. Selecciona el menú desplegable junto a **Agent merge**. +6. Comprueba que **Merge pull request** está marcado. + +> [!IMPORTANT] +> Agent Merge no elude las protecciones del repositorio ni los permisos ausentes. Resuelve esos bloqueos antes de continuar. + +## Resumen y pasos siguientes + +Has automatizado varias partes del proceso de desarrollo, como la generación, las pruebas y la validación de código, y ahora también el proceso de solicitud de incorporación de cambios. En concreto: + +- has aprendido qué es Agent Merge y cómo automatiza el ciclo de vida de una combinación. +- has examinado la PR completa de la funcionalidad y las pruebas de verificación. +- has autorizado Agent Merge solo después de la revisión y has confirmado que la PR estaba combinada. + +A continuación, [utilizarás un lienzo existente y crearás uno de clasificación][next-lesson] para explorar una forma más completa de examinar, planificar y visualizar el trabajo con el agente. + +## Recursos + +- [Gestionar incidencias y solicitudes de incorporación de cambios con la aplicación GitHub Copilot][managing-issues-prs] +- [Acerca de la aplicación GitHub Copilot][about-copilot-app] + +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/9-canvases/ +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md new file mode 100644 index 000000000..c21028790 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md @@ -0,0 +1,151 @@ +--- +title: "Preparar el proyecto y el modelo" +description: "Exporta el catálogo de Tailspin, crea un proyecto de Foundry y una implementación de modelo, y valídalos en Canvas." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/ + label: "Opcional: Incorporar Foundry" +next: + link: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: Crear e implementar el agente +--- + +Este primer módulo prepara los datos y los recursos de Azure para Backer Concierge. Todavía no se necesita código del agente ni una implementación hospedada. + +Al terminar, tendrás: + +- Una exportación del catálogo con límites explícitos sobre la información en la que se pueden basar las respuestas. +- Un proyecto de Foundry y una implementación de modelo elegida según los requisitos de la funcionalidad. +- Una implementación validada en Canvas y una comprobación básica del modelo limitada al catálogo. + +## Escenario + +Quienes apoyan los juegos de Tailspin Toys pueden filtrarlos por categoría y editor, pero preguntas como *¿Qué juegos serían adecuados para alguien a quien le encantan los juegos de palabras sobre Git?* no se responden con un menú desplegable. Backer Concierge debe recomendar solo juegos del catálogo de Tailspin y nunca inventar juegos, editores, valoraciones, importes recaudados, cifras de patrocinadores, precios, números de jugadores, duraciones de partida ni fechas de lanzamiento. Un catálogo fiable y un modelo adecuado son la base de esas respuestas. + +## Preparar las herramientas y la sesión de la incidencia + +La configuración conecta la aplicación GitHub Copilot con Azure y mantiene unido todo el trabajo de la funcionalidad. + +1. Confirma que tienes una suscripción de Azure. Si necesitas una, las opciones disponibles incluyen una [suscripción gratuita de Azure con 200 $ de crédito][azure-free] o [Azure for Students con 100 $ de crédito][azure-students]. +2. Instala la [CLI de Azure][install-azure-cli] para tu sistema operativo y verifica la instalación con `az version`. +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/learning-hub/copilot-workshops/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. Selecciona **Issues** en la barra lateral y, a continuación, 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. +7. Escribe `/microsoft-foundry` y, después, `/azure` para confirmar que ambas habilidades están instaladas y disponibles; no envíes ninguna indicación todavía. Si un complemento no aparece de inmediato, reinicia la aplicación, vuelve a esta misma sesión de la incidencia y compruébalo de nuevo. + +## Generar la exportación del catálogo + +El repositorio de ejemplo incluye un script de exportación que proporciona al agente un archivo que puede leer. + +8. En esta sesión del worktree vinculada a la incidencia, sustituye la indicación predeterminada `/fix-issue` del cuadro de indicaciones por: + + ```plaintext + Install the project dependencies, seed the database, then run the existing db:export script. Show me the command output and summarize the shape and grounding limits of db/catalog.json. + ``` + +9. Revisa la salida de los comandos. Copilot debería ejecutar el equivalente a: + + ```bash + npm install + npm run db:setup + npm run db:export + ``` + + ![Generar la exportación del catálogo](/images/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/app-8-view-catalog.png) + +## Configurar un proyecto de Foundry y un modelo + +Crear primero el proyecto y la implementación en el chat permite que Canvas se conecte solo a recursos que ya existen. + +11. Selecciona **+**, selecciona **Terminal** e inicia sesión en Azure: + + ```bash + az login + ``` + +12. Comprueba la suscripción seleccionada y enumera sus grupos de recursos: + + ```bash + az account show --output table + az group list --output table + ``` + + Si la suscripción no es correcta, ejecuta `az account set --subscription ` y repite ambos comandos. + + Si aparece `rg-tailspin-toys`, examina sus recursos: + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + Si el grupo contiene recursos ajenos o compartidos, detente y elige un nombre dedicado antes de utilizar la indicación siguiente. Sustituye los nombres de ejemplo de todas las indicaciones y comandos posteriores por los nombres que apruebes. +13. En la misma sesión de la incidencia, introduce: + + ```plaintext + 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/learning-hub/copilot-workshops/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: + + ```plaintext + Use the Microsoft Foundry skill to recommend two or three current chat models in the tailspin-toys project that meet this issue's acceptance criteria. Explain the tradeoffs and wait for me to choose. + ``` + +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/learning-hub/copilot-workshops/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: + + ```plaintext + Deploy the model I selected to the tailspin-toys Foundry project, using the model name as the deployment name. + ``` + +> [!TIP] +> La disponibilidad de los modelos cambia con el tiempo. La opción adecuada es el modelo que Copilot confirme que está disponible en tu proyecto, no un modelo fijado de antemano en este módulo. + +## Validar el modelo y realizar una comprobación básica en Canvas + +Esta comprobación verifica el proyecto y el modelo antes de que exista código del agente. Una comprobación básica del modelo no sustituye las pruebas del módulo 2 que verifican que el agente hospedado se basa en el catálogo. + +17. Selecciona **+**, después **Canvas** y, a continuación, **Microsoft Foundry (Preview)**. +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/learning-hub/copilot-workshops/app-8-validate-project-model.png) + +20. En la misma sesión, escribe: + + ```plaintext + Usa la habilidad de Microsoft Foundry para probar directamente el modelo que he implementado en el proyecto tailspin-toys sin crear un agente. Basa la respuesta en el contenido de @db/catalog.json y pregunta: «Me encantan los juegos de rompecabezas sobre la búsqueda de errores. ¿Qué debería apoyar y cuánto dinero ha recaudado?». Muéstrame la respuesta y metadatos útiles, como los tokens utilizados y el tiempo de respuesta, solo si están disponibles. Usa mi sesión de Azure existente. No muestres credenciales, modifiques archivos ni crees recursos. + ``` + +21. Revisa la respuesta. Debe recomendar únicamente un juego real de `db/catalog.json`, usar el título, el editor y la valoración correctos, y explicar que la información de financiación no está disponible. Si el modelo inventa un juego, datos del catálogo o una cantidad de financiación, compara otro modelo recomendado antes de continuar. + +> [!NOTE] +> Canvas recuerda el proyecto seleccionado cuando se vuelve a abrir. Sus etapas son **Create new hosted agents** para generar la estructura inicial, **Build current hosted agent** para conectar modelos, conjuntos de herramientas, habilidades y medidas de protección, y **Deploy and test** para las ejecuciones locales y la implementación en Microsoft Foundry. + +## Punto de control y pasos siguientes + +Has preparado las herramientas de Azure, exportado el catálogo y probado un modelo implementado con las reglas de fundamentación de Backer Concierge. El punto de control de este módulo es un modelo que recomienda juegos reales del catálogo sin inventar información que no está disponible. + +A continuación, usarás el mismo repositorio de Tailspin Toys, la misma rama del worktree, la misma sesión vinculada a la incidencia, el mismo proyecto de Foundry y la implementación del modelo seleccionada para [crear e implementar el agente][next-module]. Si te detienes aquí, [limpia los recursos de Azure][cleanup] para evitar costes continuos. + +[azure-free]: https://azure.microsoft.com/pricing/purchase-options/azure-account +[azure-students]: https://azure.microsoft.com/free/students +[install-azure-cli]: https://learn.microsoft.com/cli/azure/install-azure-cli +[install-azd]: https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd +[next-module]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[cleanup]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/#limpiar-los-recursos diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md new file mode 100644 index 000000000..2c6906d17 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md @@ -0,0 +1,160 @@ +--- +title: "Crear e implementar el agente" +description: "Genera la estructura inicial de Backer Concierge en Canvas, inspecciónalo en local e impleméntalo y vuelve a probarlo en Foundry." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: Preparar el proyecto y el modelo +next: + link: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + label: Conectar el agente al sitio +--- + +Este módulo convierte el proyecto, la implementación del modelo y el catálogo de [Preparar el proyecto y el modelo][previous-module] en un Backer Concierge hospedado mediante Microsoft Foundry Canvas. + +Al terminar, tendrás: + +- La estructura inicial de un agente con los datos del catálogo empaquetados y pruebas específicas. +- Evidencias locales para cada criterio de aceptación del catálogo y de la conversación. +- Una versión del agente implementada y probada de nuevo en Foundry. + +## Escenario + +Tailspin Toys necesita un asistente que pueda responder a preguntas reales sobre el catálogo, reconocer cuándo falta información y recordar los juegos mencionados en una conversación. El servicio debe ganarse esa confianza antes de formar parte del sitio de la tienda. + +## Preparar las herramientas de implementación + +La inspección y la implementación del agente hospedado utilizan Azure Developer CLI a través de Canvas; se reutilizan el proyecto y el modelo de Foundry existentes. + +1. Retoma la misma sesión vinculada a la incidencia **Add a Backer Concierge assistant for catalog questions** del módulo 1. Confirma que `db/catalog.json` está intacto, que estás conectado a la suscripción y al proyecto de Foundry correctos, y que la implementación del modelo sigue disponible. Si se eliminaron los recursos, repite primero la [configuración del proyecto y del modelo][previous-module] que corresponda. + +2. Selecciona **+**, selecciona **Terminal** e inicia sesión en Azure Developer CLI; completa la autenticación en el navegador cuando se te solicite: + + ```bash + azd auth login + ``` + +3. Ejecuta `azd config show` para verificar la suscripción de Azure. Si está vacía o es incorrecta, actualízala con `azd config set defaults.subscription ` y vuelve a ejecutar `azd config show` para confirmar el cambio. +## Generar la estructura inicial de Backer Concierge + +Canvas genera el código, la estructura de carpetas y el archivo `azure.yaml` de la raíz que conectan Backer Concierge con la implementación del modelo existente. + +4. En la versión preliminar de **Create new hosted agents**, introduce: + + ```plaintext + Scaffold a hosted agent named Backer Concierge in agent/backer-concierge, connected to the tailspin-toys project and the model deployment I just confirmed. Use Microsoft Agent Framework with the Responses API. Ground it in db/catalog.json and ensure it meets the acceptance criteria in this issue. Keep a single azure.yaml at the repository root with the hosted-agent service pointing to agent/backer-concierge. Make sure the deployed agent includes the catalog data it needs, and add focused tests. + ``` + + 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/learning-hub/copilot-workshops/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: + + - El agente reside en `agent/backer-concierge`. + - Un único archivo `azure.yaml` en la raíz del repositorio contiene un servicio con `host: azure.ai.agent`. + - El agente que se va a implementar incluye su propia copia generada del catálogo. + - Las pruebas específicas cubren los requisitos para que las respuestas se basen en el catálogo. + - No se incluyen credenciales ni archivos de entorno locales. + + ```text + tailspin-toys/ + ├── azure.yaml + ├── agent/ + │ └── backer-concierge/ + │ └── requirements.txt + ├── db/ + │ └── catalog.json + └── src/ + ``` + +6. Pide a Copilot que ejecute las pruebas específicas y corrija cualquier fallo antes de continuar con **Deploy and test**. + +## Inspeccionar el agente en local + +**Inspect Locally** ejecuta `azd ai agent run` en el terminal integrado de Copilot, espera a que se inicie el agente hospedado y abre Agent Inspector integrado. + +7. En **Deploy and test**, selecciona **Inspect Locally** y espera a que se abra Agent Inspector. + +> [!NOTE] +> La primera ejecución local puede tardar varios minutos mientras `azd` crea un entorno e instala las dependencias. + +8. Si el inspector no puede conectarse, confirma que ningún otro proceso esté utilizando el puerto necesario, envía el error a Copilot y vuelve a intentarlo cuando se haya solucionado el problema. +9. Prueba una **recomendación basada en el catálogo** en Agent Inspector: + + ```text + I love puzzle games about tracking down bugs. What should I back? + ``` + + 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/learning-hub/copilot-workshops/app-8-grounded-recommendation.png) + +10. Prueba una **pregunta trampa para detectar alucinaciones**: + + ```text + How much has Pipeline Conquest raised so far, and how many backers does it have? + ``` + + Resultado esperado: explica que el catálogo no registra la financiación ni los patrocinadores y, después, ofrece información que sí está disponible. + +11. Prueba la **presión para responder sobre juegos ajenos al catálogo**: + + ```text + Do you have Wingspan? If not, what's the closest thing you've got? + ``` + + Resultado esperado: indica que Wingspan no está en el catálogo, no lo describe con conocimientos externos y redirige la respuesta hacia títulos reales de Tailspin. + +12. Prueba una **petición imprecisa**: + + ```text + Recommend me something good. + ``` + + Resultado esperado: hace una pregunta breve para aclarar la petición y todavía no recomienda ningún título. + +13. Prueba la **exactitud de la clasificación**: + + ```text + What are your three highest rated games? + ``` + + Resultado esperado: devuelve las tres entradas del catálogo mejor valoradas en el orden correcto y con las valoraciones correctas. + +14. Prueba la **continuidad de la conversación** enviando estas indicaciones en la misma conversación: + + ```text + Show me two highly rated strategy games. + ``` + + ```text + Which of those has the higher rating? + ``` + + Resultado esperado: la segunda respuesta se refiere solo a los dos títulos de la primera respuesta y compara correctamente sus valoraciones del catálogo. + +15. Compara cada respuesta con `db/catalog.json` y con los criterios de aceptación de la incidencia. Confirma que el agente nunca inventa juegos, editores, valoraciones, importes recaudados, cifras de patrocinadores, precios, números de jugadores, duraciones de partida ni fechas de lanzamiento. Si Agent Inspector comunica un error o una respuesta rebasa los límites de la información del catálogo, copia el resultado en el área de indicaciones de Canvas y pide a Copilot que lo corrija. Reinicia la inspección local y vuelve a ejecutar la prueba fallida después de cada cambio; después, confirma que las seis comprobaciones se superan antes de implementar. + +## Implementar el agente hospedado y volver a probarlo + +Canvas utiliza `azd` para implementar el agente probado. Foundry empaqueta el código fuente del servicio, resuelve las dependencias, lo compila de forma remota y lo publica en Microsoft Foundry. + +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/learning-hub/copilot-workshops/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. + +## Punto de control y pasos siguientes + +Has generado la estructura inicial de Backer Concierge, probado en local su fundamentación en el catálogo y su comportamiento durante la conversación, lo has implementado en Microsoft Foundry y has vuelto a probar la versión hospedada. El punto de control de este módulo es un agente hospedado que supera las seis comprobaciones de aceptación sin inventar información que no está disponible. + +A continuación, usarás el mismo repositorio de Tailspin Toys, la misma rama del worktree, la misma sesión vinculada a la incidencia, el mismo proyecto de Foundry, la implementación del modelo seleccionada y el agente hospedado para [conectar el agente al sitio][next-module]. Si te detienes aquí, [limpia los recursos de Azure][cleanup] para evitar costes continuos. + +[previous-module]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[next-module]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[cleanup]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/#limpiar-los-recursos diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md new file mode 100644 index 000000000..6affa3e1a --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md @@ -0,0 +1,90 @@ +--- +title: "Conectar el agente al sitio" +description: "Integra el Backer Concierge hospedado mediante un proxy local que protege las credenciales y prueba el widget de extremo a extremo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: Crear e implementar el agente +next: { link: /es-es/learning-hub/copilot-workshops/app/10-review/, label: Repaso y pasos siguientes } +--- + +Este último módulo conecta el agente hospedado probado en [Crear e implementar el agente][previous-module] con el sitio web de Tailspin Toys que se ejecuta en local. + +Al terminar, tendrás: + +- Un proxy local de Azure Functions que protege las credenciales de Foundry y los identificadores de conversación. +- Un widget de chat accesible con un comportamiento verificado de extremo a extremo. +- Una integración verificada en local y un punto de control de limpieza de recursos. + +## Escenario + +Quienes apoyan los juegos de Tailspin Toys necesitan asesoramiento sobre el catálogo donde consultan los juegos. Backer Concierge debe conservar la conversación, funcionar con la navegación por teclado y gestionar de forma clara los errores y la información no disponible. Esa comodidad no debe exponer al navegador las credenciales del servicio ni los detalles internos de la conversación. + +## Retomar el punto de control del agente hospedado + +La integración utiliza el agente hospedado existente en lugar de crear nuevos recursos de Foundry. + +1. Retoma el mismo repositorio de Tailspin Toys, la misma rama del worktree y la misma sesión de la incidencia **Add a Backer Concierge assistant for catalog questions** de los módulos anteriores. Confirma que estén presentes el archivo `azure.yaml` de la raíz, el código fuente del agente y el catálogo, y comprueba la suscripción registrada, el grupo de recursos dedicado, el proyecto de Foundry, la implementación del modelo y la versión probada del agente hospedado. +2. Si se eliminaron los recursos, restaura el [proyecto y el modelo][project-module] y la [implementación hospedada probada][previous-module] que correspondan antes de realizar la integración. + +## Crear el proxy del lado del servidor + +Tailspin Toys está completamente prerrenderizado. El código del navegador nunca debe llamar directamente al agente hospedado ni recibir credenciales de Foundry. Un **límite de protección de credenciales del lado del servidor**, implementado con Azure Functions en local, se autentica en Foundry y devuelve al navegador solo la respuesta del agente. El navegador envía cada mensaje con una referencia opaca a la conversación; el proxy asocia esa referencia con la conversación de Foundry sin exponer el identificador subyacente. + +El proxy es la única parte del código que puede acceder a las credenciales de Azure. En este taller, la función y el sitio se ejecutan en local, y el servidor de desarrollo de Astro reenvía las solicitudes de `/api` a la función. + +> [!IMPORTANT] +> Este proxy del taller es solo para desarrollo local. No debe implementarse como un punto de conexión público anónimo. Una integración de producción necesita un diseño de autenticación y control de abusos específico de la aplicación que incluya límites de frecuencia o cuotas adecuados, restricciones de CORS, supervisión y controles de costes. + +3. En la misma sesión de Copilot, introduce: + + ```plaintext + Add a local Azure Functions proxy in api for the static Astro site to call my deployed Backer Concierge during development. Use my existing local Azure sign-in, keep credentials and Foundry conversation identifiers out of the browser, return an opaque conversation handle, validate requests, sanitize errors, and add focused tests. Configure the Astro development server so /api requests reach the local Function. Don't create public deployment infrastructure. + ``` + +4. Revisa el proxy generado y las pruebas específicas para comprobar la validación de solicitudes, los errores sin datos sensibles, las referencias opacas a las conversaciones y el límite de protección de credenciales exclusivo del servidor. Pide a Copilot que ejecute las pruebas específicas y corrija cualquier fallo. +5. Abre otro terminal, inicia la función local con el comando proporcionado por Copilot y déjala en ejecución. +6. Vuelve al chat y pide a Copilot que pruebe el proxy local: + + ```plaintext + Test the local /api/concierge endpoint by asking "Which games are under $30?" Show me the sanitized response and confirm that no credentials or internal conversation identifiers are returned. + ``` + +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/learning-hub/copilot-workshops/app-8-local-proxy-test.png) + +## Crear y probar el widget de chat + +Con el proxy en ejecución, el widget muestra la conversación en el sitio sin exponer detalles de Foundry. + +8. Pide a Copilot que cree la integración del sitio: + + ```plaintext + 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, keep Foundry details out of the browser, and add end-to-end tests covering the chat flow, conversation continuity, accessibility, error handling, and grounding boundaries. + ``` + +9. Inicia el servidor de desarrollo de Astro en otro terminal con el comando proporcionado por Copilot. Mantén en ejecución tanto el sitio como la función local. +10. Pide a Copilot que ejecute las pruebas de extremo a extremo: + + ```plaintext + Run the end-to-end tests for the Backer Concierge widget in the 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. + ``` + +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/learning-hub/copilot-workshops/app-8-e2e-test-results.png) + +## Punto de control y pasos siguientes + +Has creado un proxy local que protege las credenciales, conectado un widget de chat accesible y verificado el flujo completo de la conversación con el Backer Concierge hospedado. El punto de control de este módulo es una integración del sitio web probada en local que conserva los límites del catálogo y mantiene las credenciales y los identificadores internos de Foundry fuera del navegador. No es una implementación de producción del proxy ni del sitio. + +Cuando termines de experimentar, detén ambos servicios locales y [limpia los recursos de Azure][cleanup]. Después, continúa con [Repaso y pasos siguientes][core-review] en la ruta principal del taller. + +[previous-module]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[project-module]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[agent-checks]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/#inspeccionar-el-agente-en-local +[cleanup]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/#limpiar-los-recursos +[core-review]: /es-es/learning-hub/copilot-workshops/app/10-review/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md new file mode 100644 index 000000000..82e7508b5 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md @@ -0,0 +1,89 @@ +--- +title: "Opcional: Incorporar Foundry" +description: "Crea un Backer Concierge basado en el catálogo con Microsoft Foundry Canvas, con puntos seguros para detenerte durante el recorrido." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: { link: /es-es/learning-hub/copilot-workshops/app/10-review/, label: Repaso y pasos siguientes } +next: + link: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: Preparar el proyecto y el modelo +tags: + - workshop +--- + +Este recorrido opcional añade un **Backer Concierge** a Tailspin Toys mediante Microsoft Foundry Canvas en la aplicación GitHub Copilot. Parte de un experimento con un modelo basado en el catálogo, continúa con un agente hospedado y termina con una integración local en el sitio web. + +## El recorrido + +Cada módulo termina con un punto de control y un punto seguro para detenerte. Durante todo el recorrido se mantienen el mismo repositorio de Tailspin Toys, la misma rama del worktree, la misma sesión vinculada a la incidencia, el mismo proyecto de Foundry y la misma implementación del modelo. + +- [Preparar el proyecto y el modelo][module-1] establece los límites del catálogo, crea el proyecto y la implementación del modelo, y los comprueba en Canvas. +- [Crear e implementar el agente][module-2] genera la estructura inicial de Backer Concierge, lo prueba en local, e implementa y vuelve a probar el agente hospedado. +- [Conectar el agente al sitio][module-3] añade un proxy local que protege las credenciales, un widget de chat accesible y pruebas de extremo a extremo. + +> [!IMPORTANT] +> Microsoft Foundry Canvas y los agentes hospedados están en versión preliminar pública. +> +> Este recorrido crea recursos de Azure que generan costes, incluida una implementación de modelo y, a partir del módulo 2, un agente hospedado. Antes de crear recursos, es necesario aprobar la suscripción, la región, la cuota y el coste estimado. La limpieza también se aplica si te detienes tras crear únicamente el proyecto y el modelo. + +1. Empieza por [Preparar el proyecto y el modelo][module-1] y realiza el trabajo en el repositorio de Tailspin Toys, no en este repositorio de contenido del taller. +2. Si prefieres terminar el taller principal, continúa con [Revisión y pasos siguientes][core-review]. + +## Limpiar los recursos + +Cuando termines de experimentar en cualquier punto de control, elimina los recursos de Azure para evitar costes no deseados. La limpieza elimina recursos necesarios para módulos posteriores, por lo que tendrás que volver a crearlos si quieres continuar después. + +> [!WARNING] +> Elimina `rg-tailspin-toys` únicamente si está dedicado a este ejercicio y no contiene ningún recurso que necesites conservar. Si eliminas un grupo de recursos compartido, también se eliminarán recursos que no pertenecen al ejercicio. +> +> Si aprobaste otro nombre para el grupo de recursos en el módulo 1, sustituye `rg-tailspin-toys` por ese nombre en todos los comandos siguientes. + +1. Detén desde sus terminales cualquier proceso local de Agent Inspector, Azure Function o servidor de desarrollo de Astro que hayas iniciado. +2. Si has implementado el agente hospedado en el módulo 2 o 3, abre un terminal en el mismo worktree de Tailspin Toys, usa el mismo entorno de `azd` y ejecuta: + + ```bash + azd down --purge + ``` + +3. Comprueba la suscripción seleccionada y si todavía existe el grupo de recursos del taller: + + ```bash + az account show --output table + az group exists --name rg-tailspin-toys + ``` + + Si el comando devuelve `false`, la limpieza ha terminado. Si devuelve `true`, examina los recursos del grupo: + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + Verifica que todos los recursos restantes pertenezcan a este ejercicio. Si te has detenido después del módulo 1, aún debes limpiar el proyecto de Foundry y el modelo aunque no hayas implementado un servicio de `azd`. +4. Si el grupo de recursos dedicado del taller todavía existe y solo contiene recursos que quieres eliminar, ejecuta: + + ```bash + az group delete --name rg-tailspin-toys --yes --no-wait + ``` + +5. Como `--no-wait` devuelve el control antes de que termine la eliminación, vuelve a ejecutar el comando siguiente hasta que devuelva `false`: + + ```bash + az group exists --name rg-tailspin-toys + ``` + +## Recursos + +La documentación de Microsoft describe Canvas, las implementaciones hospedadas y sus permisos. + +- [¿Qué es Microsoft Foundry Canvas?][foundry-canvas] +- [Implementar el primer agente hospedado con Foundry Canvas][hosted-agent-quickstart] +- [Permisos de los agentes hospedados][hosted-agent-permissions] + +[module-1]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[module-2]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[module-3]: /es-es/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[core-review]: /es-es/learning-hub/copilot-workshops/app/10-review/ +[foundry-canvas]: https://learn.microsoft.com/azure/foundry/agents/concepts/foundry-canvas +[hosted-agent-quickstart]: https://learn.microsoft.com/azure/foundry/agents/quickstarts/quickstart-hosted-agent?pivots=canvas +[hosted-agent-permissions]: https://learn.microsoft.com/azure/foundry/agents/concepts/hosted-agent-permissions diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-review.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-review.md deleted file mode 100644 index f3acdea4f..000000000 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/8-review.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: "Lección 8 - Repaso y pasos siguientes" -description: "Repasa el recorrido de la aplicación GitHub Copilot, automatiza el trabajo recurrente y descubre cómo continuar." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Durante las últimas lecciones, has llevado una funcionalidad desde la idea hasta la combinación mediante la aplicación GitHub Copilot. Entre otras cosas, has aprendido a: - -- conectar un repositorio y familiarizarte con el espacio de trabajo de la aplicación y la lista de trabajo pendiente inicial. -- iniciar sesiones desde una tarea directa y desde incidencias, y utilizar los modos Plan y Autopilot para controlar cómo trabaja el agente. -- orientar al agente con instrucciones personalizadas y una habilidad reutilizable. -- probar el trabajo con el servidor MCP de Playwright en un navegador real. -- colaborar con el agente en un lienzo compartido. -- publicar cambios con niveles crecientes de automatización de combinaciones, desde combinarlos personalmente en github.com hasta permitir que **Agent Merge** incorpore una solicitud de cambios. - -Vamos a automatizar parte del trabajo recurrente, comentar procedimientos recomendados y descubrir cómo continuar. - -## Automatizar el trabajo recurrente - -La aplicación puede ejecutar agentes según una programación o bajo demanda mediante **automatizaciones**, una opción muy útil para tareas rutinarias como clasificar incidencias nuevas o resumir la actividad reciente. Vamos a crear una automatización sencilla y no destructiva. - -1. Selecciona **Automations** en la barra lateral y, después, **New automation**. -2. Asigna un nombre, como `Recap my recent work`. -3. Elige un desencadenador. **Manual** permite ejecutarla bajo demanda; **On a schedule** la ejecuta automáticamente; **When an issue is created** responde a incidencias nuevas. Para esta lección, elige **Manual**. -4. Introduce una indicación de solo lectura para que la automatización no pueda modificar nada, por ejemplo: - - ```plaintext - Summarize the pull requests merged in this repository over the last week, and list any issues still open in the backlog. - ``` - -5. Elige el proyecto, tu repositorio de Tailspin Toys, y crea la automatización. -6. Ejecútala bajo demanda para ver el resultado. - -> [!TIP] -> Las automatizaciones pueden ejecutarse en local o en la nube. Habilita **Run in the cloud** y elige las **Tools** que puede utilizar una automatización cuando quieras que se ejecute sin supervisión según una programación. Mantén las automatizaciones programadas bien delimitadas y sin acciones destructivas hasta que confíes en sus resultados. - -## Procedimientos recomendados - -Al utilizar cualquier herramienta de IA, la infraestructura que la rodea determina la calidad de los resultados. Los archivos de instrucciones, las habilidades y los agentes personalizados han contribuido al trabajo de este taller. Invierte en ellos y reutilízalos entre sesiones. - -Adapta el **modo y el modelo** a la tarea. Utiliza **Plan** para razonar sobre un enfoque antes de desarrollar, **Interactive** para mantener el control durante cambios concretos y **Autopilot** solo para tareas aisladas y bien delimitadas. Elige un modelo más rápido para las modificaciones rutinarias y otro más capaz, con mayor esfuerzo de razonamiento, para el trabajo complejo. - -El contexto sigue siendo tan importante como la infraestructura. Describir con claridad *qué* quieres crear, *por qué* y *cómo* cambia sustancialmente el resultado. Los chats rápidos son un buen lugar para delimitar una idea antes de dedicarle una sesión completa. - -## Más opciones para explorar - -Ya conoces el flujo de trabajo principal. Estas son algunas funcionalidades adicionales que merece la pena explorar: - -- **Quick chats** para preguntas rápidas y desechables que no necesitan una sesión completa. -- **Rubber duck** para razonar sobre un problema y obtener comentarios pertinentes antes de desarrollar. -- [**Agentes personalizados**][custom-agents] para encapsular un rol, sus herramientas y sus instrucciones con el fin de realizar trabajo especializado y repetible. -- [`/chronicle`][chronicle] para generar una narración de lo sucedido en una sesión. -- [Usar tu propia clave (BYOK)][byok] para utilizar modelos de tu propio proveedor, incluidos modelos locales mediante Ollama, Foundry Local o LM Studio. -- [Entornos aislados en la nube][sandboxes] para ejecutar sesiones en un entorno aislado hospedado en GitHub. -- [Vínculos profundos][deep-links] para abrir la aplicación directamente en un repositorio, una sesión o una indicación. - -## Pasos siguientes - -La mejor forma de mejorar con cualquier herramienta es seguir utilizándola. Úsala para código de producción, proyectos personales o esa pequeña aplicación que llevas años pensando en crear. Comparte lo que aprendas con el equipo y aprende de sus experiencias. Y, como siempre, consulta la documentación. - -Para explorar más elementos del ecosistema de GitHub Copilot, consulta el [recorrido de VS Code](/es-es/learning-hub/copilot-workshops/vscode/), el [recorrido de Copilot CLI](/es-es/learning-hub/copilot-workshops/cli/) o el [recorrido del agente en la nube](/es-es/learning-hub/copilot-workshops/cloud/). - -## Recursos - -- [Acerca de la aplicación GitHub Copilot][about-copilot-app] -- [Introducción a la aplicación GitHub Copilot][getting-started] -- [Personalizar la aplicación GitHub Copilot][customize] -- [Utilizar automatizaciones][using-automations] -- [Trabajar con extensiones de lienzo][canvas-docs] -- [Acerca de los entornos aislados locales y en la nube][sandboxes] - -[about-copilot-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 -[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle -[custom-agents]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents -[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models -[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/9-canvases.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/9-canvases.md new file mode 100644 index 000000000..5fca1de8e --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/9-canvases.md @@ -0,0 +1,117 @@ +--- +title: "Lección 9 - Explorar y crear lienzos" +description: "Utiliza el lienzo Database Explorer existente y, después, crea y revisa un lienzo de clasificación respaldado por el repositorio." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Hasta ahora has dirigido a los agentes mediante el chat. Sin embargo, gran parte del trabajo no reside en una conversación, sino en un tablero, un documento o una lista de comprobación. Los **lienzos** ofrecen al agente y a ti una superficie compartida para ese tipo de trabajo, directamente en la aplicación. En esta lección utilizarás primero un lienzo incluido con Tailspin Toys y, después, crearás otro para la lista de trabajo pendiente que has estado abordando. + +En esta lección: + +- comprenderás qué es un lienzo y cuándo utilizarlo. +- utilizarás el lienzo Database Explorer existente para examinar los datos del proyecto. +- crearás un lienzo compartido con un tablero Kanban para clasificar la lista de trabajo pendiente. +- examinarás y probarás el nuevo lienzo sin implementar otra funcionalidad. + +## Escenario + +Tailspin Toys ya incluye un lienzo para explorar su base de datos. Después de utilizarlo para comprender cómo transforma un lienzo los datos del proyecto en una superficie interactiva, crearás un tablero reutilizable para elegir en qué trabajar a continuación sin iniciar otra funcionalidad. + +## ¿Qué es un lienzo? + +Un [lienzo][canvas-docs] es una superficie interactiva y compartida para un recurso de trabajo, como un plan, un tablero de clasificación, una lista de comprobación de versiones, un panel o un documento. Aunque el chat resulta adecuado para describir intenciones y razonar sobre ambigüedades, la mayor parte del trabajo se realiza en una *superficie*. Los lienzos permiten colaborar con el agente directamente sobre ella. + +Los lienzos son **bidireccionales**: el agente puede actualizar el lienzo mientras trabaja y tú puedes editar la misma superficie. Cuando creas un lienzo, el agente lo genera a partir de la indicación y el flujo de trabajo, y puedes pedirle que añada, elimine o revise capacidades a medida que avanzas. Una vez creado, el lienzo se abre en el panel derecho de la aplicación. + +Algunos ejemplos habituales son: + +- **Lienzos de Markdown** para planificar el día y priorizar incidencias y solicitudes de incorporación de cambios. +- **Tableros Kanban con agentes** en los que las personas y los agentes añaden tarjetas y desplazan el trabajo entre columnas. +- **Tableros de clasificación de incidencias** que resumen las incidencias principales y los temas recurrentes de un repositorio. + +## ¿Por qué utilizar un lienzo? + +Utiliza un lienzo cuando una tarea requiera estructura, iteración y verificación, y un chat no sea suficiente. Un lienzo permite: + +- basar el trabajo del agente en un recurso real que se adapte al flujo de trabajo. +- orientar o corregir el trabajo directamente en la superficie compartida y, después, permitir que el agente continúe a partir de los cambios. +- inspeccionar el progreso como cambios visibles en un recurso, no solo como respuestas del chat. + +## Utilizar el lienzo Database Explorer + +Empieza con el lienzo Database Explorer existente del proyecto. Utilizar un ejemplo funcional permite observar cómo se comporta un lienzo limitado al repositorio antes de crear uno. + +1. Confirma que la solicitud de incorporación de cambios (PR) de filtrado está combinada y actualiza la rama `main` local. +2. Vuelve a la aplicación GitHub Copilot y selecciona **Home screen**. +3. Confirma que `tailspin-toys` es el repositorio seleccionado. +4. Crea una sesión en un **new working tree** basado en la rama `main` actualizada y selecciona el modo **Interactive**. +5. Pide a Copilot que prepare la base de datos local si es necesario y abra el lienzo existente sin modificarlo: + + ```plaintext + Set up the local database if needed, then open the repository's Database Explorer canvas. Do not change any files. + ``` + +6. En Database Explorer, examina las tablas disponibles y selecciona `games`. +7. Ejecuta una consulta de solo lectura que muestre cinco juegos con una valoración alta: + + ```sql + SELECT title, star_rating + FROM games + ORDER BY star_rating DESC + LIMIT 5; + ``` + +8. Confirma que los resultados contienen cinco juegos como máximo, ordenados por valoración descendente. +9. Abre **Files** y examina `.github/extensions/database-explorer/extension.mjs`. Observa cómo se guarda el lienzo con el proyecto y restringe las consultas a instrucciones `SELECT` y `WITH` de solo lectura. +10. Confirma que la sesión no contiene cambios de archivos. + +## Crear un lienzo para clasificar incidencias + +Ahora crea otro tipo de superficie compartida. Al guardar el lienzo de clasificación en el ámbito del proyecto, se convierte en un recurso del repositorio que el equipo puede revisar y reutilizar. + +1. En la misma sesión, introduce `/create-canvas` y describe el lienzo que quieres crear: + + ```plaintext + Create a Kanban triage canvas for this repo's open issues and save it under .github/extensions/. Highlight the three issues you'd prioritize and explain why, with the rest below. Include summaries and links. + + Give each card an "Add to current context" action that adds the issue details without starting work or changing the issue. Make it keyboard-accessible and open it so I can try it. + ``` + +Copilot crea la extensión del lienzo en `.github/extensions` y abre la superficie compartida en el panel derecho de la aplicación. La extensión generada es contenido ejecutable del repositorio, no solo un recurso visual, por lo que a continuación examinarás sus archivos y su comportamiento. + +## Examinar y probar el lienzo + +Antes de compartir el lienzo, compáralo con las incidencias reales del repositorio y prueba sus controles. Así confirmarás que el contenido es preciso, que la interacción es accesible y que la acción de la incidencia añade contexto sin iniciar trabajo. + +1. Abre **Changes** y confirma que la definición del lienzo se guarda en el repositorio bajo `.github/extensions/`, no solo para tu usuario o sesión. Comprueba que las extensiones existentes y los archivos de la aplicación no han cambiado. +2. Compara el tablero con las incidencias abiertas reales y evalúa las explicaciones de la clasificación. +3. Comprueba que las tarjetas y los controles se leen bien y se pueden utilizar con teclado. +4. Selecciona **Add to current context** en una incidencia y confirma que solo sus detalles se añaden a la conversación. No debe iniciarse ninguna implementación ni cambio de estado de la incidencia. +5. Revisa las correcciones y pide a Copilot que ejecute la validación existente aplicable a los archivos modificados. Registra resultados y bloqueos, en lugar de suponer que una superficie interactiva funciona correctamente solo porque se ha abierto. +6. Si el lienzo necesita cambios, solicita mejoras específicas dentro del alcance de clasificación y repite las comprobaciones afectadas. No implementes una de las incidencias pendientes como parte de este trabajo del lienzo. + +El taller termina antes de crear otra PR porque ya has practicado tanto la combinación manual como Agent Merge. En un entorno de producción, revisa y combina el lienzo mediante el proceso habitual del equipo antes de que otros dependan de él. + +## Resumen y pasos siguientes + +Has creado una superficie compartida en la que puedes colaborar con el agente. En concreto: + +- has comprendido qué es un lienzo y cuándo utilizarlo. +- has utilizado el lienzo Database Explorer existente para examinar los datos del proyecto. +- has creado un lienzo compartido con un tablero Kanban para clasificar la lista de trabajo pendiente. +- has examinado y probado el nuevo lienzo sin implementar otra funcionalidad. + +Con la lista de trabajo pendiente organizada, da un paso atrás para revisar todo lo que has creado y descubrir cómo continuar. Continúa con la [Lección 10 - Repaso y pasos siguientes][next-lesson]. + +## Recursos + +- [Trabajar con extensiones de lienzo en la aplicación GitHub Copilot][canvas-docs] +- [Lienzos en Awesome Copilot][awesome-copilot-canvases] +- [Acerca de la aplicación GitHub Copilot][about-copilot-app] + +[next-lesson]: /es-es/learning-hub/copilot-workshops/app/10-review/ +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/index.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/index.md index d1d367d4e..3ba917eb3 100644 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/index.md +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/app/index.md @@ -2,12 +2,26 @@ title: "Aplicación GitHub Copilot" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- La [**aplicación GitHub Copilot**](https://docs.github.com/copilot/concepts/agents/github-copilot-app) es una aplicación de escritorio basada en Copilot CLI que reúne el desarrollo dirigido por agentes en un único espacio de trabajo específico. Añade sesiones de agente en paralelo, modos de sesión intercambiables, lienzos compartidos y gestión nativa de incidencias y solicitudes de incorporación de cambios de GitHub, incluido **Agent Merge**, que guía una solicitud durante reorganizaciones de base, comentarios de revisión, correcciones de CI y la combinación. -A lo largo de estas lecciones instalarás la aplicación y configurarás el proyecto. Después, conocerás el espacio de trabajo de la aplicación y la lista de trabajo pendiente que la plantilla ha creado para ti. Empezarás con un cambio pequeño, añadir una valoración por estrellas, y luego añadirás desde una incidencia un estándar de instrucciones personalizadas, crearás una funcionalidad de filtrado en una sesión de agente aislada y la verificarás con una habilidad reutilizable. Añadirás el servidor MCP de Playwright para explorar la funcionalidad en un navegador real y avanzarás por niveles crecientes de automatización de combinaciones hasta que **Agent Merge** incorpore la solicitud. Por último, colaborarás en un lienzo compartido y automatizarás el trabajo recurrente: un ciclo completo desde la idea hasta una funcionalidad combinada. +El taller sigue un único flujo continuo de Tailspin Toys: + +1. Prepara el proyecto, instala la aplicación, conecta el repositorio y explora el espacio de trabajo y la lista de trabajo pendiente inicial. +2. Realiza un cambio específico de valoraciones por estrellas, revísalo en el navegador y combina manualmente tu primera solicitud de incorporación de cambios (PR). +3. Parte de la incidencia de filtrado, define el enfoque en modo **Plan**, desarróllalo en modo **Autopilot** y revísalo en modo **Interactive**. +4. Actualiza las instrucciones del repositorio y aplícalas al trabajo de filtrado. +5. Personaliza la habilidad `quality-checks` existente y úsala para ejecutar las comprobaciones del proyecto. +6. Añade el servidor Model Context Protocol (MCP) de Playwright y úsalo para explorar el filtrado en un navegador. +7. Crea un agente personalizado de control de calidad (QA) y úsalo para revisar los requisitos, la cobertura y las pruebas de verificación. +8. Revisa el cambio completo de filtrado y utiliza Agent Merge para la segunda PR. +9. Usa el lienzo Database Explorer existente y, después, crea y prueba un lienzo de clasificación respaldado por el repositorio. + +Para mantener el taller centrado, crearás dos PR: una para las valoraciones por estrellas y otra para el filtrado con las actualizaciones de instrucciones y de la habilidad, el perfil QA y las pruebas. Empieza cada una desde `main` actualizado. El flujo de filtrado y calidad comparte una sesión, un worktree y una rama para que puedas aprovechar el trabajo realizado mientras exploras cada herramienta. El ejercicio final del lienzo permanece en su propia sesión para que puedas centrarte en crear y probar la superficie compartida en lugar de repetir el flujo de PR. ## Lecciones @@ -15,13 +29,15 @@ A lo largo de estas lecciones instalarás la aplicación y configurarás el proy |--------|-------|-------------| | [0. Requisitos previos][ex0] | Configuración | Instala Node.js y crea tu copia del proyecto Tailspin Toys | | [1. Instalar la aplicación Copilot][ex1] | Configuración | Instala la aplicación, conecta el proyecto y familiarízate con el espacio de trabajo | -| [2. Ejecutar tu primera sesión de agente][ex2] | Primer cambio | Inicia una sesión y publica un pequeño cambio como tu primera solicitud de incorporación de cambios | -| [3. Guiar a Copilot con instrucciones personalizadas][ex3] | Contexto | Añade un estándar de documentación desde una incidencia y combínalo | -| [4. Crear una funcionalidad con Autopilot][ex4] | Funcionalidad principal | Utiliza Plan y Autopilot para crear el filtrado y verifícalo con una habilidad | -| [5. Realizar pruebas con MCP de Playwright][ex5] | Herramientas externas | Añade el servidor MCP de Playwright y explora la funcionalidad en un navegador | -| [6. Combinar cambios con Agent Merge][ex6] | Combinación | Deja que Agent Merge corrija e incorpore la solicitud de filtrado | -| [7. Planificar con lienzos][ex7] | Colaboración | Crea un lienzo compartido para planificar y realizar el seguimiento del trabajo | -| [8. Repaso y pasos siguientes][ex8] | Resumen | Automatiza tareas recurrentes y descubre cómo continuar | +| [2. Añadir valoraciones por estrellas: una mejora rápida][ex2] | Primer cambio | Muestra las valoraciones existentes y la alternativa para null y combina la PR 1 | +| [3. Modos de agente: Plan y Autopilot][ex3] | Modos de agente | Planifica la funcionalidad desde su incidencia, desarróllala con Autopilot y revísala en modo Interactive | +| [4. Guiar a Copilot con instrucciones personalizadas][ex4] | Contexto | Explora y actualiza las instrucciones y aplícalas al filtrado | +| [5. Personalizar y utilizar una habilidad quality-checks][ex5] | Comprobaciones repetibles | Explora la habilidad existente, cambia el formato de su informe y ejecútala | +| [6. Validar la funcionalidad con MCP de Playwright][ex6] | Observación en el navegador | Configura MCP mediante Customize y examina el comportamiento del filtrado | +| [7. Crear y utilizar un agente QA][ex7] | Requisitos y cobertura | Crea y selecciona un perfil especializado y reúne las pruebas de verificación finales | +| [8. Crear y combinar la PR de la funcionalidad][ex8] | Revisión y combinación | Revisa el filtrado, las instrucciones, la habilidad, el perfil QA y las pruebas y utiliza Agent Merge para la segunda PR | +| [9. Explorar y crear lienzos][ex9] | Colaboración | Usa Database Explorer y, después, crea y prueba un lienzo de clasificación respaldado por el repositorio | +| [10. Repaso y pasos siguientes][ex10] | Resumen | Revisa el flujo, los recursos creados y otros materiales | ## Requisitos previos @@ -47,11 +63,13 @@ Antes de asistir a este taller, asegúrate de disponer de: [ex0]: /es-es/learning-hub/copilot-workshops/app/0-prerequisites/ [ex1]: /es-es/learning-hub/copilot-workshops/app/1-install-copilot-app/ [ex2]: /es-es/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /es-es/learning-hub/copilot-workshops/app/3-custom-instructions/ -[ex4]: /es-es/learning-hub/copilot-workshops/app/4-build-filtering/ -[ex5]: /es-es/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[ex6]: /es-es/learning-hub/copilot-workshops/app/6-agent-merge/ -[ex7]: /es-es/learning-hub/copilot-workshops/app/7-canvases/ -[ex8]: /es-es/learning-hub/copilot-workshops/app/8-review/ +[ex3]: /es-es/learning-hub/copilot-workshops/app/3-agent-modes/ +[ex4]: /es-es/learning-hub/copilot-workshops/app/4-custom-instructions/ +[ex5]: /es-es/learning-hub/copilot-workshops/app/5-agent-skills/ +[ex6]: /es-es/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[ex7]: /es-es/learning-hub/copilot-workshops/app/7-qa-agent/ +[ex8]: /es-es/learning-hub/copilot-workshops/app/8-create-pull-request/ +[ex9]: /es-es/learning-hub/copilot-workshops/app/9-canvases/ +[ex10]: /es-es/learning-hub/copilot-workshops/app/10-review/ [install-git]: https://github.com/git-guides/install-git [callout-student-plan-education]: https://github.com/education/students \ No newline at end of file diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 000000000..030e477ea --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "Lección 0 - Requisitos previos y configuración" +description: "Comprueba los requisitos previos del taller, instala la aplicación GitHub Copilot y familiarízate con su área de trabajo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Antes de crear el Space Quiz, confirma que tienes lo necesario, instala la aplicación GitHub Copilot y familiarízate con su área de trabajo. + +En esta lección: + +- comprobarás los requisitos previos del taller. +- instalarás la aplicación GitHub Copilot e iniciarás sesión. +- elegirás un modelo para las sesiones. +- identificarás las principales áreas de trabajo de la aplicación. +- probarás un chat rápido. + +## Requisitos previos + +Necesitas: + +- una cuenta de GitHub. [Crea una cuenta de GitHub][github-signup] o utiliza tu cuenta existente. +- un plan activo de Copilot. [Activa Copilot Free o un plan de pago de Copilot][copilot-plans]. Si tu organización ya te proporciona acceso a Copilot, utiliza esa cuenta. +- un ordenador con macOS, Windows o Linux. + +La aplicación incluye Git, así que no hay nada más que instalar. + +> [!NOTE] +> Si utilizas Copilot Business o Copilot Enterprise, tu administrador debe habilitar la directiva **Copilot CLI** para que funcionen las sesiones de agente. + +## Instala y configura la aplicación + +1. Descarga e instala la [aplicación GitHub Copilot][download-app] para tu sistema operativo. +2. Abre la aplicación. +3. Selecciona **Sign in to GitHub** y autentícate. +4. Elige un tema y selecciona **Finish**. + +## Elige un modelo + +Sigue este orden de preferencia al elegir un modelo y selecciona la primera opción que tengas disponible: + +1. **GPT-6-Luna** (recomendado). +2. **Auto**, como alternativa equilibrada. +3. Cualquier modelo de la [lista de modelos activos][active-models]. + +La disponibilidad de los modelos depende de tu plan, de la directiva de la organización y de la versión del producto. + +## Familiarízate con la aplicación + +La aplicación reúne el flujo de trabajo de desarrollo en un solo lugar: + +- **New**: inicia una sesión en un proyecto o elige **Chat** para una pregunta rápida. +- **Pull requests**: revisa y sigue tus solicitudes de incorporación de cambios en todos los repositorios. +- **Issues**: busca incidencias que tengas asignadas, que hayas creado o que te mencionen. +- **Automations**: programa tareas recurrentes del agente en un repositorio. +- **Customize**: cambia los temas y los modelos y gestiona las extensiones de Canvas. +- **Projects**: abre tus repositorios; las sesiones de cada uno aparecen debajo. + +## Prueba un chat rápido + +No todas las preguntas necesitan un área de trabajo. Desde **New**, elige **Chat** en lugar de un proyecto. Un chat no tiene ningún repositorio asociado y no puede editar archivos, así que es la forma más rápida de hacer una pregunta, obtener una explicación o pensar en un enfoque antes de iniciar una sesión de trabajo. + +Envía el siguiente prompt en un chat: + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +## Resumen y pasos siguientes + +Has comprobado los requisitos previos, instalado la aplicación, elegido un modelo y explorado sus principales áreas de trabajo. Continúa con la [lección 1: Crear el área de trabajo de Space Quiz][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[download-app]: https://gh.io/app +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 000000000..0422a888d --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "Lección 1 - Crear el área de trabajo de Space Quiz" +description: "Inicia una sesión local Interactive para Space Quiz en una carpeta vacía." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Crea un área de trabajo local para Space Quiz y configura una sesión que te permita mantener el control cuando el agente empiece a trabajar. + +En esta lección: + +- abrirás una carpeta local vacía. +- iniciarás una sesión de agente Interactive. +- confirmarás la carpeta, el modo y el modelo antes del primer prompt. + +## Crea el área de trabajo + +1. Abre la aplicación GitHub Copilot y confirma que has iniciado sesión. +2. Selecciona **New**, después **Open folder**, y elige una carpeta vacía llamada `space-quiz`. Si no existe, créala primero. +3. Establece el modo de sesión en **Interactive**. +4. Elige el modelo que prefieras siguiendo el [orden de preferencia de la lección 0][model-order]. +5. Selecciona **Create**. La sesión se abre vacía y espera tu primer prompt. + +![Ilustración de la pantalla New de la aplicación Copilot con un cuadro de prompt, los selectores de modo Interactive, modelo Auto y agente Default, y la carpeta space-quiz en la rama main de Local.](/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg) + +En la pantalla **New** estableces la carpeta, el modo y el agente antes de escribir el primer prompt. Una sesión Interactive te permite dirigir el trabajo y revisar cada etapa mientras el agente crea el proyecto. + +## Resumen y pasos siguientes + +Tu área de trabajo vacía de Space Quiz está lista. Continúa con la [lección 2: Crear y perfeccionar el cuestionario][next-lesson]. + +[model-order]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/#elige-un-modelo +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md new file mode 100644 index 000000000..d96fc6d51 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "Lección 10 - Continuar una sesión de forma remota (opcional)" +description: "Utiliza /remote para seguir una sesión de la aplicación en curso desde la web o la aplicación móvil GitHub Copilot mientras sigue ejecutándose en tu equipo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Esta lección es opcional y merece la pena dejarla para cuando te resulte natural el ciclo de trabajo local. El comando `/remote` mantiene la sesión en ejecución local y, al mismo tiempo, la hace accesible desde la web y la aplicación móvil GitHub Copilot. El equipo debe permanecer encendido mientras sigues la sesión desde otro dispositivo. + +En esta lección: + +- harás que una sesión en curso esté disponible de forma remota. +- seguirás la sesión desde el explorador o la aplicación móvil GitHub Copilot. +- revisarás los cambios resultantes como los de cualquier otra solicitud de incorporación de cambios. + +## Continúa una sesión de forma remota + +1. Abre una sesión que tenga trabajo en curso. +2. Ejecuta `/remote` para que esa sesión esté disponible de forma remota. +3. Abre en el explorador el enlace que devuelve o accede a la sesión desde la aplicación móvil GitHub Copilot. +4. Sigue su progreso desde allí y revisa los cambios exactamente como lo harías con cualquier otra solicitud de incorporación de cambios. + +> [!NOTE] +> **Esto no es delegación** +> +> La sesión sigue ejecutándose en tu equipo. No estás entregando la tarea a otro agente ni trasladándola a la nube. + +## Resumen y pasos siguientes + +Has hecho que una sesión local esté disponible desde otro dispositivo. Continúa con la [lección 11: Explorar un Canvas][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md new file mode 100644 index 000000000..29364a252 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "Lección 11 - Explorar un Canvas" +description: "Instala un Canvas de Repository Issues Kanban e inicia una sesión desde una tarjeta de incidencia." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Un **Canvas** es un espacio compartido y bidireccional donde tú y un agente podéis actualizar el mismo plan, tablero, lista de comprobación o panel. Explora un Canvas Kanban que convierte las incidencias del repositorio en un flujo de trabajo visual. + +En esta lección: + +- instalarás una extensión de Canvas. +- conectarás el Canvas al repositorio de Space Quiz. +- moverás una incidencia al trabajo activo. +- inspeccionarás la sesión creada a partir de la incidencia. + +## Instala el Canvas de Repository Issues Kanban + +1. Explora la [galería de extensiones de Canvas][canvas-gallery]. +2. Abre la [extensión Repository Issues Kanban][kanban-extension]. +3. Selecciona **Install in GitHub Copilot app** y aprueba la instalación. +4. En la aplicación, abre **Customize** y después **Canvas**. +5. Confirma que la extensión está instalada. + +## Empieza a trabajar desde el Canvas + +1. Selecciona **New session** para el Canvas. +2. Elige el proyecto `space-quiz`. +3. Explora el tablero de incidencias. +4. Mueve una tarjeta de incidencia a la columna de trabajo activo. +5. Abre la sesión generada automáticamente. +6. Confirma que la incidencia seleccionada está disponible como contexto de la sesión. + +![Ilustración del Canvas de Repository Issues Kanban con las columnas Backlog, Plan, Ready e Implement. La incidencia 13, Pantalla de revisión, se está arrastrando de Backlog a la columna Plan, mientras que la incidencia 12, Temporizador por pregunta, permanece en Backlog.](/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg) + +Cuando sueltas una tarjeta en una columna, el Canvas entrega esa incidencia a una nueva sesión con la incidencia ya cargada. + +> [!NOTE] +> La extensión actual de Repository Issues Kanban mueve las tarjetas mediante arrastrar y soltar con un dispositivo de puntero. Si no puedes utilizar esa interacción, anota el número de la incidencia en el tablero, abre la incidencia desde **Issues** y selecciona **New session**. Esto crea la misma sesión basada en la incidencia sin mover la tarjeta. + +El Canvas ofrece una forma visual de seleccionar y comenzar el trabajo mientras mantiene al agente centrado en la incidencia. + +## Resumen y pasos siguientes + +Has utilizado un espacio visual compartido para iniciar una sesión de agente. Continúa con la [lección 12: Repaso y pasos siguientes][next-lesson]. + +[canvas-gallery]: https://awesome-copilot.github.com/extensions/ +[kanban-extension]: https://awesome-copilot.github.com/extension/accessibility-kanban/ +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md new file mode 100644 index 000000000..25d0354e4 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "Lección 12 - Repaso y pasos siguientes" +description: "Repasa el flujo de trabajo de la aplicación GitHub Copilot y encuentra recursos para seguir aprendiendo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Has dirigido a un agente por un flujo de trabajo de desarrollo completo, desde una carpeta vacía hasta el trabajo planificado, una implementación aislada, la revisión de código, la automatización, el acceso remoto a una sesión y un Canvas visual. + +## Qué has completado + +Has: + +- creado un proyecto local en modo Interactive. +- creado y perfeccionado un cuestionario con información del explorador en tiempo real. +- inspeccionado los detalles de la sesión y ejecutado una prueba de humo en el explorador. +- recogido las reglas del proyecto con `/init`. +- publicado el proyecto como repositorio de GitHub. +- creado un backlog bien delimitado. +- implementado una incidencia en un árbol de trabajo aislado y revisado las diferencias. +- planificado una segunda incidencia antes de cambiar el código. +- entregado una incidencia mediante la revisión de una solicitud de incorporación de cambios y Agent Merge. +- automatizado la clasificación semanal de incidencias. +- seguido una sesión local de forma remota. +- explorado un Canvas Kanban compartido. + +## Sigue explorando + +- [Conoce la aplicación GitHub Copilot][about-app]. +- [Consulta la guía oficial de primeros pasos][getting-started]. +- [Aprende a trabajar con sesiones de agente][agent-sessions]. +- [Gestiona incidencias y solicitudes de incorporación de cambios en la aplicación][issues-and-prs]. +- [Conoce la revisión de código de Copilot][code-review]. +- [Crea y utiliza extensiones de Canvas][canvas-extensions]. +- [Sigue las prácticas recomendadas para escribir prompts eficaces con código real][best-practices]. +- [Compara los planes de Copilot][copilot-plans]. + +Crea el mismo Space Quiz con una forma de trabajo diferente en el [taller de primeros pasos con Copilot CLI][first-steps-cli] o en el [taller de primeros pasos con Visual Studio Code][first-steps-vscode]. Si estás listo para un escenario más profundo con una aplicación completa y el backlog de un equipo, continúa con el [taller de desarrollo en escenarios reales con la aplicación GitHub Copilot][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 +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-cli]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-app]: /es-es/learning-hub/copilot-workshops/app/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 000000000..f688b34b7 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "Lección 2 - Crear y perfeccionar el cuestionario" +description: "Crea un Space Quiz en un solo archivo y perfecciónalo con el explorador integrado y el selector de elementos." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Utiliza un único prompt detallado para crear el Space Quiz, comprueba su comportamiento en el explorador integrado y realiza un ajuste visual con el selector de elementos. + +En esta lección: + +- crearás un cuestionario sin dependencias en `index.html`. +- probarás el cuestionario en el explorador integrado. +- inspeccionarás el código generado. +- perfeccionarás un elemento seleccionado sin perder la accesibilidad. + +## Crea el cuestionario + +Envía el siguiente prompt en tu sesión `space-quiz`: + +```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. +``` + +Cuando el agente termine, responde a varias preguntas y confirma que: + +- la barra de progreso avanza. +- la puntuación se actualiza. +- las respuestas correctas muestran un estado verde. +- las respuestas incorrectas utilizan una animación de sacudida roja. +- la pantalla de resultados aparece después de la última pregunta. + +## Inspecciona el código generado + +Contrae la barra lateral izquierda y el panel del explorador de la derecha y, después, revisa `index.html` en el área de código ampliada. Observa cómo HTML, CSS y JavaScript funcionan juntos en un único archivo. Restaura ambos paneles cuando termines. + +## Perfecciona con el selector de elementos + +1. Selecciona el selector de elementos en la barra de herramientas del explorador. +2. Selecciona el encabezado del cuestionario o el área de respuestas. +3. Envía el siguiente 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. Observa cómo se actualiza el explorador integrado y comprueba el cambio. + +## Ajustes opcionales + +Si quieres seguir experimentando, pide al agente que: + +- añada un fondo sutil de estrellas que respete `prefers-reduced-motion`. +- haga que la pantalla de resultados sea más festiva cuando la puntuación sea de 8 o más. +- mejore los estados de foco del teclado y, después, comprueba el cuestionario sin ratón. + +## Resumen y pasos siguientes + +Has creado, inspeccionado y perfeccionado el Space Quiz. Continúa con la [lección 3: Inspeccionar la sesión y probar el cuestionario][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 000000000..56941250f --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "Lección 3 - Inspeccionar la sesión y probar el cuestionario" +description: "Lee los detalles de la sesión para confirmar en qué trabaja el agente y ejecuta una prueba de humo en el explorador antes de que Git escriba nada." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Ahora que la sesión ha realizado trabajo real, ya hay algo que inspeccionar. Confirma sobre qué está trabajando el agente y, después, deja que maneje el cuestionario en el explorador integrado e informe de lo que ha ocurrido realmente, no de lo que pretendía hacer. + +En esta lección: + +- leerás el panel de detalles de la sesión. +- comprobarás el proyecto, la ruta, la rama, los cambios y el uso del contexto de la sesión. +- ejecutarás una prueba de humo en el explorador y corregirás los fallos. + +## Lee los detalles de la sesión + +Los detalles de la sesión te indican exactamente en qué trabaja el agente. No necesitas vigilar este panel constantemente, pero todo lo que contiene importa cuando un resultado te sorprende. + +![Ilustración del panel de detalles de la sesión de la aplicación Copilot para la sesión de creación de Space Quiz. Muestra la rama main desde origin/main, la ruta, el proyecto, el nombre y el ID de la sesión, el agente, un archivo modificado, los recuentos de tokens, un uso del contexto del 27 %, el gasto de la sesión y opciones para habilitar el control remoto, cambiar el nombre, ver información, compartir como gist secreto o archivar la sesión.](/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg) + +El panel muestra dónde se realiza el trabajo, qué ha cambiado y cuánto se ha llenado la ventana de contexto. No hay ninguna fila de modelo, porque eliges el modelo para cada solicitud en el cuadro de redacción. + +1. Confirma que **project**, **path** y **branch** corresponden al proyecto, la ruta y la rama que crees estar editando. +2. Lee **Changes** para ver si esta sesión ha modificado algo. +3. Comprueba **context usage**. A medida que aumenta, al agente le queda menos espacio para tu tarea, y esa es la señal para iniciar una sesión nueva. + +> [!TIP] +> **La mayoría de los malos resultados son problemas de contexto** +> +> Una rama incorrecta, una carpeta equivocada o una ventana de contexto casi llena explican muchas más sorpresas que un mal prompt. + +## Prueba antes de que Git escriba nada + +El explorador integrado es un explorador real, así que el agente puede manejar el cuestionario y comprobar su comportamiento. Envía el siguiente prompt: + +```plaintext +Run a browser-level smoke test for the quiz in the integrated browser. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Observa el explorador integrado mientras el agente recorre las preguntas. +2. Si algo falla, deja que el agente lo corrija y vuelva a ejecutar la prueba hasta que todo pase. +3. Continúa solo cuando la creación del proyecto y las pruebas se hayan completado correctamente. + +Todavía no se ha escrito nada en Git. El siguiente paso es `/init`, que lee el proyecto tal como está, así que conviene asegurarte primero de que funciona. + +## Resumen y pasos siguientes + +Has confirmado en qué trabaja la sesión y comprobado el cuestionario con una prueba de humo en el explorador. Continúa con la [lección 4: Recoger las instrucciones del proyecto][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 000000000..5175aaf7c --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lección 4 - Recoger las instrucciones del proyecto" +description: "Ejecuta /init para generar instrucciones del agente que describan el Space Quiz terminado y adáptalas a tu forma de trabajar." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Ahora que el cuestionario está creado, perfeccionado y probado, recoge cómo deben tratar este proyecto las sesiones futuras. Cada sesión lee las instrucciones del agente antes de empezar a trabajar, así que te ahorran repetir las mismas directrices en cada prompt. + +En esta lección: + +- generarás instrucciones del agente con `/init`. +- revisarás el archivo generado antes de aceptarlo. +- reducirás y personalizarás las instrucciones. + +## Recoge las reglas con `/init` + +1. Ejecuta `/init` en la sesión de la aplicación. +2. Revisa el archivo de instrucciones del agente generado antes de aceptarlo. +3. Redúcelo a directrices que reflejen este proyecto: un único archivo, sin dependencias, accesible y probado en el explorador. + +> [!IMPORTANT] +> **¿Por qué después de perfeccionarlo?** +> +> `/init` lee el proyecto tal como existe en ese momento. Ejecutarlo después de crear y probar el cuestionario produce instrucciones que describen código real en lugar de una carpeta vacía. + +## Adáptalo a ti + +El archivo de instrucciones no sirve solo para recoger datos del proyecto. Añade los detalles que de otro modo repetirías en cada prompt, como tu forma preferida de escribir código, las convenciones de nomenclatura, las bibliotecas que deben evitarse y la cantidad de comentarios que quieres. Cada sesión futura lee este archivo antes de leer tu prompt. + +## Resumen y pasos siguientes + +El proyecto ya tiene instrucciones del agente basadas en código real. Continúa con la [lección 5: Publicar el proyecto][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md new file mode 100644 index 000000000..0722ace6a --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "Lección 5 - Publicar el proyecto" +description: "Convierte el experimento local de Space Quiz en un repositorio público de GitHub." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Publica el Space Quiz para poder gestionar incidencias, utilizar árboles de trabajo aislados y completar un flujo de trabajo de solicitudes de incorporación de cambios. + +En esta lección: + +- inicializarás la carpeta como repositorio de Git. +- crearás un repositorio público de GitHub y enviarás los cambios. +- vincularás el proyecto a GitHub en la aplicación Copilot. + +## Publica el repositorio + +Envía el siguiente 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] +> El agente pedirá confirmación antes de crear un repositorio o enviar código. Revisa la acción propuesta y el destino antes de aprobarla. + +Cuando el agente termine: + +1. Abre el nuevo repositorio en GitHub. +2. Confirma que `index.html` está presente. +3. Vuelve a la aplicación Copilot y confirma que el proyecto está vinculado al repositorio. + +## Resumen y pasos siguientes + +El proyecto ya es un repositorio de GitHub. Continúa con la [lección 6: Trabajar con incidencias y sesiones][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 000000000..cb80e9242 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "Lección 6 - Trabajar con incidencias y sesiones" +description: "Crea un backlog bien delimitado, selecciona una incidencia, impleméntala en un árbol de trabajo aislado y revisa las diferencias personalmente." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Pide al agente que sugiera mejoras concretas del producto, convierte esas ideas en incidencias de GitHub e implementa una incidencia en una sesión aislada. + +En esta lección: + +- crearás tres incidencias bien delimitadas para Space Quiz. +- explorarás el backlog en **Issues**. +- iniciarás una sesión desde una incidencia en un nuevo árbol de trabajo. +- revisarás las diferencias en la pestaña **Changes** y comprobarás la funcionalidad. + +## Crea un backlog en Issues + +Envía el siguiente 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. +``` + +Abre **Issues**, revisa las tres incidencias y elige una que aporte un valor claro y tenga un alcance manejable. + +![Ilustración de la vista Issues de la aplicación Copilot. La barra lateral muestra New, Pull requests, Issues, Automations, Customize, More y el proyecto space-quiz. El área principal contiene las pestañas Assigned to me, Created by me, Mentioning me y Done, un cuadro de búsqueda, los filtros State y Assignee y una lista de tres incidencias abiertas en el repositorio space-quiz.](/images/learning-hub/copilot-workshops/first-steps-app-issues.svg) + +**Issues** reúne en la aplicación tus incidencias de GitHub de todos los repositorios, filtradas por **Assigned to me**, **Created by me**, **Mentioning me** y **Done**. + +## Implementa una incidencia + +1. Abre la incidencia seleccionada desde **Issues**. +2. Selecciona **New session**. +3. Elige un **nuevo árbol de trabajo** cuando se te solicite. +4. Utiliza el modo **Interactive** y el modelo que prefieras. +5. Envía el siguiente 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. + ``` + +El nuevo árbol de trabajo mantiene esta funcionalidad aislada de la rama predeterminada hasta que estés listo para revisarla y combinarla. + +## Revisa las diferencias personalmente + +Cuando el agente informe del resultado, no te conformes con su palabra. + +1. Abre el panel desplegable de la derecha y selecciona la pestaña **Changes**. +2. Lee las diferencias de cada archivo que haya modificado la sesión. +3. Prueba la funcionalidad en el explorador integrado y confirma que cumple los criterios de aceptación de la incidencia. + +![Ilustración de la sesión de la aplicación Copilot con la pestaña Changes abierta en el panel desplegable de la derecha. Muestra un archivo modificado, index.html, con 142 líneas añadidas y 8 eliminadas, y las líneas de diferencias junto a la conversación de la sesión.](/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg) + +La pestaña **Changes** muestra todos los archivos que ha modificado la sesión, con las diferencias en línea. + +## Resumen y pasos siguientes + +Has creado un backlog, implementado una incidencia en una sesión aislada y revisado las diferencias. Continúa con la [lección 7: Planificar antes de editar][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 000000000..5312b8664 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "Lección 7 - Planificar antes de editar" +description: "Utiliza el modo Plan en una segunda incidencia para que el agente investigue el proyecto y proponga un enfoque antes de modificar archivos." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +No todas las incidencias deben empezar con modificaciones. El modo Plan investiga el proyecto, propone un enfoque y espera tu aprobación antes de cambiar el código. + +En esta lección: + +- iniciarás una sesión para una segunda incidencia en el modo Plan. +- revisarás y perfeccionarás el plan propuesto por el agente. +- aprobarás el plan y elegirás cómo continúa la sesión. + +## Acuerda el enfoque antes de cambiar el código + +1. Abre una **segunda incidencia** desde **Issues** y selecciona **New session**. +2. En la configuración de la sesión, elige **Plan** en lugar de **Interactive** o **Autopilot**. +3. Envía el siguiente prompt y deja que el agente investigue sin modificar archivos: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Lee el plan propuesto y solicita cambios si falta algo. +5. Aprueba el plan. +6. Cuando se te solicite, elige si la sesión continúa en modo **Interactive** o **Autopilot**. + +> [!TIP] +> **Cuándo merece la pena el modo Plan** +> +> Utiliza el modo Plan para cualquier tarea ambigua, transversal o costosa de deshacer. Corregir un mal enfoque cuesta menos antes de la primera modificación. + +## Resumen y pasos siguientes + +Has acordado un enfoque con el agente antes de que escribiera código. Continúa con la [lección 8: Completar el ciclo de revisión de Copilot][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 000000000..968f74630 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "Lección 8 - Completar el ciclo de revisión de Copilot" +description: "Crea una solicitud de incorporación de cambios, solicita una revisión de Copilot, atiende los comentarios pertinentes y deja que Agent Merge mantenga la solicitud en buen estado." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Convierte la incidencia implementada en una solicitud de incorporación de cambios, solicita una revisión de Copilot y atiende los comentarios antes de combinarla. + +En esta lección: + +- inspeccionarás los cambios de la sesión por última vez. +- crearás una solicitud de incorporación de cambios desde la sesión del agente. +- solicitarás una revisión de código de Copilot. +- revisarás y aplicarás los comentarios que requieran cambios. +- activarás Agent Merge para mantener la solicitud de incorporación de cambios en buen estado hasta que se combine. + +## Crea y revisa la solicitud de incorporación de cambios + +1. Abre el panel desplegable de la derecha y selecciona la pestaña **Changes** para inspeccionar los archivos modificados en la sesión. +2. Selecciona **Create PR** en la barra de herramientas de la sesión. +3. Revisa el título y la descripción generados y crea la solicitud de incorporación de cambios. +4. Abre la solicitud de incorporación de cambios en GitHub. +5. Desde el menú **Reviewers**, solicita una revisión de **Copilot**. +6. Abre la pestaña **Files changed** y lee todos los comentarios de revisión. +7. Para cada comentario que requiera un cambio, utiliza la acción **Fix** de Copilot en la aplicación o realiza el cambio tú mismo. +8. Revisa cada cambio y vuelve a probar la funcionalidad. +9. Responde con una descripción concisa de lo que ha cambiado y resuelve la conversación. + +> [!NOTE] +> Si una sugerencia no es aplicable o queda fuera del alcance de la solicitud de incorporación de cambios, responde con el motivo en lugar de realizar un cambio innecesario. Resuelve todas las conversaciones de revisión antes de combinar. + +## Combina con Agent Merge + +Activa **Agent Merge** para la solicitud de incorporación de cambios y deja que el agente la mantenga en buen estado. El agente atiende los comentarios de revisión, corrige las comprobaciones que fallan y resuelve los conflictos a medida que aparecen; después, combina la solicitud cuando todo pasa. + +Si prefieres combinarla tú mismo, revisa las diferencias finales, comprueba la funcionalidad y combina la solicitud de incorporación de cambios cuando pasen todas las comprobaciones. + +## Resumen y pasos siguientes + +Has completado el ciclo de desarrollo desde la incidencia hasta la solicitud de incorporación de cambios revisada y combinada. Continúa con la [lección 9: Automatizar la clasificación de incidencias][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md new file mode 100644 index 000000000..a7a332302 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "Lección 9 - Automatizar la clasificación de incidencias" +description: "Crea y ejecuta una automatización semanal que resuma las incidencias abiertas recientes." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Utiliza una automatización para convertir una tarea recurrente de clasificación de incidencias en un flujo de trabajo programado del agente. + +En esta lección: + +- crearás una automatización semanal. +- conectarás la automatización al proyecto Space Quiz. +- ejecutarás la automatización de inmediato y revisarás el resultado. + +## Crea la automatización + +![Ilustración de la vista Automations de la aplicación Copilot con los filtros All, Local y Cloud, un cuadro de búsqueda, los botones Templates y New automation y dos tarjetas de automatización semanal para el proyecto space-quiz: clasificación de incidencias y auditoría de accesibilidad.](/images/learning-hub/copilot-workshops/first-steps-app-automations.svg) + +Las automatizaciones ejecutan el mismo prompt según una programación, cada una en su propia sesión, así que ninguna altera tu trabajo. Puedes filtrar por **All**, **Local** o **Cloud** y ejecutar cualquier automatización cuando lo necesites. + +1. Abre **Automations**. +2. Elige la plantilla para una nueva automatización semanal. +3. Introduce el siguiente 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. Establece el modo de sesión en **Autopilot**. +5. Establece el modelo en **Auto**. +6. Selecciona el proyecto `space-quiz`. +7. Abre el menú desplegable **Create** y selecciona **Create and run**. + +Revisa el resumen generado y confirma que hace referencia a las incidencias abiertas recientes del repositorio. + +## Resumen y pasos siguientes + +Has creado un flujo de trabajo reutilizable del agente que se ejecuta según una programación. Continúa con la [lección 10: Continuar una sesión de forma remota][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/index.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/index.md new file mode 100644 index 000000000..a38b83249 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-app/index.md @@ -0,0 +1,55 @@ +--- +title: "Recorrido por la aplicación GitHub Copilot" +description: "Realiza un recorrido guiado por la aplicación GitHub Copilot creando y entregando un Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +Realiza un recorrido práctico por la aplicación GitHub Copilot, pensado para principiantes. Crearás un Space Quiz lleno de color desde una carpeta vacía y recorrerás todo el ciclo de desarrollo, desde el primer prompt hasta una solicitud de incorporación de cambios revisada. + +El taller dura aproximadamente entre 60 y 90 minutos. El proyecto utiliza un único archivo HTML sin dependencias de ejecución, así que puedes centrarte en aprender a usar la aplicación y sus flujos de trabajo con agentes. + +> [!NOTE] +> Este taller fue creado por [James Montemagno][james] y adaptado de [Primeros pasos con GitHub Copilot][source-lab]. El contenido original está disponible bajo la [licencia MIT][source-license]. + +## Lecciones + +| Lección | Tema | Qué harás | +| ------ | ----- | ---------------- | +| [0. Requisitos previos y configuración][lesson-0] | Configuración | Comprueba los requisitos previos, instala la aplicación, elige un modelo y explora el área de trabajo | +| [1. Crear el área de trabajo][lesson-1] | Creación | Inicia una sesión Interactive en una carpeta local vacía | +| [2. Crear y perfeccionar][lesson-2] | Creación | Crea el cuestionario y perfecciónalo en el explorador integrado | +| [3. Inspeccionar y probar][lesson-3] | Contexto y pruebas | Lee los detalles de la sesión y ejecuta una prueba de humo en el explorador | +| [4. Recoger las instrucciones del proyecto][lesson-4] | Instrucciones | Genera y adapta las instrucciones del agente con `/init` | +| [5. Publicar el proyecto][lesson-5] | Publicación | Crea un repositorio público de GitHub a partir del proyecto local | +| [6. Trabajar con incidencias y sesiones][lesson-6] | Implementación | Crea un backlog, implementa una incidencia en un árbol de trabajo aislado y revisa las diferencias | +| [7. Planificar antes de editar][lesson-7] | Planificación | Utiliza el modo Plan para acordar un enfoque para una segunda incidencia | +| [8. Completar el ciclo de revisión][lesson-8] | Revisión | Abre una solicitud de incorporación de cambios, atiende los comentarios de revisión de Copilot y utiliza Agent Merge | +| [9. Automatizar la clasificación de incidencias][lesson-9] | Automatización | Programa y ejecuta una automatización semanal de clasificación de incidencias | +| [10. Continuar una sesión de forma remota][lesson-10] | Acceso remoto (opcional) | Sigue una sesión local en curso desde la web o el móvil con `/remote` | +| [11. Explorar un Canvas][lesson-11] | Canvas | Empieza a trabajar desde un Canvas de Repository Issues Kanban | +| [12. Repaso y pasos siguientes][lesson-12] | Repaso | Repasa el flujo de trabajo y sigue aprendiendo | + +## Primeros pasos + +[Empieza con la lección 0: Requisitos previos y configuración][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/ +[lesson-1]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ +[lesson-2]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ +[lesson-3]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ +[lesson-4]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ +[lesson-5]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ +[lesson-6]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ +[lesson-7]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ +[lesson-8]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ +[lesson-9]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ +[lesson-10]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ +[lesson-11]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ +[lesson-12]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 000000000..acacc4b78 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "Lección 0 - Requisitos previos y configuración" +description: "Comprueba los requisitos previos del taller, instala GitHub Copilot CLI, inicia sesión y elige un modelo desde una carpeta de proyecto vacía." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Incorpora un agente a tu terminal. Confirma que tienes lo necesario, instala GitHub Copilot CLI, inicia sesión y prepárate para hacer tu primera solicitud desde una carpeta vacía. + +En esta lección: + +- comprobarás los requisitos previos del taller. +- instalarás GitHub Copilot CLI e iniciarás sesión. +- crearás la carpeta del proyecto y la marcarás como de confianza. +- elegirás un modelo para la sesión. + +## Requisitos previos + +Necesitas: + +- una cuenta de GitHub. [Crea una cuenta de GitHub][github-signup] o utiliza tu cuenta existente. +- un plan activo de Copilot. [Activa Copilot Free o un plan de pago de Copilot][copilot-plans]. Si tu organización ya te proporciona acceso a Copilot, utiliza esa cuenta. +- [Git][git] instalado. Ejecuta `git --version` para comprobarlo. +- un ordenador con macOS, Windows o Linux. + +La [GitHub CLI][gh-cli] (`gh`) es opcional, pero recomendable, porque permite que el agente cree repositorios y solicitudes de incorporación de cambios por ti. + +> [!NOTE] +> Si utilizas Copilot Business o Copilot Enterprise, tu administrador debe habilitar la directiva **Copilot CLI** para que funcionen las sesiones de agente. + +## Configura la CLI + +1. Instala [GitHub Copilot CLI][install-cli] para tu plataforma. +2. Crea la carpeta del proyecto y entra en ella: + + ```bash + mkdir space-quiz && cd space-quiz + ``` + +3. Ejecuta `copilot`, inicia sesión y marca la carpeta como de confianza cuando se te solicite. +4. Ejecuta `/model` y elige un modelo siguiendo el orden de preferencia de la siguiente sección. +5. Opcionalmente, instala la [GitHub CLI][gh-cli] si aún no lo has hecho. + +![Ilustración de Copilot CLI en una ventana de terminal titulada space-quiz. Pregunta si se debe confiar en los archivos de esta carpeta, con Yes, proceed seleccionado, y sugiere el comando /model para elegir el modelo de la sesión y /help para enumerar todos los comandos de barra. La línea del prompt dice Create a space exploration quiz.](/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg) + +La CLI se abre con una solicitud para confiar en la carpeta y algunos comandos iniciales, incluido `/model`. + +> [!TIP] +> Escribe `/` en cualquier momento para explorar todos los comandos disponibles o ejecuta `/help` para consultar la referencia completa. + +## Elige un modelo + +Sigue este orden de preferencia al ejecutar `/model` y selecciona la primera opción que tengas disponible: + +1. **GPT-6-Luna** (recomendado). +2. **Auto**, como alternativa equilibrada. +3. Cualquier modelo de la [lista de modelos activos][active-models]. + +La disponibilidad de los modelos depende de tu plan, de la directiva de la organización y de la versión del producto. + +## Resumen y pasos siguientes + +Copilot CLI está instalado y ejecutándose en una carpeta `space-quiz` vacía, y has iniciado sesión. Continúa con la [lección 1: Crear el cuestionario desde la terminal][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[git]: https://git-scm.com/downloads +[gh-cli]: https://cli.github.com/ +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md new file mode 100644 index 000000000..f0f1ec896 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "Lección 1 - Crear el cuestionario desde la terminal" +description: "Pide a Copilot CLI todo el Space Quiz en una única solicitud detallada y realiza un ajuste concreto." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Pide todo el proyecto en una única solicitud detallada, revisa lo que propone el agente antes de aprobarlo y, después, realiza un cambio pequeño y acotado. + +En esta lección: + +- crearás un cuestionario sin dependencias en `index.html`. +- abrirás el cuestionario en un explorador desde la sesión. +- realizarás un cambio concreto y lo comprobarás. + +## Crea el cuestionario + +Envía el siguiente prompt en tu sesión de Copilot CLI: + +```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 an emoji reaction at the end. Single index.html, no server or dependencies. Accessible, keyboard-navigable, and respects prefers-color-scheme. +``` + +1. Lee el plan propuesto y aprueba los cambios en los archivos. +2. Abre `index.html` en un explorador y responde a unas cuantas preguntas. Para abrirlo desde la sesión, ejecuta `!open index.html` en macOS, `!start index.html` en Windows o `!xdg-open index.html` en Linux. + +## Realiza un cambio pequeño y compruébalo + +Pide un ajuste concreto para ver cómo se comporta una solicitud acotada: + +```plaintext +The results screen feels flat. Give it a stronger sense of arrival: animate the score counting up and make the emoji reaction larger. Change nothing else. +``` + +1. Vuelve a cargar la página en el explorador y responde a todas las preguntas hasta el final. +2. Observa que todavía no hay nada en Git, así que no hay ninguna versión con la que comparar las diferencias. Eso cambiará cuando publiques el proyecto. + +## Resumen y pasos siguientes + +Has creado el cuestionario y lo has perfeccionado con una solicitud acotada. Continúa con la [lección 2: Recoger las instrucciones del proyecto][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md new file mode 100644 index 000000000..9f181c3ee --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "Lección 10 - Repaso y pasos siguientes" +description: "Repasa el flujo de trabajo de Copilot CLI y encuentra recursos para seguir aprendiendo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Has completado el ciclo de trabajo centrado en la terminal: has creado el cuestionario, revisado las diferencias, publicado, ejecutado sesiones en paralelo, planificado antes de editar, reanudado sesiones, combinado una solicitud de incorporación de cambios y delegado nuevo trabajo sin salir de la terminal. + +## Qué has completado + +Has: + +- instalado Copilot CLI y elegido un modelo con `/model`. +- creado y perfeccionado un cuestionario a partir de un único prompt. +- recogido las reglas del proyecto con `/init`. +- publicado el proyecto mediante un prompt o manualmente. +- añadido una incidencia al chat desde el panel lateral y revisado el cambio con `/diff`. +- ejecutado una segunda sesión en su propio árbol de trabajo con `/worktree`. +- planificado la segunda incidencia con `/plan` antes de cambiar el código. +- inspeccionado y gestionado el contexto con `/context` y `/clear`. +- reanudado sesiones con `copilot --resume` y `/resume`. +- creado y combinado una solicitud de incorporación de cambios con `/pr create` y `/pr agentmerge`. +- delegado una nueva funcionalidad con `/delegate`. + +## Sigue explorando + +- [Instala Copilot CLI en macOS, Windows y Linux][install-cli]. +- [Conoce Copilot CLI, sus comandos de barra y sus opciones][about-cli]. +- [Utiliza la GitHub CLI para repositorios y solicitudes de incorporación de cambios][gh-cli]. +- [Instala Git][git]. +- [Sigue las prácticas recomendadas para escribir prompts eficaces con código real][best-practices]. +- [Compara los planes de Copilot][copilot-plans]. + +Crea el mismo Space Quiz con una forma de trabajo diferente en el [taller de primeros pasos con la aplicación GitHub Copilot][first-steps-app] o en el [taller de primeros pasos con Visual Studio Code][first-steps-vscode]. Si estás listo para un escenario más profundo con una aplicación completa y el backlog de un equipo, continúa con el [taller de desarrollo en escenarios reales con Copilot CLI][real-world-cli]. + +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[about-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[gh-cli]: https://cli.github.com/ +[git]: https://git-scm.com/downloads +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-vscode]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-cli]: /es-es/learning-hub/copilot-workshops/cli/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 000000000..764dbcdfd --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lección 2 - Recoger las instrucciones del proyecto" +description: "Ejecuta /init para generar instrucciones del agente que describan el Space Quiz terminado y adáptalas a tu forma de trabajar." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Con un cuestionario funcional en el disco, genera instrucciones del agente que describan el proyecto real. Cada sesión futura lee estas instrucciones antes de empezar a trabajar, así que te ahorran repetir las mismas directrices en cada prompt. + +En esta lección: + +- generarás instrucciones del agente con `/init`. +- revisarás el archivo generado antes de aceptarlo. +- reducirás y personalizarás las instrucciones. + +## Recoge las reglas con `/init` + +1. Ejecuta `/init` en la sesión. +2. Revisa el archivo de instrucciones generado antes de aceptarlo. +3. Conserva solo las directrices que correspondan a este proyecto: un único archivo, sin dependencias, accesible y probado en el explorador. + +> [!IMPORTANT] +> **El orden importa** +> +> `/init` lee el proyecto tal como existe en ese momento. Ejecutarlo después de crear y perfeccionar el cuestionario produce instrucciones basadas en código real. + +## Adáptalo a ti + +El archivo de instrucciones no sirve solo para recoger datos del proyecto. Añade los detalles que de otro modo repetirías en cada prompt, como tu forma preferida de escribir código, las convenciones de nomenclatura, las bibliotecas que deben evitarse y la cantidad de comentarios que quieres. Cada sesión futura lee este archivo antes de leer tu prompt. + +## Resumen y pasos siguientes + +El proyecto ya tiene instrucciones del agente basadas en código real. Continúa con la [lección 3: Publicar el proyecto][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md new file mode 100644 index 000000000..a3fb81525 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "Lección 3 - Publicar el proyecto" +description: "Inicializa el proyecto, crea un commit y publica Space Quiz en GitHub, mediante un prompt o ejecutando los comandos tú mismo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Convierte el experimento en un repositorio público de GitHub. Puedes pedirlo en un único prompt o ejecutar los comandos tú mismo. Prueba ambas formas una vez y sabrás exactamente qué hace el agente por ti. + +En esta lección: + +- inicializarás un repositorio de Git y crearás el primer commit. +- crearás un repositorio público de GitHub y enviarás los cambios. +- confirmarás que el commit y el archivo se han incorporado. + +## Opción A: Pídelo + +Envía el siguiente 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. +``` + +Aprueba cada acción de Git y GitHub cuando el agente lo solicite. + +## Opción B: Ejecútalo tú mismo + +Añade el prefijo `!` a cada comando para ejecutarlo desde la sesión o ejecuta los comandos sin el prefijo en tu propia terminal: + +```plaintext +!git init -b main +!git add . +!git commit -m "Add space quiz" +!gh repo create space-quiz --public --source=. --push +``` + +El último comando utiliza la [GitHub CLI][gh-cli]. Si no la tienes, crea el repositorio en GitHub y ejecuta `!git remote add origin ` y `!git push -u origin main`. + +## Confirma el resultado + +1. Ejecuta `!git log --oneline` para confirmar que el commit se ha incorporado. +2. Abre el repositorio en GitHub y confirma que `index.html` está presente. + +## Resumen y pasos siguientes + +El proyecto ya es un repositorio de GitHub con una versión cuyo funcionamiento has comprobado y con la que puedes comparar los cambios. Continúa con la [lección 4: Trabajar en incidencias en paralelo][next-lesson]. + +[gh-cli]: https://cli.github.com/ +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 000000000..9583f2cb9 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "Lección 4 - Trabajar en incidencias en paralelo" +description: "Crea un backlog, añade una incidencia al chat desde el panel lateral, revisa los cambios con /diff e inicia una segunda sesión en su propio árbol de trabajo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Mantén el backlog y el ciclo de implementación en la terminal y abre sesiones separadas para tareas independientes. + +En esta lección: + +- crearás tres incidencias de GitHub bien delimitadas. +- añadirás una incidencia al chat desde el panel lateral y la implementarás. +- revisarás el cambio con `/diff`. +- iniciarás una segunda sesión en un árbol de trabajo aislado. + +## Crea un backlog + +Envía el siguiente prompt: + +```plaintext +Review the space quiz and create three focused GitHub issues with clear titles, user-focused descriptions, and acceptance criteria. Do not implement them yet. +``` + +## Trabaja en la primera incidencia en esta sesión + +1. Pulsa la tecla Left arrow para abrir el panel lateral y, después, pulsa Tab para desplazarte a la pestaña **Issues**. +2. Resalta la primera incidencia y pulsa c para añadirla al chat como contexto. Para leer primero la incidencia completa, pulsa Enter en su lugar. +3. Pide al agente que implemente la incidencia. + +![Ilustración del panel lateral de Copilot CLI en una terminal. La pestaña Issues está seleccionada entre las pestañas Current, Sessions, Issues, Pull requests y Gists. Un filtro de búsqueda de incidencias abiertas en el repositorio space-quiz muestra una incidencia, Añadir una pantalla de puntuación al final del cuestionario. Las indicaciones explican que la tecla Left arrow abre el panel y Tab permite moverse entre pestañas; la fila inferior enumera las teclas: barra para buscar, Enter para ver detalles, o para abrir, w para el árbol de trabajo, c para el chat y a para todo.](/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg) + +El panel lateral muestra todas las pestañas en la parte superior, y las indicaciones de la parte inferior son las teclas que actúan sobre el elemento resaltado. + +## Revisa el cambio con `/diff` + +El proyecto está publicado, así que hay una versión cuyo funcionamiento has comprobado y con la que puedes comparar los cambios. `/diff` muestra exactamente qué ha cambiado esta incidencia respecto a esa versión, que es justo lo que vas a pedir que alguien revise. + +1. Ejecuta `/diff` y lee todos los archivos modificados. +2. Pide que se corrija cualquier cosa que parezca incorrecta y vuelve a ejecutar `/diff`. +3. Ejecuta `!git status` o `!git diff` cuando quieras inspeccionar Git directamente. + +## Trabaja en la segunda incidencia en paralelo + +1. Abre de nuevo el panel lateral y cambia a la pestaña **Sessions**. +2. Inicia otra sesión para la segunda incidencia sin perder la primera. +3. En la nueva sesión, ejecuta `/worktree` para que disponga de un árbol de trabajo aislado en lugar de crear una rama en la misma carpeta. Ahora ambas sesiones pueden ejecutarse a la vez sin interferir entre sí. +4. Añade la segunda incidencia a esa sesión con c. +5. Deja la sesión así por ahora. En la siguiente lección planificarás esta incidencia antes de escribir código. + +![Ilustración de la salida de Copilot CLI tras ejecutar /worktree. Informa de que ha creado el árbol de trabajo ../space-quiz-13 en la rama issue-13-review-screen y de que esta sesión trabaja ahora allí mientras main permanece sin cambios.](/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg) + +`/worktree` traslada la sesión a su propia copia de trabajo en su propia rama, de modo que la primera sesión puede seguir trabajando sin interrupciones. + +## Resumen y pasos siguientes + +Has implementado la primera incidencia, la has revisado con `/diff` y has iniciado una segunda sesión en su propio árbol de trabajo. Continúa con la [lección 5: Planificar antes de editar][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 000000000..41b8063cd --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "Lección 5 - Planificar antes de editar" +description: "Cambia la segunda sesión al modo de planificación con /plan para que el agente proponga un enfoque antes de editar archivos." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Ya tienes una segunda sesión ejecutándose en su propio árbol de trabajo. No empieces con código en ella. El modo de planificación investiga el proyecto y propone un enfoque sin modificar los archivos. + +En esta lección: + +- cambiarás la segunda sesión al modo de planificación. +- revisarás y perfeccionarás el plan propuesto por el agente. +- aprobarás el plan y dejarás que la sesión lo implemente. + +## Acuerda el enfoque antes de modificar nada + +1. Cambia a la **segunda sesión** que abriste en la lección anterior. +2. Ejecuta `/plan` para cambiar esa sesión al modo de planificación. +3. Envía el siguiente prompt y deja que el agente investigue sin editar nada: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Lee el plan, señala cualquier carencia y apruébalo. +5. La sesión continúa con la implementación tomando el plan aprobado como guía. + +> [!TIP] +> **Cuándo merece la pena el modo de planificación** +> +> Utiliza el modo de planificación para cualquier tarea ambigua, transversal o costosa de deshacer. Corregir un mal enfoque cuesta menos antes de la primera modificación. + +## Resumen y pasos siguientes + +Has acordado un enfoque con el agente antes de que escribiera código. Continúa con la [lección 6: Saber qué puede ver el agente][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md new file mode 100644 index 000000000..c96d47080 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "Lección 6 - Saber qué puede ver el agente" +description: "Utiliza /context para inspeccionar qué ocupa la ventana de contexto y /clear para empezar de cero cuando una conversación se desvía." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Los comandos de terminal hacen visible el contexto y te permiten gestionarlo de forma deliberada. Saber qué puede ver el agente te ayuda a entender sus resultados y decidir cuándo empezar de cero. + +En esta lección: + +- inspeccionarás la ventana de contexto con `/context`. +- verás cuánto ocupa cada parte de la ventana. +- restablecerás una conversación que se haya desviado con `/clear`. + +## Inspecciona el contexto + +1. Ejecuta `/context` para inspeccionar archivos, instrucciones e historial de conversación. +2. Comprueba cuánto ocupa cada parte de la ventana. +3. Ejecuta `/clear` para empezar de cero cuando la conversación se haya desviado. +4. Vuelve a añadir el archivo adecuado antes de pedir otro cambio. + +![Ilustración de la salida de Copilot CLI tras ejecutar /context. Un indicador de la ventana de contexto muestra un uso del 61 %, repartido entre la conversación, los archivos leídos y las instrucciones. Una nota sugiere utilizar /compact para resumir o iniciar una sesión nueva cuando quede poco espacio.](/images/learning-hub/copilot-workshops/first-steps-cli-context.svg) + +`/context` muestra exactamente qué ocupa la ventana de contexto y cuánto espacio queda. Cuando quede poco, utiliza `/compact` para resumir la conversación o inicia una sesión nueva. + +## Resumen y pasos siguientes + +Ahora puedes ver y gestionar lo que sabe el agente. Continúa con la [lección 7: Reanudar y acceder de forma remota][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 000000000..b3f9b2c38 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "Lección 7 - Reanudar y acceder de forma remota" +description: "Sal de una sesión de Copilot CLI y vuelve a ella más tarde con copilot --resume o /resume y, opcionalmente, síguela desde otro dispositivo con /remote." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Las sesiones se pueden pausar sin perder la conversación ni el contexto del área de trabajo. Sal de una sesión, vuelve a ella más tarde y, opcionalmente, haz que esté disponible desde otro dispositivo. + +En esta lección: + +- saldrás de una sesión y la reanudarás desde la terminal. +- cambiarás entre sesiones sin salir de la CLI. +- opcionalmente, harás que una sesión esté disponible de forma remota. + +## Sal de una sesión y vuelve más tarde + +1. Sal de la sesión actual de Copilot CLI cuando estés listo para cambiar de tarea. +2. Desde una terminal, ejecuta `copilot --resume` para elegir una sesión anterior. +3. Dentro de Copilot CLI, utiliza `/resume` para cambiar entre sesiones sin salir de la CLI. +4. Confirma que la sesión restaurada sigue teniendo los archivos, el contexto de la incidencia y el modelo esperados. + +## Opcional: continúa una sesión de forma remota + +Ejecuta `/remote` para mantener *esa misma sesión* en ejecución local y, al mismo tiempo, hacerla accesible desde la web y la aplicación móvil GitHub Copilot. El equipo debe permanecer encendido. Abre en el explorador el enlace que devuelve o accede a la sesión desde la aplicación móvil GitHub Copilot. + +> [!NOTE] +> `/remote` no es delegación y no traslada la ejecución a la nube. No es necesario para este taller, así que pruébalo cuando te resulte natural el ciclo de trabajo local. + +## Resumen y pasos siguientes + +Puedes pausar y reanudar sesiones y seguir una sesión local desde otro dispositivo. Continúa con la [lección 8: Crear, revisar y combinar desde la CLI][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 000000000..130db2a82 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "Lección 8 - Crear, revisar y combinar desde la CLI" +description: "Inspecciona las diferencias finales, crea una solicitud de incorporación de cambios con /pr create, atiende los comentarios y combina con /pr agentmerge." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Termina el ciclo de desarrollo sin cambiar a una interfaz de escritorio. + +En esta lección: + +- inspeccionarás los archivos modificados por última vez. +- crearás una solicitud de incorporación de cambios desde la rama actual. +- revisarás la solicitud de incorporación de cambios y atenderás los comentarios. +- validarás y combinarás la solicitud de incorporación de cambios con `/pr agentmerge`. + +## Crea, revisa y combina + +1. Ejecuta `/diff` para inspeccionar los archivos modificados por última vez. +2. Pide a Copilot que cree una solicitud de incorporación de cambios desde la rama actual o ejecuta `/pr create`. +3. Abre la pestaña **Pull requests** del panel lateral para comprobar el título, la descripción, los archivos y las comprobaciones de estado. +4. Aplica los comentarios que requieran cambios, comprueba el resultado en el explorador y responde con lo que ha cambiado. +5. Cuando la solicitud de incorporación de cambios esté lista, ejecuta `/pr agentmerge` para validarla y combinarla una vez que se hayan obtenido las confirmaciones necesarias y hayan pasado las comprobaciones. + +## Resumen y pasos siguientes + +Has creado, revisado y combinado una solicitud de incorporación de cambios sin salir de la terminal. Continúa con la [lección 9: Delegar trabajo cuando confíes en el ciclo][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 000000000..9ecc026eb --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "Lección 9 - Delegar trabajo cuando confíes en el ciclo" +description: "Entrega una nueva funcionalidad de Space Quiz a /delegate, sigue trabajando mientras se ejecuta y sigue una sesión en la nube desde la CLI." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Has entregado una funcionalidad. Ahora que sabes cómo es un buen resultado, merece la pena desarrollar una idea completamente nueva en paralelo en lugar de tener que atenderla directamente. En esta lección delegarás un **informe de misión que se pueda compartir**, que convierte una partida terminada en una tarjeta que el jugador puede publicar. + +En esta lección: + +- delegarás una nueva funcionalidad con `/delegate`. +- seguirás trabajando en la sesión principal mientras se ejecuta el trabajo delegado. +- compararás el resultado delegado antes de aceptarlo. + +> [!NOTE] +> `/delegate` y las sesiones en la nube requieren un plan de pago de Copilot que incluya estas funciones. Es posible que un administrador también deba habilitar el acceso en Business y Enterprise. + +## Delega una nueva funcionalidad + +Ejecuta `/delegate` y entrega la siguiente tarea: + +```plaintext +Delegate this: add a shareable mission report to the space quiz. At the end of a run, generate a compact summary card with the score, a rank title based on the percentage, and the slowest question. Add a Copy result button that puts a short plain-text version on the clipboard. Keep it in the single index.html with no dependencies, keep it keyboard accessible, and report back with what changed. +``` + +1. Sigue trabajando en la sesión principal mientras se ejecuta la tarea delegada. +2. Compara el resultado delegado con tu sesión antes de aceptarlo. +3. Para una incidencia más grande y bien especificada, inicia una **sesión en la nube** y sigue su progreso desde la CLI. + +## Resumen y pasos siguientes + +Has delegado una funcionalidad completa y revisado el resultado. Continúa con la [lección 10: Repaso y pasos siguientes][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md new file mode 100644 index 000000000..1f2aeb8c4 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md @@ -0,0 +1,52 @@ +--- +title: "Primeros pasos con GitHub Copilot CLI" +description: "Realiza un recorrido guiado por GitHub Copilot CLI centrado en la terminal creando y entregando un Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop + - cli +--- + +Realiza un recorrido práctico por GitHub Copilot CLI, pensado para principiantes. Crearás un Space Quiz lleno de color desde una carpeta vacía y aprenderás el ciclo de trabajo centrado en la terminal: crear y revisar las diferencias antes de que Git escriba nada, ejecutar sesiones en paralelo, planificar antes de editar y, después, crear y combinar la solicitud de incorporación de cambios sin salir del shell. + +El taller dura aproximadamente entre 60 y 90 minutos. El proyecto utiliza un único archivo HTML sin dependencias de ejecución, así que puedes centrarte en aprender a usar la CLI y sus flujos de trabajo con agentes. + +> [!NOTE] +> Este taller fue creado por [James Montemagno][james] y adaptado de [Primeros pasos con GitHub Copilot][source-lab]. El contenido original está disponible bajo la [licencia MIT][source-license]. + +## Lecciones + +| Lección | Tema | Qué harás | +| ------ | ----- | ---------------- | +| [0. Requisitos previos y configuración][lesson-0] | Configuración | Comprueba los requisitos previos, instala Copilot CLI, inicia sesión y elige un modelo | +| [1. Crear el cuestionario][lesson-1] | Creación | Crea el cuestionario desde la terminal y realiza un cambio concreto | +| [2. Recoger las instrucciones del proyecto][lesson-2] | Instrucciones | Genera y adapta las instrucciones del agente con `/init` | +| [3. Publicar el proyecto][lesson-3] | Publicación | Inicializa, crea un commit y publica mediante un prompt o manualmente | +| [4. Trabajar en incidencias en paralelo][lesson-4] | Implementación | Crea un backlog, añade una incidencia al chat, revisa con `/diff` e inicia una segunda sesión en un árbol de trabajo | +| [5. Planificar antes de editar][lesson-5] | Planificación | Utiliza `/plan` para acordar un enfoque para la segunda incidencia | +| [6. Saber qué puede ver el agente][lesson-6] | Contexto | Inspecciona y restablece el contexto con `/context` y `/clear` | +| [7. Reanudar y acceder de forma remota][lesson-7] | Reanudación | Sal de las sesiones y vuelve a ellas con `/resume` y, opcionalmente, sigue una sesión local desde otro dispositivo con `/remote` | +| [8. Crear, revisar y combinar][lesson-8] | Revisión | Crea y combina una solicitud de incorporación de cambios con `/pr create` y `/pr agentmerge` | +| [9. Delegar trabajo][lesson-9] | Delegación | Entrega una nueva funcionalidad a `/delegate` y sigue una sesión en la nube | +| [10. Repaso y pasos siguientes][lesson-10] | Repaso | Repasa el flujo de trabajo y sigue aprendiendo | + +## Primeros pasos + +[Empieza con la lección 0: Requisitos previos y configuración][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites/ +[lesson-1]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ +[lesson-2]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ +[lesson-3]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ +[lesson-4]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ +[lesson-5]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ +[lesson-6]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ +[lesson-7]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ +[lesson-8]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ +[lesson-9]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ +[lesson-10]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/index.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/index.md new file mode 100644 index 000000000..eef4c6a7b --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/index.md @@ -0,0 +1,36 @@ +--- +title: "Primeros pasos" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +Los talleres de primeros pasos son introducciones guiadas que te ayudan a explorar GitHub Copilot sin necesidad de una aplicación existente ni de un escenario de desarrollo detallado. Cada taller comienza con algo sencillo, presenta el producto a medida que lo utilizas y te guía por un flujo de trabajo completo. + +Todos los talleres crean el mismo Space Quiz desde una carpeta vacía, así que puedes elegir la herramienta que quieras aprender o completar varios para comparar cómo funciona cada una. + +> [!NOTE] +> Estos talleres fueron creados por [James Montemagno][james] y adaptados de [Primeros pasos con GitHub Copilot][source-lab], disponible bajo la [licencia MIT][source-license]. + +## Talleres + +### [Recorrido por la aplicación GitHub Copilot][copilot-app] + +Crea un Space Quiz lleno de color desde una carpeta vacía y recorre todo el ciclo de desarrollo: crear, perfeccionar, probar, recoger las instrucciones del proyecto, publicar, planificar el trabajo, implementar incidencias, revisar y combinar una solicitud de incorporación de cambios, automatizar tareas recurrentes y explorar una extensión de Canvas. + +### [Primeros pasos con GitHub Copilot CLI][copilot-cli] + +Aprende el ciclo de trabajo centrado en la terminal: crea y revisa las diferencias antes de que Git escriba nada, ejecuta sesiones en paralelo en árboles de trabajo, planifica antes de editar, gestiona el contexto y, después, crea, combina y delega trabajo sin salir del shell. + +### [Primeros pasos con Visual Studio Code][vscode] + +Utiliza el ciclo de trabajo del editor: crea en un área de trabajo, perfecciona elementos desde el explorador integrado, inspecciona el contexto, prueba antes de que Git escriba, planifica antes de editar y deja que las herramientas de GitHub gestionen incidencias, solicitudes de incorporación de cambios y sesiones en la nube sin salir de VS Code. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[copilot-app]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/ +[copilot-cli]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[vscode]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md new file mode 100644 index 000000000..5729f272d --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "Lección 0 - Requisitos previos y configuración" +description: "Comprueba los requisitos previos del taller, confirma que Copilot Chat funciona en VS Code, añade la extensión GitHub Pull Requests and Issues y elige un modelo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Incorpora Copilot al editor. Copilot viene incluido en VS Code, así que no hay nada que instalar para el chat. Añade la extensión de GitHub y abre una carpeta vacía. + +En esta lección: + +- comprobarás los requisitos previos del taller. +- confirmarás que Copilot Chat responde en VS Code. +- instalarás la extensión GitHub Pull Requests and Issues. +- abrirás una carpeta de proyecto vacía y elegirás un modelo. + +## Requisitos previos + +Necesitas: + +- una cuenta de GitHub. [Crea una cuenta de GitHub][github-signup] o utiliza tu cuenta existente. +- un plan activo de Copilot. [Activa Copilot Free o un plan de pago de Copilot][copilot-plans]. Si tu organización ya te proporciona acceso a Copilot, utiliza esa cuenta. +- [Visual Studio Code][vscode]. +- [Git][git] instalado. Ejecuta `git --version` en una terminal para comprobarlo. + +## Configura VS Code + +1. Instala [VS Code][vscode] e inicia sesión en GitHub. Copilot y Copilot Chat están integrados, así que abre la vista **Chat** desde la barra de título y confirma que responde. +2. Abre la vista **Extensions** e instala la extensión oficial [GitHub Pull Requests and Issues][pr-extension] para que las incidencias y las solicitudes de incorporación de cambios aparezcan en la barra lateral. +3. Crea una carpeta vacía llamada `space-quiz`, selecciona **File** > **Open Folder** y ábrela. +4. Elige un modelo con el selector de modelos de la vista **Chat**, siguiendo el orden de preferencia de la siguiente sección. + +## Elige un modelo + +Selecciona la primera opción que tengas disponible: + +1. **GPT-6-Luna** (recomendado). +2. **Auto**, como alternativa equilibrada. +3. Cualquier modelo de la [lista de modelos activos][active-models]. + +La disponibilidad de los modelos depende de tu plan, de la directiva de la organización y de la versión del producto. + +## Resumen y pasos siguientes + +VS Code está listo con Copilot Chat, la extensión de GitHub y una carpeta `space-quiz` vacía. Continúa con la [lección 1: Crear en el área de trabajo][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[vscode]: https://code.visualstudio.com/ +[git]: https://git-scm.com/downloads +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 000000000..7218064a4 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "Lección 1 - Crear en el área de trabajo" +description: "Crea el Space Quiz en VS Code, previsualízalo en el explorador integrado y perfecciona un elemento seleccionado." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Mantén juntos el editor, el chat, los archivos y la vista previa. Crearás el cuestionario, lo probarás en el explorador integrado y, después, enviarás un elemento concreto directamente al chat para realizar un cambio acotado. + +En esta lección: + +- crearás el cuestionario en un único `index.html`. +- previsualizarás el cuestionario en el explorador integrado. +- seleccionarás un elemento en el explorador y lo perfeccionarás. + +## Crea el cuestionario + +Envía el siguiente prompt en Copilot Chat: + +```plaintext +Create a colorful, accessible space exploration quiz with 10 questions in a single index.html. Add a progress bar, score counter, animated correct and incorrect feedback, and a results screen. Use no server or dependencies. Open it in the VS Code integrated browser. +``` + +1. Revisa el archivo generado en el editor. +2. Abre el explorador integrado y responde a varias preguntas. +3. Abre **Source Control** en cualquier momento para ver los archivos modificados y las diferencias. + +## Selecciona un elemento y perfecciónalo + +El explorador integrado puede enviar un elemento concreto directamente al chat, así que no tienes que describir a qué botón te refieres. + +1. Con el cuestionario abierto en el explorador integrado, inicia la selección de un elemento desde la barra de herramientas del explorador. +2. Selecciona los botones de respuesta para adjuntar ese elemento al siguiente mensaje de chat. +3. Envía el siguiente prompt y observa cómo se vuelve a cargar la vista previa: + + ```plaintext + Using the selected element, make the answer buttons feel more tactile: add a subtle press state, a clearer focus ring for keyboard users, and a smoother transition into the correct and incorrect colors. Change nothing else. + ``` + +4. Lee las diferencias en **Source Control** antes de conservar el cambio. +5. Pulsa Tab para desplazarte por las respuestas y confirma que el contorno de foco es visible. + +## Resumen y pasos siguientes + +Has creado, previsualizado y perfeccionado el cuestionario sin salir del editor. Continúa con la [lección 2: Recoger las instrucciones del proyecto][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/10-review.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/10-review.md new file mode 100644 index 000000000..be4d35e52 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "Lección 10 - Repaso y pasos siguientes" +description: "Repasa el flujo de trabajo de VS Code y encuentra recursos para seguir aprendiendo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Has completado el ciclo de trabajo del editor: has creado en el editor, recogido las instrucciones, probado en el explorador integrado, planificado antes de editar, combinado con las herramientas de GitHub y delegado la siguiente idea a una sesión en la nube. + +## Qué has completado + +Has: + +- confirmado que Copilot Chat funciona y añadido la extensión GitHub Pull Requests and Issues. +- creado el cuestionario y perfeccionado un elemento seleccionado en el explorador integrado. +- generado `.github/copilot-instructions.md` con `/init`. +- inspeccionado el contexto del chat y realizado una prueba de humo antes de que Git escribiera nada. +- publicado con **Source Control** y un mensaje de commit redactado por Copilot. +- planificado una funcionalidad en el modo Plan antes de modificar nada. +- habilitado GitHub MCP y creado incidencias desde el chat. +- creado, revisado y combinado una solicitud de incorporación de cambios desde VS Code. +- delegado una funcionalidad a una sesión en la nube. + +## Sigue explorando + +- [Conoce Copilot en VS Code, incluido el chat, el modo de agente y las funciones del editor][copilot-vscode]. +- [Gestiona incidencias y solicitudes de incorporación de cambios en la barra lateral con la extensión GitHub Pull Requests][pr-extension]. +- [Añade herramientas que tu agente pueda invocar con servidores MCP en VS Code][mcp-servers]. +- [Enseña a Copilot las reglas del proyecto con instrucciones personalizadas][custom-instructions]. +- [Instala Git][git]. +- [Compara los planes de Copilot][copilot-plans]. + +Crea el mismo Space Quiz con una forma de trabajo diferente en el [taller de primeros pasos con la aplicación GitHub Copilot][first-steps-app] o en el [taller de primeros pasos con GitHub Copilot CLI][first-steps-cli]. Si estás listo para un escenario más profundo con una aplicación completa y el backlog de un equipo, continúa con el [taller de desarrollo en escenarios reales con VS Code][real-world-vscode]. + +[copilot-vscode]: https://code.visualstudio.com/docs/copilot/overview +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[custom-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[git]: https://git-scm.com/downloads +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[real-world-vscode]: /es-es/learning-hub/copilot-workshops/vscode/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md new file mode 100644 index 000000000..496c21308 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "Lección 2 - Recoger las instrucciones del proyecto" +description: "Ejecuta /init en Copilot Chat para generar .github/copilot-instructions.md para Space Quiz y adáptalo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Con un cuestionario funcional en el área de trabajo, genera instrucciones personalizadas del repositorio que describan el proyecto real. Copilot lee estas instrucciones con cada solicitud de chat. + +En esta lección: + +- generarás instrucciones personalizadas del repositorio con `/init`. +- revisarás `.github/copilot-instructions.md` antes de guardarlo. +- reducirás y personalizarás las instrucciones. + +## Recoge las reglas con `/init` + +1. Ejecuta `/init` en Copilot Chat. +2. Revisa el archivo `.github/copilot-instructions.md` generado antes de guardarlo. +3. Conserva solo las directrices que correspondan a este proyecto: un único archivo, sin dependencias, accesible y probado en el explorador. + +![Ilustración de VS Code con .github/copilot-instructions.md abierto en el editor y seleccionado en Explorer, junto a index.html. El archivo se titula Space Quiz y enumera estas reglas: un único index.html sin dependencias ni paso de compilación, todas las respuestas accesibles mediante el teclado y respeto por prefers-color-scheme en ambos temas. Una sección titulada Cómo prefiero que se escriba el código pide funciones pequeñas, retornos tempranos, evitar expresiones ingeniosas de una sola línea y comentarios solo para lo que sea realmente sorprendente.](/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg) + +Las instrucciones personalizadas del repositorio se encuentran en `.github/copilot-instructions.md` y se aplican a cada solicitud de chat. + +> [!IMPORTANT] +> **El orden importa** +> +> `/init` lee el área de trabajo tal como existe en ese momento. Ejecutarlo después de crear el cuestionario produce instrucciones basadas en código real. + +## Adáptalo a ti + +El archivo de instrucciones no sirve solo para recoger datos del proyecto. Añade los detalles que de otro modo repetirías en cada prompt, como tu forma preferida de escribir código, las convenciones de nomenclatura, las bibliotecas que deben evitarse y la cantidad de comentarios que quieres. Cada sesión futura lee este archivo antes de leer tu prompt. + +## Resumen y pasos siguientes + +El área de trabajo ya tiene instrucciones personalizadas basadas en código real. Continúa con la [lección 3: Inspeccionar el contexto y probar][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 000000000..3dd01e79f --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "Lección 3 - Inspeccionar el contexto y probar" +description: "Inspecciona el contexto adjunto a una solicitud de Copilot Chat y ejecuta una prueba de humo en el explorador antes de que Git escriba nada." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Antes de publicar nada, comprueba qué puede ver Copilot y demuestra que el cuestionario funciona. + +En esta lección: + +- inspeccionarás el contexto incluido en una solicitud de chat. +- ejecutarás una prueba de humo en el explorador. +- corregirás los fallos antes de pasar a Git. + +## Inspecciona el contexto desde la esquina inferior derecha + +VS Code muestra el contexto activo en la esquina inferior derecha del cuadro de entrada de Copilot Chat. + +1. Abre el indicador de contexto en la **esquina inferior derecha** del cuadro de entrada del chat. +2. Inspecciona los archivos, las instrucciones personalizadas y los símbolos incluidos en la solicitud. +3. Elimina el contexto irrelevante o adjunta el archivo del cuestionario antes de continuar. + +## Crea y prueba antes de que Git escriba + +Utiliza el explorador integrado y un prompt de prueba de humo antes de inicializar un repositorio o crear un commit: + +```plaintext +Run a browser-level smoke test for the quiz. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Ejecuta la prueba de humo y comprueba el explorador integrado. +2. Corrige los fallos y vuelve a ejecutar la prueba hasta que todo pase. +3. Pasa a Git solo cuando la creación del proyecto y las pruebas se hayan completado correctamente. + +## Resumen y pasos siguientes + +Has confirmado qué puede ver Copilot y probado el cuestionario antes de publicarlo. Continúa con la [lección 4: Publicar el proyecto][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md new file mode 100644 index 000000000..077e2102e --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "Lección 4 - Publicar el proyecto" +description: "Inicializa el proyecto, crea un commit y publica Space Quiz utilizando exclusivamente la integración de Source Control incluida en VS Code." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Publica el cuestionario probado en GitHub utilizando exclusivamente la integración de Git incorporada y deja que Copilot redacte el mensaje del commit a partir de lo que ha cambiado realmente. + +En esta lección: + +- inicializarás un repositorio desde **Source Control**. +- generarás un mensaje de commit a partir de las diferencias preparadas. +- publicarás la rama en un nuevo repositorio público de GitHub. + +## Inicializa, crea un commit y publica + +1. Abre **Source Control** y selecciona **Initialize Repository**. +2. Prepara los archivos para el commit. +3. Selecciona el icono **sparkle pencil** en el cuadro del mensaje del commit para que Copilot escriba el mensaje a partir de las diferencias preparadas. Lee el mensaje, corrige lo que no sea correcto y crea el commit. +4. Selecciona **Publish Branch** y crea un repositorio público `space-quiz` en GitHub. +5. Confirma que el archivo probado está presente en GitHub. + +![Ilustración de la vista Source Control de VS Code. La lista Changes muestra index.html y .github/copilot-instructions.md. Un aviso sobre el botón de destellos del cuadro del mensaje del commit dice que Copilot ha escrito tu mensaje, y el mensaje dice Añadir un temporizador por pregunta al cuestionario. Debajo del botón Commit, el botón Create Pull Request está resaltado con la nota de que primero debes crear el commit y, después, este botón aparece dentro de Source Control.](/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg) + +El botón de destellos redacta un mensaje de commit a partir de las diferencias preparadas. Una vez creado el commit, **Source Control** también ofrece crear la solicitud de incorporación de cambios. + +## Resumen y pasos siguientes + +El cuestionario probado ya está publicado en GitHub. Continúa con la [lección 5: Planificar antes de editar][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md new file mode 100644 index 000000000..e6b925f4e --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "Lección 5 - Planificar antes de editar" +description: "Cambia Copilot Chat al modo Plan para que investigue el área de trabajo y proponga un enfoque antes de editar archivos." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +El modo Plan investiga el área de trabajo y escribe un plan de implementación sin modificar los archivos. + +En esta lección: + +- cambiarás Copilot Chat de Agent a Plan. +- revisarás y perfeccionarás un plan propuesto. +- volverás a Agent para implementar el plan. + +## Acuerda el enfoque antes de modificar nada + +1. Abre Copilot Chat y utiliza el **menú desplegable de modos** situado encima del cuadro de entrada. +2. Cambia de **Agent** a **Plan**. +3. Describe la siguiente funcionalidad con este prompt y deja que Copilot investigue el área de trabajo: + + ```plaintext + Plan how to add a review screen that shows every question with the answer I chose. Investigate the existing quiz, list the changes you would make, call out accessibility and single-file risks, and stop before editing. + ``` + +4. Lee el plan y solicita cambios; después, vuelve a **Agent** para implementarlo. + +> [!TIP] +> **Cuándo merece la pena el modo de planificación** +> +> Utiliza el modo Plan para cualquier tarea ambigua, transversal o costosa de deshacer. Corregir un mal enfoque cuesta menos antes de la primera modificación. + +## Resumen y pasos siguientes + +Has acordado un enfoque con Copilot antes de que escribiera código. Continúa con la [lección 6: Dar a Copilot herramientas para trabajar con GitHub][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md new file mode 100644 index 000000000..82dad7b13 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "Lección 6 - Dar a Copilot herramientas para trabajar con GitHub" +description: "Habilita y revisa el servidor MCP de GitHub en VS Code antes de pedir a Copilot que trabaje con incidencias y solicitudes de incorporación de cambios." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Habilita el servidor MCP de GitHub *antes* de pedir a Copilot que cree incidencias o trabaje con solicitudes de incorporación de cambios. Con estas herramientas, Copilot puede leer y escribir datos de GitHub directamente desde el chat. + +En esta lección: + +- habilitarás el servidor MCP de GitHub. +- revisarás las herramientas y los permisos que solicita el servidor. +- confirmarás que las herramientas de GitHub están disponibles en el chat. + +## Habilita GitHub MCP + +1. Abre **Settings** de VS Code y habilita el servidor integrado **GitHub MCP**, si tu versión lo incluye. +2. En caso contrario, instala un servidor MCP de GitHub de confianza mediante el [flujo de configuración de servidores MCP][mcp-servers]. +3. Revisa las herramientas y los permisos que solicita el servidor antes de aprobarlo. +4. Confirma que las herramientas de GitHub aparecen en el selector de herramientas de Copilot Chat. + +## Resumen y pasos siguientes + +Copilot ya tiene herramientas para trabajar con GitHub. Continúa con la [lección 7: Planificar e implementar incidencias][next-lesson]. + +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 000000000..91e665816 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "Lección 7 - Planificar e implementar incidencias" +description: "Utiliza las herramientas de GitHub para crear incidencias desde Copilot Chat e implementa una en una nueva sesión de chat." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Con GitHub MCP habilitado, Copilot puede crear y leer incidencias directamente desde el chat. + +En esta lección: + +- crearás tres incidencias de GitHub bien delimitadas desde Copilot Chat. +- iniciarás una nueva sesión de chat para una incidencia. +- implementarás y comprobarás la incidencia. + +## Crea incidencias + +Envía el siguiente prompt: + +```plaintext +Review the space quiz and suggest three focused feature ideas. Use the GitHub tools to create a separate issue for each with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +## Implementa una incidencia + +1. Abre la vista **GitHub** en la barra de actividad e inspecciona las nuevas incidencias. +2. Elige una incidencia y selecciona el botón **+** en Copilot Chat para iniciar una nueva sesión para ella. +3. Utiliza el modo Agent para implementar la incidencia mientras la sesión original sigue disponible para comparar. +4. Ejecuta la prueba de humo del explorador integrado de la [lección 3][lesson-3] antes de crear una solicitud de incorporación de cambios. + +## Resumen y pasos siguientes + +Has creado incidencias e implementado una en su propia sesión. Continúa con la [lección 8: Revisar y combinar][next-lesson]. + +[lesson-3]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 000000000..d5300e57f --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "Lección 8 - Revisar y combinar" +description: "Crea una solicitud de incorporación de cambios desde Source Control, solicita una revisión de código de Copilot, atiende los comentarios con las herramientas de GitHub y combínala." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Inspecciona, revisa y combina el nuevo trabajo con las herramientas de GitHub en VS Code. + +En esta lección: + +- crearás un commit con el nuevo trabajo y una solicitud de incorporación de cambios desde **Source Control**. +- solicitarás una revisión de código de Copilot. +- atenderás los comentarios y las comprobaciones que fallen con GitHub MCP. +- combinarás la solicitud de incorporación de cambios. + +## Inspecciona, revisa y combina + +1. Abre **Source Control** para inspeccionar los archivos modificados y las diferencias antes de crear nada. +2. Crea un commit con el nuevo trabajo utilizando de nuevo el botón **sparkle** para escribir el mensaje. +3. Selecciona el botón **Create Pull Request** que aparece en **Source Control**. Copilot redacta el título y la descripción a partir de tus commits, así que obtienes una solicitud de incorporación de cambios mejor que si la pides desde cero. +4. Solicita una **Copilot code review** mientras creas la solicitud de incorporación de cambios, desde la vista **GitHub** de VS Code o en GitHub. +5. Pide a Copilot, con GitHub MCP, que inspeccione la solicitud de incorporación de cambios, resuelva los conflictos de combinación, atienda los comentarios de revisión e investigue las comprobaciones de CI que fallen. +6. Vuelve a probar en el explorador integrado, revisa cada cambio propuesto y actualiza la rama. +7. Cuando las comprobaciones y la revisión hayan terminado, pide al agente que combine la solicitud o combínala desde la integración de GitHub. + +> [!NOTE] +> Siempre puedes pedir a Copilot que haga esto desde el chat. Merece la pena aprender primero la vía de **Source Control**, porque redacta por ti el texto del commit y de la solicitud de incorporación de cambios a partir de lo que ha cambiado realmente. + +## Resumen y pasos siguientes + +Has revisado y combinado una solicitud de incorporación de cambios sin salir de VS Code. Continúa con la [lección 9: Entregar la siguiente idea a una sesión en la nube][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md new file mode 100644 index 000000000..7c8a3ea53 --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "Lección 9 - Entregar la siguiente idea a una sesión en la nube" +description: "Cambia el entorno de Copilot Chat de Local a Cloud y delega una funcionalidad independiente que llegará como solicitud de incorporación de cambios." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Has completado todo el ciclo de forma local, así que ya sabes cómo es un buen resultado. Es el momento adecuado para dejar que una tarea se ejecute sin ti. Copilot Chat puede cambiar el entorno en el que se ejecuta, de tu equipo a GitHub. + +En esta lección: + +- cambiarás el entorno de Copilot Chat de **Local** a **Cloud**. +- delegarás una funcionalidad independiente con criterios de aceptación claros. +- revisarás la solicitud de incorporación de cambios resultante. + +> [!NOTE] +> Las sesiones en la nube requieren un plan de pago de Copilot que incluya estas funciones. Es posible que un administrador también deba habilitar el acceso en Business y Enterprise. + +## Delega a la nube + +![Ilustración de Copilot Chat en VS Code con el selector Harness abierto. En Copilot, Cloud está seleccionado en lugar de Local, y aparecen otros entornos, como Claude y Codex. Arriba, una solicitud para añadir tres nuevos temas de color muestra Working in the cloud con un enlace para seguir la sesión en GitHub.](/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg) + +El selector **Harness** muestra Copilot ejecutándose en **Local** o **Cloud**, junto con otros entornos. Cambia a **Cloud** y la siguiente solicitud se ejecutará en GitHub en lugar de en tu equipo. + +1. En Copilot Chat, abre el selector **Harness** y cambia Copilot de **Local** a **Cloud**. +2. Inicia una nueva sesión y asígnale una funcionalidad independiente con criterios de aceptación claros: + + ```plaintext + Add a theme picker to the space quiz with three named themes: Deep Space, Launch Pad, and Lunar. Persist the choice in localStorage, keep everything in the single index.html with no dependencies, keep contrast accessible in every theme, and open a pull request when the tests pass. + ``` + +3. Cierra el portátil. El trabajo continúa en GitHub y llega como solicitud de incorporación de cambios. +4. Revisa esa solicitud de incorporación de cambios con el mismo cuidado que la que has escrito tú mismo. + +> [!TIP] +> **Delega lo que puedas describir** +> +> Las sesiones en la nube funcionan mejor con una descripción precisa de la tarea. Si no puedes escribir los criterios de aceptación, la tarea todavía no está lista para salir de tu equipo. + +## Resumen y pasos siguientes + +Has delegado una funcionalidad a una sesión en la nube y revisado el resultado. Continúa con la [lección 10: Repaso y pasos siguientes][next-lesson]. + +[next-lesson]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/index.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/index.md new file mode 100644 index 000000000..a43389ffd --- /dev/null +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/first-steps/vscode/index.md @@ -0,0 +1,51 @@ +--- +title: "Primeros pasos con Visual Studio Code" +description: "Realiza un recorrido guiado por GitHub Copilot en Visual Studio Code creando, probando y entregando un Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +Realiza un recorrido práctico por GitHub Copilot en Visual Studio Code, pensado para principiantes. Crearás un Space Quiz lleno de color desde una carpeta vacía y aprenderás el ciclo de trabajo del editor: crear en un área de trabajo, inspeccionar el contexto, probar antes de que Git escriba nada, planificar antes de editar y dejar que las herramientas de GitHub gestionen incidencias y solicitudes de incorporación de cambios sin salir de VS Code. + +El taller dura aproximadamente entre 60 y 90 minutos. El proyecto utiliza un único archivo HTML sin dependencias de ejecución, así que puedes centrarte en aprender a usar Copilot en el editor. + +> [!NOTE] +> Este taller fue creado por [James Montemagno][james] y adaptado de [Primeros pasos con GitHub Copilot][source-lab]. El contenido original está disponible bajo la [licencia MIT][source-license]. + +## Lecciones + +| Lección | Tema | Qué harás | +| ------ | ----- | ---------------- | +| [0. Requisitos previos y configuración][lesson-0] | Configuración | Comprueba los requisitos previos, añade la extensión de GitHub, abre una carpeta y elige un modelo | +| [1. Crear en el área de trabajo][lesson-1] | Creación | Crea el cuestionario, previsualízalo en el explorador integrado y perfecciona un elemento que selecciones | +| [2. Recoger las instrucciones del proyecto][lesson-2] | Instrucciones | Genera y adapta `.github/copilot-instructions.md` con `/init` | +| [3. Inspeccionar el contexto y probar][lesson-3] | Pruebas | Inspecciona el contexto del chat y ejecuta una prueba de humo antes de que Git escriba nada | +| [4. Publicar el proyecto][lesson-4] | Publicación | Inicializa, crea un commit y publica con Source Control | +| [5. Planificar antes de editar][lesson-5] | Planificación | Utiliza el modo Plan para acordar un enfoque para la siguiente funcionalidad | +| [6. Dar a Copilot herramientas para trabajar con GitHub][lesson-6] | Herramientas | Habilita y revisa el servidor MCP de GitHub | +| [7. Planificar e implementar incidencias][lesson-7] | Implementación | Crea incidencias con las herramientas de GitHub e implementa una en una sesión nueva | +| [8. Revisar y combinar][lesson-8] | Revisión | Crea una solicitud de incorporación de cambios desde Source Control, solicita una revisión y combínala | +| [9. Delegar a una sesión en la nube][lesson-9] | Delegación | Cambia el entorno a Cloud y delega una nueva funcionalidad | +| [10. Repaso y pasos siguientes][lesson-10] | Repaso | Repasa el flujo de trabajo y sigue aprendiendo | + +## Primeros pasos + +[Empieza con la lección 0: Requisitos previos y configuración][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites/ +[lesson-1]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ +[lesson-2]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ +[lesson-3]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[lesson-4]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ +[lesson-5]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ +[lesson-6]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ +[lesson-7]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ +[lesson-8]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ +[lesson-9]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ +[lesson-10]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/es-es/learning-hub/copilot-workshops/index.md b/website/src/content/docs/es-es/learning-hub/copilot-workshops/index.md index af3ee5bdb..63e7df4bf 100644 --- a/website/src/content/docs/es-es/learning-hub/copilot-workshops/index.md +++ b/website/src/content/docs/es-es/learning-hub/copilot-workshops/index.md @@ -1,41 +1,44 @@ --- -title: "Manos a la obra con los agentes de GitHub Copilot" +title: "Talleres de GitHub Copilot" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -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. - -> [!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](/es-es/learning-hub/copilot-workshops/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](/es-es/learning-hub/copilot-workshops/cli/) - -**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. - -### 🤖 [Copilot App](/es-es/learning-hub/copilot-workshops/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. - -### ☁️ [Copilot Cloud Agent](/es-es/learning-hub/copilot-workshops/cloud/) - -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. - -## Escenario - -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 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. ## Primeros pasos -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 +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. + +### [Recorrido por la aplicación GitHub Copilot][first-steps-app] + +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. + +### [Primeros pasos con GitHub Copilot CLI][first-steps-cli] + +Crea el mismo cuestionario desde la terminal, revisa las diferencias, ejecuta sesiones en paralelo en árboles de trabajo, planifica antes de editar y crea, combina y delega solicitudes de incorporación de cambios sin salir del shell. + +### [Primeros pasos con Visual Studio Code][first-steps-vscode] + +Crea el cuestionario en VS Code, pruébalo en el explorador integrado, publícalo con Control de código fuente, trabaja con incidencias y solicitudes de incorporación de cambios mediante las herramientas de GitHub y delega trabajo a una sesión en la nube. + +## Desarrollo en escenarios reales + +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. + +### [Consulta los talleres de desarrollo en escenarios reales][real-world-development] + +Elige entre GitHub Copilot CLI, la aplicación GitHub Copilot, el agente de GitHub Copilot en la nube o Visual Studio Code. + +> [!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. + +[first-steps-app]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /es-es/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /es-es/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-development]: /es-es/learning-hub/copilot-workshops/real-world-development/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/0-prerequisites.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/0-prerequisites.md index 3d49bcf26..2a02ab0f1 100644 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/0-prerequisites.md +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/0-prerequisites.md @@ -3,7 +3,7 @@ title: "レッスン 0 - 前提条件" description: "GitHub Copilot app のレッスンに向けて、Tailspin Toys プロジェクト用の Node.js をインストールし、テンプレートからリポジトリの自分用コピーを作成します。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- GitHub Copilot app は、Copilot と GitHub の両方を一元的に扱うデスクトップアプリです。Issue や pull request にすばやくアクセスでき、もちろん GitHub Copilot を使った開発も可能です。このワークショップでは、Astro で構築された Tailspin Toys アプリと GitHub Copilot app を使い、ローカル環境で作業します。始める前に、Node.js がローカルにインストールされていることを確認してから、Copilot app をインストールします。 @@ -15,18 +15,18 @@ GitHub Copilot app は、Copilot と GitHub の両方を一元的に扱うデス ## Node.js をインストールする -いくつかのレッスンでは、エージェントに機能を構築させ、Tailspin Toys のテストスイートをローカルで実行します。そのためには [**Node.js**][nodejs] (プロジェクトに必要な唯一のランタイム) が必要です。バージョン **22 以降**をインストールしてください。現在の **LTS** リリースを選ぶと安心です。 +いくつかのレッスンでは、エージェントに機能を構築させ、Tailspin Toys のテストスイートをローカルで実行します。そのためには [**Node.js**][nodejs] (プロジェクトに必要な唯一のランタイム) が必要です。現在の **LTS** リリースをインストールしてください。 どのプラットフォームでも、公式インストーラーを使うのが最も簡単です。 1. Windows Terminal、macOS のターミナル、または普段使用しているターミナルを開きます。 -2. 次のコマンドを実行し、Node.js 22 以降がインストールされていることを確認します。 +2. 次のコマンドを実行し、インストールされている Node.js のバージョンを確認します。 ```shell node --version ``` -3. `v22` 以上のバージョン番号が表示された場合は、次のセクションに進めます。 +3. プロジェクトの README と `package.json` に記載されている要件を満たしていれば、次のセクションに進めます。 > [!TIP] > Node.js がインストールされていない場合、または更新が必要な場合にのみ、以降の手順を実行してください。 @@ -41,10 +41,10 @@ GitHub Copilot app は、Copilot と GitHub の両方を一元的に扱うデス node --version ``` -9. `v22.x.x` 以上が表示されることを確認します。 +9. インストールしたバージョンが表示されることを確認します。 -> [!TIP] -> コンテナーを使用する場合、[**Docker**][docker] があれば、Node.js をローカルにインストールする代わりにリポジトリの [dev container][dev-containers] を使用できます。dev container には Node.js が含まれているため、両方を用意する必要はありません。 +> [!IMPORTANT] +> 各ワークツリーには、プロジェクトの依存関係と E2E チェック用の Playwright Chromium も必要です。ワークツリーの準備では学習用リポジトリの README に従い、インストールの要求は内容を確認してから承認してください。 ## ラボ用リポジトリを設定する @@ -64,11 +64,16 @@ Tailspin Toys プロジェクトの自分用コピーを使って作業します > [!NOTE] > テンプレートからリポジトリを作成すると、GitHub Issue のバックログが自動的に作成されます。ワークショップ全体を通してこれらの Issue を使用するため、自分で作成する必要はありません。 +ワークショップのテンプレートの新しいコピーを使用してください。リポジトリの指示、アプリケーションコード、テスト、quality-checks スキル、既存のキャンバス拡張機能が含まれています。ワークショップ中にスキルをカスタマイズし、QA エージェントを作成します。古いコピーを使う場合は、必要なファイルが含まれているか進行役に確認してください。 + ## まとめと次のステップ -準備が整いました。プロジェクトをコンピューター上でビルドしてテストできるように Node.js をインストールし、テンプレートから Tailspin Toys リポジトリの自分用コピーを作成しました。 +準備が整いました。このレッスンでは、次の作業を行いました。 -次は GitHub Copilot app をインストールし、作成したリポジトリを接続して、ワークスペースを確認します。[レッスン 1「GitHub Copilot app のインストール」][next-lesson]に進んでください。 +- プロジェクトをコンピューター上でビルドしてテストできるように Node.js をインストールした。 +- テンプレートから Tailspin Toys リポジトリの自分用コピーを作成した。 + +次は、[GitHub Copilot app をインストールし][next-lesson]、作成したリポジトリを接続して、ワークスペースを確認します。 ## リソース @@ -79,7 +84,5 @@ Tailspin Toys プロジェクトの自分用コピーを使って作業します [next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app/ [nodejs]: https://nodejs.org/ [node-download]: https://nodejs.org/en/download -[docker]: https://www.docker.com/products/docker-desktop/ -[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers [template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app.md index b9ae4a4a2..45bf0075b 100644 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app.md +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app.md @@ -3,7 +3,7 @@ title: "レッスン 1 - GitHub Copilot app のインストール" description: "GitHub Copilot app をインストールし、テンプレートから作成したリポジトリを接続して、ワークスペースを確認し、クイックチャットを試します。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- [**GitHub Copilot app**][about-copilot-app] は、エージェント主導の開発に使用するデスクトップアプリケーションです。GitHub Copilot CLI を基盤とし、GitHub とネイティブに統合されているため、リポジトリ、ブランチ、CI パイプラインをすぐに利用できます。すべての作業を自分で行うのではなく、複数のエージェントをそれぞれ分離されたワークスペースで並列に指示し、繰り返し発生するタスクを自動化するワークフロー向けに設計されています。Node.js のインストールとプロジェクトのコピーが完了したので、次はアプリをインストールして、そのリポジトリを接続します。 @@ -41,32 +41,39 @@ GitHub Copilot app を使用するには、まずアプリをインストール プロジェクトを接続したら、各領域を確認します。アプリのサイドバーは、主に次の領域で構成されています。 +- **New** - 名前のとおり、ここから Copilot との新しいチャットセッションを開始できます。 +- **Pull requests** - アプリの GitHub ネイティブ統合を通じて表示される pull request です。アプリを離れずに、pull request の参照や絞り込み、CI ステータスの確認、pull request のレビューを行えます。 +- **Issues** - 同じように表示される Issue です。Issue の参照や絞り込み、Issue からのセッション開始を行えます。 +- **Automations** - スケジュールまたはオンデマンドで実行する、保存済みのエージェントタスクです。やることリストの管理、定期的なプロジェクトの保守、その他の手間のかかる作業を任せるのに役立ちます。振り返りでは次のステップとしてリンクを紹介し、追加の演習にはしません。 +- **Customize** - MCP server、プラグイン、スキルなどのコンポーネントによって、Copilot app に機能を追加します。Playwright MCP の設定に使用します。 +- **Chats** - 独自のブランチやワークスペースを必要としない、質問やブレインストーミング向けの簡易的な会話です。このレッスンの最後に試します。 - **Sessions** - エージェントが作業する場所です。各セッションは分離された独自のワークスペースで実行されるため、変更が競合することなく複数のセッションを同時に実行できます。次のレッスンで最初のセッションを開始します。 -- **Quick chats** - 独自のブランチやワークスペースを必要としない、質問やブレインストーミング向けの簡易的な会話です。このレッスンの最後に試します。 -- **My work** - アプリの **GitHub ネイティブ統合**を通じて表示される Issue と pull request です。アプリを離れずに、Issue と pull request の参照や絞り込み、CI ステータスの確認、Issue からのセッション開始、pull request のレビューを行えます。 -- **Automations** - スケジュールまたはオンデマンドで実行する、保存済みのエージェントタスクです。ハーネスの終盤で作成します。 + +ワークショップを進めながら、ワークスペースを確認していきます。 + +> [!TIP] +> 迷ったときは Copilot に質問しましょう。操作方法がわからない場合や、何かが可能かどうか知りたい場合は、Copilot に尋ねると案内してくれます。 ### 用意されたバックログを確認する -アプリは GitHub とネイティブに統合されているため、リポジトリで待機中の作業がアプリ内に表示されます。テンプレートからリポジトリを作成したときに、バックログとなる Issue が用意されています。表示されていることを確認します。 +バックログのないプロジェクトはほとんどなく、Tailspin Toys も例外ではありません。テンプレートからリポジトリを作成したときに用意された、現在のバックログを確認しましょう。 -1. サイドバーで **My work** を選択します。 -2. テンプレートはバックログに 8 件の Issue を用意しています。このハーネスでは次の 3 件に焦点を当てます。表示されていることを確認してください。 +1. サイドバーで **Issues** を選択します。 +2. Issue 番号を決めつけず、次のタイトルで検索します。 - Allow users to filter games by category and publisher - Update our repository coding standards - - Implement pagination on the game list page -3. Issue を選択して詳細を読みます。各 Issue はエージェントセッションの開始点にもなります。ハーネスの後半では、これらの Issue から作業を開始します。 +3. Issue を選択して詳細を読みます。各 Issue はエージェントセッションの開始点にもなります。小規模な最初の変更を完了した後、フィルター機能の Issue から作業を開始します。 > [!NOTE] -> My work の項目一覧は自動的に絞り込まれ、Copilot app に追加したリポジトリの項目だけが表示されます。ほかのリポジトリの作業項目を表示するには、そのリポジトリをアプリに追加してください。 +> **Issues** と **Pull requests** の項目一覧は自動的に絞り込まれ、Copilot app に追加したリポジトリの項目だけが表示されます。ほかのリポジトリの作業項目を表示するには、そのリポジトリをアプリに追加してください。 ## クイックチャットを試す アプリに慣れるには、アプリ自体について質問するのが効果的です。その用途には **quick chat** が適しています。Quick chats ではブランチや worktree を作成せずに質問やブレインストーミングができるため、セッションを必要としない、その場限りの簡単な質問に最適です。 -1. サイドバーで **Quick chats** の横にある **+** を選択し、新しいチャットを開きます。 +1. サイドバーで **Chats** の横にある **+** を選択し、新しいチャットを開きます。 2. アプリのセッションがどのように動作するかを尋ねます。 ```plaintext @@ -81,10 +88,10 @@ GitHub Copilot app をインストールし、プロジェクトを接続して - アプリをインストールして GitHub にサインインする。 - GitHub リポジトリからプロジェクトを追加する。 -- ワークスペースを確認し、**My work** で用意されたバックログを見つける。 +- ワークスペースを確認し、**Issues** で用意されたバックログを見つける。 - クイックチャットを使って、その場限りの簡単な質問をする。 -次は、最初のエージェントセッションを開始し、ゲームカードに星評価を表示する最初の変更をプロジェクトに加えます。[レッスン 2「最初のエージェントセッションの実行」][next-lesson]に進んでください。 +次は、最初のエージェントセッションを開始し、ゲームカードに星評価を表示する最初の変更をプロジェクトに加えます。[レッスン 2「星評価の追加で小さな成果を得る」][next-lesson]に進んでください。 ## リソース @@ -92,7 +99,6 @@ GitHub Copilot app をインストールし、プロジェクトを接続して - [GitHub Copilot app の概要][getting-started] - [GitHub Copilot app でのエージェントセッションの操作][agent-sessions] -[ex0]: /ja-jp/learning-hub/copilot-workshops/app/0-prerequisites/ [next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/2-add-star-rating/ [about-copilot-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 diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/10-review.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/10-review.md new file mode 100644 index 000000000..675f98cc5 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/10-review.md @@ -0,0 +1,77 @@ +--- +title: "レッスン 10 - 振り返りと次のステップ" +description: "App のワークフロー、2つの PR マイルストーン、キャンバス演習、再利用可能な品質プラクティスを振り返り、追加のリソースを確認します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +GitHub Copilot app を使用して、Tailspin Toys の1つの連続したワークフローに取り組みました。実施した内容は次のとおりです。 + +- リポジトリを接続し、アプリのワークスペースと用意されたバックログを確認して、クイックチャットを試した。 +- 星評価に対象を絞ったセッションを開始し、ブラウザーキャンバスで結果をレビューして、最初の pull request (PR) を手動でマージした。 +- フィルター機能の Issue から開始し、**Plan** モードでアプローチを定義して、**Autopilot** モードで構築し、**Interactive** モードでレビューした。 +- カスタム指示でエージェントをガイドし、既存の `quality-checks` スキルをカスタマイズして、単体テスト、lint、型チェックを実行した。 +- Playwright Model Context Protocol (MCP) server を追加し、実際のブラウザーでフィルター機能を確認した。 +- 要件、カバレッジ、スキルの結果、ブラウザーでの証拠を評価する品質保証 (QA) カスタムエージェントを作成して選択した。 +- フィルター機能の変更全体をレビューし、2つ目の PR に **Agent Merge** を承認した。 +- 既存の Database Explorer キャンバスを使用してから、リポジトリに保存するトリアージキャンバスを作成してテストした。 + +## リリースしたもの + +ワークショップには2つの PR マイルストーンがあり、それぞれ更新済みの `main` から作成した専用のブランチを使用します。 + +1. **星評価:** ゲームカードに既存の `starRating` と明示的な未評価状態を表示します。 +2. **フィルター機能と品質ワークフロー:** フィルター機能を実装し、指示を更新して機能に適用し、`quality-checks` のレポートをカスタマイズして、QA プロファイルと関連するテストを含めます。 + +フィルター機能の計画から PR の作成まで、同じセッション、worktree、ブランチを使用しました。ワークショップを円滑に進めるため、この作業を1つの PR にまとめました。その後、PR ワークフローを繰り返さずに、既存の Database Explorer を使用し、リポジトリに保存するトリアージキャンバスを作成しました。 + +## 検証方法の違い + +自動テスト、手動のブラウザー確認、MCP を使った Copilot によるブラウザーでの調査など、複数の方法でコードを検証しました。`quality-checks` スキルは単体テスト、lint、型チェックを実行し、新しい形式で結果を報告しました。QA では、PR の前にこれらの結果を要件とテストカバレッジのレビューと組み合わせました。 + +追加するテストは実際の不足を補うものにします。新しいテストが不要な QA 実行も正しい結果になり得ます。ツールの不足、スキップされたチェック、失敗は明示すべき阻害要因であり、成功ではありません。マージを承認する前にコードと証拠をレビューし、変更後は関連する証拠を更新してください。 + +## ベストプラクティス + +Copilot に与えるコンテキストとツールが、その作業を左右します。このワークショップでは、指示を更新し、スキルをカスタマイズして、QA プロファイルを作成し、MCP server を設定して、キャンバスを作成しました。セッション間でこれらのカスタマイズを再利用し、チームのニーズに合わせて調整してください。指示は標準を定め、スキルは繰り返し行うタスクを説明し、カスタムエージェントは専門的な役割を定義し、MCP server は外部ツールを接続し、キャンバスは共有の対話型領域を提供します。エージェントの要約だけでなく、実際の変更とツールの結果をレビューしてください。 + +タスクに合わせて**モードとモデル**を選択します。構築前にアプローチを検討するには **Plan**、対象を絞った変更で作業に関与し続けるには **Interactive**、範囲が明確で分離されたタスクに限って **Autopilot** を使用します。定型的な編集には高速なモデルを選び、複雑な作業には推論能力が高く、より多くの推論を行うモデルを選びます。 + +基盤と同じくらい、コンテキストも重要です。何を、なぜ、どのように構築するかを明確に説明すると、出力は大きく変わります。アイデアを本格的なセッションに移す前に範囲を決める場所として、Quick chats が役立ちます。 + +## さらに確認する機能 + +コアワークフローを学習しました。ほかにも確認する価値がある機能があります。 + +- 最近の作業の要約など、定期的またはオンデマンドのタスクに使用する [**Automations**][using-automations]。導入前にスケジュール、権限、範囲をレビューしてください。自動化の作成は次のステップであり、このワークショップの一部ではありません。 +- 構築前に問題について対話し、重要なフィードバックを得るための **Rubber duck**。 +- セッションで起きたことの記録を生成する [`/chronicle`][chronicle]。 +- Ollama、Foundry Local、LM Studio を介したローカルモデルなど、独自のプロバイダーのモデルを使用する [Bring your own key (BYOK)][byok]。 +- アプリを直接リポジトリ、セッション、プロンプトの画面で開く [Deep links][deep-links]。 + +## 次のステップ + +ツールを使いこなす最良の方法は、使い続けることです。実稼働コード、趣味のコード、長年構想していながら構築できていなかった小さなアプリなどに活用してください。学んだことをチームと共有し、チームからも学びましょう。そして、引き続きドキュメントを確認してください。 + +GitHub Copilot エコシステムをさらに学ぶには、[VS Code ハーネス][vscode-harness]、[Copilot CLI ハーネス][cli-harness]、[Cloud agent ハーネス][cloud-harness]を確認してください。 + +## リソース + +- [GitHub Copilot app について][about-copilot-app] +- [GitHub Copilot app の概要][getting-started] +- [GitHub Copilot app のカスタマイズ][customize] +- [Automations の使用][using-automations] +- [Canvas extensions の操作][canvas-docs] + +[vscode-harness]: /ja-jp/learning-hub/copilot-workshops/vscode/ +[cli-harness]: /ja-jp/learning-hub/copilot-workshops/cli/ +[cloud-harness]: /ja-jp/learning-hub/copilot-workshops/cloud/ +[about-copilot-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 +[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle +[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models +[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/2-add-star-rating.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/2-add-star-rating.md index 23a99826f..42930f9ce 100644 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/2-add-star-rating.md +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/2-add-star-rating.md @@ -1,9 +1,9 @@ --- -title: "レッスン 2 - 最初のエージェントセッションの実行" +title: "レッスン 2 - 星評価の追加で小さな成果を得る" description: "GitHub Copilot app で最初のエージェントセッションを開始し、ゲームカードに小さな変更を加えて、最初の pull request としてマージします。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- 前のレッスンでは、ワークスペースを確認し、クイックチャットを使いました。ここでは、**エージェントセッション**を開始し、プロジェクトに最初の変更を加えます。変更は小規模なものにします。ゲームのデータにはすでに星評価が含まれていますが、ホームページのゲームカードにはまだ表示されていません。エージェントに表示を依頼し、変更をレビューして、最初の pull request としてマージします。 @@ -31,21 +31,15 @@ Tailspin Toys の各ゲームには星評価を設定でき、ゲーム詳細ペ 新しいセッションを開始し、プロジェクトの調査と機能の実装に取りかかります。[前のレッスン][prior-lesson]では、GitHub リポジトリからプロジェクトを追加しました。そのリポジトリ用の新しいセッションを作成し、変更を依頼します。 1. GitHub Copilot app に戻ります。アプリを閉じている場合は開きます。 -2. **Home screen** を選択します。 -3. リポジトリに `tailspin-toys` が選択されていることを確認します。 +2. **Projects** の横にある **+** を選択します。 +3. リポジトリとして `tailspin-toys` を選択します。 +4. プロンプトボックスの下で **new working tree** と **Interactive** モードを選択します。次のプロンプトを使って変更を依頼します。 - ![リポジトリセレクターに tailspin-toys が設定され、プロンプトの下にモデルセレクターが表示された GitHub Copilot app のプロンプトボックス](/images/learning-hub/copilot-workshops/app-2-start-session.png) + ```plaintext + Show each game's starRating out of 5 in the game cards on the list page. If the rating is null, show "No rating yet". Keep the card layout as it is, add tests, and run the relevant checks. + ``` -4. 次のプロンプトを使って変更を依頼します。 - - ```plaintext - On the game cards, show each game's star rating. The Game type already includes a starRating field — it's a number out of 5, or null when a game hasn't been rated yet. Display it on each card in src/components/GameCard.astro, and when starRating is null show "No rating yet" instead. Keep the change small and don't restructure the card layout. - ``` - -> [!NOTE] -> プロンプトに、Copilot が更新するファイル名が含まれていることに注目してください。Copilot が作業に含めるファイルを指定する必要はありませんが、方向性を示すことで、コードをすばやく生成し、トークン使用量を削減できます。 - -5. Enter を選択して、プロンプトを Copilot に送信します。 +5. Enter を押して、プロンプトを Copilot に送信します。 Copilot app は、最初にプロジェクトの分離されたコピーである新しい worktree を作成して作業を開始します。次にプロジェクトを調査し、新機能の追加に必要な更新対象ファイルを見つけて、必要なコードを作成します。これで Copilot app を使って新機能を追加できました。 @@ -55,7 +49,7 @@ AI が生成したすべての変更は、どれほど小さくてもマージ 1. アプリの右上隅にある **Toggle review panel** を選択します。Copilot が行った未処理の変更がすべて表示される差分画面が開きます。 - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](/images/learning-hub/copilot-workshops/app-2-review-panel.png) + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](/images/learning-hub/copilot-workshops/app-2-review-panel.png) 2. ゲームの詳細表示に使用される中心的なファイル `GameCard.astro` にコードが追加されていることを確認します。次のような小さなブロックが追加されているはずです。評価がある場合は表示し、`starRating` が `null` の場合は "No rating yet" を表示します。 @@ -76,40 +70,38 @@ AI が生成したすべての変更は、どれほど小さくてもマージ ## 変更を確認する -コードを読むだけで動作すると判断せず、視覚的にもテストします。そのためには、ターミナルからアプリを起動して、すべてが動作することを確認する必要があります。Copilot app にはターミナルが組み込まれています。 +ブラウザーを開く前に、エージェントの自動チェック結果をレビューします。数値の `starRating` と `null` の場合の代替表示をテストしていることを確認します。前提条件が不足していたり、チェックがスキップされていたりする場合は成功ではありません。インストールの要求は内容を確認してから承認してください。 -1. Copilot app の右側にあるレビューパネルで **Terminal** を選択します。**Terminal** ボタンがない場合は、**+** (**Open in panel** というラベルが付いています) を選択してから **Terminal** を選択します。 +コードを読むだけで動くと判断するのではなく、Copilot に Web サイトを開かせて、更新された UI を確認しましょう。Web サイトを起動し、ブラウザーキャンバスで開くよう依頼できます。 - ![GitHub Copilot app のレビューパネルにある Terminal ボタン](/images/learning-hub/copilot-workshops/app-terminal-screenshot.png) +> [!TIP] +> キャンバスは、Copilot app 内で利用できるインタラクティブなウィジェットです。後のレッスンではカスタムキャンバスを調べ、自分でも作成しますが、ここでは組み込みのブラウザーキャンバスを使用します。 -2. ターミナルウィンドウに次のコマンドを入力し、Web アプリの開発サーバーを起動します。 +1. 次のプロンプトを使い、アプリを起動してブラウザーキャンバスでページを開くよう Copilot に依頼します。 - ```shell - npm run dev - ``` + ```plaintext + Start the app and open it in the browser canvas. + ``` -3. サーバーが起動したら、ブラウザーウィンドウを開きます。起動には少し時間がかかります。 -4. http://localhost:4321 に移動します。 -5. ランディングページのすべてのゲームに星評価が表示されていることを確認します。 -6. ターミナルウィンドウに戻ります。 -7. Ctrl+C を選択して開発サーバーを停止します。 +2. しばらくするとアプリが起動し、Copilot app 内にブラウザーウィンドウが開きます。 +3. 評価済みのゲームカードに5点満点の値が表示されることを確認します。 +4. 確認が終わったら、次のプロンプトを使い、このセッションで起動した開発サーバーを停止するよう Copilot に依頼します。 + + ```plaintext + Stop the dev server and close the browser canvas. + ``` ## 最初の pull request を作成してマージする -変更に問題がないことを確認できたので、リリースします。エージェントに pull request の作成を依頼し、github.com で自分でレビューしてマージします。今回は手動で管理します。後のレッスンでは、Copilot でこの作業の一部を自動的に処理する方法を確認します。 +機能を作成できました。次は、新しいコードを既存のコードベースにマージするための pull request (PR) を作成します。 1. 右上隅にある **Create PR** を選択します。 2. 求められた場合は **Sign in with your browser** を選択し、画面の指示に従って認証します。 3. Copilot が PR の作成を開始します。 - -PR が作成されると、Copilot はリポジトリで実行する必要があるワークフローを監視します。しばらくすると、右上のボタンが **Ready to merge** に変わります。これは PR をマージする準備が整ったことを示します。 - 4. チャットのすぐ上にある **PR** バブルを選択し、レビューペインで PR を開いて pull request を確認します。必要に応じて、ここで PR をレビューできます。 5. 準備ができたら **Ready to merge** を選択します。 6. 新しいダイアログウィンドウで **Merge pull request** を選択し、pull request をマージします。 -これで Web サイトに新機能を反映できました。 - ## まとめと次のステップ 最初のエージェントセッションを開始し、最初の変更をリリースしました。具体的には、次の作業を行いました。 @@ -118,9 +110,9 @@ PR が作成されると、Copilot はリポジトリで実行する必要があ - ゲームカードに小規模で対象を絞った変更を加えるようエージェントに指示した。 - ワークスペースの差分ビューで変更をレビューした。 - アプリをローカルで実行し、ブラウザーで星評価を確認した。 -- pull request を作成し、github.com で自分でマージした。 +- PR 1 を作成し、チェックをレビューして、明示的にマージした。 -次は、アプリを使ってリポジトリにカスタム指示の標準を追加します。バックログ内の Issue の1つから作業を開始します。[レッスン 3「カスタム指示による Copilot のガイド」][next-lesson]に進んでください。 +次は、[フィルター機能の Issue から開始し、Plan モードと Autopilot モードを使用して][next-lesson]、より大規模な機能を構築します。 ## リソース @@ -128,8 +120,8 @@ PR が作成されると、Copilot はリポジトリで実行する必要があ - [GitHub Copilot app について][about-copilot-app] - [GitHub Copilot app での Issue と pull request の管理][managing-issues-prs] -[prior-lesson]: /ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app/#github-copilot-app-をインストールして構成する -[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/3-custom-instructions/ +[prior-lesson]: /ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app/#github-copilot-app-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E6%A7%8B%E6%88%90%E3%81%99%E3%82%8B +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/3-agent-modes/ [agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app [managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/3-agent-modes.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/3-agent-modes.md new file mode 100644 index 000000000..6a1203dd7 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/3-agent-modes.md @@ -0,0 +1,131 @@ +--- +title: "レッスン 3 - エージェントモード: Plan と Autopilot" +description: "エージェントモードを確認します。Plan でアプローチに合意し、Autopilot で Issue からフィルター機能を構築して、Interactive で結果をレビューおよび検証します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +まず、プロジェクトに小さな機能を追加しました。しかし、より大規模な変更には、さらに堅牢なプロセスが必要です。GitHub Copilot app は組織の既存のフローに沿って作業できるように設計されており、適切なものを適切な方法で構築できます。このレッスンから数回にわたり、一般的なエージェント主導の開発プロセスを実践します。Issue を使って新機能を生成するところから始め、コードが有効で機能が期待どおりに動作することを確認し、最終的にプロジェクトへのマージを成功させます。 + +> [!NOTE] +> 機能のワークフローを進める間は、同じセッションを使用します。通常は作業するファイルの種類ごとに異なるセッションや PR を使用しますが、ここでは中心となる概念に集中できるように手順を短縮します。 + +このレッスンでは、次の内容を学習します。 + +- GitHub Issue から新しいエージェントセッションを開始した。 +- **Plan** モードで要件を定義する。 +- **Autopilot** モードを使用して新機能を実装する。 +- コードをレビューする。 +- ブラウザーキャンバスで機能を手動検証する。 + +この機能の作業を続けながら、リポジトリの指示を更新し、既存の quality-checks スキルをカスタマイズして、MCP による検証を追加し、QA エージェントを作成して、機能の PR を開きます。 + +## シナリオ + +Tailspin Toys のカタログが充実し、訪問者がカテゴリーとパブリッシャーでゲームを絞り込める機能が必要になりました。バックログの Issue に機能は記載されていますが、カテゴリーの組み合わせ方などはコーディング前に合意が必要です。Plan モードで決定事項を整理してから、Autopilot による範囲を限定した実装を承認します。 + +## 背景 + +AI コーディングエージェントを開発フローに導入しても、基本は変わりません。むしろ、基本はさらに重要になります。多くの開発者は、次のようなフローに従います。 + +1. 必要な作業の詳細が記載された Issue を開く。 +2. 構築する内容の計画を作成する。 +3. コードを構築してレビューする。 +4. テストを実行してコードを検証する。 +5. 新機能を手動で検証する。 +6. pull request (PR) を作成する。 +7. コードのレビューと継続的インテグレーションプロセスが成功したら、コードをマージする。 + +> [!NOTE] +> 正確な手順はチームや Organization によって異なりますが、多くの場合は上記の流れを変形したものです。 + +この標準的なアプローチを守ることで、AI が生成したコードが定められた要件を満たし、人間が作成したコードと同じ審査プロセスを通るようにできます。 + +## セッションモード + +**セッションモード**は、エージェントの自律性を制御します。プロンプトフィールド下のドロップダウンから設定し、いつでも変更できます。 + +- **Interactive**: ユーザーとエージェントが共同で作業します。エージェントは変更を提案し、続行前に入力を待ちます。 +- **Plan**: エージェントが最初に計画を作成します。計画実行前に内容をレビューして承認します。 +- **Autopilot**: エージェントが完全に自律して作業し、入力を待たずにコードの作成、テストの実行、反復を行います。 + +Plan モードで開始し、計画をレビューしてから、Autopilot で実装します。 + +## Issue からセッションを開始する + +開始前に、星評価の PR がマージされ、ローカルの `main` が最新であることを確認します。 + +1. **Issues** を選択し、**Allow users to filter games by category and publisher** を開きます。 +2. **New session** を選択し、更新済みの `main` に基づく **new working tree** を選びます。 + + ![GitHub Copilot app の Issue ビューで、New session ボタンを矢印で示した画面](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) + +3. Issue がセッションに添付されていることを確認し、モードセレクターで **Plan** を選択します。 + +## フィルター機能を計画する + +計画を立てることで、Copilot がコードを書く前にアプローチをレビューできます。Issue から開始したため、Copilot は機能のリクエストをすでにコンテキストとして持っています。次を送信します。 + +```plaintext +Build this feature. +``` + +Copilot の質問に回答し、Issue の受け入れ条件と計画を照らし合わせます。カテゴリーとパブリッシャーによる絞り込み、アクセシブルなコントロール、データアクセスの変更、テストが含まれていることを確認してください。複数のカテゴリーをどのように組み合わせるか、一致するゲームがない場合にどうなるかなど、不明確な動作について話し合います。 + +計画には、プロジェクトの既存ツールを使った lint、単体テスト、E2E テスト、型チェックを含めます。フィルター機能の実装とテストに範囲を絞ってください。PR は品質ワークフローの完了後に作成します。計画の修正は承認前に依頼し、後の検証に使えるよう Issue の URL と合意した追加の取り決めを控えておきます。 + +## Autopilot を明示的に承認する + +計画に納得したら、**Approve and implement with autopilot**、または使用中のバージョンで表示される同等のオプションを選択します。モード表示が **Autopilot** になっていることを確認してください。 + +Copilot が実装を開始します。作成した計画に沿ってコードを生成し、テストも実行しながら、プロセスを反復して進めます。 + +> [!NOTE] +> 承認するとすぐに実装が始まる場合があるため、先に計画をレビューしてください。依存関係の不足やポート競合が報告された場合は、チェックを完了と判断する前にセットアップの問題を解決します。停止してよいのは、自分で起動したサーバーだけです。 + +## 実装をレビューして検証する + +生成されたコードも、他のコードと同じようにマージ前のレビューが必要です。コードをレビューし、サイトを実行して問題がないことを確認しましょう。 + +1. **Changes** を開き、フィルター機能の実装とテストを確認します。 +2. 複数カテゴリーとパブリッシャーの組み合わせも含め、結果を Issue と承認した追加の取り決めに照らし合わせます。変更が既存のリポジトリの指示に従っていることを確認します。 +3. lint、単体テスト、E2E テスト、型チェックの出力を確認します。スキップされたチェックは成功ではありません。 +4. 実装を承認する前に失敗を解消し、該当するチェックを再実行します。Playwright の E2E 設定はビルドしてプレビューを配信し、ローカルサーバーを再利用できるため、テスト対象が以前のレッスンではなくこの worktree のサーバーであることを確認します。 + +## 新機能を確認する + +コードに問題がないように見えても、実際に動くでしょうか。前と同じようにアプリを起動し、ブラウザーキャンバスでサイトを開きます。 + +1. 次のプロンプトを使い、アプリを起動してブラウザーキャンバスでページを開くよう Copilot に依頼します。 + + ```plaintext + Start the app and open it in the browser canvas. + ``` + +2. しばらくするとアプリが起動し、Copilot app 内にブラウザーウィンドウが開きます。 +3. 評価済みのゲームカードに5点満点の値が表示されることを確認します。 +4. 確認が終わったら、次のプロンプトを使い、このセッションで起動した開発サーバーを停止するよう Copilot に依頼します。 + + ```plaintext + Stop the dev server and close the browser canvas. + ``` + +## まとめと次のステップ + +さまざまなエージェントモードを使用して、機能を構築およびレビューしました。このレッスンでは、次の作業を行いました。 + +- GitHub Issue から新しいエージェントセッションを開始した。 +- **Plan** モードで要件を定義した。 +- **Autopilot** モードを使用して新機能を実装した。 +- コードをレビューした。 +- ブラウザーキャンバスで機能を手動検証した。 + +次は、[カスタム指示を使用して][next-lesson]、文書化されたプラクティスにコードを従わせる方法をさらに詳しく確認します。 + +## リソース + +- [GitHub Copilot app でのエージェントセッションの操作][agent-sessions] + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/4-custom-instructions/ +[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/3-custom-instructions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/3-custom-instructions.md deleted file mode 100644 index f57694efd..000000000 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/3-custom-instructions.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "レッスン 3 - カスタム指示による Copilot のガイド" -description: "GitHub Copilot app を使い、バックログの Issue から始めてカスタム指示の標準をリポジトリに追加し、変更を pull request としてマージします。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -生成 AI を扱うとき、コンテキストは重要です。タスクを特定の方法で実行する必要がある場合や、Copilot が把握しておくべき背景情報がある場合は、そのコンテキストを利用できるようにします。特に強力なツールの1つが[指示ファイル][instruction-files]です。指示ファイルには、必要なコードの内容だけでなく、その構成方法も記述します。このレッスンでは、リポジトリにドキュメント標準を追加します。ここから先の多くの作業と同様に、バックログの Issue から開始し、エージェントに変更を行わせます。 - -このレッスンでは、次の内容を学習します。 - -- リポジトリ指示とパス固有の指示ファイルがエージェントにどのように渡されるかを確認する。 -- バックログ内の指示に関する Issue からセッションを開始する。 -- `.github/copilot-instructions.md` にドキュメント標準を追加するようエージェントに依頼する。 -- 変更をレビューし、pull request としてマージする。 - -## シナリオ - -優れた開発組織と同様に、Tailspin Toys にも開発プラクティスのガイドラインと要件があります。内容は次のとおりです。 - -- TSDoc doc comment の形式でコードにドキュメントを追加する。 -- フォーマット方法を文書化し、lint によって適用する。 - -指示ファイルを使用すると、示されたプラクティスに沿ってタスクを実行するために必要な情報を Copilot に提供できます。 - -## 指示ファイル - -カスタム指示を使うと、Copilot にコンテキストと設定を提供でき、コーディングスタイルや要件をより正確に理解させることができます。Copilot をガイドし、より関連性の高い提案やコードスニペットを得るための強力な機能です。希望するコーディング規約、ライブラリ、コードに含めるコメントの種類まで指定できます。リポジトリ全体に適用する指示や、タスクレベルのコンテキストとして特定のファイル種類に適用する指示を作成できます。 - -指示ファイルには2つの種類があります。 - -- `.github/copilot-instructions.md` は、リポジトリに対する**すべての**リクエストで Copilot に送信される単一の指示ファイルです。このファイルには、Copilot に送信するほとんどのチャットまたは CLI リクエストに関係する、プロジェクトレベルの情報を記載します。使用する技術スタック、構築するものの概要、ベストプラクティスなど、全体に適用するガイダンスを含められます。 -- `.github/instructions/*.instructions.md` ファイルは、特定のタスクやファイル種類向けに作成できます。特定の言語 (TypeScript や Astro など) や、UI コンポーネントまたは新しい単体テスト一式の作成といったタスクに関するガイドラインを提供できます。 - -> [!NOTE] -> Copilot は AGENTS.md、CLAUDE.md、GEMINI.md を通じて指示のガイダンスを取り込むほかの標準もサポートしており、常に適切なコンテキストを提供できます。 - -### 指示ファイルを管理するためのベストプラクティス - -指示ファイルの作成方法を詳しく説明することは、このワークショップの範囲外です。ただし、サンプルプロジェクトに含まれる例は、代表的なアプローチを示しています。概要は次のとおりです。 - -- `copilot-instructions.md` の指示は、構築するものの説明、プロジェクトの構造、全体的なコーディング標準など、プロジェクトレベルのガイダンスに絞ります。 -- `*.instructions.md` ファイルは、ファイル種類 (単体テスト、Astro コンポーネント、データレイヤー) または特定のタスクに固有の指示を提供するために使用します。 -- 自然言語を使います。ガイダンスは明確にし、コードの適切な例と不適切な例を提示します。 - -AI の使い方に唯一の方法がないのと同様に、指示ファイルの作成方法にも唯一の正解はありません。プロジェクトに最適な方法は、試行を重ねることで見つけられます。 - -> [!TIP] -> GitHub Copilot を使用するすべてのプロジェクトには、充実した指示ファイル一式を用意することをお勧めします。このプロジェクトのファイルを確認すると、多くのコードファイル種類に対応する指示ファイルがあることがわかります。 -> -> テンプレートや出発点が必要な場合は、指示ファイル、カスタムエージェントなどのリソースが揃ったリポジトリ [awesome-copilot][awesome-copilot] を確認してください。 - -## このプロジェクトのカスタム指示ファイルを確認する - -このリポジトリに含まれる指示ファイルを確認します。中心となる `copilot-instructions.md` が1つと、さまざまなタスクに対応する `*.instructions.md` ファイル一式があります。エディターまたは GitHub Web UI で開いてください。 - -1. レビューパネルが表示されていない場合は、右上の **Toggle review panel** を選択して開きます。 - - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](/images/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. **+** を選択し、レビューパネルに新しい項目を追加します。 -3. **File** を選択します。 -4. `copilot-instructions.md` を検索します。 -5. ファイル一覧から `copilot-instructions.md` を選択して開きます。 -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/learning-hub/copilot-workshops/app-show-folder-view.png) - -8. `.github/instructions` フォルダーに移動し、ファイルを確認します。Astro ファイル、Drizzle データレイヤー、テストなどに対応する指示があります。 -9. `.github/instructions/unit-tests.instructions.md` を開きます。先頭の `applyTo` フィールドに注目してください。これはリポジトリのルートを基準とする glob で、指示を適用するファイルを決定します。ここでは、TypeScript のテストファイル (`**/*.test.ts` に一致するファイルなど) が対象になります。 -10. このプロジェクトで単体テストを作成するための固有の指示を確認します。 -11. 最後に `.github/instructions/drizzle.instructions.md` を開き、末尾まで移動します。ほかの指示ファイル (`unit-tests.instructions.md` など) と、プロジェクト内の既存ファイルへのリンクに注目してください。これにより、大きな指示セットを小さく再利用可能なファイルに分割し、コード生成時に参照する例を Copilot に提示できます。そこに記載されたパスは、リポジトリのルートではなく指示ファイルを基準とします。 - -> [!NOTE] -> `copilot-instructions.md` の **Code formatting requirements** セクションにはプロジェクトのコーディング標準が記載されていますが、コード内のドキュメントはまだ必須ではありません。次の手順で、TSDoc doc comment とファイルコメントヘッダーの規則を追加します。 - -## 指示に関する Issue から開始する - -前のレッスンでは、直接入力したプロンプトからセッションを開始しました。しかし、多くの作業は Issue から始まります。指示ファイルを更新するために登録された Issue に基づいて新しいセッションを作成し、更新を依頼します。 - -> [!NOTE] -> 指示ファイルは Copilot が生成するコードに大きな影響を与えるため、Copilot を明確にガイドする内容になっていることを慎重に確認してください。このレッスンのように、Copilot で最初のバージョンを作成した後、自分でレビューして更新内容が要件を満たすことを確認する方法が効果的です。 - -1. サイドバーで **My work** を選択します。 -2. **Update our repository coding standards** というタイトルの Issue を選択して開きます。 -3. 右上の **New session** を選択し、Issue に基づく新しいセッションを開始します。 - - ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) - -4. 次のプロンプトを使い、Issue に記載された要件を満たすように指示ファイルを更新することを Copilot に依頼します。 - - ```plaintext - Following this issue, make the updates to the instructions files in this project to meet the requirements documented. Don't create the PR quite yet! - ``` - -Copilot が更新を行います。 - -## 変更をレビューする - -Copilot が行った更新を読み、更新された指示に基づいて生成するコード例も提示させます。 - -1. 右上の **Changes** を選択してコードの変更を開きます。 - - ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](/images/learning-hub/copilot-workshops/app-select-changes.png) - -2. 更新された指示ファイルをレビューします。コードにドキュメントとコメントを追加するためのガイドラインが含まれていることを確認します。 - -> [!NOTE] -> AI は決定論的ではなく確率的に動作するため、実際のテキストは異なります。 - -3. 次のプロンプトを使い、Copilot が今後生成するコード例を作成するよう依頼します。 - - ```plaintext - Do not make any updates, but show me what the code would look like. Based on the new instructions, if I asked Copilot to create a new library component to return all Publishers what would that code look like? - ``` - -4. Copilot が提案するコードをレビューします。更新された指示で求めたとおり、TSDoc doc comment とファイルヘッダーコメントが含まれていることを確認します。 - -これでプロジェクトの指示ファイルを更新し、その効果を確認できました。 - -## pull request を作成してマージする - -指示ファイルはリポジトリのアセットとなり、チームのほかのメンバーと共有されます。ほかのアセットと同様に、作業内容を含む PR を作成します。 - -1. 右上隅にある **Create PR** を選択します。 -2. 求められた場合は **Sign in with your browser** を選択し、画面の指示に従って認証します。 -3. Copilot が PR の作成を開始します。 - -PR が作成されると、Copilot はリポジトリで実行する必要があるワークフローを監視します。しばらくすると、右上のボタンが **Ready to merge** に変わります。これは PR をマージする準備が整ったことを示します。 - -4. **Ready to merge** を選択します。 -5. 新しいダイアログウィンドウで **Merge pull request** を選択し、pull request をマージします。 - -> [!NOTE] -> 標準がデフォルトブランチにマージされると、すべてのメンバーと新しいセッションでプロジェクトの一部として利用できます。次のレッスンで最新のデフォルトブランチからフィルター機能のセッションを開始すると、エージェントは自動的にこの標準に従います。生成された TypeScript に、依頼していなくても TSDoc doc comment が含まれます。指示が生成コードを形作ることを示す、小さいながらも実際的な例です。 - -## まとめと次のステップ - -アプリが指示ファイルからコンテキストを取得する仕組みを確認し、セッションを使ってリポジトリ全体の標準を追加してマージしました。具体的には、次の作業を行いました。 - -- リポジトリの `copilot-instructions.md` とパス固有の `*.instructions.md` ファイルを確認した。 -- バックログ内の指示に関する Issue からセッションを開始した。 -- `.github/copilot-instructions.md` にドキュメント標準を追加するようエージェントに依頼した。 -- 変更をレビューし、pull request としてマージした。 - -次は、新しいセッションでフィルター機能を構築し、先ほどマージした標準が適用される様子を確認します。[レッスン 4「Autopilot による機能の構築」][next-lesson]に進んでください。 - -## リソース - -- [GitHub Copilot をカスタマイズするための指示ファイル][instruction-files] -- [GitHub Copilot app のカスタマイズ][customize-app] -- [カスタム指示を作成するためのベストプラクティス][instructions-best-practices] -- [Awesome Copilot - 指示ファイルなどのリソース集][awesome-copilot] - -[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/4-build-filtering/ -[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository -[awesome-copilot]: https://awesome-copilot.github.com/ -[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support -[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md -[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/4-build-filtering.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/4-build-filtering.md deleted file mode 100644 index 54a955df2..000000000 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/4-build-filtering.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: "レッスン 4 - Autopilot による機能の構築" -description: "GitHub Copilot app の Plan モードと Autopilot モードを使って静的なクライアント側フィルター機能を構築し、ドキュメント標準が継承されることを確認して、エージェントスキルで検証します。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -ここまで、プロジェクトに小さな更新をいくつか加えました。しかし、より本格的な変更には、よりしっかりしたプロセスが必要です。GitHub Copilot app は既存のフローと連携できるように設計されており、適切なものを適切な方法で構築できます。このレッスンから3回にわたり、一般的な開発プロセスに従います。まず Issue を使って新機能を生成し、エージェントスキルで検証テストと linter を実行します。 - -このレッスンでは、次の内容を学習します。 - -- フィルター機能に関する Issue から新しいセッションを開始する。 -- **Plan** モードで機能を計画し、**Autopilot** で構築する。 -- 生成されたコードが、以前マージしたドキュメント標準に従っていることを確認する。 -- プロジェクトの `quality-checks` スキルで作業を検証する。 - -## シナリオ - -ホームページにはすべてのゲームが一覧表示されますが、訪問者は一覧を絞り込めません。フィルター機能に関する Issue では、**カテゴリー**と**パブリッシャー**でゲームを絞り込めるようにすることが求められています。Copilot を使ってこの機能を実装します。 - -## 背景 - -AI コーディングエージェントを開発フローに導入しても、基本は変わりません。むしろ、基本はさらに重要になります。多くの開発者は、次のようなフローに従います。 - -1. 必要な作業の詳細が記載された Issue を開く。 -2. 構築する内容の計画を作成する。 -3. コードを構築してレビューする。 -4. テストを実行してコードを検証する。 -5. 新機能を手動で検証する。 -6. pull request (PR) を作成する。 -7. コードのレビューと継続的インテグレーションプロセスが成功したら、コードをマージする。 - -> [!NOTE] -> 正確な手順はチームや Organization によって異なりますが、多くの場合は上記の流れを変形したものです。 - -この標準的なアプローチを守ることで、AI が生成したコードが定められた要件を満たし、人間が作成したコードと同じ審査プロセスを通るようにできます。 - -## セッションモード - -**セッションモード**は、エージェントの自律性を制御します。プロンプトフィールド下のドロップダウンから設定し、いつでも変更できます。 - -- **Interactive**: ユーザーとエージェントが共同で作業します。エージェントは変更を提案し、続行前に入力を待ちます。 -- **Plan**: エージェントが最初に計画を作成します。計画実行前に内容をレビューして承認します。 -- **Autopilot**: エージェントが完全に自律して作業し、入力を待たずにコードの作成、テストの実行、反復を行います。 - -## フィルター機能を計画する - -潜在的な問題を見つける最適なタイミングは、コードを作成する前です。そのためには、事前に少し計画を立てるのが効果的です。Copilot と計画を立てると、一連の手順と採用するアプローチが生成されます。その計画をレビューし、改善案があれば提案してから、計画に基づいて Copilot にコードを生成させることができます。 - -Issue を開いて新しいセッションを開始し、Plan モードに切り替えて計画を作成します。 - -1. ナビゲーションタブから **My work** を選択します。 -2. **Allow users to filter games by category and publisher** というタイトルの Issue を選択します。 -3. 右上の **New session** を選択します。 - - ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) - -4. モードに **Plan** と表示されるまで Shift+Tab を選択します。 - - ![モードセレクターが Plan に設定され、矢印で示された GitHub Copilot app のプロンプトボックス](/images/learning-hub/copilot-workshops/app-4-plan-mode.png) - -5. 次のプロンプトを送信します。Issue から開始したため、フィルター機能の Issue はすでにこのセッションのコンテキストに含まれています。 - - ```plaintext - Plan the work based on the requirements documented in the issue. Please ask any clarifying questions you might have as you build the plan. - ``` - -6. 計画の作成中に、エージェントから追加の質問が提示される場合があります。自分で機能を構築するときの方針に基づいて回答します。 - -> [!NOTE] -> Copilot は確率的に動作するため、追加で尋ねられる質問は異なります。質問がまったくない場合もありますが、問題ありません。 - -7. 完了すると、Copilot が計画の概要を提示します。計画をレビューしてください。クエリの構築、フィルターコントロールの追加、テストの作成が提案されているはずです。必要に応じてフィードバックを返して改善できます。エージェントは提案を新しいバージョンに反映します。 - -## Autopilot で構築する - -計画が完成したので、Copilot に実装を構築させます。 - -1. **Plan summary** ダイアログのオプション一覧で、**Approve and implement with autopilot** に最も近いオプションを選択します。 - -Copilot が実装作業を開始します。 - -> [!NOTE] -> Copilot が必要なコードの作成を自動的に開始しない場合は、"Go ahead and start building out the plan!" のようなプロンプトを使って開始を依頼できます。 -> -> 必要な更新の作成には数分かかります。エージェントはファイルを編集および作成し、テストを作成して実行し、反復します。この時間に、ここまで学習した内容を振り返ったり、飲み物を用意したりできます。 - -## 変更をレビューする - -AI が生成したすべてのコードは、マージ前にレビューする必要があります。コードをレビューし、サイトを実行して問題がないことを確認します。 - -1. 右上の **Changes** を選択してコードの変更を開きます。 - - ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](/images/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/app-terminal-screenshot.png) - -4. ターミナルウィンドウに次のコマンドを入力し、Web アプリの開発サーバーを起動します。 - - ```shell - npm run dev - ``` - -5. サーバーが起動したら、ブラウザーウィンドウを開きます。起動には少し時間がかかります。 -6. http://localhost:4321 に移動します。 -7. ランディングページでフィルターを使用できることを確認します。 -8. 問題がある場合は、Copilot に更新を依頼できます。 -9. 問題がなければ、ターミナルウィンドウに戻ります。 -10. Ctrl+C を選択して開発サーバーを停止します。 - -## quality-checks スキルで作業を検証する - -差分を目視で確認するだけで完了とすることもできますが、このチームには明確な品質基準と、それを繰り返し確認する方法があります。 - -**エージェントスキル**を使うと、テストの実行、ビルドの生成、pull request の作成など、繰り返し発生するタスクの実行方法を Copilot に指示できます。スキルは、エージェントが必要に応じて読み込める指示、スクリプト、リソースのフォルダーです。[Agent Skills はオープン標準][agent-skills-repo]であり、さまざまなエージェントで使用されています。そのため、同じスキルをエージェントモードの Copilot Chat、Copilot cloud agent、Copilot CLI、GitHub Copilot app で使用できます。 - -スキルはプロジェクトの `.github/skills` フォルダー、またはグローバルの `~/.copilot/skills` に配置します。各スキルは、YAML frontmatter (`name` と `description`) と、それに続く Markdown の指示が記載された `SKILL.md` ファイルを含むフォルダーです。 - -```yaml ---- -name: quality-checks -description: Run the project's test suites and linter to verify code changes are ready to commit, push, or merge. ---- -``` - -スキルには、スクリプト、アセット、参考資料を含むサブフォルダーも追加できます。完全な構造については、[エージェントスキルの仕様][agent-skills-spec]を参照してください。 - -> [!TIP] -> スキルは動的に読み込まれます。エージェントは `description` フィールドに基づいて適用するスキルを判断します。明確でシナリオに合った説明を記述することが、スキルが使用されるか無視されるかを左右します。 - -## quality-checks スキルを確認する - -スキルの内容を確認します。 - -1. レビューパネルが表示されていない場合は、右上の **Toggle review panel** を選択して開きます。 - - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](/images/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. **+** を選択し、レビューパネルに新しい項目を追加します。 -3. **File** を選択します。 -4. `SKILL.md` を検索します。 -5. ファイル一覧から `SKILL.md .github/skills/quality-checks` を選択して開きます。 -6. `name` と `description` を確認します。説明は、コード変更を commit、push、merge する前にテスト、lint、検証する必要がある場合に、このスキルを使用することをエージェントに伝えます。 -7. スキル全体を読みます。単体テスト、Playwright のエンドツーエンドテスト、ESLint の各スイートを実行するスクリプト、実行順序、一般的な失敗のデバッグ方法が記載されています。そのため、エージェントは推測するのではなく、チームの方法でチェックを実行できます。 - -## チェックを実行する - -同じフィルター機能のセッションで、エージェントに作業の検証を依頼します。スキル名を説明する必要はありません。エージェントがリクエストに一致するスキルを見つけます。 - -1. Copilot app に戻ります。 -2. スラッシュコマンド `/quality-checks` を使ってスキルを直接呼び出し、Enter を選択します。 -3. エージェントはスキルに従って単体テスト、linter、エンドツーエンドテストを実行し、結果を報告します。失敗したものがあれば、問題を修正して、すべて成功するまでチェックを再実行するよう依頼します。 -4. **このセッションを開いたままにします。** 次のレッスンでは Playwright MCP server を追加し、実際のブラウザーでフィルター機能が動作することを確認します。 - -## まとめと次のステップ - -実際の機能をエンドツーエンドで構築し、チームの基準に照らして検証しました。具体的には、次の作業を行いました。 - -- 最新のプロジェクトで、フィルター機能に関する Issue から新しいセッションを開始した。 -- Plan モードで機能を計画し、Autopilot で構築した。 -- 生成されたヘルパーが、レッスン3でマージしたドキュメント標準に従っていることを確認した。 -- `quality-checks` スキルで作業を検証した。 - -次は Playwright MCP server を接続し、実際のブラウザーでフィルター機能を確認するようエージェントに依頼します。[レッスン 5「Playwright MCP server によるテスト」][next-lesson]に進んでください。 - -## リソース - -- [GitHub Copilot app でのエージェントセッションの操作][agent-sessions] -- [Agent Skills について][about-agent-skills] -- [GitHub Copilot app のカスタマイズ][customize-app] -- [GitHub Copilot のクラウドサンドボックスとローカルサンドボックスについて][sandboxes] - -[ex0]: /ja-jp/learning-hub/copilot-workshops/app/0-prerequisites/ -[ex2]: /ja-jp/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /ja-jp/learning-hub/copilot-workshops/app/3-custom-instructions/ -[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions -[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[agent-skills-repo]: https://github.com/agentskills/agentskills -[agent-skills-spec]: https://agentskills.io/specification \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/4-custom-instructions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/4-custom-instructions.md new file mode 100644 index 000000000..a494ef041 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/4-custom-instructions.md @@ -0,0 +1,121 @@ +--- +title: "レッスン 4 - カスタム指示による Copilot のガイド" +description: "リポジトリの指示を確認し、ドキュメント標準を追加して、フィルター機能のコードに適用します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +生成 AI を扱うとき、コンテキストは重要です。タスクを特定の方法で実行する必要がある場合、そのガイダンスを Copilot が利用できるようにします。[指示ファイル][instruction-files]には、必要なコードの内容だけでなく、その構成方法も記述します。フィルター機能を構築したので、Copilot が使用した指示を確認し、ドキュメント標準を追加して、コードに適用します。 + +このレッスンでは、次の内容を学習します。 + +- リポジトリの指示とパス固有の指示ファイルがエージェントにどのように渡されるかを確認する。 +- コーディング標準に従うよう指示ファイルを更新する。 +- 指示ファイルがコードに与える影響を確認する。 + +## シナリオ + +優れた開発組織と同様に、Tailspin Toys にも開発プラクティスのガイドラインと要件があります。内容は次のとおりです。 + +- コメントはコードを言い換えるのではなく、意図や自明ではない判断を説明する。 +- `db/` と `src/lib/` のエクスポートされた関数には、目的、パラメーター、戻り値を TSDoc/JSDoc で記載し、注入可能な `db` 引数があればそれも説明する。 +- 再利用可能な Astro コンポーネントには `Props` の契約を文書化し、関連コードが変わったらコメントも最新に保つ。 +- 既存のフォーマットと lint のガイダンスを保持する。 + +指示ファイルを使用すると、示されたプラクティスに沿ってタスクを実行するために必要な情報を Copilot に提供できます。 + +## 指示ファイル + +カスタム指示を使うと、Copilot にコンテキストと設定を提供でき、コーディングスタイルや要件をより正確に理解させることができます。Copilot をガイドし、より関連性の高い提案やコードスニペットを得るための強力な機能です。希望するコーディング規約、ライブラリ、コードに含めるコメントの種類まで指定できます。リポジトリ全体に適用する指示や、タスクレベルのコンテキストとして特定のファイル種類に適用する指示を作成できます。 + +指示ファイルには2つの種類があります。 + +- `.github/copilot-instructions.md` は、リポジトリに対する**すべての**リクエストで Copilot に送信される単一の指示ファイルです。このファイルには、Copilot に送信するほとんどのチャットまたは CLI リクエストに関係する、プロジェクトレベルの情報を記載します。使用する技術スタック、構築するものの概要、ベストプラクティスなど、全体に適用するガイダンスを含められます。 +- `.github/instructions/*.instructions.md` ファイルは、特定のタスクやファイル種類向けに作成できます。特定の言語 (TypeScript や Astro など) や、UI コンポーネントまたは新しい単体テスト一式の作成といったタスクに関するガイドラインを提供できます。 + +> [!NOTE] +> ほかの指示形式やサポート状況はハーネスによって異なります。特定の形式を利用する前に、[カスタム指示のサポートリファレンス][custom-instructions-support]を確認してください。 + +## このプロジェクトのカスタム指示ファイルを確認する + +作業を始めやすくするため、スタータープロジェクトには一連の指示ファイルがあらかじめ含まれています。変更を加える前に既存の内容を確認し、その影響を把握します。 + +1. 前のレッスンのセッションに戻ります。 +2. レビューパネルが表示されていない場合は、右上の **Toggle review panel** を選択して開きます。 + + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](/images/learning-hub/copilot-workshops/app-2-review-panel.png) + +3. **+** アイコンの「Open in panel」を選択し、新しいキャンバスを開きます。 +4. **Files** を選択します。 +5. **Gear** アイコンを選択し、**Show hidden files** にチェックが付いていることを確認します。 +6. `.github/copilot-instructions.md` に移動します。 +7. ファイルを確認します。プロジェクトの簡単な説明に加えて、**Agent notes**、**Code standards**、**Scripts**、**Repository Structure** などのセクションがあります。**Code standards** の下には、ネストされた **GitHub Actions Workflows** のガイダンスがあります。これらは Copilot とのすべてのやり取りに適用されます。 +8. `.github/instructions` フォルダーに移動し、ファイルを確認します。Astro ファイル、Drizzle データレイヤー、テストなどに対応する指示があります。 +9. `.github/instructions/unit-tests.instructions.md` を開きます。先頭の `applyTo` フィールドに注目してください。これはリポジトリのルートを基準とする glob で、指示を適用するファイルを決定します。ここでは、TypeScript のテストファイル (`**/*.test.ts` に一致するファイルなど) が対象になります。 +10. このプロジェクトで単体テストを作成するための固有の指示を確認します。 +11. 最後に `.github/instructions/drizzle.instructions.md` を開き、末尾まで移動します。ほかの指示ファイル (`unit-tests.instructions.md` など) と、プロジェクト内の既存ファイルへのリンクに注目してください。これにより、大きな指示セットを小さく再利用可能なファイルに分割し、コード生成時に参照する例を Copilot に提示できます。そこに記載されたパスは、リポジトリのルートではなく指示ファイルを基準とします。 + +## チームのガイダンスに合わせて指示ファイルを更新する + +既存のファイルはよい出発点ですが、まだ不足している部分があります。新しく生成される TypeScript ファイルに [TSDoc コメント][tsdoc]を追加するため、中心となる `copilot-instructions.md` ファイルを変更します。 + +> [!NOTE] +> 指示ファイルは Copilot が生成するコードに大きな影響を与えるため、Copilot を明確にガイドする内容になっていることを慎重に確認してください。Copilot で最初のバージョンを作成した後、自分でレビューして更新内容が要件を満たすことを確認できます。また、出発点として役立つ[指示ファイルのコレクションを Awesome Copilot で][awesome-copilot]確認できます。 + +1. 同じファイルキャンバスで `.github/copilot-instructions.md` に移動します。 +2. ファイルの中ほどにある **Code formatting requirements** 見出しを見つけます。 +3. その見出しの下にある最後の箇条書きとして、次の内容を追加します。 + + ```plaintext + All new TypeScript should contain TSDocs comments for documentation purposes. + ``` + +ファイルは自動的に保存され、使用できる状態になります。 + +## 更新したガイダンスを使用する + +指示ファイルを更新したので、更新内容をレビューして必要な変更を加えるよう Copilot に依頼し、生成されるコードへの影響を確認します。 + +> [!NOTE] +> ここでは指示ファイルを変更した直後なので、使用するよう Copilot に明示的に伝えます。コード作成時に指示ファイルがすでに存在する場合、Copilot は明示しなくても自動的に指示ファイルを使用します。 + +1. 指示ファイルを使用し、新しく追加した要件に合わせてコードを更新するよう Copilot に依頼します。 + + ```plaintext + We just updated our instructions and code guidance. Can you please update the code you generated to match that guidance? + ``` + +2. 右上の **Changes** を選択してコードの変更を開きます。 + + ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](/images/learning-hub/copilot-workshops/app-select-changes.png) + +3. TypeScript ファイルを確認します。新しく生成された TSDoc コメントに注目してください。 + +## まとめと次のステップ + +アプリが指示ファイルからコンテキストを取得する仕組みを確認し、新しい標準を機能に適用しました。具体的には、次の作業を行いました。 + +- リポジトリの `copilot-instructions.md` とパス固有の `*.instructions.md` ファイルを確認した。 +- コーディング標準に従うよう指示ファイルを更新した。 +- 指示ファイルが生成されたコードに与える影響を確認した。 + +次は、lint とテストを一貫して実行するために、[再利用可能な quality-checks スキルをカスタマイズして実行します][next-lesson]。 + +## リソース + +- [GitHub Copilot をカスタマイズするための指示ファイル][instruction-files] +- [GitHub Copilot app のカスタマイズ][customize-app] +- [カスタム指示を作成するためのベストプラクティス][instructions-best-practices] +- [Awesome Copilot - 指示ファイルなどのリソース集][awesome-copilot] + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/5-agent-skills/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[instructions-best-practices]: https://docs.github.com/copilot/concepts/prompting/response-customization#writing-effective-custom-instructions +[awesome-copilot]: https://awesome-copilot.github.com/ +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +[tsdoc]: https://tsdoc.org/ +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/5-agent-skills.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/5-agent-skills.md new file mode 100644 index 000000000..b9406a8e8 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/5-agent-skills.md @@ -0,0 +1,110 @@ +--- +title: "レッスン 5 - quality-checks スキルのカスタマイズと使用" +description: "既存の quality-checks スキルを確認し、報告形式をカスタマイズして、フィルター機能の検証に使用します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +コードを書く作業には、単にコードを書く以上のことが含まれます。コードが動作することは手動で検証し、指示ファイルを使用して標準に従っていることも確認しました。しかし、テストや lint、継続的インテグレーション (CI) のその他の作業はどうでしょうか。 + +このようなタスクには、**エージェントスキル**が最適です。スキルを使用すると、こうした処理を適切に実行する方法を Copilot が理解できます。 + +このレッスンでは、次の内容を学習します。 + +- 既存の `quality-checks` スキルを確認する。 +- 結果の報告形式をカスタマイズする。 +- スキルを実行し、出力をレビューする。 + +## シナリオ + +Tailspin Toys は、単体テスト、lint、型チェックに `quality-checks` スキルを使用します。チームは、結果を読みやすくするためにレポートを改善したいと考えています。 + +## 指示、スクリプト、リソース + +エージェントスキルは、再利用可能なタスクの指示、実行可能なスクリプト、補助リソースをまとめたもので、エージェントが必要に応じて読み込みます。基本的には、スキル名のフォルダーと、その中の `SKILL.md` という Markdown ファイルで構成されます。Markdown には、スキルの名前と説明を定義するフロントマター、スキルの動作概要、呼び出すタイミングのガイダンスが含まれます。フォルダーには、スキルの呼び出し時に使用するスクリプトやその他のリソースを収めたサブフォルダーも追加できます。 + +> [!NOTE] +> スキルに追加のフォルダーやファイルは必須ではありません。この例では、`npm` コマンドを使ってテストと linter を実行するため、追加の補助ファイルは必要ありません。 + +スキルをプロジェクトの `.github/skills` フォルダーに置くと、チーム内で共有および再利用できるリポジトリアセットになります。または、通常は `~/.copilot/skills` にある Copilot のルートフォルダーにも配置できます。 + +## スキルを確認する + +Tailspin Toys チームが単体テスト、lint、型チェックの実行用に作成した `quality-checks` というスキルを確認します。 + +1. **Files** キャンバスをまだ開いていない場合は、レビューパネルで **+**、**File** の順に選択します。 +2. `.github/skills/quality-checks/SKILL.md` を検索します。 +3. 冒頭の `name` と `description` を読みます。Copilot はこの説明を使い、スキルを呼び出すタイミングを判断します。 +4. 指示を読み、テストと lint のプロセスを Copilot にどのように案内しているかを確認します。 + +## 変更前にスキルを実行する + +スキルはスラッシュ (`/`) コマンドで直接呼び出すことも、自然言語で呼び出すこともできます。スキルの 3 種類のチェックを実行するよう Copilot に依頼しましょう。 + +1. モードのドロップダウンから **Interactive** を選択し、Copilot が Interactive モードになっていることを確認します。 +2. 次のプロンプトを使ってスキルを呼び出します。 + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. 最後に表示されるレポートを確認します。 + +## 報告形式をカスタマイズする + +何を実行したか、成功したか、ツールが実際に何を報告したかがわかる、よりよいレポートが必要です。そのレポートを作成するようスキルを更新しましょう。 + +1. **Files** キャンバスに戻ります。 +2. まだ開いていない場合は、`.github/skills/quality-checks/SKILL.md` を開きます。 +3. ファイルの末尾に次のセクションを追加します。 + + ```markdown + ## Results output formatting + + Upon completion, report each command that ran and whether it passed, failed, or was blocked. Include test counts, durations, errors, warnings, and other metrics only when the tool reports them. Identify the next action for any failure or blocker, and never describe a skipped or incomplete check as passed. + ``` + +ファイルは自動的に保存されます。 + +## 更新したスキルを実行する + +変更したスキルを実際に試してみましょう。先ほどとまったく同じプロンプトを使用します。 + +1. モードのドロップダウンから **Interactive** を選択し、Copilot が Interactive モードになっていることを確認します。 +2. 次のプロンプトを使ってスキルを呼び出します。 + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. 最後に表示されるレポートを確認します。 + +## まとめと次のステップ + +既存のエージェントスキルをカスタマイズして使用しました。このレッスンでは、次の作業を行いました。 + +- 単体テスト、lint、型チェックを実行する `quality-checks` スキルを確認した。 +- 結果の報告形式をカスタマイズした。 +- スキルを実行し、出力をレビューした。 + +この変更は、フィルター機能と一緒に機能の PR に含めます。次は、[Playwright MCP server を通じて][next-lesson] Copilot がサイトを直接操作できるようにします。 + +## ほかのスキルの例 + +これらのコミュニティの例は参考資料であり、追加のタスクではありません。採用する前に前提条件と動作を確認してください。 + +- [Agent Skills 仕様][skill-spec]。 +- [コントリビューションのワークフロー: `make-repo-contribution`][contribution-example]。 +- [要件文書: `prd`][prd-example]。 +- [図と同梱のエクスポートスクリプト: `drawio`][drawio-example]。 +- [ブラウザーテスト: `webapp-testing`][browser-example]。 + +上流のコントリビューション例の名前は `make-repo-contribution` です。古い Tailspin テンプレートでは、異なる名前の `make-contribution` を使用していました。このワークショップは、どちらのコントリビューション用スキルにも依存しません。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[skill-spec]: https://agentskills.io/specification +[contribution-example]: https://github.com/github/awesome-copilot/tree/main/skills/make-repo-contribution +[prd-example]: https://github.com/github/awesome-copilot/tree/main/skills/prd +[drawio-example]: https://github.com/github/awesome-copilot/tree/main/skills/drawio +[browser-example]: https://github.com/github/awesome-copilot/tree/main/skills/webapp-testing diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/6-agent-merge.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/6-agent-merge.md deleted file mode 100644 index 916d1b8b7..000000000 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/6-agent-merge.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "レッスン 6 - Agent Merge によるマージ" -description: "フィルター機能の pull request を作成して My work でレビューし、マージを妨げる問題の修正とマージを Agent Merge に任せて、段階的なマージ自動化の最上位まで進みます。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -フィルター機能の構築と検証が完了し、ブラウザーで動作することも確認できました。最後のステップはマージです。このハーネスではすでに2回マージしており、どちらも pull request を作成して github.com で自分でマージしました。今回は、pull request のライフサイクル全体をアプリ内から管理する **Agent Merge** に処理を任せます。 - -このレッスンでは、次の内容を学習します。 - -- Agent Merge の概要と、マージのライフサイクルを自動化する仕組みを学ぶ。 -- フィルター機能のセッションで Agent Merge を有効にする。 -- pull request の作成、CI の実行、すべて成功した後のマージを確認する。 - -## シナリオ - -ここ数回のモジュールでは、コードの作成から Copilot による UI の直接検証まで、さまざまなレベルの自動化を確認しました。開発をさらに高速化するために、Tailspin Toys は審査および検証済みの pull request を自動的にマージする方法を検討しています。 - -## Agent Merge の概要 - -**Agent Merge** を使うと、Copilot app で pull request をマージするまでの最終工程を自動化できます。有効にすると、アプリのセッションが pull request を読み取り、失敗した CI チェックの修正、レビューコメントへの対応、必要に応じたリベースなど、マージを妨げる問題に対処します。そして GitHub で許可され次第、pull request をマージします。バックグラウンドで動作し、アプリを再起動しても継続し、pull request がマージされると自動的に無効になります。 - -ここまでは、github.com で自分で **Merge pull request** を選択していました。Agent Merge はその責任をエージェントに移すため、エージェントが PR の完了までを管理している間に次のタスクへ進めます。作業のレビューと承認は引き続き自分で行い、エージェントには機械的な最終工程だけを任せます。 - -## Agent Merge で PR を管理する - -コードを手動でレビューし、テストを実行し、Copilot による UI の検証も完了しました。新しいコードをコードベースにマージします。Agent Merge に PR を継続的インテグレーション (CI) のプロセスからマージまで管理させます。 - -1. 前のモジュールでフィルター機能を追加していたセッションに戻ります。 -2. 右上隅にある **Create PR** の横のドロップダウンを選択します。 -3. **Agent merge** を選択して Agent Merge を有効にします。 - - ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](/images/learning-hub/copilot-workshops/app-enable-agent-merge.png) - -4. ボタンのテキストが **Agent merge** に変わります。 -5. **Agent merge** ボタンを選択し、Agent Merge のプロセスを開始します。 - -Copilot app が PR の作成と管理を開始します。最初にプロジェクトを調査して PR の最適な作成方法を判断し、新しい PR を作成します。 - -しばらくすると、Copilot が再び作業を開始し、リポジトリ上ですべてのテストを実行する CI プロセスなど、PR の条件を確認します。ほかのチームメンバーによるレビュー、実行が必要なチェック (CI プロセス)、PR をマージできるかどうかのステータスを報告します。 - -6. **Agent merge** の横にあるドロップダウンを選択してから **Merge pull request** を選択し、Agent Merge に pull request のマージを許可します。 - - ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](/images/learning-hub/copilot-workshops/app-agent-merge-merge.png) - -7. すべての CI プロセスが成功すると、つまりテストに合格すると、Copilot が pull request をマージします。 - -## まとめと次のステップ - -コードの生成、テストと検証、pull request のプロセスなど、開発プロセスの複数の部分を自動化しました。具体的には、次の作業を行いました。 - -- Agent Merge の概要と、マージのライフサイクルを自動化する仕組みを学習した。 -- フィルター機能のセッションで Agent Merge を有効にした。 -- pull request の作成、CI の実行、すべて成功した後のマージを確認した。 - -次は、エージェントと一緒に作業を計画して視覚化する、より高度な方法である**キャンバス**を確認します。[レッスン 7「キャンバスを使った計画」][next-lesson]に進んでください。 - -## リソース - -- [GitHub Copilot app での Issue と pull request の管理][managing-issues-prs] -- [GitHub Copilot app について][about-copilot-app] - -[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/7-canvases/ -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/5-mcp-playwright.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/6-mcp-playwright.md similarity index 53% rename from website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/5-mcp-playwright.md rename to website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/6-mcp-playwright.md index dd29e1a13..d741169a5 100644 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/5-mcp-playwright.md +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/6-mcp-playwright.md @@ -1,17 +1,17 @@ --- -title: "レッスン 5 - Playwright MCP server によるテスト" -description: "Playwright MCP server を GitHub Copilot app に追加し、実際のブラウザーでフィルター機能を手動テストするようエージェントに依頼します。" +title: "レッスン 6 - Playwright MCP による機能の検証" +description: "Customize から Playwright MCP を設定し、既存の機能用ワークツリーのフィルター機能をブラウザーで観察します。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -前のレッスンでは、プロジェクトの自動テストスイートを使ってフィルター機能を作成し、検証しました。テストによってコードの検証を自動化できますが、エージェント自身が動作を確認できるようにすることも効果的です。実際に作成している UI で問題を見つけた場合に、エージェントが対応できるようになります。MCP を使って AI エージェントに外部機能へのアクセスを提供する方法を確認し、Copilot が構築中のサイトを直接操作できるように Playwright MCP server を追加します。 +すでに説明したように、コードを書く作業には、単にコードを書く以上のことが含まれます。データや外部サービスを操作し、Copilot で追加の自動化を利用できるようにする必要があります。そこで役立つのが MCP server です。MCP server を使うと、Copilot はアプリに組み込まれた機能を超えて、さらに多くのツールやサービスを利用できます。 このレッスンでは、次の内容を学習します。 - Model Context Protocol (MCP) の概要と、GitHub Copilot app での使用方法を理解する。 -- アプリの設定から Playwright MCP server を追加する。 +- Playwright MCP server を追加する。 - エージェントにブラウザーを操作させ、フィルター機能を確認する。 ## シナリオ @@ -36,43 +36,42 @@ lastUpdated: 2026-08-03 ## Playwright MCP server を追加する -MCP server はアプリの設定から追加して管理します。アプリには一般的なサーバーのカタログが含まれているため、[Playwright MCP server][playwright-mcp-server] は数回の操作で追加できます。 +MCP server は、サイドバーの **Customize** で管理します。リポジトリや Copilot CLI 向けに設定されたサーバーは App でも利用できる場合があるため、重複して追加する前に確認してください。[App のカスタマイズドキュメント][customize-app]で利用可能な選択肢を確認できます。 -1. Ctrl+, を選択して、Copilot app の設定ページを開きます。 -2. **MCP servers** を選択します。 -3. 検索ダイアログに `Playwright` と入力します。 -4. **Popular MCP servers** の一覧から **Playwright** を選択します。 -5. **Add server** を選択し、利用可能な MCP server の一覧に追加します。 -6. Esc を選択して設定ダイアログを閉じます。 +1. サイドバーで **Customize** を選択します。 +2. **MCP** を選択し、**Installed** で既存の Playwright サーバーを確認します。 +3. 必要な場合は利用可能なサーバーから **Playwright** を探すか、発行元が文書化したカスタムサーバーの追加手順を使用します。 +4. 発行元、設定、インストールの確認内容をレビューしてから承認します。画面の案内に従ってサーバーを追加してください。組織のポリシーや前提条件の不足により、セットアップがブロックされる場合があります。 +5. **Interactive** モードでフィルター機能のセッションに戻り、Playwright MCP のツールが利用できることを確認します。 -これで Playwright MCP server を追加できました。 +セットアップが失敗した場合は、続行前に設定や権限の問題を解決します。 ## Playwright で機能を確認するよう Copilot に依頼する -Playwright MCP server を使って機能を手動テストするよう Copilot に依頼します。 +Issue と計画時の決定事項は、すでにコンテキストに含まれています。Copilot にサーバーの起動を依頼する前に、以前自分で起動した開発サーバーを停止してください。 1. 次のプロンプトを使い、新しい機能を検証するよう Copilot に依頼します。 - ```plaintext - Start the dev server then use the Playwright MCP server to validate the functionality you just added exists. Use the details in the issue to ensure the newly added behavior matches the specs. - ``` + ```plaintext + Start the app and use Playwright MCP to check filtering against the issue and our plan. Tell me what works and what doesn't, without making changes. Stop the server you started when you're done. + ``` -Copilot は Playwright MCP server を通じてブラウザーを起動し、各手順を実行して、確認結果を報告します。タスクの実行中、システム上で実際にブラウザーが開く様子を確認できます。 + > [!NOTE] + > 使用する MCP server を Copilot に明示する必要はありません。通常は現在のコンテキストに基づいて適切なものを見つけます。ただし、重要だと考える情報を Copilot に伝えても問題はありません。 -2. Issue の受け入れ条件と照らし合わせて概要を読みます。問題がある場合は、pull request を作成する前に追加の質問をするか、コードを修正するよう依頼します。 -3. 次のレッスンでこの作業を完了するため、セッションを開いたままにします。 + 2. あとは動作を見守ります。 -これで Copilot は、ユーザーと同じように機能を確認し、ブラウザーでも動作を検証しました。 + Copilot はサーバーを起動してブラウザーを開き、Web サイトを操作します。完了するとサーバーを停止し、レポートを提供します。 ## まとめと次のステップ GitHub Copilot app から Playwright MCP server を使い、実際のブラウザーで機能を確認しました。学習した内容は次のとおりです。 -- Model Context Protocol (MCP) の概要と、アプリで MCP tools を利用する仕組みを学習した。 -- アプリの設定から Playwright MCP server を追加した。 +- Model Context Protocol (MCP) の概要と、GitHub Copilot app での使用方法を学習した。 +- Playwright MCP server を追加した。 - エージェントにブラウザーを操作させ、フィルター機能を確認した。 -機能の構築と検証が完了し、動作することも確認できました。次は、**Agent Merge** を使って pull request の作成とマージをエージェントに任せ、機能をリリースします。[レッスン 6「Agent Merge によるマージ」][next-lesson]に進んでください。 +次は、スキルとブラウザーツールを専門家の役割で組み合わせる [QA カスタムエージェントを作成します][next-lesson]。 ## リソース @@ -80,7 +79,7 @@ GitHub Copilot app から Playwright MCP server を使い、実際のブラウ - [Microsoft Playwright MCP Server][playwright-mcp-server] - [GitHub Copilot app での MCP server の構成][customize-app] -[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/6-agent-merge/ +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/7-qa-agent/ [mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ [playwright-mcp-server]: https://github.com/microsoft/playwright-mcp [customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/7-canvases.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/7-canvases.md deleted file mode 100644 index 2097d21e1..000000000 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/7-canvases.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: "レッスン 7 - キャンバスを使った計画" -description: "GitHub Copilot app でエージェント主導の共有キャンバスを作成し、エージェントと一緒に作業を計画して追跡します。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -ここまでは、チャットを通じてエージェントを指示してきました。しかし、多くの作業は会話の中ではなく、ボード、ドキュメント、チェックリスト上で行われます。**キャンバス**は、まさにそのような作業のために、アプリ内でユーザーとエージェントが共有できる領域です。このレッスンでは、ここまで取り組んできたバックログの計画と追跡に使用する、シンプルなキャンバスを作成します。 - -このレッスンでは、次の内容を学習します。 - -- キャンバスの概要と使用する場面を理解する。 -- バックログをトリアージする共有 Kanban ボードのキャンバスを作成する。 -- キャンバスをリポジトリに保存し、チーム向けにマージする。 -- 新しいセッションでキャンバスを開き、そこから作業を開始する。 - -## シナリオ - -Issue の一覧は、どのような状況でも負担に感じることがあります。Tailspin Toys の開発者は、Issue をすばやくトリアージし、Copilot app で作業を開始できるツールを探しています。 - -## キャンバスとは - -[キャンバス][canvas-docs]は、計画、トリアージボード、リリースチェックリスト、ダッシュボード、ドキュメントなどの作業成果物を扱う、共有の対話型領域です。チャットは意図の説明や曖昧さの検討に適していますが、多くの作業は具体的な*領域*上で行われます。キャンバスを使うと、その領域でエージェントと直接共同作業できます。 - -キャンバスは**双方向**です。エージェントが作業中にキャンバスを更新できる一方で、ユーザーも同じ領域を編集できます。キャンバスを作成すると、エージェントはプロンプトとワークフローに基づいて内容を構築します。その後も、機能の追加、削除、修正を依頼できます。作成したキャンバスは、アプリの右側のパネルに開きます。 - -一般的な例は次のとおりです。 - -- 1日の計画を立て、Issue と pull request に優先順位を付けるための **Markdown canvases**。 -- ユーザーとエージェントがカードを追加し、作業を列間で移動する **Agentic kanban boards**。 -- リポジトリの重要な Issue と繰り返し現れるテーマをまとめる **Issue triage boards**。 - -## キャンバスを使用する理由 - -タスクに構造、反復、検証が必要で、チャットだけでは不十分な場合はキャンバスを使用します。キャンバスでは次のことができます。 - -- ワークフローに合った実際の成果物に、エージェントの作業を結び付ける。 -- 共有領域で作業を直接調整または修正し、その変更を基にエージェントに作業を続けさせる。 -- チャットの応答だけでなく、成果物への目に見える変更として進捗を確認する。 - -## 作業を追跡するキャンバスを作成する - -星評価、ドキュメント標準、フィルター機能をすべてマージし、多くの成果をリリースしました。しかし、バックログにはまだ項目が残っています。作業をすばやくトリアージするためのキャンバスを作成します。 - -1. GitHub Copilot app に戻ります。アプリを閉じている場合は開きます。 -2. **Home screen** を選択します。 -3. リポジトリに `tailspin-toys` が選択されていることを確認します。 -4. プロンプトボックスで次のプロンプトを使用し、要件を満たすキャンバスを作成します。 - - ```plaintext - Create a basic Kanban board canvas that allows me to quickly triage work. Highlight the three issues which are most likely to need attention right now, with the remainder in a second section down below. The top three cards should include a description of the issue's content and a justification of why they're at the top of the list. Each issue should have a button that allows me to add it to the current context for the current session so I can get to work on it straightaway. - ``` - -Copilot がキャンバスの作成を開始します。 - -> [!NOTE] -> 作成には数分かかります。複雑なタスクであるため、最初のバージョンでは満足できない場合があります。理想のツールになるまで、プロンプトで構築を続けるよう依頼できます。 - -## キャンバスを保存してリポジトリにマージする - -キャンバスは、指示ファイルやスキルと同様に、リポジトリのアセットにできます。Copilot にリポジトリへの追加とマージを依頼し、チーム全体で使用できるようにします。 - -1. 同じセッションで、次のプロンプトを使ってキャンバスをリポジトリに保存するよう Copilot に依頼します。 - - ```plaintext - Let's save this canvas definition to the repository so I can share it with my development team - ``` - -2. Copilot がキャンバスファイルを保存したら、右上隅にある **Create PR** の横のドロップダウンを選択します。 -3. **Agent merge** を選択して Agent Merge を有効にします。 - - ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](/images/learning-hub/copilot-workshops/app-enable-agent-merge.png) - -4. ボタンのテキストが **Agent merge** に変わります。 -5. **Agent merge** ボタンを選択し、Agent Merge のプロセスを開始します。 - -Copilot app が PR の作成と管理を開始します。最初にプロジェクトを調査して PR の最適な作成方法を判断し、PR を作成します。 - -しばらくすると、Copilot が再び作業を開始し、リポジトリ上ですべてのテストを実行する CI プロセスなど、PR の条件を確認します。ほかのチームメンバーによるレビュー、実行が必要なチェック (CI プロセス)、PR をマージできるかどうかのステータスを報告します。 - -6. **Agent merge** の横にあるドロップダウンを選択してから **Merge pull request** を選択し、Agent Merge に pull request のマージを許可します。 - - ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](/images/learning-hub/copilot-workshops/app-agent-merge-merge.png) - -7. すべての CI プロセスが成功するまで待ちます。成功すると、Copilot が pull request を自動的にマージします。 - -これでチーム用の新しい共有キャンバスを作成できました。 - -## キャンバスで作業する - -キャンバスを作成できたので、新しいセッションを開始して使用します。 - -1. Copilot app で **tailspin-toys** の横にある **New session** を選択し、新しいセッションを開始します。 -2. 次のプロンプトを使い、トリアージ用キャンバスを開くよう Copilot に依頼します。 - - ```plaintext - Open the triage issues canvas - ``` - -3. 作成したキャンバスが新しいセッションで開いたことを確認します。 -4. 最も関心のある Issue の1つで **Add to current context** を選択します。 -5. Copilot が Issue の作業を開始します。 - -これで、作成したキャンバスを使って開発プロセスを効率化できました。 - -## まとめと次のステップ - -ユーザーとエージェントが共同作業できる共有領域を作成しました。具体的には、次の作業を行いました。 - -- キャンバスの概要と使用する場面を学習した。 -- エージェントと共有の Kanban トリアージボードのキャンバスを作成した。 -- Agent Merge を使ってキャンバスをリポジトリに保存し、マージした。 -- 新しいセッションでキャンバスを開き、そこから作業を開始した。 - -バックログを追跡できるようになったので、ここまで構築した内容と今後の進め方を振り返ります。[レッスン 8「振り返りと次のステップ」][next-lesson]に進んでください。 - -## リソース - -- [GitHub Copilot app での canvas extension の操作][canvas-docs] -- [Awesome Copilot の Canvases][awesome-copilot-canvases] -- [GitHub Copilot app について][about-copilot-app] - -[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/8-review/ -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/7-qa-agent.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/7-qa-agent.md new file mode 100644 index 000000000..f324cd5ef --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/7-qa-agent.md @@ -0,0 +1,80 @@ +--- +title: "レッスン 7 - QA エージェントの作成と使用" +description: "テストのカバレッジ、quality-checks スキル、ブラウザーで直接得た証拠を組み合わせる、要件を起点とした QA プロファイルを作成します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +`quality-checks` スキルを使って自動チェックを実行し、Playwright MCP を使ってブラウザーでフィルター機能を確認しました。ここでは、明確に定義された QA プロセスを持つカスタムエージェントで、これらの機能を組み合わせます。 + +このレッスンでは、次の内容を学習します。 + +- カスタムエージェントが指示、スキル、MCP ツールと連携する仕組みを確認する。 +- 再利用可能な品質保証 (QA) プロファイルを作成して確認する。 +- QA エージェントを選択し、フィルター機能の Issue に照らして結果をレビューする。 + +## シナリオ + +Tailspin Toys は、pull request (PR) を作成する前に、要件、コード品質、自動チェック、テストカバレッジ、ブラウザーでの動作を一貫してレビューしたいと考えています。カスタムエージェントは、その QA プロセスを調整し、再利用可能なレポートを提供できます。 + +## カスタムエージェントとは + +カスタムエージェントは、Markdown プロファイルで定義された Copilot の特化バージョンです。プロファイルには、エージェントの目的、指示、利用可能なツールを記述します。このワークショップでは、`.github/agents/qa.agent.md` に QA の役割を定義し、アプリで選択します。 + +これまで作成したカスタマイズには、それぞれ異なる役割があります。リポジトリの指示はチームの規約を説明し、quality-checks スキルは繰り返し実行できるチェックをまとめます。Playwright MCP はブラウザーツールを提供します。QA プロファイルは、これらを使って要件を評価し、結果を報告する方法を Copilot に指示します。既存の機能を置き換えたり、別のエージェントセッションを要求したりするものではありません。 + +## QA プロファイルを作成する + +機能の PR を開く前に、再利用可能な QA プロファイルを作成するよう Copilot に依頼します。このプロファイルには、QA が実行するチェックと、従う必要がある権限の境界の両方を定義します。 + +1. セッションが **Interactive** モードになっていることを確認します。 +2. 次のプロンプトを Copilot に送信し、新しいカスタムエージェントを作成します。 + + ```plaintext + Create a custom agent named QA in .github/agents/qa.agent.md. It should check features against their issues and agreed requirements, follow the repository instructions, run the quality-checks skill, use Playwright MCP to verify behavior, and add tests when coverage is missing. + + Have it report each requirement as pass, fail, or blocked with supporting evidence. It must ask before changing implementation code, and it must not commit changes or open pull requests. Use the current model and available tools. Just create the profile for now so I can review it. + ``` + +## プロファイルを確認する + +新しいエージェントを使用する前にプロファイルをレビューし、Copilot が意図した QA ワークフローと権限の境界を反映していることを確認します。検証だけを求めているときに、不完全または範囲が広すぎるエージェントが機能を変更することを防げます。 + +1. **Changes** を開き、`.github/agents/qa.agent.md` を選択します。 +2. フロントマターを読みます。`description` は必須です。`name` は任意ですが、含めるとエージェントに明確な表示名を付けられます。 +3. プロファイルの指示を読み、QA が要件から開始し、リポジトリの指示に従い、`quality-checks` スキルを実行し、Playwright MCP を使用することを確認します。 +4. QA が裏付けとなる証拠を報告し、実装コードを変更する前に確認し、変更をコミットしたり pull request を開いたりしないことを確認します。 +5. 生成されたプロファイルにこれらの責任や境界が欠けている場合は、続行する前に通常の Copilot エージェントに修正を依頼します。 + +## Issue に対して QA を実行する + +プロファイルをレビューしたら、現在のセッションで QA を選択します。これにより、QA はすでにコンテキストに含まれているフィルター機能の Issue と計画時の決定事項を使用できます。レビューを開始する前に、アクティブなエージェントを確認します。 + +1. 現在のセッションで、プロンプトボックスのエージェントピッカーを開きます。 +2. **QA** を選択し、実行プロンプトを送る前に、アプリがアクティブなエージェントとして **QA** を明示していることを確認します。 +3. 次のプロンプトを送信し、QA に機能のレビューを依頼します。 + + ```plaintext + Review the filtering feature against the issue and the decisions in our plan. Is it ready for a PR? + ``` + +4. QA が正しい Issue と計画上の決定事項を使用していることを確認します。求められた場合は、Issue の URL や不足しているコンテキストを提供してください。 +5. 作業が完了したら、提供されたレポートを確認します。 + +## まとめと次のステップ + +再利用可能な専門家の役割をワークフローに追加し、その作業をレビューしました。このレッスンでは、次のことを行いました。 + +- カスタムエージェントが指示、スキル、MCP ツールと連携する仕組みを確認した。 +- 要件から開始する再利用可能な QA プロファイルを作成して確認した。 +- QA エージェントを選択し、フィルター機能の Issue に照らして結果をレビューした。 + +レビューに必要な実装、スキルの更新、QA プロファイル、テスト、検証レポートがそろいました。[レッスン 8 - 機能の PR を作成してマージする][next-lesson]で、これらをまとめて Agent Merge を使います。 + +## リソース + +- [カスタムエージェントの選択を含む GitHub Copilot App のカスタマイズ][customize-app] + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/8-create-pull-request/ +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-create-pull-request.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-create-pull-request.md new file mode 100644 index 000000000..dbfc83937 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-create-pull-request.md @@ -0,0 +1,73 @@ +--- +title: "レッスン 8 - 機能の PR の作成とマージ" +description: "フィルター機能、指示、スキルの更新、QA プロファイル、テストをまとめてレビューし、PR を作成して Agent Merge を使用します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +フィルター機能の実装、指示の更新、スキルの更新、品質保証 (QA) プロファイル、テストを1つのブランチに保存しました。これらをまとめてレビューし、pull request を作成します。星評価の pull request (PR) は自分でマージしましたが、今回は **Agent Merge** にプロセスの管理を任せます。 + +> [!NOTE] +> 通常は、機能、指示の更新、スキルの更新、QA エージェントをいくつかの別々の PR に分けます。ワークショップを円滑に進めるため、フィルター機能と品質に関するワークフロー全体を1つのセッションとブランチで進め、そのすべての作業をこの PR にまとめました。 + +このレッスンでは、次の内容を学習します。 + +- Agent Merge の概要と、マージのライフサイクルを自動化する仕組みを学ぶ。 +- 機能の PR 全体と検証の証拠を確認する。 +- レビュー後にのみ Agent Merge を承認し、PR のマージを確認する。 + +## シナリオ + +フィルター機能のワークフロー全体を通じて、Copilot を使用して機能の計画、実装、検証を行いました。Tailspin Toys は、マージの承認を開発者の管理下に置きながら、残りの PR 作業を自動化したいと考えています。 + +## Agent Merge の概要 + +**Agent Merge** を使うと、Copilot app で pull request をマージするまでの最終工程を自動化できます。有効にすると、アプリのセッションが pull request を読み取り、失敗した CI チェックの修正、レビューコメントへの対応、必要に応じたリベースなど、マージを妨げる問題に対処します。そして GitHub で許可され次第、pull request をマージします。バックグラウンドで動作し、アプリを再起動しても継続し、pull request がマージされると自動的に無効になります。 + +ここまでは、自分で **Merge pull request** を選択していました。Agent Merge に任せることもできますが、コードの編集やマージには引き続き明示的な承認が必要です。マージを許可する前に、許可される操作と作業内容をレビューしてください。 + +## Agent Merge で PR を管理する + +コードの作成とレビューが完了したので、Agent Merge に PR プロセスを管理させましょう。 + +1. エージェントピッカーで **Default agent** を選択します。 +2. **Create PR** の横にあるドロップダウンを選択します。 +3. **Agent merge** を選択します。ボタンが **Agent merge** に変わります。 +4. **Agent merge** を選択し、Agent Merge のプロセスを開始します。 + +Agent Merge のプロセスが開始され、次の処理を行います。 + +- タイトルと説明を含む pull request を作成します。 +- Issue からセッションを開始した場合は、説明の本文で関連する Issue を参照します。 +- リベースを行うか、ターゲットブランチとのマージ競合に対処します。 +- CI プロセスを監視し、すべてのチェックが成功することを確認します。 +- 他の開発者または Copilot code review からのフィードバックがないか PR を監視し、コメントを解決するために更新します。 +- 必要に応じて、すべてが成功した後に PR を自動的にマージできます。 + +すべてが成功したら Agent Merge が PR もマージするように設定します。 + +5. **Agent merge** の横にあるドロップダウンを選択します。 +6. **Merge pull request** の横にチェックが付いていることを確認します。 + +> [!IMPORTANT] +> Agent Merge は、リポジトリの保護や権限不足を回避しません。続行前にそれらの阻害要因を解消してください。 + +## まとめと次のステップ + +コードの生成、テストと検証、pull request のプロセスなど、開発プロセスの複数の部分を自動化しました。具体的には、次の作業を行いました。 + +- Agent Merge の概要と、マージのライフサイクルを自動化する仕組みを学習した。 +- 機能の PR 全体と検証の証拠を確認した。 +- レビュー後にのみ Agent Merge を承認し、PR がマージされたことを確認した。 + +次は、[既存のキャンバスを使用してトリアージキャンバスを作成し][next-lesson]、エージェントと一緒に作業を確認、計画、視覚化するための、より豊かな方法を学びます。 + +## リソース + +- [GitHub Copilot app での Issue と pull request の管理][managing-issues-prs] +- [GitHub Copilot app について][about-copilot-app] + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/9-canvases/ +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md new file mode 100644 index 000000000..7c45af75f --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md @@ -0,0 +1,151 @@ +--- +title: "プロジェクトとモデルを準備する" +description: "Tailspin のカタログをエクスポートし、Foundry プロジェクトとモデルデプロイを作成して、Canvas で検証します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/ + label: "オプション: Foundry を組み込む" +next: + link: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: エージェントを構築してデプロイする +--- + +最初のモジュールでは、Backer Concierge に必要なデータと Azure リソースを準備します。この段階では、エージェントのコードやホステッド エージェントのデプロイは必要ありません。 + +このモジュールを終えると、次のものが揃います。 + +- グラウンディングの制約を明示したカタログのエクスポート。 +- 機能要件に合わせて選んだ Foundry プロジェクトとモデルデプロイ。 +- Canvas で検証済みのデプロイと、カタログの範囲に限定したモデルの簡単なスモークチェックの結果。 + +## シナリオ + +Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲームを絞り込めます。しかし、*Git の言葉遊びが好きな人には、どのゲームが合いますか?* といった質問には、ドロップダウンでは答えられません。Backer Concierge は Tailspin のカタログにあるゲームだけを勧め、ゲーム、パブリッシャー、評価、資金調達総額、支援者数、価格、プレイヤー数、プレイ時間、発売日を捏造してはいけません。信頼できるカタログと適切なモデルが、こうした回答の基盤になります。 + +## ツールと Issue セッションを準備する + +このセットアップでは、GitHub Copilot app を Azure に接続し、機能に関するすべての作業をまとめて進められるようにします。 + +1. Azure サブスクリプションがあることを確認します。必要な場合は、[200 ドルのクレジット付き無料 Azure サブスクリプション][azure-free]または[100 ドルのクレジット付き Azure for Students][azure-students]を利用できます。 +2. 使用する OS に対応した [Azure CLI][install-azure-cli] をインストールし、`az version` でインストールを確認します。 +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/learning-hub/copilot-workshops/app-8-install-foundry-plugin.png) + +5. **Customize** で **Plugins** を選択し、`azure` を検索するか、**Featured** 一覧から選択します。次に、Azure プラグインの **Install** を選択します。 +6. サイドバーで **Issues** を選択し、Tailspin Toys リポジトリの **Add a Backer Concierge assistant for catalog questions** というタイトルの Issue を探して開きます。**New session** を選択し、新しい worktree で Issue にリンクされたセッションを開始します。3 つのモジュールすべてで、このリポジトリ、worktree ブランチ、Issue セッションを使い続けてください。 +7. `/microsoft-foundry`、続いて `/azure` と入力し、両方のスキルがインストールされ、利用可能であることを確認します。まだプロンプトは送信しないでください。プラグインがすぐに表示されない場合は、アプリを再起動し、同じ Issue セッションに戻って再確認します。 + +## カタログをエクスポートする + +サンプルリポジトリには、エージェントが読み込めるファイルを生成するエクスポートスクリプトが含まれています。 + +8. この Issue にリンクされた worktree セッションで、プロンプトボックスの既定の `/fix-issue` プロンプトを次に置き換えます。 + + ```plaintext + Install the project dependencies, seed the database, then run the existing db:export script. Show me the command output and summarize the shape and grounding limits of db/catalog.json. + ``` + +9. コマンド出力を確認します。Copilot は次に相当するコマンドを実行するはずです。 + + ```bash + npm install + npm run db:setup + npm run db:export + ``` + + ![カタログのエクスポートの生成](/images/learning-hub/copilot-workshops/app-8-generate-catalog-export.png) + +10. `db/catalog.json` を開き、タイトル、説明、カテゴリ、パブリッシャー、星評価を持つ 21 個のゲームが含まれていることを確認します。`note` フィールドも確認してください。カタログには資金調達総額、支援者数、支援プラン、発売日は含まれていません。価格、プレイヤー数、プレイ時間も、記載がなければ外部知識で補わず、情報がないものとして扱います。エクスポートが失敗した場合や内容が異なる場合は、先に進む前に Copilot に調査と再実行を依頼します。 + + ![Copilot app で開いたカタログのエクスポート](/images/learning-hub/copilot-workshops/app-8-view-catalog.png) + +## Foundry プロジェクトとモデルを設定する + +先にチャットでプロジェクトとデプロイを作成しておくことで、Canvas は既存のリソースだけに接続します。 + +11. **+**、**Terminal** の順に選択し、Azure にサインインします。 + + ```bash + az login + ``` + +12. 選択したサブスクリプションを確認し、そのリソースグループを一覧表示します。 + + ```bash + az account show --output table + az group list --output table + ``` + + サブスクリプションが正しくない場合は、`az account set --subscription ` を実行してから、両方のコマンドを再実行します。 + + `rg-tailspin-toys` が表示された場合は、そのリソースを確認します。 + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + 無関係のリソースや共有リソースが含まれている場合は、いったん中断し、専用の名前を決めてから次のプロンプトを使用してください。以降のすべてのプロンプトとコマンドにある例の名前を、承認した名前に置き換えます。 +13. 同じ Issue セッションで、次を入力します。 + + ```plaintext + Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. + ``` + + ![Foundry プロジェクトの作成](/images/learning-hub/copilot-workshops/app-8-foundry-project-created.png) + +14. Copilot にモデルの推奨を依頼します。Issue からセッションを開始したため、Issue の受け入れ条件はすでにコンテキストに含まれています。 + + ```plaintext + Use the Microsoft Foundry skill to recommend two or three current chat models in the tailspin-toys project that meet this issue's acceptance criteria. Explain the tradeoffs and wait for me to choose. + ``` + +15. Copilot が `microsoft-foundry` スキルを読み込んだことを確認し、トレードオフを踏まえて利用可能なモデルを選びます。Microsoft Foundry のホステッド エージェントのクイックスタートでは、現在 `gpt-5.4-mini` を使用していますが、利用可否とクォータはリージョンによって異なります。 + + ![モデルの選択](/images/learning-hub/copilot-workshops/app-8-select-model.png) + +16. 選んだモデルのデプロイを Copilot に依頼し、承認前に対象プロジェクトとコストを確認します。 + + ```plaintext + Deploy the model I selected to the tailspin-toys Foundry project, using the model name as the deployment name. + ``` + +> [!TIP] +> モデルの利用可否は変わります。このモジュールに固定で記載されたモデルではなく、Copilot がプロジェクトで利用可能と確認したモデルを選ぶのが適切です。 + +## Canvas でモデルを検証してスモークテストする + +この確認では、エージェントのコードを作成する前にプロジェクトとモデルを検証します。モデルのスモークチェックは、モジュール 2 で実施するホステッド エージェントのグラウンディングテストの代わりにはなりません。 + +17. **+**、**Canvas**、**Microsoft Foundry (Preview)** の順に選択します。 +18. Canvas の右上隅にある **More options** メニューを開き、**Sign in** を選択します。 +19. **tailspin-toys** Foundry プロジェクトを選択します。**Models** を展開し、デプロイが想定どおりの名前とステータスで表示されることを確認します。 + + ![Canvas でのプロジェクトとモデルの検証](/images/learning-hub/copilot-workshops/app-8-validate-project-model.png) + +20. 同じセッションで、次のプロンプトを入力します。 + + ```plaintext + Microsoft Foundry スキルを使用して、エージェントを作成せずに、tailspin-toys プロジェクトにデプロイしたモデルを直接テストしてください。@db/catalog.json の内容に基づいて、「バグを追跡するパズルゲームが大好きです。どのゲームを支援すべきですか。また、どれくらいの資金を調達していますか」と質問してください。応答と、取得できる場合に限り、使用したトークン数や応答時間などの有用なメタデータを表示してください。既存の Azure サインインを使用してください。資格情報を表示したり、ファイルを変更したり、リソースを作成したりしないでください。 + ``` + +21. 応答を確認します。`db/catalog.json` に実在するゲームだけを推奨し、正しいタイトル、パブリッシャー、評価を使用し、資金調達の情報がないことを説明する必要があります。モデルがゲーム、カタログの詳細、資金調達額を捏造した場合は、続行する前に別の推奨モデルと比較します。 + +> [!NOTE] +> Canvas は再度開いたときも、選択したプロジェクトを記憶しています。各ステージには、ひな形を作成する **Create new hosted agents**、モデル、ツールボックス、スキル、ガードレールを接続する **Build current hosted agent**、ローカル実行と Microsoft Foundry へのデプロイを行う **Deploy and test** があります。 + +## チェックポイントと次のステップ + +Azure ツールを準備し、カタログをエクスポートして、デプロイしたモデルを Backer Concierge のグラウンディングルールに照らしてテストしました。このモジュールのチェックポイントは、不足している情報を捏造せず、カタログに実在するゲームを推奨するモデルです。 + +次は、同じ Tailspin Toys リポジトリ、worktree ブランチ、Issue にリンクされたセッション、Foundry プロジェクト、選択したモデルデプロイを使用して、[エージェントを構築してデプロイします][next-module]。ここで中断する場合は、継続的なコストを避けるために[Azure リソースをクリーンアップしてください][cleanup]。 + +[azure-free]: https://azure.microsoft.com/pricing/purchase-options/azure-account +[azure-students]: https://azure.microsoft.com/free/students +[install-azure-cli]: https://learn.microsoft.com/cli/azure/install-azure-cli +[install-azd]: https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd +[next-module]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[cleanup]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md new file mode 100644 index 000000000..3bd9d27e9 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md @@ -0,0 +1,160 @@ +--- +title: "エージェントを構築してデプロイする" +description: "Canvas で Backer Concierge のひな形を作成し、ローカルで検証してから、Foundry にデプロイして再テストします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: プロジェクトとモデルを準備する +next: + link: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + label: エージェントをサイトに接続する +--- + +このモジュールでは、[プロジェクトとモデルを準備する][previous-module]で用意したプロジェクト、モデルデプロイ、カタログを使い、Microsoft Foundry Canvas でホステッド エージェントの Backer Concierge を構築します。 + +このモジュールを終えると、次のものが揃います。 + +- カタログデータをパッケージに含み、対象を絞ったテストを備えたエージェントのひな形。 +- カタログと会話に関する各受け入れ条件を満たす、ローカルでの検証の証拠。 +- Foundry にデプロイして再テストしたエージェントのバージョン。 + +## シナリオ + +Tailspin Toys には、実際のカタログに関する質問に答え、情報が不足していればそれを認め、会話で取り上げたゲームを覚えているコンシェルジュが必要です。サイトに組み込む前に、サービスが信頼できることを確かめる必要があります。 + +## デプロイ用ツールを準備する + +ホステッド エージェントの検証とデプロイでは、Canvas を通じて Azure Developer CLI を使用します。既存の Foundry プロジェクトとモデルを再利用します。 + +1. モジュール 1 の **Add a Backer Concierge assistant for catalog questions** Issue にリンクされた同じセッションを再開します。`db/catalog.json` が維持され、正しいサブスクリプションと Foundry プロジェクトに接続し、モデルデプロイが残っていることを確認します。リソースをクリーンアップした場合は、まず該当する[プロジェクトとモデルのセットアップ][previous-module]を繰り返してください。 + +2. **+**、**Terminal** の順に選択し、Azure Developer CLI にサインインします。求められたら、ブラウザーで認証を完了します。 + + ```bash + azd auth login + ``` + +3. `azd config show` を実行し、Azure サブスクリプションを確認します。空の場合や誤っている場合は、`azd config set defaults.subscription ` で更新し、`azd config show` を再実行して変更を確認します。 +## Backer Concierge のひな形を作成する + +Canvas は、Backer Concierge を既存のモデルデプロイに接続するためのコード、フォルダー構造、ルートの `azure.yaml` のひな形を作成します。 + +4. **Create new hosted agents** プレビューで、次を入力します。 + + ```plaintext + Scaffold a hosted agent named Backer Concierge in agent/backer-concierge, connected to the tailspin-toys project and the model deployment I just confirmed. Use Microsoft Agent Framework with the Responses API. Ground it in db/catalog.json and ensure it meets the acceptance criteria in this issue. Keep a single azure.yaml at the repository root with the hosted-agent service pointing to agent/backer-concierge. Make sure the deployed agent includes the catalog data it needs, and add focused tests. + ``` + + Canvas は、プロンプトと現在のサブスクリプションおよび Foundry プロジェクトのコンテキストを Copilot に送信します。Agent Framework + Responses API のサンプルを探すため、**Agent with Local Tools (Responses, Agent Framework, Python)** などの選択肢が表示される場合があります。 + + ![Canvas での Backer Concierge エージェントのひな形作成](/images/learning-hub/copilot-workshops/app-8-scaffold-backer-concierge.png) + +5. **Files** タブで Copilot の変更を確認し、次のチェックポイントと照合します。`src` 内に生成されるファイル名は異なる場合がありますが、プロジェクトの構成範囲と `azure.yaml` の場所は一致するはずです。 + + - エージェントが `agent/backer-concierge` にあります。 + - リポジトリのルートに `azure.yaml` が 1 つあり、`host: azure.ai.agent` を指定したサービスが含まれています。 + - デプロイ可能なエージェントに、生成された専用のカタログのコピーが含まれています。 + - 対象を絞ったテストで、カタログのグラウンディング要件を検証します。 + - 資格情報やローカル環境ファイルは含まれていません。 + + ```text + tailspin-toys/ + ├── azure.yaml + ├── agent/ + │ └── backer-concierge/ + │ └── requirements.txt + ├── db/ + │ └── catalog.json + └── src/ + ``` + +6. Copilot に対象を絞ったテストの実行と、失敗した箇所の修正を依頼してから、**Deploy and test** に進みます。 + +## エージェントをローカルで検証する + +**Inspect Locally** は、Copilot の統合ターミナルで `azd ai agent run` を実行し、ホステッド エージェントの起動を待って、埋め込みの Agent Inspector を開きます。 + +7. **Deploy and test** で **Inspect Locally** を選択し、Agent Inspector が開くまで待ちます。 + +> [!NOTE] +> 初回のローカル実行では、`azd` が環境を作成して依存関係をインストールするため、数分かかる場合があります。 + +8. Inspector が接続できない場合は、必要なポートをほかのプロセスが使用していないことを確認し、エラーを Copilot に送ります。問題を修正したら再試行します。 +9. Agent Inspector で、**カタログに基づく推奨**をテストします。 + + ```text + I love puzzle games about tracking down bugs. What should I back? + ``` + + 期待される結果: カタログに実在するタイトルだけを挙げ、それぞれの正しい情報を使用します。 + + ![Agent Inspector でのカタログに基づく推奨](/images/learning-hub/copilot-workshops/app-8-grounded-recommendation.png) + +10. **ハルシネーションを誘う質問**をテストします。 + + ```text + How much has Pipeline Conquest raised so far, and how many backers does it have? + ``` + + 期待される結果: カタログには資金調達額や支援者数が記録されていないと説明し、代わりに記載されている情報を提供します。 + +11. **カタログ外の情報を求める質問**をテストします。 + + ```text + Do you have Wingspan? If not, what's the closest thing you've got? + ``` + + 期待される結果: Wingspan はカタログにないと伝え、外部知識からその説明をせず、実在する Tailspin のタイトルの案内に切り替えます。 + +12. **曖昧な依頼**をテストします。 + + ```text + Recommend me something good. + ``` + + 期待される結果: 確認のための短い質問を 1 つ返し、まだタイトルを勧めません。 + +13. **ランキングの正確性**をテストします。 + + ```text + What are your three highest rated games? + ``` + + 期待される結果: カタログで評価が最も高い 3 つのエントリを、正しい順序と評価で返します。 + +14. 同じ会話で次のプロンプトを送信し、**会話の継続性**をテストします。 + + ```text + Show me two highly rated strategy games. + ``` + + ```text + Which of those has the higher rating? + ``` + + 期待される結果: 2 回目の応答では、最初の応答にあった 2 つのタイトルだけを参照し、カタログの評価を正しく比較します。 + +15. すべての応答を `db/catalog.json` と Issue の受け入れ条件に照らして確認します。エージェントがゲーム、パブリッシャー、評価、資金調達総額、支援者数、価格、プレイヤー数、プレイ時間、発売日を一切捏造しないことを確認してください。Agent Inspector がエラーを報告した場合や、応答がグラウンディングの範囲を超えた場合は、結果を Canvas のプロンプト領域にコピーし、Copilot に修正を依頼します。変更するたびにローカル検証を再起動して失敗したテストを再実行し、デプロイ前に 6 つのチェックすべてに合格することを確認します。 + +## ホステッド エージェントをデプロイして再テストする + +Canvas は `azd` を使ってテスト済みのエージェントをデプロイします。Foundry はサービスのソースをパッケージ化し、依存関係を解決してリモートでビルドし、Microsoft Foundry に公開します。 + +16. Canvas の **Deploy and test** で **Deploy to Foundry** を選択します。チャットに挿入されるプロンプトを確認します。 + + ![Canvas の Deploy to Foundry プロンプト](/images/learning-hub/copilot-workshops/app-8-deploy-to-foundry.png) + +17. デプロイの完了通知、エージェントのバージョン、ステータス、Foundry のエージェントプレイグラウンドへのリンクを確認します。デプロイが失敗した場合は、エラーを Copilot に送り、同じプロジェクトで解決してから Canvas で再試行します。 +18. Canvas で **Test in Foundry Portal** を選択し、デプロイしたエージェントのプレイグラウンドを開きます。このデプロイ済みバージョンに対して、手順 9～14 の 6 つの受け入れチェックをすべて再実行します。継続性を確認する 2 つのプロンプトは、同じ会話で送信してください。応答をカタログと照合し、いずれかのチェックに失敗した場合は、Copilot に修正を依頼してローカルテストを再実行し、Canvas で再デプロイして、ホストされたバージョンを再テストします。 + +## チェックポイントと次のステップ + +Backer Concierge のひな形を作成し、カタログのグラウンディングと会話の動作をローカルでテストして、Microsoft Foundry にデプロイし、ホステッド バージョンを再テストしました。このモジュールのチェックポイントは、不足している情報を捏造せず、6 つの受け入れチェックすべてに合格するホステッド エージェントです。 + +次は、同じ Tailspin Toys リポジトリ、worktree ブランチ、Issue にリンクされたセッション、Foundry プロジェクト、選択したモデルデプロイ、ホステッド エージェントを使用して、[エージェントをサイトに接続します][next-module]。ここで中断する場合は、継続的なコストを避けるために[Azure リソースをクリーンアップしてください][cleanup]。 + +[previous-module]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[next-module]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[cleanup]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md new file mode 100644 index 000000000..449b8667a --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md @@ -0,0 +1,90 @@ +--- +title: "エージェントをサイトに接続する" +description: "資格情報を保護するローカルプロキシを介してホステッド エージェントの Backer Concierge を統合し、ウィジェットをエンドツーエンドでテストします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: エージェントを構築してデプロイする +next: { link: /ja-jp/learning-hub/copilot-workshops/app/10-review/, label: 振り返りと次のステップ } +--- + +最後のモジュールでは、[エージェントを構築してデプロイする][previous-module]でテストしたホステッド エージェントを、ローカルで実行する Tailspin Toys Web サイトに接続します。 + +このモジュールを終えると、次のものが揃います。 + +- Foundry の資格情報と会話識別子を保護するローカルの Azure Functions プロキシ。 +- エンドツーエンドの動作を検証済みの、アクセシビリティに配慮したチャットウィジェット。 +- ローカルで検証済みの統合と、リソースのクリーンアップのチェックポイント。 + +## シナリオ + +Tailspin Toys の支援者は、ゲームを閲覧する場所でカタログについてのアドバイスを必要としています。Backer Concierge は会話を維持し、キーボード操作に対応し、情報がない場合やエラーが発生した場合に明確に対処する必要があります。この利便性のために、サービスの資格情報や内部の会話情報をブラウザーに公開してはいけません。 + +## ホステッド エージェントのチェックポイントから再開する + +統合では新しい Foundry リソースを作成せず、既存のホステッド エージェントを使用します。 + +1. 前のモジュールと同じ Tailspin Toys リポジトリ、worktree ブランチ、**Add a Backer Concierge assistant for catalog questions** の Issue セッションを再開します。ルートの `azure.yaml`、エージェントのソース、カタログが揃っていることを確認し、記録したサブスクリプション、専用リソースグループ、Foundry プロジェクト、モデルデプロイ、テスト済みのホステッド エージェントのバージョンを確認します。 +2. リソースをクリーンアップした場合は、統合する前に、該当する[プロジェクトとモデル][project-module]および[テスト済みのホステッド エージェントのデプロイ][previous-module]を復元します。 + +## サーバー側のプロキシを構築する + +Tailspin Toys は全体が事前レンダリングされています。ブラウザーのコードは、ホステッド エージェントを直接呼び出したり、Foundry の資格情報を受け取ったりしてはいけません。ローカルの Azure Functions による**サーバー側の資格情報保護境界**が Foundry に対して認証し、エージェントの応答だけをブラウザーに返します。ブラウザーは各メッセージとともに、不透明な会話ハンドルを送信します。プロキシは内部の識別子を公開せずに、そのハンドルを Foundry の会話に対応付けます。 + +Azure の資格情報にアクセスできるコードは、プロキシだけです。このワークショップでは、Function とサイトをローカルで実行し、Astro 開発サーバーが `/api` リクエストを Function に転送します。 + +> [!IMPORTANT] +> このワークショップのプロキシは、ローカル開発専用です。匿名でアクセスできる公開エンドポイントとしてデプロイしてはいけません。本番環境に統合するには、適切なレート制限やクォータ、CORS 制限、監視、コスト管理など、アプリケーションに合わせた認証と不正利用防止の設計が必要です。 + +3. 同じ Copilot セッションで、次を入力します。 + + ```plaintext + Add a local Azure Functions proxy in api for the static Astro site to call my deployed Backer Concierge during development. Use my existing local Azure sign-in, keep credentials and Foundry conversation identifiers out of the browser, return an opaque conversation handle, validate requests, sanitize errors, and add focused tests. Configure the Astro development server so /api requests reach the local Function. Don't create public deployment infrastructure. + ``` + +4. 生成されたプロキシと対象を絞ったテストを確認し、リクエストの検証、エラーからの機密情報の除去、不透明な会話ハンドル、サーバー側だけに資格情報を留める境界を点検します。Copilot に対象を絞ったテストの実行と、失敗した箇所の修正を依頼します。 +5. 別のターミナルを開き、Copilot が提示したコマンドでローカルの Function を起動し、そのまま実行しておきます。 +6. チャットに戻り、Copilot にローカルプロキシのテストを依頼します。 + + ```plaintext + Test the local /api/concierge endpoint by asking "Which games are under $30?" Show me the sanitized response and confirm that no credentials or internal conversation identifiers are returned. + ``` + +7. 応答を確認します。カタログに価格が含まれていないことを説明するはずです。Foundry のトークン、資格情報、内部の会話識別子、プロジェクトのエンドポイント、スタックトレースが含まれていないことを確認します。Function に接続できない場合や、応答に内部情報の漏洩や価格の捏造がある場合は、機密情報を除去した失敗の内容を Copilot に送り、修正してプロキシのテストを再実行してから先に進みます。 + + ![ローカルプロキシのテスト](/images/learning-hub/copilot-workshops/app-8-local-proxy-test.png) + +## チャットウィジェットを構築してテストする + +プロキシを実行した状態で、ウィジェットが Foundry の内部情報を公開せずに、サイト上で会話を表示します。 + +8. Copilot にサイトへの統合を依頼します。 + + ```plaintext + 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, keep Foundry details out of the browser, and add end-to-end tests covering the chat flow, conversation continuity, accessibility, error handling, and grounding boundaries. + ``` + +9. Copilot が提示したコマンドを使い、別のターミナルで Astro 開発サーバーを起動します。サイトとローカルの Function の両方を実行したままにします。 +10. Copilot にエンドツーエンドテストの実行を依頼します。 + + ```plaintext + Run the end-to-end tests for the Backer Concierge widget in the 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. + ``` + +11. レポートを確認し、キーボード操作や[ホステッド エージェントの受け入れチェック][agent-checks]の 2 ターンの会話など、報告された動作をブラウザーで検証します。ブラウザーのリクエストが Foundry に直接送られず、不透明なハンドルとともに `/api/concierge` を経由し、応答に資格情報や Foundry の内部識別子が公開されていないことを確認します。推奨や情報不足への回答がカタログの範囲内に収まっていることも確認してください。Copilot とともに失敗したテストに対処し、必要に応じて影響のあるローカルサービスを再起動して、テストを再実行します。 + + ![Backer Concierge ウィジェットのエンドツーエンドテスト結果](/images/learning-hub/copilot-workshops/app-8-e2e-test-results.png) + +## チェックポイントと次のステップ + +資格情報を保護するローカルプロキシを構築し、アクセシビリティに配慮したチャットウィジェットを接続して、ホステッド Backer Concierge との会話フロー全体を検証しました。このモジュールのチェックポイントは、カタログの境界を維持し、資格情報と Foundry の内部識別子をブラウザーに公開しない、ローカルでテスト済みの Web サイト統合です。プロキシやサイトを本番環境にデプロイしたものではありません。 + +実験を終えたら、両方のローカルサービスを停止して、[Azure リソースをクリーンアップしてください][cleanup]。その後、コアワークショップのルートにある[振り返りと次のステップ][core-review]に進みます。 + +[previous-module]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[project-module]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[agent-checks]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/#%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%82%92%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E6%A4%9C%E8%A8%BC%E3%81%99%E3%82%8B +[cleanup]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B +[core-review]: /ja-jp/learning-hub/copilot-workshops/app/10-review/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md new file mode 100644 index 000000000..90775a547 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md @@ -0,0 +1,89 @@ +--- +title: "オプション: Foundry を組み込む" +description: "Microsoft Foundry Canvas を使ってカタログに基づく Backer Concierge を構築します。各段階で安全に中断できます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: { link: /ja-jp/learning-hub/copilot-workshops/app/10-review/, label: 振り返りと次のステップ } +next: + link: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: プロジェクトとモデルを準備する +tags: + - workshop +--- + +このオプションの学習では、GitHub Copilot app の Microsoft Foundry Canvas を使い、Tailspin Toys に **Backer Concierge** を追加します。カタログに基づくモデルの実験から始め、ホステッド エージェントの構築、ローカル Web サイトへの統合へと進みます。 + +## 学習の流れ + +各モジュールの最後にはチェックポイントがあり、安全に中断できます。学習全体を通じて、同じ Tailspin Toys リポジトリ、worktree ブランチ、Issue にリンクされたセッション、Foundry プロジェクト、モデルデプロイを使用します。 + +- [プロジェクトとモデルを準備する][module-1]では、カタログで扱える情報の範囲を定め、プロジェクトとモデルデプロイを作成し、Canvas で確認します。 +- [エージェントを構築してデプロイする][module-2]では、Backer Concierge のひな形を作成してローカルでテストし、ホステッド エージェントをデプロイして再テストします。 +- [エージェントをサイトに接続する][module-3]では、資格情報を保護するローカルプロキシ、アクセシビリティに配慮したチャットウィジェット、エンドツーエンドテストを追加します。 + +> [!IMPORTANT] +> Microsoft Foundry Canvas とホステッド エージェントはパブリックプレビュー段階です。 +> +> この学習では、モデルデプロイや、モジュール 2 以降のホステッド エージェントなど、課金対象の Azure リソースを作成します。リソースを作成する前に、サブスクリプション、リージョン、クォータ、推定コストの承認が必要です。プロジェクトとモデルの作成だけで中断する場合も、クリーンアップが必要です。 + +1. [プロジェクトとモデルを準備する][module-1]から始めます。作業は、このワークショップのコンテンツリポジトリではなく、Tailspin Toys リポジトリで進めてください。 +2. コアワークショップを完了する場合は、[レビューと次のステップ][core-review]に進んでください。 + +## リソースをクリーンアップする + +どのチェックポイントで実験を終える場合も、不要なコストを避けるために Azure リソースを削除します。クリーンアップすると後続のモジュールに必要なリソースも削除されるため、後で続行するには再作成が必要です。 + +> [!WARNING] +> `rg-tailspin-toys` がこの演習専用で、保持する必要があるリソースを含んでいない場合にのみ削除してください。共有リソースグループを削除すると、関係のないリソースも削除されます。 +> +> モジュール 1 で別のリソースグループ名を承認した場合は、以下のすべてのコマンドで `rg-tailspin-toys` をその名前に置き換えてください。 + +1. 起動したローカルの Agent Inspector、Azure Function、Astro 開発サーバーを、それぞれのターミナルで停止します。 +2. モジュール 2 または 3 でホステッド エージェントをデプロイした場合は、同じ Tailspin Toys worktree でターミナルを開き、同じ `azd` 環境を使用して次を実行します。 + + ```bash + azd down --purge + ``` + +3. 選択されているサブスクリプションと、ワークショップ用リソースグループがまだ存在するかどうかを確認します。 + + ```bash + az account show --output table + az group exists --name rg-tailspin-toys + ``` + + コマンドが `false` を返した場合、クリーンアップは完了です。`true` を返した場合は、グループ内のリソースを調べます。 + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + 残っているすべてのリソースがこの演習用であることを確認します。モジュール 1 の後で中断した場合は、`azd` サービスをデプロイしていなくても、Foundry プロジェクトとモデルをクリーンアップする必要があります。 +4. 専用のワークショップ用リソースグループが残っていて、削除するリソースだけが含まれている場合は、次を実行します。 + + ```bash + az group delete --name rg-tailspin-toys --yes --no-wait + ``` + +5. `--no-wait` を指定したコマンドは削除が完了する前に終了するため、次のコマンドが `false` を返すまで再実行します。 + + ```bash + az group exists --name rg-tailspin-toys + ``` + +## リソース + +Microsoft のドキュメントで、Canvas、ホステッド エージェントのデプロイ、およびそれらのアクセス許可について説明されています。 + +- [Microsoft Foundry Canvas とは][foundry-canvas] +- [Foundry Canvas で最初のホステッド エージェントをデプロイする][hosted-agent-quickstart] +- [ホステッド エージェントのアクセス許可][hosted-agent-permissions] + +[module-1]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[module-2]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[module-3]: /ja-jp/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[core-review]: /ja-jp/learning-hub/copilot-workshops/app/10-review/ +[foundry-canvas]: https://learn.microsoft.com/azure/foundry/agents/concepts/foundry-canvas +[hosted-agent-quickstart]: https://learn.microsoft.com/azure/foundry/agents/quickstarts/quickstart-hosted-agent?pivots=canvas +[hosted-agent-permissions]: https://learn.microsoft.com/azure/foundry/agents/concepts/hosted-agent-permissions diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-review.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-review.md deleted file mode 100644 index 9eb64557d..000000000 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/8-review.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: "レッスン 8 - 振り返りと次のステップ" -description: "GitHub Copilot app のハーネスを振り返り、繰り返し発生する作業を自動化して、次に学ぶ内容を確認します。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -ここ数回のレッスンでは、GitHub Copilot app を使い、アイデアから機能のマージまでを実践しました。取り組んだ内容は次のとおりです。 - -- リポジトリを接続し、アプリのワークスペースと用意されたバックログを確認した。 -- 直接指定したタスクと Issue からセッションを開始し、Plan モードと Autopilot モードでエージェントの動作を制御した。 -- カスタム指示と再利用可能なスキルでエージェントをガイドした。 -- Playwright MCP server を使い、実際のブラウザーで作業をテストした。 -- 共有キャンバスでエージェントと共同作業した。 -- github.com で自分でマージする方法から、**Agent Merge** に pull request のマージを任せる方法まで、段階的なマージ自動化を使って変更をリリースした。 - -繰り返し発生する作業を自動化し、ベストプラクティスと今後の進め方を確認します。 - -## 繰り返し発生する作業を自動化する - -アプリでは、**automations** を使って、スケジュールまたはオンデマンドでエージェントを実行できます。新しい Issue のトリアージや最近のアクティビティの振り返りなど、定型的なタスクに適しています。シンプルで破壊的でない automation を作成します。 - -1. サイドバーで **Automations** を選択してから **New automation** を選択します。 -2. `Recap my recent work` などの名前を付けます。 -3. トリガーを選択します。**Manual** はオンデマンドで実行し、**On a schedule** は自動的に実行し、**When an issue is created** は新しい Issue に反応します。このレッスンでは **Manual** を選択します。 -4. automation が何も変更しないように、次の例のような読み取り専用のプロンプトを入力します。 - - ```plaintext - Summarize the pull requests merged in this repository over the last week, and list any issues still open in the backlog. - ``` - -5. プロジェクト (Tailspin Toys リポジトリ) を選択し、automation を作成します。 -6. オンデマンドで実行し、結果を確認します。 - -> [!TIP] -> Automations はローカルまたはクラウドで実行できます。スケジュールに従って無人で実行する場合は、**Run in the cloud** を有効にし、automation に使用を許可する **Tools** を選択します。出力を信頼できるようになるまでは、スケジュールされた automations の範囲を限定し、破壊的でないものにしてください。 - -## ベストプラクティス - -AI ツールを使用するときは、その周辺の基盤が出力の品質を左右します。このワークショップでは、指示ファイル、スキル、カスタムエージェントがそれぞれ役割を果たしました。これらに投資し、セッション間で再利用してください。 - -タスクに合わせて**モードとモデル**を選択します。構築前にアプローチを検討するには **Plan**、対象を絞った変更で作業に関与し続けるには **Interactive**、範囲が明確で分離されたタスクに限って **Autopilot** を使用します。定型的な編集には高速なモデルを選び、複雑な作業には推論能力が高く、より多くの推論を行うモデルを選びます。 - -基盤と同じくらい、コンテキストも重要です。何を、なぜ、どのように構築するかを明確に説明すると、出力は大きく変わります。アイデアを本格的なセッションに移す前に範囲を決める場所として、Quick chats が役立ちます。 - -## さらに確認する機能 - -コアワークフローを学習しました。ほかにも確認する価値がある機能があります。 - -- 完全なセッションを必要としない、その場限りの簡単な質問に使用する **Quick chats**。 -- 構築前に問題について対話し、重要なフィードバックを得るための **Rubber duck**。 -- ロール、その tools、指示をまとめ、繰り返し使用する専門的な作業に対応する [**Custom agents**][custom-agents]。 -- セッションで起きたことの記録を生成する [`/chronicle`][chronicle]。 -- Ollama、Foundry Local、LM Studio を介したローカルモデルなど、独自のプロバイダーのモデルを使用する [Bring your own key (BYOK)][byok]。 -- GitHub がホストする分離環境でセッションを実行する [Cloud sandboxes][sandboxes]。 -- アプリを直接リポジトリ、セッション、プロンプトの画面で開く [Deep links][deep-links]。 - -## 次のステップ - -ツールを使いこなす最良の方法は、使い続けることです。実稼働コード、趣味のコード、長年構想していながら構築できていなかった小さなアプリなどに活用してください。学んだことをチームと共有し、チームからも学びましょう。そして、引き続きドキュメントを確認してください。 - -GitHub Copilot エコシステムをさらに学ぶには、[VS Code ハーネス](/ja-jp/learning-hub/copilot-workshops/vscode/)、[Copilot CLI ハーネス](/ja-jp/learning-hub/copilot-workshops/cli/)、[Cloud agent ハーネス](/ja-jp/learning-hub/copilot-workshops/cloud/)を確認してください。 - -## リソース - -- [GitHub Copilot app について][about-copilot-app] -- [GitHub Copilot app の概要][getting-started] -- [GitHub Copilot app のカスタマイズ][customize] -- [Automations の使用][using-automations] -- [Canvas extensions の操作][canvas-docs] -- [クラウドサンドボックスとローカルサンドボックスについて][sandboxes] - -[about-copilot-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 -[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle -[custom-agents]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents -[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models -[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/9-canvases.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/9-canvases.md new file mode 100644 index 000000000..ae7858b4b --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/9-canvases.md @@ -0,0 +1,117 @@ +--- +title: "レッスン 9 - キャンバスの確認と作成" +description: "既存の Database Explorer キャンバスを使用してから、リポジトリに保存するトリアージキャンバスを作成してレビューします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +ここまでは、チャットを通じてエージェントを指示してきました。しかし、多くの作業は会話の中ではなく、ボード、ドキュメント、チェックリスト上で行われます。**キャンバス**は、まさにそのような作業のために、アプリ内でユーザーとエージェントが共有できる領域です。このレッスンでは、まず Tailspin Toys に含まれるキャンバスを使用し、次にこれまで取り組んできたバックログ用のキャンバスを作成します。 + +このレッスンでは、次の内容を学習します。 + +- キャンバスの概要と使用する場面を理解する。 +- 既存の Database Explorer キャンバスを使用してプロジェクトデータを確認する。 +- バックログをトリアージする共有 Kanban ボードのキャンバスを作成する。 +- 別の機能を実装せずに新しいキャンバスを確認して操作する。 + +## シナリオ + +Tailspin Toys には、データベースを確認するためのキャンバスがすでに含まれています。キャンバスがプロジェクトデータを対話型の領域に変換する仕組みを確認した後、別の機能に着手せず、次に取り組む作業を選ぶための再利用可能なボードを作成します。 + +## キャンバスとは + +[キャンバス][canvas-docs]は、計画、トリアージボード、リリースチェックリスト、ダッシュボード、ドキュメントなどの作業成果物を扱う、共有の対話型領域です。チャットは意図の説明や曖昧さの検討に適していますが、多くの作業は具体的な*領域*上で行われます。キャンバスを使うと、その領域でエージェントと直接共同作業できます。 + +キャンバスは**双方向**です。エージェントが作業中にキャンバスを更新できる一方で、ユーザーも同じ領域を編集できます。キャンバスを作成すると、エージェントはプロンプトとワークフローに基づいて内容を構築します。その後も、機能の追加、削除、修正を依頼できます。作成したキャンバスは、アプリの右側のパネルに開きます。 + +一般的な例は次のとおりです。 + +- 1日の計画を立て、Issue と pull request に優先順位を付けるための **Markdown canvases**。 +- ユーザーとエージェントがカードを追加し、作業を列間で移動する **Agentic kanban boards**。 +- リポジトリの重要な Issue と繰り返し現れるテーマをまとめる **Issue triage boards**。 + +## キャンバスを使用する理由 + +タスクに構造、反復、検証が必要で、チャットだけでは不十分な場合はキャンバスを使用します。キャンバスでは次のことができます。 + +- ワークフローに合った実際の成果物に、エージェントの作業を結び付ける。 +- 共有領域で作業を直接調整または修正し、その変更を基にエージェントに作業を続けさせる。 +- チャットの応答だけでなく、成果物への目に見える変更として進捗を確認する。 + +## Database Explorer キャンバスを使用する + +まず、プロジェクトに含まれる既存の Database Explorer キャンバスを使用します。実際に動作する例を使用すると、自分で作成する前に、リポジトリにスコープされたキャンバスの動作を確認できます。 + +1. フィルター機能の pull request (PR) がマージされたことを確認し、ローカルの `main` を更新します。 +2. GitHub Copilot app に戻り、**Home screen** を選択します。 +3. リポジトリに `tailspin-toys` が選択されていることを確認します。 +4. 更新済みの `main` に基づく **new working tree** でセッションを作成し、**Interactive** モードを選択します。 +5. 必要に応じてローカルデータベースを準備し、変更せずに既存のキャンバスを開くよう Copilot に依頼します。 + + ```plaintext + Set up the local database if needed, then open the repository's Database Explorer canvas. Do not change any files. + ``` + +6. Database Explorer で利用可能なテーブルを確認し、`games` を選択します。 +7. 高評価のゲームを5件表示する読み取り専用クエリを実行します。 + + ```sql + SELECT title, star_rating + FROM games + ORDER BY star_rating DESC + LIMIT 5; + ``` + +8. 結果が評価の降順で5件以内のゲームを含むことを確認します。 +9. **Files** を開いて `.github/extensions/database-explorer/extension.mjs` を確認します。キャンバスがプロジェクトとともに保存され、クエリを読み取り専用の `SELECT` 文と `WITH` 文に制限していることに注目してください。 +10. セッションにファイルの変更がないことを確認します。 + +## Issue をトリアージするキャンバスを作成する + +次に、別の種類の共有領域を作成します。トリアージキャンバスをプロジェクトスコープで保存すると、チームがレビューして再利用できるリポジトリアセットになります。 + +1. 同じセッションで `/create-canvas` と入力し、作成するキャンバスについて説明します。 + + ```plaintext + Create a Kanban triage canvas for this repo's open issues and save it under .github/extensions/. Highlight the three issues you'd prioritize and explain why, with the rest below. Include summaries and links. + + Give each card an "Add to current context" action that adds the issue details without starting work or changing the issue. Make it keyboard-accessible and open it so I can try it. + ``` + +Copilot は `.github/extensions` の下にキャンバス拡張機能を作成し、アプリの右側のパネルで共有領域を開きます。生成された拡張機能は単なる視覚的な成果物ではなく、実行可能なリポジトリコンテンツです。次に、そのファイルと動作を確認します。 + +## キャンバスを確認して操作する + +キャンバスを共有する前に、リポジトリの実際の Issue と比較し、コントロールを操作します。これにより、内容が正確で操作がアクセシブルであり、Issue のアクションが作業を開始せずにコンテキストを追加することを確認できます。 + +1. **Changes** を開き、キャンバス定義がユーザーやセッション専用ではなく、リポジトリの `.github/extensions/` の下に保存されていることを確認します。既存の拡張機能とアプリケーションファイルが変更されていないことも確認します。 +2. ボードを実際のオープンな Issue と比較し、順位の理由を評価します。 +3. カードとコントロールが読みやすく、キーボードで利用できることを確認します。 +4. Issue の **Add to current context** を選択し、詳細だけが会話に入ることを確認します。実装や Issue の状態変更が始まってはいけません。 +5. 修正内容をレビューし、変更したファイルに適用できる既存の検証を実行するよう Copilot に依頼します。対話型の領域が開いたというだけで正しいと判断せず、結果と阻害要因を記録します。 +6. キャンバスに変更が必要な場合は、トリアージの範囲内で対象を絞った改善を依頼し、該当するチェックを繰り返します。このキャンバス作業の一部として、バックログの Issue を実装しないでください。 + +ワークショップは別の PR を作成する前に終了します。手動のマージと Agent Merge の両方をすでに実践したためです。実際の開発では、他のメンバーがキャンバスを利用する前に、チームの通常のプロセスでレビューしてマージしてください。 + +## まとめと次のステップ + +ユーザーとエージェントが共同作業できる共有領域を作成しました。具体的には、次の作業を行いました。 + +- キャンバスの概要と使用する場面を学習した。 +- 既存の Database Explorer キャンバスを使用してプロジェクトデータを確認した。 +- バックログをトリアージする共有 Kanban ボードのキャンバスを作成した。 +- 別の機能を実装せずに新しいキャンバスを確認して操作した。 + +バックログを追跡できるようになったので、ここまで構築した内容と今後の進め方を振り返ります。[レッスン 10「振り返りと次のステップ」][next-lesson]に進んでください。 + +## リソース + +- [GitHub Copilot app での canvas extension の操作][canvas-docs] +- [Awesome Copilot の Canvases][awesome-copilot-canvases] +- [GitHub Copilot app について][about-copilot-app] + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/app/10-review/ +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/index.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/index.md index a2797eb16..74bfbd988 100644 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/index.md +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/app/index.md @@ -2,12 +2,26 @@ title: "GitHub Copilot app" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -[**GitHub Copilot app**](https://docs.github.com/copilot/concepts/agents/github-copilot-app) は Copilot CLI を基盤とするデスクトップアプリケーションで、エージェント主導の開発を単一の作業用ワークスペースで実現します。並列エージェントセッション、切り替え可能なセッションモード、共有キャンバス、GitHub Issue と pull request のネイティブ管理機能を備えています。さらに、リベース、レビューのフィードバック、CI の修正、マージまで pull request を導く **Agent Merge** も利用できます。 +[**GitHub Copilot app**](https://docs.github.com/copilot/concepts/agents/github-copilot-app) は Copilot CLI を基盤とするデスクトップアプリケーションで、エージェント主導の開発を単一の作業用ワークスペースで実現します。並列エージェントセッション、切り替え可能なセッションモード、共有キャンバス、GitHub Issue と pull request のネイティブ管理機能を備えています。さらに、リベース、レビューのフィードバック、継続的インテグレーション (CI) の修正、マージまで pull request を導く **Agent Merge** も利用できます。 -一連のレッスンでは、アプリをインストールしてプロジェクトを設定した後、アプリのワークスペースと、テンプレートによって用意されたバックログを確認します。まず、星評価を追加する小さな変更に取り組みます。次に、Issue に基づいてカスタム指示の標準を追加し、分離されたエージェントセッションでフィルター機能を構築して、再利用可能なスキルで検証します。Playwright MCP server を追加して実際のブラウザーで機能を確認した後、段階的にマージの自動化を進め、最後は **Agent Merge** で pull request をマージします。最後に、共有キャンバスで共同作業し、繰り返し発生する作業を自動化します。アイデアから機能のマージまで、開発の一連の流れを体験できます。 +このワークショップでは、Tailspin Toys の1つの連続したワークフローに取り組みます。 + +1. プロジェクトを準備し、アプリをインストールしてリポジトリを接続し、ワークスペースと用意されたバックログを確認します。 +2. 星評価に対象を絞った変更を加えてブラウザーでレビューし、最初の pull request (PR) を手動でマージします。 +3. フィルター機能の Issue から開始し、**Plan** モードでアプローチを定義して、**Autopilot** モードで構築した後、**Interactive** モードでレビューします。 +4. リポジトリの指示を更新し、フィルター機能の作業に適用します。 +5. 既存の `quality-checks` スキルをカスタマイズし、プロジェクトのチェックに使用します。 +6. Playwright Model Context Protocol (MCP) server を追加し、ブラウザーでフィルター機能を確認します。 +7. 品質保証 (QA) カスタムエージェントを作成し、要件、カバレッジ、検証の証拠をレビューします。 +8. フィルター機能の変更全体をレビューし、2つ目の PR に Agent Merge を使用します。 +9. 既存の Database Explorer キャンバスを使用してから、リポジトリに保存するトリアージキャンバスを作成してテストします。 + +ワークショップの焦点を絞るため、作成する PR は2つです。1つ目は星評価、2つ目はフィルター機能と、指示・スキル・QA プロファイル・テストの更新です。それぞれ更新済みの `main` から開始します。フィルター機能と品質に関するワークフローでは1つのセッション、worktree、ブランチを共有するため、各ツールを確認しながら、それまでの作業を活用できます。最後のキャンバス演習はそのセッション内に保持し、PR ワークフローを繰り返すのではなく、共有サーフェスの作成とテストに集中します。 ## レッスン @@ -15,13 +29,15 @@ lastUpdated: 2026-08-03 |--------|-------|-------------| | [0. 前提条件][ex0] | セットアップ | Node.js をインストールし、Tailspin Toys プロジェクトの自分用コピーを作成します | | [1. Copilot app のインストール][ex1] | セットアップ | アプリをインストールしてプロジェクトを接続し、ワークスペースを確認します | -| [2. 最初のエージェントセッションの実行][ex2] | 最初の変更 | セッションを開始し、最初の pull request として小さな変更をリリースします | -| [3. カスタム指示による Copilot のガイド][ex3] | コンテキスト | Issue に基づいてドキュメント標準を追加し、マージします | -| [4. Autopilot による機能の構築][ex4] | コア機能 | Plan と Autopilot を使ってフィルター機能を構築し、スキルで検証します | -| [5. Playwright MCP によるテスト][ex5] | 外部ツール | Playwright MCP server を追加し、ブラウザーで機能を確認します | -| [6. Agent Merge によるマージ][ex6] | マージ | Agent Merge でフィルター機能の pull request を修正してマージします | -| [7. キャンバスを使った計画][ex7] | コラボレーション | 共有キャンバスを作成し、作業の計画と追跡に使用します | -| [8. 振り返りと次のステップ][ex8] | まとめ | 繰り返し発生するタスクを自動化し、次に学ぶ内容を確認します | +| [2. 星評価の追加で小さな成果を得る][ex2] | 最初の変更 | 既存の評価と null の場合の表示を追加し、PR 1 をマージします | +| [3. エージェントモード: Plan と Autopilot][ex3] | エージェントモード | Issue から機能を計画し、Autopilot で構築して、Interactive モードでレビューします | +| [4. カスタム指示による Copilot のガイド][ex4] | コンテキスト | 指示を確認して更新し、フィルター機能に適用します | +| [5. quality-checks スキルのカスタマイズと使用][ex5] | 繰り返し実行できるチェック | 既存のスキルを確認し、報告形式を変更して実行します | +| [6. Playwright MCP による機能の検証][ex6] | ブラウザーでの観察 | Customize から MCP を設定し、フィルターの動作を確認します | +| [7. QA エージェントの作成と使用][ex7] | 要件とカバレッジ | 専門家のプロファイルを作成して選択し、最終検証の証拠を収集します | +| [8. 機能の PR の作成とマージ][ex8] | レビューとマージ | フィルター機能、指示、スキル、QA プロファイル、テストをレビューし、2つ目の PR に Agent Merge を使用します | +| [9. キャンバスの確認と作成][ex9] | コラボレーション | Database Explorer を使用してから、リポジトリに保存するトリアージキャンバスを作成してテストします | +| [10. 振り返りと次のステップ][ex10] | まとめ | ワークフロー、成果物、追加のリソースを振り返ります | ## 前提条件 @@ -47,11 +63,13 @@ lastUpdated: 2026-08-03 [ex0]: /ja-jp/learning-hub/copilot-workshops/app/0-prerequisites/ [ex1]: /ja-jp/learning-hub/copilot-workshops/app/1-install-copilot-app/ [ex2]: /ja-jp/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /ja-jp/learning-hub/copilot-workshops/app/3-custom-instructions/ -[ex4]: /ja-jp/learning-hub/copilot-workshops/app/4-build-filtering/ -[ex5]: /ja-jp/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[ex6]: /ja-jp/learning-hub/copilot-workshops/app/6-agent-merge/ -[ex7]: /ja-jp/learning-hub/copilot-workshops/app/7-canvases/ -[ex8]: /ja-jp/learning-hub/copilot-workshops/app/8-review/ +[ex3]: /ja-jp/learning-hub/copilot-workshops/app/3-agent-modes/ +[ex4]: /ja-jp/learning-hub/copilot-workshops/app/4-custom-instructions/ +[ex5]: /ja-jp/learning-hub/copilot-workshops/app/5-agent-skills/ +[ex6]: /ja-jp/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[ex7]: /ja-jp/learning-hub/copilot-workshops/app/7-qa-agent/ +[ex8]: /ja-jp/learning-hub/copilot-workshops/app/8-create-pull-request/ +[ex9]: /ja-jp/learning-hub/copilot-workshops/app/9-canvases/ +[ex10]: /ja-jp/learning-hub/copilot-workshops/app/10-review/ [install-git]: https://github.com/git-guides/install-git [callout-student-plan-education]: https://github.com/education/students \ No newline at end of file diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 000000000..2a3cbf6f1 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "レッスン 0 - 前提条件とセットアップ" +description: "ワークショップの前提条件を確認し、GitHub Copilot app をインストールして、そのワークスペースに慣れます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Space Quiz を構築する前に、必要なものが揃っていることを確認し、GitHub Copilot app をインストールして、そのワークスペースに慣れます。 + +このレッスンでは、次の内容を学習します。 + +- ワークショップの前提条件を確認する。 +- GitHub Copilot app をインストールしてサインインする。 +- セッションで使用するモデルを選ぶ。 +- アプリの主な作業領域を把握する。 +- 簡単なチャットを試す。 + +## 前提条件 + +次のものが必要です。 + +- GitHub アカウント。[GitHub アカウントを作成する][github-signup]か、既存のアカウントを使用します。 +- 有効な Copilot プラン。[Copilot Free または有料の Copilot プランを有効にします][copilot-plans]。組織からすでに Copilot へのアクセスが提供されている場合は、そのアカウントを使用します。 +- macOS、Windows、Linux のいずれかを搭載したコンピューター。 + +アプリには Git が同梱されているため、ほかにインストールするものはありません。 + +> [!NOTE] +> Copilot Business または Copilot Enterprise を使用する場合、エージェントセッションが動作するには、管理者が **Copilot CLI** ポリシーを有効にする必要があります。 + +## アプリをインストールして設定する + +1. 使用するオペレーティングシステム向けの [GitHub Copilot app][download-app] をダウンロードしてインストールします。 +2. アプリを開きます。 +3. **Sign in to GitHub** を選択して認証します。 +4. テーマを選び、**Finish** を選択します。 + +## モデルを選ぶ + +モデルを選ぶときは、次の優先順位に従い、利用可能な最初の選択肢を選びます。 + +1. **GPT-6-Luna** (推奨)。 +2. バランスのよい代替として **Auto**。 +3. [利用可能なモデルの一覧][active-models]にある任意のモデル。 + +利用できるモデルは、プラン、組織のポリシー、製品のバージョンによって異なります。 + +## アプリの構成を把握する + +アプリは、開発ワークフローを 1 か所にまとめています。 + +- **New**: プロジェクトのセッションを開始するか、簡単な質問には **Chat** を選びます。 +- **Pull requests**: すべてのリポジトリのプルリクエストをレビューし、状況を確認します。 +- **Issues**: 自分に割り当てられた Issue、自分が作成した Issue、自分がメンションされた Issue を探します。 +- **Automations**: リポジトリで繰り返すエージェントの作業にスケジュールを設定します。 +- **Customize**: テーマやモデルを変更し、Canvas 拡張機能を管理します。 +- **Projects**: リポジトリを開きます。各リポジトリの下には、そのセッションが表示されます。 + +## 簡単なチャットを試す + +すべての質問にワークスペースが必要なわけではありません。**New** から、プロジェクトではなく **Chat** を選びます。チャットにはリポジトリが接続されておらず、ファイルを編集できません。そのため、実際のセッションを始める前に質問したり、説明を求めたり、アプローチを検討したりする最も手軽な方法です。 + +チャットで次のプロンプトを送信します。 + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +## まとめと次のステップ + +前提条件を確認し、アプリをインストールしてモデルを選び、主な作業領域を確認しました。[レッスン 1: Space Quiz のワークスペースの作成][next-lesson]に進みます。 + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[download-app]: https://gh.io/app +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 000000000..43e00fe9f --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "レッスン 1 - Space Quiz のワークスペースの作成" +description: "空のフォルダーで、Space Quiz 用のローカルの Interactive セッションを開始します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Space Quiz 用のローカルワークスペースを作成し、エージェントが作業を始めた後も自分で進行を管理できるセッションを設定します。 + +このレッスンでは、次の内容を学習します。 + +- 空のローカルフォルダーを開く。 +- Interactive モードのエージェントセッションを開始する。 +- 最初のプロンプトを送る前に、フォルダー、モード、モデルを確認する。 + +## ワークスペースを作成する + +1. GitHub Copilot app を開き、サインインしていることを確認します。 +2. **New**、**Open folder** の順に選択し、`space-quiz` という名前の空のフォルダーを選びます。フォルダーがない場合は、先に作成します。 +3. セッションモードを **Interactive** に設定します。 +4. [レッスン 0 の優先順位][model-order]に従って、使用したいモデルを選びます。 +5. **Create** を選択します。空のセッションが開き、最初のプロンプトを待ちます。 + +![Copilot app の New 画面の図。プロンプトボックス、Interactive モード、Auto モデル、Default エージェントの選択欄があり、space-quiz フォルダーは Local の main ブランチに設定されています。](/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg) + +**New** 画面では、最初のプロンプトを入力する前に、フォルダー、モード、エージェントを設定します。Interactive セッションでは、エージェントがプロジェクトを構築する間、作業を指示し、各段階をレビューできます。 + +## まとめと次のステップ + +空の Space Quiz ワークスペースの準備ができました。[レッスン 2: クイズの構築と仕上げ][next-lesson]に進みます。 + +[model-order]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/#%E3%83%A2%E3%83%87%E3%83%AB%E3%82%92%E9%81%B8%E3%81%B6 +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md new file mode 100644 index 000000000..a36f310c6 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "レッスン 10 - リモートからセッションを続ける (オプション)" +description: "/remote を使い、コンピューター上で動作し続ける進行中のアプリセッションを、Web または GitHub Copilot mobile app から確認します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +このレッスンはオプションです。ローカルでの開発の流れに慣れてから取り組むとよいでしょう。`/remote` コマンドは、セッションをローカルで動かしたまま、Web と GitHub Copilot mobile app からアクセスできるようにします。別のデバイスからセッションの進行を確認する間は、コンピューターの電源を入れたままにする必要があります。 + +このレッスンでは、次の内容を学習します。 + +- 進行中のセッションにリモートからアクセスできるようにする。 +- ブラウザーまたは GitHub Copilot mobile app からセッションの進行を確認する。 +- 結果として生じた変更を、ほかのプルリクエストと同じようにレビューする。 + +## リモートからセッションを続ける + +1. 作業が進行中のセッションを開きます。 +2. `/remote` を実行し、そのセッションにリモートからアクセスできるようにします。 +3. 返されたリンクをブラウザーで開くか、GitHub Copilot mobile app からセッションにアクセスします。 +4. そこから進行を確認し、ほかのプルリクエストとまったく同じように変更をレビューします。 + +> [!NOTE] +> **これは委任ではありません** +> +> セッションは引き続き自分のコンピューター上で動作します。別のエージェントにタスクを渡したり、クラウドに移したりするわけではありません。 + +## まとめと次のステップ + +別のデバイスからローカルセッションにアクセスできるようにしました。[レッスン 11: Canvas を試す][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md new file mode 100644 index 000000000..bd2cc1af2 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "レッスン 11 - Canvas を試す" +description: "Repository Issues Kanban Canvas をインストールし、Issue カードからセッションを開始します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +**Canvas** は、ユーザーとエージェントが同じ計画、ボード、チェックリスト、ダッシュボードを更新できる、共有された双方向の作業領域です。リポジトリの Issue を視覚的なワークフローにする Kanban Canvas を試します。 + +このレッスンでは、次の内容を学習します。 + +- Canvas 拡張機能をインストールする。 +- Canvas を Space Quiz リポジトリに接続する。 +- Issue を作業中の状態に移す。 +- Issue から作成されたセッションを確認する。 + +## Repository Issues Kanban Canvas をインストールする + +1. [Canvas 拡張機能ギャラリー][canvas-gallery]を確認します。 +2. [Repository Issues Kanban 拡張機能][kanban-extension]を開きます。 +3. **Install in GitHub Copilot app** を選択し、インストールを承認します。 +4. アプリで **Customize**、**Canvas** の順に開きます。 +5. 拡張機能がインストールされていることを確認します。 + +## Canvas から作業を開始する + +1. Canvas の **New session** を選択します。 +2. `space-quiz` プロジェクトを選びます。 +3. Issue ボードを確認します。 +4. Issue カードを作業中の列に移動します。 +5. 自動的に生成されたセッションを開きます。 +6. 選択した Issue がセッションのコンテキストとして利用できることを確認します。 + +![Backlog、Plan、Ready、Implement のレーンがある Repository Issues Kanban Canvas の図。Issue 13 の Review screen を Backlog から Plan レーンへドラッグしており、Issue 12 の Per-question timer は Backlog に残っています。](/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg) + +カードをレーンにドロップすると、Canvas はその Issue を、Issue がすでに読み込まれた新しいセッションに渡します。 + +> [!NOTE] +> 現在の Repository Issues Kanban 拡張機能では、ポインターを使ったドラッグアンドドロップでカードを移動します。この操作を使えない場合は、ボードの Issue 番号を控え、**Issues** からその Issue を開いて **New session** を選択します。カードを移動せずに、同じ Issue に基づくセッションを作成できます。 + +Canvas は、エージェントが Issue に基づいて作業する状態を保ちながら、作業を視覚的に選び、開始する方法を提供します。 + +## まとめと次のステップ + +共有された視覚的な作業領域を使って、エージェントセッションを開始しました。[レッスン 12: 振り返りと次のステップ][next-lesson]に進みます。 + +[canvas-gallery]: https://awesome-copilot.github.com/extensions/ +[kanban-extension]: https://awesome-copilot.github.com/extension/accessibility-kanban/ +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md new file mode 100644 index 000000000..992b04aa5 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "レッスン 12 - 振り返りと次のステップ" +description: "GitHub Copilot app のワークフローを振り返り、学習を続けるためのリソースを確認します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +空のフォルダーから、作業の計画、分離された環境での実装、コードレビュー、自動化、セッションへのリモートアクセス、視覚的な Canvas まで、ひととおりの開発ワークフローでエージェントを指揮しました。 + +## 完了した内容 + +次の作業を完了しました。 + +- Interactive モードでローカルプロジェクトを作成しました。 +- ブラウザーからのリアルタイムのフィードバックを使って、クイズを構築し、改善しました。 +- セッションの詳細を確認し、ブラウザーレベルのスモークテストを実行しました。 +- `/init` でプロジェクトのルールを記録しました。 +- プロジェクトを GitHub リポジトリとして公開しました。 +- 範囲を絞ったバックログを作成しました。 +- 分離された worktree で Issue を実装し、差分をレビューしました。 +- コードを変更する前に、2 つ目の Issue の計画を立てました。 +- プルリクエストのレビューと Agent Merge を通じて、Issue の実装を公開しました。 +- 毎週の Issue のトリアージを自動化しました。 +- ローカルセッションの進行をリモートから確認しました。 +- 共有の Kanban Canvas を試しました。 + +## さらに学ぶ + +- [GitHub Copilot app について学びます][about-app]。 +- [公式の入門ガイドを確認します][getting-started]。 +- [エージェントセッションの使い方を学びます][agent-sessions]。 +- [アプリで Issue とプルリクエストを管理します][issues-and-prs]。 +- [Copilot のコードレビューについて学びます][code-review]。 +- [Canvas 拡張機能を構築して使用します][canvas-extensions]。 +- [実際のコードで役立つプロンプトを書くためのベストプラクティスを確認します][best-practices]。 +- [Copilot のプランを比較します][copilot-plans]。 + +[Copilot CLI のはじめの一歩ワークショップ][first-steps-cli]または [Visual Studio Code のはじめの一歩ワークショップ][first-steps-vscode]で、別の作業方法を使って同じ Space Quiz を構築してみてください。完成したアプリケーションとチームのバックログを使う、より深いシナリオに取り組む準備ができたら、[実践的な GitHub Copilot app ワークショップ][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 +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-cli]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-app]: /ja-jp/learning-hub/copilot-workshops/app/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 000000000..a4ef04d90 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "レッスン 2 - クイズの構築と仕上げ" +description: "単一ファイルの Space Quiz を構築し、統合ブラウザーと要素ピッカーで改善します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +1 つの詳細なプロンプトで Space Quiz を構築し、統合ブラウザーで動作を確認して、要素ピッカーで見た目を改善します。 + +このレッスンでは、次の内容を学習します。 + +- 依存関係のないクイズを `index.html` に作成する。 +- 統合ブラウザーでクイズをテストする。 +- 生成されたコードを確認する。 +- アクセシビリティを維持しながら、選択した要素を改善する。 + +## クイズの構築 + +`space-quiz` セッションで次のプロンプトを送信します。 + +```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. +``` + +エージェントの作業が完了したら、数問に回答し、次を確認します。 + +- 進行状況バーが進む。 +- スコアが更新される。 +- 正解すると緑色の状態が表示される。 +- 不正解では赤色で揺れるアニメーションが表示される。 +- 最後の質問の後に結果画面が表示される。 + +## 生成されたコードを確認する + +左側のサイドバーと右側のブラウザーパネルを折りたたみ、広がったコード領域で `index.html` をレビューします。HTML、CSS、JavaScript が 1 つのファイル内でどのように連携しているかを確認します。完了したら、両方のパネルを元に戻します。 + +## 要素ピッカーで仕上げる + +1. ブラウザーのツールバーで要素ピッカーを選択します。 +2. クイズの見出しまたは回答領域を選択します。 +3. 次のプロンプトを送信します。 + + ```plaintext + Make the selected element feel more like a mission-control display. Keep it accessible and preserve the existing light and dark themes. + ``` + +4. 統合ブラウザーが更新される様子を見て、変更を確認します。 + +## オプションの改善 + +さらに試したい場合は、エージェントに次を依頼します。 + +- `prefers-reduced-motion` に対応した、控えめな星空の背景を追加する。 +- スコアが 8 以上の場合、結果画面をより祝福感のあるものにする。 +- キーボードのフォーカス状態を改善し、その後マウスを使わずにクイズを確認する。 + +## まとめと次のステップ + +Space Quiz を構築し、コードを確認して改善しました。[レッスン 3: セッションの確認とクイズのテスト][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 000000000..e99adce6e --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "レッスン 3 - セッションの確認とクイズのテスト" +description: "セッションの詳細を読んでエージェントの作業対象を確認し、Git に変更を記録する前にブラウザーレベルのスモークテストを実行します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +セッションで実際に作業を行ったので、確認する内容ができました。エージェントがどこを作業対象にしているかを確認し、その後、統合ブラウザーでクイズを操作してもらいます。意図したことではなく、実際に起きたことを報告してもらいましょう。 + +このレッスンでは、次の内容を学習します。 + +- セッションの詳細パネルを読む。 +- セッションのプロジェクト、パス、ブランチ、変更、コンテキストの使用率を確認する。 +- ブラウザーレベルのスモークテストを実行し、問題があれば修正する。 + +## セッションの詳細を読む + +セッションの詳細は、エージェントが何に取り組んでいるかを正確に示します。このパネルを常に見ている必要はありませんが、予想外の結果が出たときには、どの情報も重要です。 + +![Space Quiz の構築セッションの Copilot app 詳細パネルの図。origin/main を基にした main ブランチ、パス、プロジェクト、セッション名、セッション ID、エージェント、変更された 1 つのファイル、トークン数、27 パーセントのコンテキスト使用率、セッションの費用を表示しています。リモート操作の有効化、名前の変更、インサイトの表示、secret gist としての共有、セッションのアーカイブのオプションもあります。](/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg) + +このパネルには、作業場所、変更内容、コンテキストウィンドウの使用状況が表示されます。モデルの行はありません。モデルは、入力欄でリクエストごとに選びます。 + +1. **project**、**path**、**branch** が、編集しているつもりの対象と一致していることを確認します。 +2. **Changes** を読み、このセッションですでに何か変更したかを確認します。 +3. **context usage** を確認します。使用率が上がるほど、実際のタスクに使える余地が少なくなります。これは新しいセッションを始める目安です。 + +> [!TIP] +> **望ましくない結果の多くはコンテキストの問題です** +> +> 間違ったブランチやフォルダー、ほぼ満杯のコンテキストウィンドウは、よくないプロンプトよりもはるかに多くの予想外の結果の原因になります。 + +## Git に変更を記録する前にテストする + +統合ブラウザーは実際のブラウザーなので、エージェントがクイズを操作して動作を検証できます。次のプロンプトを送信します。 + +```plaintext +Run a browser-level smoke test for the quiz in the integrated browser. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. エージェントが質問に回答していく様子を統合ブラウザーで確認します。 +2. 何か失敗した場合は、すべて合格するまで、エージェントに修正とテストの再実行をしてもらいます。 +3. ビルドとテストが成功してから次に進みます。 + +まだ Git には何も記録していません。次のステップの `/init` は、現状のプロジェクトを読み取るため、先にプロジェクトが動作することを確認しておく価値があります。 + +## まとめと次のステップ + +セッションの作業対象を確認し、ブラウザーレベルのスモークテストでクイズを検証しました。[レッスン 4: プロジェクトの指示の記録][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 000000000..25bbd09fa --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "レッスン 4 - プロジェクトの指示の記録" +description: "/init を実行して完成した Space Quiz を説明するエージェントへの指示を生成し、自分の作業方法に合わせて調整します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +クイズの構築、仕上げ、テストが済んだので、今後のセッションでこのプロジェクトをどう扱うべきかを記録します。どのセッションも作業を始める前にエージェントへの指示を読むため、同じ方針を毎回プロンプトに書く必要がなくなります。 + +このレッスンでは、次の内容を学習します。 + +- `/init` でエージェントへの指示を生成する。 +- 生成されたファイルを受け入れる前にレビューする。 +- 指示を整理し、自分に合わせて調整する。 + +## `/init` でルールを記録する + +1. アプリのセッションで `/init` を実行します。 +2. 生成されたエージェントへの指示ファイルを受け入れる前にレビューします。 +3. このプロジェクトを反映する指示に絞ります。単一ファイルであること、依存関係がないこと、アクセシブルであること、ブラウザーでテストすることが該当します。 + +> [!IMPORTANT] +> **仕上げた後に実行する理由** +> +> `/init` は、現時点のプロジェクトを読み取ります。クイズを構築してテストした後に実行すると、空のフォルダーではなく実際のコードを説明する指示が生成されます。 + +## 自分の作業方法に合わせる + +指示ファイルには、プロジェクトに関する事実だけでなく、毎回プロンプトで繰り返すような具体的な方針も追加します。たとえば、好みのコードの書き方、命名規則、避けたいライブラリ、コメントをどの程度書いてほしいかなどです。今後のすべてのセッションは、プロンプトを読む前にこのファイルを読みます。 + +## まとめと次のステップ + +プロジェクトに、実際のコードに基づくエージェントへの指示が加わりました。[レッスン 5: プロジェクトの公開][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md new file mode 100644 index 000000000..5228cb0ec --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "レッスン 5 - プロジェクトの公開" +description: "ローカルで試作した Space Quiz を GitHub のパブリックリポジトリにします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Space Quiz を公開して、Issue を管理し、分離された worktree を使い、プルリクエストのワークフローを完了できるようにします。 + +このレッスンでは、次の内容を学習します。 + +- フォルダーを Git リポジトリとして初期化する。 +- GitHub のパブリックリポジトリを作成してプッシュする。 +- Copilot app でプロジェクトを GitHub にリンクする。 + +## リポジトリを公開する + +次のプロンプトを送信します。 + +```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] +> エージェントは、リポジトリの作成やコードのプッシュの前に確認を求めます。承認する前に、提案された操作とその対象をレビューしてください。 + +エージェントの作業が完了したら、次を行います。 + +1. GitHub で新しいリポジトリを開きます。 +2. `index.html` があることを確認します。 +3. Copilot app に戻り、プロジェクトがリポジトリにリンクされていることを確認します。 + +## まとめと次のステップ + +プロジェクトが GitHub リポジトリになりました。[レッスン 6: Issue とセッションの活用][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 000000000..a1345fda3 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "レッスン 6 - Issue とセッションの活用" +description: "範囲を絞ったバックログを作成し、Issue を選んで分離された worktree で実装し、自分で差分をレビューします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +エージェントに、範囲を絞った製品の改善案を提案してもらいます。そのアイデアを GitHub Issue にし、分離されたセッションで 1 つの Issue を実装します。 + +このレッスンでは、次の内容を学習します。 + +- Space Quiz 用に、範囲を絞った Issue を 3 つ作成する。 +- **Issues** でバックログを確認する。 +- Issue から新しい worktree のセッションを開始する。 +- **Changes** タブで差分をレビューし、機能を確認する。 + +## Issues でバックログを作成する + +次のプロンプトを送信します。 + +```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. +``` + +**Issues** を開いて 3 つの Issue をレビューし、価値が明確で、無理なく取り組める範囲のものを 1 つ選びます。 + +![Copilot app の Issues ビューの図。サイドバーには New、Pull requests、Issues、Automations、Customize、More、space-quiz プロジェクトが並んでいます。メイン領域には Assigned to me、Created by me、Mentioning me、Done のタブ、検索ボックス、State と Assignee のフィルター、space-quiz リポジトリの未解決 Issue 3 件の一覧があります。](/images/learning-hub/copilot-workshops/first-steps-app-issues.svg) + +**Issues** は、すべてのリポジトリの GitHub Issue をアプリに集め、**Assigned to me**、**Created by me**、**Mentioning me**、**Done** で絞り込みます。 + +## Issue を実装する + +1. **Issues** から、選んだ Issue を開きます。 +2. **New session** を選択します。 +3. 確認を求められたら **new worktree** を選びます。 +4. **Interactive** モードと、使用したいモデルを使います。 +5. 次のプロンプトを送信します。 + + ```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. + ``` + +新しい worktree は、レビューしてマージする準備が整うまで、この機能をデフォルトブランチから分離します。 + +## 自分で差分をレビューする + +エージェントから報告があっても、その内容をそのまま信じるのではなく確認します。 + +1. 右側のフライアウトを開き、**Changes** タブを選択します。 +2. セッションが変更したすべてのファイルの差分を読みます。 +3. 統合ブラウザーで機能をテストし、Issue の受け入れ条件を満たしていることを確認します。 + +![右側のフライアウトで Changes タブを開いた Copilot app セッションの図。index.html の 1 ファイルが変更され、142 行の追加と 8 行の削除が表示されています。セッションの会話の横に差分がインラインで表示されています。](/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg) + +**Changes** タブは、セッションが変更したすべてのファイルを一覧にし、差分をインラインで表示します。 + +## まとめと次のステップ + +バックログを作成し、分離されたセッションで 1 つの Issue を実装して、差分をレビューしました。[レッスン 7: 編集前の計画][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 000000000..573c23f7a --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "レッスン 7 - 編集前の計画" +description: "2 つ目の Issue で Plan モードを使い、ファイルを変更する前にエージェントにプロジェクトを調査し、アプローチを提案してもらいます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +どの Issue でも編集から始めるべきとは限りません。Plan モードは、プロジェクトを調査してアプローチを提案し、コードを変更する前に承認を待ちます。 + +このレッスンでは、次の内容を学習します。 + +- 2 つ目の Issue 用に Plan モードでセッションを開始する。 +- エージェントが提案した計画をレビューして改善する。 +- 計画を承認し、セッションをどのように続けるかを選ぶ。 + +## コードを変更する前にアプローチに合意する + +1. **Issues** から **2 つ目の Issue** を開き、**New session** を選択します。 +2. セッションの設定で、**Interactive** や **Autopilot** ではなく **Plan** を選びます。 +3. 次のプロンプトを送信し、ファイルを変更せずにエージェントに調査してもらいます。 + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. 提案された計画を読み、不足があれば変更を依頼します。 +5. 計画を承認します。 +6. 確認を求められたら、セッションを **Interactive** と **Autopilot** のどちらのモードで続けるかを選びます。 + +> [!TIP] +> **Plan モードが役立つ場面** +> +> 曖昧な作業、複数箇所にまたがる作業、元に戻すコストが高い作業には Plan モードを使います。不適切なアプローチを最も低いコストで修正できるのは、最初の編集を行う前です。 + +## まとめと次のステップ + +エージェントがコードを書く前に、アプローチに合意しました。[レッスン 8: Copilot のレビューの流れの完了][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 000000000..5cb0e4ada --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "レッスン 8 - Copilot のレビューの流れの完了" +description: "プルリクエストを作成し、Copilot にレビューを依頼して対応すべきフィードバックを修正し、Agent Merge にプルリクエストをマージ可能な状態に保ってもらいます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +実装した Issue のプルリクエストを作成し、Copilot にレビューを依頼して、マージ前にフィードバックに対応します。 + +このレッスンでは、次の内容を学習します。 + +- セッションの変更を最後にもう一度確認する。 +- エージェントセッションからプルリクエストを作成する。 +- Copilot にコードレビューを依頼する。 +- 対応すべきフィードバックをレビューして反映する。 +- Agent Merge を有効にして、マージされるまでプルリクエストをマージ可能な状態に保つ。 + +## プルリクエストを作成してレビューする + +1. 右側のフライアウトを開いて **Changes** タブを選択し、セッションで変更したファイルを確認します。 +2. セッションのツールバーで **Create PR** を選択します。 +3. 生成されたタイトルと説明をレビューし、プルリクエストを作成します。 +4. GitHub でプルリクエストを開きます。 +5. **Reviewers** メニューから、**Copilot** にレビューを依頼します。 +6. **Files changed** タブを開き、すべてのレビューコメントを読みます。 +7. 対応すべき各コメントについて、アプリ内の Copilot の **Fix** 操作を使うか、自分で変更します。 +8. 各変更をレビューし、機能を再テストします。 +9. 変更内容を簡潔に返信し、会話を解決済みにします。 + +> [!NOTE] +> 提案が適用できない場合やプルリクエストの範囲外の場合は、不必要な変更を加えずに、その理由を返信します。マージ前に、すべてのレビューの会話を解決済みにしてください。 + +## Agent Merge でマージする + +プルリクエストで **Agent Merge** を有効にし、エージェントにマージ可能な状態を維持してもらいます。エージェントは、レビューコメントへの対応、失敗したチェックの修正、発生した競合の解決を行い、すべて成功するとマージします。 + +自分でマージしたい場合は、最終的な差分をレビューして機能を確認し、すべてのチェックに合格してからプルリクエストをマージします。 + +## まとめと次のステップ + +Issue から、レビューしてマージしたプルリクエストまで、開発の流れを完了しました。[レッスン 9: Issue のトリアージの自動化][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md new file mode 100644 index 000000000..c6b5485d2 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "レッスン 9 - Issue のトリアージの自動化" +description: "最近の未解決 Issue を要約する、毎週の自動化を作成して実行します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +自動化を使い、繰り返し行う Issue のトリアージを、スケジュールに従って実行するエージェントのワークフローにします。 + +このレッスンでは、次の内容を学習します。 + +- 毎週実行する自動化を作成する。 +- 自動化を Space Quiz プロジェクトに接続する。 +- 自動化をすぐに実行して結果をレビューする。 + +## 自動化を作成する + +![Copilot app の Automations ビューの図。All、Local、Cloud のフィルター、検索ボックス、Templates と New automation のボタンがあり、space-quiz プロジェクトの毎週の自動化カードとして Issue triage と Accessibility audit の 2 つが表示されています。](/images/learning-hub/copilot-workshops/first-steps-app-automations.svg) + +自動化は、スケジュールに従って同じプロンプトをそれぞれ専用のセッションで実行するため、作業を妨げません。**All**、**Local**、**Cloud** で絞り込め、どの自動化も必要なときに実行できます。 + +1. **Automations** を開きます。 +2. 新しい毎週の自動化用のテンプレートを選びます。 +3. 次のプロンプトを入力します。 + + ```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. セッションモードを **Autopilot** に設定します。 +5. モデルを **Auto** に設定します。 +6. `space-quiz` プロジェクトを選択します。 +7. **Create** ドロップダウンを開き、**Create and run** を選択します。 + +生成された要約をレビューし、リポジトリの最近の未解決 Issue が参照されていることを確認します。 + +## まとめと次のステップ + +スケジュールに従って実行する、再利用可能なエージェントのワークフローを作成しました。[レッスン 10: リモートからセッションを続ける][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/index.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/index.md new file mode 100644 index 000000000..433d536d6 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/index.md @@ -0,0 +1,55 @@ +--- +title: "GitHub Copilot app を体験する" +description: "Space Quiz を構築して公開しながら、GitHub Copilot app をガイド付きコースで体験します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +初心者向けのハンズオンで GitHub Copilot app を体験します。空のフォルダーからカラフルな Space Quiz を構築し、最初のプロンプトからレビュー済みのプルリクエストまで、開発の流れをひととおり体験します。 + +ワークショップの所要時間は約 60～90 分です。プロジェクトは実行時の依存関係を持たない単一の HTML ファイルで構成されるため、アプリとそのエージェント型ワークフローの学習に集中できます。 + +> [!NOTE] +> このワークショップは [James Montemagno][james] が作成し、[First Steps with GitHub Copilot][source-lab] を基に構成されています。元のコンテンツは [MIT License][source-license] で公開されています。 + +## レッスン + +| レッスン | トピック | 実施内容 | +| ------ | ----- | ---------------- | +| [0. 前提条件とセットアップ][lesson-0] | セットアップ | 前提条件を確認し、アプリをインストールしてモデルを選び、ワークスペースを確認する | +| [1. ワークスペースの作成][lesson-1] | 作成 | 空のローカルフォルダーで Interactive セッションを開始する | +| [2. 構築と仕上げ][lesson-2] | 構築 | クイズを作成し、統合ブラウザーで改善する | +| [3. 確認とテスト][lesson-3] | コンテキストとテスト | セッションの詳細を読み、ブラウザーレベルのスモークテストを実行する | +| [4. プロジェクトの指示の記録][lesson-4] | 指示 | `/init` でエージェントへの指示を生成して調整する | +| [5. プロジェクトの公開][lesson-5] | 公開 | ローカルのプロジェクトから GitHub のパブリックリポジトリを作成する | +| [6. Issue とセッションの活用][lesson-6] | 実装 | バックログを作成し、分離された worktree で 1 つの Issue を実装して差分をレビューする | +| [7. 編集前の計画][lesson-7] | 計画 | Plan モードを使って 2 つ目の Issue のアプローチに合意する | +| [8. レビューの流れの完了][lesson-8] | レビュー | プルリクエストを作成し、Copilot のレビューフィードバックに対応して Agent Merge を使う | +| [9. Issue のトリアージの自動化][lesson-9] | 自動化 | 毎週の Issue のトリアージを自動化するスケジュールを設定して実行する | +| [10. リモートからセッションを続ける][lesson-10] | リモート (オプション) | `/remote` を使い、進行中のローカルセッションを Web またはモバイルから確認する | +| [11. Canvas を試す][lesson-11] | Canvas | Repository Issues Kanban Canvas から作業を開始する | +| [12. 振り返りと次のステップ][lesson-12] | 振り返り | ワークフローを振り返り、学習を続ける | + +## はじめる + +[レッスン 0: 前提条件とセットアップから始めます][lesson-0]。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/ +[lesson-1]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ +[lesson-2]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ +[lesson-3]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ +[lesson-4]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ +[lesson-5]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ +[lesson-6]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ +[lesson-7]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ +[lesson-8]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ +[lesson-9]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ +[lesson-10]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ +[lesson-11]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ +[lesson-12]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 000000000..09c781022 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "レッスン 0 - 前提条件とセットアップ" +description: "ワークショップの前提条件を確認し、GitHub Copilot CLI をインストールしてサインインし、空のプロジェクトフォルダーでモデルを選びます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +ターミナルにエージェントを導入します。必要なものが揃っていることを確認し、GitHub Copilot CLI をインストールしてサインインし、空のフォルダーから最初のリクエストを送る準備をします。 + +このレッスンでは、次の内容を学習します。 + +- ワークショップの前提条件を確認する。 +- GitHub Copilot CLI をインストールしてサインインする。 +- プロジェクトフォルダーを作成して信頼する。 +- セッションで使用するモデルを選ぶ。 + +## 前提条件 + +次のものが必要です。 + +- GitHub アカウント。[GitHub アカウントを作成する][github-signup]か、既存のアカウントを使用します。 +- 有効な Copilot プラン。[Copilot Free または有料の Copilot プランを有効にします][copilot-plans]。組織からすでに Copilot へのアクセスが提供されている場合は、そのアカウントを使用します。 +- インストール済みの [Git][git]。`git --version` を実行して確認します。 +- macOS、Windows、Linux のいずれかを搭載したコンピューター。 + +[GitHub CLI][gh-cli] (`gh`) は必須ではありませんが、エージェントがリポジトリやプルリクエストを作成できるため、使用をお勧めします。 + +> [!NOTE] +> Copilot Business または Copilot Enterprise を使用する場合、エージェントセッションが動作するには、管理者が **Copilot CLI** ポリシーを有効にする必要があります。 + +## CLI のセットアップ + +1. 使用するプラットフォーム向けの [GitHub Copilot CLI][install-cli] をインストールします。 +2. プロジェクトフォルダーを作成し、そのフォルダーに移動します。 + + ```bash + mkdir space-quiz && cd space-quiz + ``` + +3. `copilot` を実行してサインインし、確認を求められたらフォルダーを信頼します。 +4. `/model` を実行し、次のセクションの優先順位に従ってモデルを選びます。 +5. 必要に応じて、まだインストールしていない [GitHub CLI][gh-cli] をインストールします。 + +![space-quiz というタイトルのターミナルウィンドウに表示された Copilot CLI の図。フォルダー内のファイルを信頼するかを確認し、Yes, proceed が選択されています。セッションのモデルを選ぶ /model と、すべてのスラッシュコマンドを表示する /help が案内されています。プロンプト行には Create a space exploration quiz. と表示されています。](/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg) + +CLI は、信頼の確認と `/model` などの開始時に使うコマンドをいくつか表示して起動します。 + +> [!TIP] +> いつでも `/` を入力して利用可能なすべてのコマンドを確認できます。完全なリファレンスを表示するには `/help` を実行します。 + +## モデルを選ぶ + +`/model` を実行するときは、次の優先順位に従い、利用可能な最初の選択肢を選びます。 + +1. **GPT-6-Luna** (推奨)。 +2. バランスのよい代替として **Auto**。 +3. [利用可能なモデルの一覧][active-models]にある任意のモデル。 + +利用できるモデルは、プラン、組織のポリシー、製品のバージョンによって異なります。 + +## まとめと次のステップ + +Copilot CLI をインストールしてサインインし、空の `space-quiz` フォルダーで起動しました。[レッスン 1: ターミナルからのクイズの構築][next-lesson]に進みます。 + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[git]: https://git-scm.com/downloads +[gh-cli]: https://cli.github.com/ +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md new file mode 100644 index 000000000..ce98f29bd --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "レッスン 1 - ターミナルからのクイズの構築" +description: "詳細なリクエストを 1 回送って Space Quiz 全体を Copilot CLI に作成してもらい、その後、範囲を絞った改善を 1 つ加えます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +詳細なリクエストを 1 回送ってプロジェクト全体の作成を依頼し、承認する前にエージェントの提案をレビューします。その後、小さく範囲を限定した変更を 1 つ加えます。 + +このレッスンでは、次の内容を学習します。 + +- 依存関係のないクイズを `index.html` に構築する。 +- セッションからブラウザーでクイズを開く。 +- 範囲を絞った変更を 1 つ加え、確認する。 + +## クイズの構築 + +Copilot CLI のセッションで、次のプロンプトを送信します。 + +```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 an emoji reaction at the end. Single index.html, no server or dependencies. Accessible, keyboard-navigable, and respects prefers-color-scheme. +``` + +1. 提案された計画を読み、ファイルの変更を承認します。 +2. ブラウザーで `index.html` を開き、数問に回答します。セッションから起動するには、macOS では `!open index.html`、Windows では `!start index.html`、Linux では `!xdg-open index.html` を実行します。 + +## 小さな変更を加えて確認する + +範囲を限定したリクエストがどのように処理されるかを確認するため、改善を 1 つに絞って依頼します。 + +```plaintext +The results screen feels flat. Give it a stronger sense of arrival: animate the score counting up and make the emoji reaction larger. Change nothing else. +``` + +1. ブラウザーでページを再読み込みし、最後まで回答します。 +2. まだ何も Git に記録されていないため、差分の比較対象がないことを確認します。プロジェクトを公開した後は、比較できるようになります。 + +## まとめと次のステップ + +クイズを構築し、範囲を限定したリクエストで改善しました。[レッスン 2: プロジェクトの指示の記録][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md new file mode 100644 index 000000000..3e856a672 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "レッスン 10 - 振り返りと次のステップ" +description: "Copilot CLI のワークフローを振り返り、学習を続けるためのリソースを確認します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +ターミナル中心の開発の流れを完了しました。ターミナルを離れずに、クイズの構築、差分のレビュー、公開、セッションの並行実行、編集前の計画、セッションの再開、プルリクエストのマージ、新しい作業の委任を行いました。 + +## 完了した内容 + +次の作業を完了しました。 + +- Copilot CLI をインストールし、`/model` でモデルを選びました。 +- 1 つのプロンプトからクイズを構築し、改善しました。 +- `/init` でプロジェクトのルールを記録しました。 +- プロンプトまたは手動の操作でプロジェクトを公開しました。 +- サイドパネルから Issue をチャットに追加し、`/diff` で変更をレビューしました。 +- `/worktree` を使い、専用の worktree で 2 つ目のセッションを実行しました。 +- コードを変更する前に、`/plan` で 2 つ目の Issue の計画を立てました。 +- `/context` と `/clear` でコンテキストを確認して管理しました。 +- `copilot --resume` と `/resume` でセッションを再開しました。 +- `/pr create` と `/pr agentmerge` でプルリクエストを作成してマージしました。 +- `/delegate` で新機能の作成を委任しました。 + +## さらに学ぶ + +- [macOS、Windows、Linux に Copilot CLI をインストールします][install-cli]。 +- [Copilot CLI とそのスラッシュコマンドやフラグについて学びます][about-cli]。 +- [GitHub CLI を使ってリポジトリやプルリクエストを操作します][gh-cli]。 +- [Git をインストールします][git]。 +- [実際のコードで役立つプロンプトを書くためのベストプラクティスを確認します][best-practices]。 +- [Copilot のプランを比較します][copilot-plans]。 + +[GitHub Copilot app のはじめの一歩ワークショップ][first-steps-app]または [Visual Studio Code のはじめの一歩ワークショップ][first-steps-vscode]で、別の作業方法を使って同じ Space Quiz を構築してみてください。完成したアプリケーションとチームのバックログを使う、より深いシナリオに取り組む準備ができたら、[実践的な Copilot CLI ワークショップ][real-world-cli]に進みます。 + +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[about-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[gh-cli]: https://cli.github.com/ +[git]: https://git-scm.com/downloads +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-vscode]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-cli]: /ja-jp/learning-hub/copilot-workshops/cli/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 000000000..88495e343 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "レッスン 2 - プロジェクトの指示の記録" +description: "/init を実行して完成した Space Quiz を説明するエージェントへの指示を生成し、自分の作業方法に合わせて調整します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +動作するクイズがディスクに保存されたので、実際のプロジェクトを説明するエージェントへの指示を生成します。今後のすべてのセッションは作業を始める前にこれらの指示を読むため、同じ方針を毎回プロンプトに書く必要がなくなります。 + +このレッスンでは、次の内容を学習します。 + +- `/init` でエージェントへの指示を生成する。 +- 生成されたファイルを受け入れる前にレビューする。 +- 指示を整理し、自分に合わせて調整する。 + +## `/init` でルールを記録する + +1. セッションで `/init` を実行します。 +2. 生成された指示ファイルを受け入れる前にレビューします。 +3. このプロジェクトに合う指示だけを残します。単一ファイルであること、依存関係がないこと、アクセシブルであること、ブラウザーでテストすることが該当します。 + +> [!IMPORTANT] +> **順序が重要です** +> +> `/init` は、現時点のプロジェクトを読み取ります。クイズを構築して仕上げた後に実行すると、実際のコードに基づく指示が生成されます。 + +## 自分の作業方法に合わせる + +指示ファイルには、プロジェクトに関する事実だけでなく、毎回プロンプトで繰り返すような具体的な方針も追加します。たとえば、好みのコードの書き方、命名規則、避けたいライブラリ、コメントをどの程度書いてほしいかなどです。今後のすべてのセッションは、プロンプトを読む前にこのファイルを読みます。 + +## まとめと次のステップ + +プロジェクトに、実際のコードに基づくエージェントへの指示が加わりました。[レッスン 3: プロジェクトの公開][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md new file mode 100644 index 000000000..222ea0294 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "レッスン 3 - プロジェクトの公開" +description: "プロンプトまたは自分で実行するコマンドで、Space Quiz を初期化し、コミットして GitHub に公開します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +試作したプロジェクトを GitHub のパブリックリポジトリにします。1 つのプロンプトで依頼することも、自分でコマンドを実行することもできます。両方の方法を一度試すと、エージェントが代わりに何をしているかを正確に把握できます。 + +このレッスンでは、次の内容を学習します。 + +- Git リポジトリを初期化し、最初のコミットを作成する。 +- GitHub のパブリックリポジトリを作成してプッシュする。 +- コミットとファイルが反映されたことを確認する。 + +## 方法 A: エージェントに依頼する + +次のプロンプトを送信します。 + +```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. +``` + +エージェントが確認を求めるたびに、Git と GitHub の各操作を承認します。 + +## 方法 B: 自分で実行する + +各コマンドの先頭に `!` を付けてセッション内で実行するか、プレフィックスを付けずに自分のターミナルで実行します。 + +```plaintext +!git init -b main +!git add . +!git commit -m "Add space quiz" +!gh repo create space-quiz --public --source=. --push +``` + +最後のコマンドは [GitHub CLI][gh-cli] を使用します。インストールしていない場合は GitHub でリポジトリを作成し、`!git remote add origin ` と `!git push -u origin main` を実行します。 + +## 結果を確認する + +1. `!git log --oneline` を実行し、コミットが記録されたことを確認します。 +2. GitHub でリポジトリを開き、`index.html` があることを確認します。 + +## まとめと次のステップ + +プロジェクトが GitHub リポジトリになり、動作を確認済みのバージョンと比較できるようになりました。[レッスン 4: Issue の並行作業][next-lesson]に進みます。 + +[gh-cli]: https://cli.github.com/ +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 000000000..786195de2 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "レッスン 4 - Issue の並行作業" +description: "バックログを作成し、サイドパネルから Issue をチャットに追加して /diff で変更をレビューし、専用の worktree で 2 つ目のセッションを開始します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +バックログと実装の流れをターミナルで管理し、独立した作業には別々のセッションを開きます。 + +このレッスンでは、次の内容を学習します。 + +- 範囲を絞った GitHub Issue を 3 つ作成する。 +- サイドパネルから Issue をチャットに追加して実装する。 +- `/diff` で変更をレビューする。 +- 分離された worktree で 2 つ目のセッションを開始する。 + +## バックログを作成する + +次のプロンプトを送信します。 + +```plaintext +Review the space quiz and create three focused GitHub issues with clear titles, user-focused descriptions, and acceptance criteria. Do not implement them yet. +``` + +## このセッションで最初の Issue に取り組む + +1. Left arrow キーを押してサイドパネルを開き、Tab を押して **Issues** タブに移動します。 +2. 最初の Issue を選択状態にして c を押し、コンテキストとしてチャットに追加します。先に Issue 全文を読むには、代わりに Enter を押します。 +3. エージェントに Issue の実装を依頼します。 + +![ターミナルに表示された Copilot CLI のサイドパネルの図。Current、Sessions、Issues、Pull requests、Gists のタブのうち Issues が選択されています。space-quiz リポジトリの未解決 Issue の検索フィルターに、Add a score screen at the end of the quiz という Issue が 1 件表示されています。Left arrow でパネルを開き、Tab でタブを移動するというヒントがあり、下部には検索用のスラッシュ、詳細表示の Enter、開くための o、worktree の w、チャットの c、すべてを表示する a が並んでいます。](/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg) + +サイドパネルの上部にはすべてのタブが並び、下部のヒントには現在選択されている項目に対して操作するキーが表示されます。 + +## `/diff` で変更をレビューする + +プロジェクトを公開したので、動作を確認済みのバージョンと比較できます。`/diff` は、そのバージョンに対してこの Issue で何が変わったかを正確に表示します。これが、そのまま他の人にレビューを依頼する内容になります。 + +1. `/diff` を実行し、変更されたすべてのファイルを読みます。 +2. 問題がある箇所の修正を依頼し、再び `/diff` を実行します。 +3. Git を直接確認したいときは、いつでも `!git status` または `!git diff` を実行します。 + +## 2 つ目の Issue に並行して取り組む + +1. もう一度サイドパネルを開き、**Sessions** タブに切り替えます。 +2. 最初のセッションを残したまま、2 つ目の Issue 用の別のセッションを開始します。 +3. 新しいセッションで `/worktree` を実行し、現在の場所でブランチを切り替えるのではなく、分離された worktree を使用するようにします。これで、両方のセッションを互いに干渉せず同時に実行できます。 +4. c で 2 つ目の Issue をそのセッションに追加します。 +5. ひとまずその状態でセッションを置いておきます。次のレッスンでは、コードを書く前にこの Issue の計画を立てます。 + +![Copilot CLI で /worktree を実行した後の出力の図。issue-13-review-screen ブランチで worktree ../space-quiz-13 を作成し、main を変更せずにこのセッションがそこで作業するようになったことを示しています。](/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg) + +`/worktree` は、専用のブランチとチェックアウトにセッションを移すため、最初のセッションは影響を受けずに作業を続けられます。 + +## まとめと次のステップ + +最初の Issue を実装して `/diff` でレビューし、専用の worktree で 2 つ目のセッションを開始しました。[レッスン 5: 編集前の計画][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 000000000..65a31dc3d --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "レッスン 5 - 編集前の計画" +description: "/plan で 2 つ目のセッションを計画モードに切り替え、ファイルを編集する前にエージェントにアプローチを提案してもらいます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +すでに専用の worktree で 2 つ目のセッションが動作しています。そのセッションでは、いきなりコードを書かないようにします。計画モードは、ファイルを変更せずにプロジェクトを調査し、アプローチを提案します。 + +このレッスンでは、次の内容を学習します。 + +- 2 つ目のセッションを計画モードに切り替える。 +- エージェントが提案した計画をレビューして改善する。 +- 計画を承認し、セッションに実装してもらう。 + +## 編集前にアプローチに合意する + +1. 前のレッスンで開いた **2 つ目のセッション**に切り替えます。 +2. `/plan` を実行して、そのセッションを計画モードに切り替えます。 +3. 次のプロンプトを送信し、何も編集せずにエージェントに調査してもらいます。 + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. 計画を読み、不足している点があれば修正を求め、その後で承認します。 +5. セッションは、承認された計画を作業指示として実装に進みます。 + +> [!TIP] +> **計画モードが役立つ場面** +> +> 曖昧な作業、複数箇所にまたがる作業、元に戻すコストが高い作業には計画モードを使います。不適切なアプローチを最も低いコストで修正できるのは、最初の編集を行う前です。 + +## まとめと次のステップ + +エージェントがコードを書く前に、アプローチに合意しました。[レッスン 6: エージェントが参照できる情報の把握][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md new file mode 100644 index 000000000..38cd848b6 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "レッスン 6 - エージェントが参照できる情報の把握" +description: "/context でコンテキストウィンドウを占める情報を確認し、会話が脱線したときは /clear で新しく始めます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +ターミナルのコマンドを使うと、コンテキストを可視化して意図的に管理できます。エージェントが参照できる情報を把握すると、結果を理解しやすくなり、新しく始めるタイミングも判断できます。 + +このレッスンでは、次の内容を学習します。 + +- `/context` でコンテキストウィンドウを確認する。 +- 各部分がウィンドウをどれだけ使用しているかを確認する。 +- `/clear` で脱線した会話をリセットする。 + +## コンテキストを確認する + +1. `/context` を実行し、ファイル、指示、会話履歴を確認します。 +2. 各部分がウィンドウをどれだけ使用しているかを確認します。 +3. 会話が脱線したら、`/clear` を実行して新しく始めます。 +4. 次の変更を依頼する前に、適切なファイルをもう一度追加します。 + +![Copilot CLI で /context を実行した後の出力の図。コンテキストウィンドウのメーターは使用率 61 パーセントを示し、会話、読み取ったファイル、指示に分かれています。空きが少なくなったら /compact で要約するか、新しいセッションを開始するよう案内されています。](/images/learning-hub/copilot-workshops/first-steps-cli-context.svg) + +`/context` は、コンテキストウィンドウを占めている情報と残りの容量を正確に表示します。空きが少なくなったら、`/compact` で会話を要約するか、新しいセッションを開始します。 + +## まとめと次のステップ + +エージェントが把握している情報を確認し、管理できるようになりました。[レッスン 7: セッションの再開とリモートアクセス][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 000000000..8f009179d --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "レッスン 7 - セッションの再開とリモートアクセス" +description: "Copilot CLI のセッションを離れ、copilot --resume または /resume で後から戻ります。必要に応じて /remote で別のデバイスから進行を確認します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +セッションは、会話やワークスペースのコンテキストを失わずに中断できます。セッションを離れて後から戻り、必要に応じて別のデバイスからもアクセスできるようにします。 + +このレッスンでは、次の内容を学習します。 + +- セッションを終了し、ターミナルから再開する。 +- CLI を離れずにセッションを切り替える。 +- 必要に応じてセッションにリモートからアクセスできるようにする。 + +## セッションを離れて後から戻る + +1. 作業を切り替える準備ができたら、現在の Copilot CLI セッションを終了します。 +2. ターミナルから `copilot --resume` を実行し、以前のセッションを選びます。 +3. Copilot CLI 内では、`/resume` を使って CLI を離れずにセッションを切り替えます。 +4. 復元されたセッションに、想定したファイル、Issue のコンテキスト、モデルが引き続き揃っていることを確認します。 + +## オプション: リモートからセッションを続ける + +`/remote` を実行すると、*同じセッション*をローカルで動かしたまま、Web と GitHub Copilot mobile app からアクセスできるようになります。コンピューターの電源は入れたままにする必要があります。返されたリンクをブラウザーで開くか、GitHub Copilot mobile app からセッションにアクセスします。 + +> [!NOTE] +> `/remote` は委任ではなく、実行場所をクラウドに移すものでもありません。このワークショップでは必須ではないため、ローカルでの開発の流れに慣れてから試してください。 + +## まとめと次のステップ + +セッションを中断して再開し、別のデバイスからローカルセッションの進行を確認できるようになりました。[レッスン 8: CLI からの作成、レビュー、マージ][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 000000000..cbdd2e43d --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "レッスン 8 - CLI からの作成、レビュー、マージ" +description: "最終的な差分を確認し、/pr create でプルリクエストを作成してフィードバックに対応し、/pr agentmerge でマージします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +デスクトップの UI に切り替えずに、開発の流れを完了します。 + +このレッスンでは、次の内容を学習します。 + +- 変更されたファイルを最後にもう一度確認する。 +- 現在のブランチからプルリクエストを作成する。 +- プルリクエストをレビューし、フィードバックに対応する。 +- `/pr agentmerge` でプルリクエストを検証してマージする。 + +## 作成、レビュー、マージ + +1. `/diff` を実行し、変更されたファイルを最後にもう一度確認します。 +2. 現在のブランチからプルリクエストを作成するよう Copilot に依頼するか、`/pr create` を実行します。 +3. サイドパネルの **Pull requests** タブを開き、タイトル、説明、ファイル、ステータスチェックを確認します。 +4. 対応すべきフィードバックを修正し、ブラウザーで結果を確認して、変更内容を返信します。 +5. プルリクエストの準備が整ったら `/pr agentmerge` を実行し、検証します。必要な確認とチェックに合格した後でマージします。 + +## まとめと次のステップ + +ターミナルを離れずにプルリクエストを作成し、レビューしてマージしました。[レッスン 9: 開発の流れを信頼できたら作業を委任する][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 000000000..a184e14ef --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "レッスン 9 - 開発の流れを信頼できたら作業を委任する" +description: "Space Quiz の新機能を /delegate に任せ、実行中も作業を続けながら、CLI からクラウドセッションの進行を確認します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +機能を 1 つ公開しました。望ましい成果物がどのようなものかを把握できたので、まったく新しいアイデアは、逐一見守りながら進めるよりも、自分の作業と並行して進めてもらう価値があります。このレッスンでは、**共有できるミッションレポート**の作成を委任します。クイズの結果を、プレイヤーが投稿できるカードにする機能です。 + +このレッスンでは、次の内容を学習します。 + +- `/delegate` で新機能の作成を委任する。 +- 委任した作業の実行中も、メインのセッションで作業を続ける。 +- 委任した作業の結果を受け入れる前に比較する。 + +> [!NOTE] +> `/delegate` とクラウドセッションには、対象となる有料の Copilot プランが必要です。Business と Enterprise では、管理者によるアクセスの有効化も必要な場合があります。 + +## 新機能の作成を委任する + +`/delegate` を実行し、次のタスクを渡します。 + +```plaintext +Delegate this: add a shareable mission report to the space quiz. At the end of a run, generate a compact summary card with the score, a rank title based on the percentage, and the slowest question. Add a Copy result button that puts a short plain-text version on the clipboard. Keep it in the single index.html with no dependencies, keep it keyboard accessible, and report back with what changed. +``` + +1. 委任したタスクの実行中も、メインのセッションで作業を続けます。 +2. 委任した作業の結果を受け入れる前に、自分のセッションの内容と比較します。 +3. より大規模で要件が明確な Issue については、**クラウドセッション**を開始し、CLI から進行を確認します。 + +## まとめと次のステップ + +機能全体の作成を委任し、結果をレビューしました。[レッスン 10: 振り返りと次のステップ][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md new file mode 100644 index 000000000..db42fc85a --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md @@ -0,0 +1,52 @@ +--- +title: "GitHub Copilot CLI のはじめの一歩" +description: "Space Quiz を構築して公開しながら、GitHub Copilot CLI をターミナル中心のガイド付きコースで体験します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop + - cli +--- + +初心者向けのハンズオンで GitHub Copilot CLI を体験します。空のフォルダーからカラフルな Space Quiz を構築し、ターミナル中心の開発の流れを学びます。Git に変更を記録する前に構築と差分のレビューを行い、セッションを並行して実行し、編集前に計画を立てます。その後、シェルを離れずにプルリクエストを作成してマージします。 + +ワークショップの所要時間は約 60～90 分です。プロジェクトは実行時の依存関係を持たない単一の HTML ファイルで構成されるため、CLI とそのエージェント型ワークフローの学習に集中できます。 + +> [!NOTE] +> このワークショップは [James Montemagno][james] が作成し、[First Steps with GitHub Copilot][source-lab] を基に構成されています。元のコンテンツは [MIT License][source-license] で公開されています。 + +## レッスン + +| レッスン | トピック | 実施内容 | +| ------ | ----- | ---------------- | +| [0. 前提条件とセットアップ][lesson-0] | セットアップ | 前提条件を確認し、Copilot CLI をインストールしてサインインし、モデルを選ぶ | +| [1. クイズの構築][lesson-1] | 構築 | ターミナルからクイズを構築し、範囲を絞った変更を 1 つ加える | +| [2. プロジェクトの指示の記録][lesson-2] | 指示 | `/init` でエージェントへの指示を生成して調整する | +| [3. プロジェクトの公開][lesson-3] | 公開 | プロンプトまたは手動の操作で初期化、コミット、公開する | +| [4. Issue の並行作業][lesson-4] | 実装 | バックログを作成し、Issue をチャットに追加して `/diff` でレビューし、worktree で 2 つ目のセッションを開始する | +| [5. 編集前の計画][lesson-5] | 計画 | `/plan` を使って 2 つ目の Issue のアプローチに合意する | +| [6. エージェントが参照できる情報の把握][lesson-6] | コンテキスト | `/context` と `/clear` でコンテキストを確認してリセットする | +| [7. セッションの再開とリモートアクセス][lesson-7] | 再開 | `/resume` でセッションを離れたり戻ったりし、必要に応じて `/remote` で別のデバイスからローカルセッションの進行を確認する | +| [8. 作成、レビュー、マージ][lesson-8] | レビュー | `/pr create` と `/pr agentmerge` でプルリクエストを作成してマージする | +| [9. 作業の委任][lesson-9] | 委任 | `/delegate` に新機能を任せ、クラウドセッションの進行を確認する | +| [10. 振り返りと次のステップ][lesson-10] | 振り返り | ワークフローを振り返り、学習を続ける | + +## はじめる + +[レッスン 0: 前提条件とセットアップから始めます][lesson-0]。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites/ +[lesson-1]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ +[lesson-2]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ +[lesson-3]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ +[lesson-4]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ +[lesson-5]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ +[lesson-6]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ +[lesson-7]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ +[lesson-8]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ +[lesson-9]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ +[lesson-10]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/index.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/index.md new file mode 100644 index 000000000..68ab19a5a --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/index.md @@ -0,0 +1,36 @@ +--- +title: "はじめの一歩" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +「はじめの一歩」のワークショップは、既存のアプリケーションや詳細な開発シナリオを用意せずに GitHub Copilot を体験できる、ガイド付きの入門コースです。どのワークショップも小さなところから始め、実際に使いながら製品を学び、ひととおりのワークフローを体験します。 + +すべてのワークショップで、空のフォルダーから同じ Space Quiz を構築します。学びたいツールを選ぶことも、複数のワークショップを完了してそれぞれの使い方を比較することもできます。 + +> [!NOTE] +> これらのワークショップは [James Montemagno][james] が作成し、[MIT License][source-license] で公開されている [First Steps with GitHub Copilot][source-lab] を基に構成されています。 + +## ワークショップ + +### [GitHub Copilot app を体験する][copilot-app] + +空のフォルダーからカラフルな Space Quiz を構築し、開発の流れを体験します。作成、改善、テスト、プロジェクトの指示の記録、公開、作業の計画、Issue の実装、プルリクエストのレビューとマージ、繰り返し作業の自動化を行い、Canvas 拡張機能も試します。 + +### [GitHub Copilot CLI のはじめの一歩][copilot-cli] + +ターミナル中心の開発の流れを学びます。Git に変更を記録する前に構築と差分のレビューを行い、worktree でセッションを並行して実行し、編集前に計画を立て、コンテキストを管理します。その後、シェルを離れずにプルリクエストを作成してマージし、作業を委任します。 + +### [Visual Studio Code のはじめの一歩][vscode] + +エディター中心の開発の流れを体験します。ワークスペースで構築し、統合ブラウザーから要素を改善し、コンテキストを確認して、Git に変更を記録する前にテストします。編集前に計画を立て、VS Code を離れずに GitHub のツールで Issue、プルリクエスト、クラウドセッションを扱います。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[copilot-app]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/ +[copilot-cli]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[vscode]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md new file mode 100644 index 000000000..a8fb651f8 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "レッスン 0 - 前提条件とセットアップ" +description: "ワークショップの前提条件を確認し、VS Code の Copilot Chat の動作を確認して GitHub Pull Requests and Issues 拡張機能を追加し、モデルを選びます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +エディターで Copilot を使います。Copilot は VS Code に同梱されているため、チャット用に何かをインストールする必要はありません。GitHub 拡張機能を追加し、空のフォルダーを開きます。 + +このレッスンでは、次の内容を学習します。 + +- ワークショップの前提条件を確認する。 +- VS Code で Copilot Chat が応答することを確認する。 +- GitHub Pull Requests and Issues 拡張機能をインストールする。 +- 空のプロジェクトフォルダーを開き、モデルを選ぶ。 + +## 前提条件 + +次のものが必要です。 + +- GitHub アカウント。[GitHub アカウントを作成する][github-signup]か、既存のアカウントを使用します。 +- 有効な Copilot プラン。[Copilot Free または有料の Copilot プランを有効にします][copilot-plans]。組織からすでに Copilot へのアクセスが提供されている場合は、そのアカウントを使用します。 +- [Visual Studio Code][vscode]。 +- インストール済みの [Git][git]。ターミナルで `git --version` を実行して確認します。 + +## VS Code のセットアップ + +1. [VS Code][vscode] をインストールし、GitHub にサインインします。Copilot と Copilot Chat は組み込まれているため、タイトルバーから **Chat** ビューを開き、応答することを確認します。 +2. **Extensions** ビューを開き、公式の [GitHub Pull Requests and Issues][pr-extension] 拡張機能をインストールして、Issue とプルリクエストがサイドバーに表示されるようにします。 +3. `space-quiz` という名前の空のフォルダーを作成し、**File** > **Open Folder** を選択して開きます。 +4. **Chat** ビューのモデルピッカーを使い、次のセクションの優先順位に従ってモデルを選びます。 + +## モデルを選ぶ + +利用可能な最初の選択肢を選びます。 + +1. **GPT-6-Luna** (推奨)。 +2. バランスのよい代替として **Auto**。 +3. [利用可能なモデルの一覧][active-models]にある任意のモデル。 + +利用できるモデルは、プラン、組織のポリシー、製品のバージョンによって異なります。 + +## まとめと次のステップ + +VS Code に Copilot Chat、GitHub 拡張機能、空の `space-quiz` フォルダーが揃いました。[レッスン 1: ワークスペースでの構築][next-lesson]に進みます。 + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[vscode]: https://code.visualstudio.com/ +[git]: https://git-scm.com/downloads +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 000000000..e0b4525f2 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "レッスン 1 - ワークスペースでの構築" +description: "VS Code で Space Quiz を構築し、統合ブラウザーでプレビューして、選んだ要素を仕上げます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +エディター、チャット、ファイル、プレビューをまとめて使います。クイズを構築して統合ブラウザーで回答し、特定の要素を直接チャットに渡して、範囲を絞った変更を加えます。 + +このレッスンでは、次の内容を学習します。 + +- 単一の `index.html` にクイズを構築する。 +- 統合ブラウザーでクイズをプレビューする。 +- ブラウザーで要素を選択して仕上げる。 + +## クイズの構築 + +Copilot Chat で次のプロンプトを送信します。 + +```plaintext +Create a colorful, accessible space exploration quiz with 10 questions in a single index.html. Add a progress bar, score counter, animated correct and incorrect feedback, and a results screen. Use no server or dependencies. Open it in the VS Code integrated browser. +``` + +1. エディターで生成されたファイルをレビューします。 +2. 統合ブラウザーを開き、数問に回答します。 +3. 必要なときに **Source Control** を開き、変更されたファイルと差分を確認します。 + +## 要素を選んで仕上げる + +統合ブラウザーは、特定の要素を直接チャットに渡せるため、どのボタンを指しているかを説明する必要がありません。 + +1. 統合ブラウザーでクイズを開いた状態で、ブラウザーのツールバーから要素の選択を開始します。 +2. 回答ボタンを選択し、その要素を次のチャットメッセージに添付します。 +3. 次のプロンプトを送信し、プレビューが再読み込みされる様子を確認します。 + + ```plaintext + Using the selected element, make the answer buttons feel more tactile: add a subtle press state, a clearer focus ring for keyboard users, and a smoother transition into the correct and incorrect colors. Change nothing else. + ``` + +4. 変更を受け入れる前に、**Source Control** で差分を読みます。 +5. Tab を押して回答間を移動し、フォーカスリングが見えることを確認します。 + +## まとめと次のステップ + +エディターを離れずにクイズを構築し、プレビューして仕上げました。[レッスン 2: プロジェクトの指示の記録][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/10-review.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/10-review.md new file mode 100644 index 000000000..2b8fe8a15 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "レッスン 10 - 振り返りと次のステップ" +description: "VS Code のワークフローを振り返り、学習を続けるためのリソースを確認します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +エディター中心の開発の流れを完了しました。エディターでの構築、指示の記録、統合ブラウザーでのテスト、編集前の計画、GitHub のツールでのマージを行い、次のアイデアをクラウドセッションに委任しました。 + +## 完了した内容 + +次の作業を完了しました。 + +- Copilot Chat の動作を確認し、GitHub Pull Requests and Issues 拡張機能を追加しました。 +- クイズを構築し、統合ブラウザーで選んだ要素を仕上げました。 +- `/init` で `.github/copilot-instructions.md` を生成しました。 +- チャットのコンテキストを確認し、Git に何かを記録する前にスモークテストを実行しました。 +- **Source Control** と Copilot が下書きしたコミットメッセージを使って公開しました。 +- 編集前に、Plan モードで機能の計画を立てました。 +- GitHub MCP を有効にし、チャットから Issue を作成しました。 +- VS Code からプルリクエストを作成し、レビューしてマージしました。 +- クラウドセッションに機能の作成を委任しました。 + +## さらに学ぶ + +- [チャット、エージェントモード、エディターの機能を含め、VS Code の Copilot について学びます][copilot-vscode]。 +- [GitHub Pull Requests 拡張機能を使い、サイドバーで Issue とプルリクエストを管理します][pr-extension]。 +- [VS Code の MCP サーバーで、エージェントが呼び出せるツールを追加します][mcp-servers]。 +- [カスタム指示でプロジェクトのルールを Copilot に伝えます][custom-instructions]。 +- [Git をインストールします][git]。 +- [Copilot のプランを比較します][copilot-plans]。 + +[GitHub Copilot app のはじめの一歩ワークショップ][first-steps-app]または [GitHub Copilot CLI のはじめの一歩ワークショップ][first-steps-cli]で、別の作業方法を使って同じ Space Quiz を構築してみてください。完成したアプリケーションとチームのバックログを使う、より深いシナリオに取り組む準備ができたら、[実践的な VS Code ワークショップ][real-world-vscode]に進みます。 + +[copilot-vscode]: https://code.visualstudio.com/docs/copilot/overview +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[custom-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[git]: https://git-scm.com/downloads +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[real-world-vscode]: /ja-jp/learning-hub/copilot-workshops/vscode/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md new file mode 100644 index 000000000..bcb62e99c --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "レッスン 2 - プロジェクトの指示の記録" +description: "Copilot Chat で /init を実行して Space Quiz 用の .github/copilot-instructions.md を生成し、調整します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +ワークスペースに動作するクイズができたので、実際のプロジェクトを説明するリポジトリのカスタム指示を生成します。Copilot は、チャットのリクエストごとにこれらの指示を読みます。 + +このレッスンでは、次の内容を学習します。 + +- `/init` でリポジトリのカスタム指示を生成する。 +- `.github/copilot-instructions.md` を保存する前にレビューする。 +- 指示を整理し、自分に合わせて調整する。 + +## `/init` でルールを記録する + +1. Copilot Chat で `/init` を実行します。 +2. 生成された `.github/copilot-instructions.md` ファイルを保存する前にレビューします。 +3. このプロジェクトに合う指示だけを残します。単一ファイルであること、依存関係がないこと、アクセシブルであること、ブラウザーでテストすることが該当します。 + +![VS Code のエディターで .github/copilot-instructions.md を開き、Explorer で index.html の隣にある同ファイルを選択した図。Space Quiz というタイトルのファイルには、依存関係もビルド手順もない単一の index.html、すべての回答にキーボードで到達できること、両方のテーマで prefers-color-scheme を尊重することがルールとして記載されています。How I like code written セクションでは、小さな関数、早期リターン、技巧的なワンライナーを使わないこと、本当に意外な点にだけコメントを書くことを求めています。](/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg) + +リポジトリのカスタム指示は `.github/copilot-instructions.md` に保存され、チャットのすべてのリクエストに適用されます。 + +> [!IMPORTANT] +> **順序が重要です** +> +> `/init` は、現時点のワークスペースを読み取ります。クイズを構築した後に実行すると、実際のコードに基づく指示が生成されます。 + +## 自分の作業方法に合わせる + +指示ファイルには、プロジェクトに関する事実だけでなく、毎回プロンプトで繰り返すような具体的な方針も追加します。たとえば、好みのコードの書き方、命名規則、避けたいライブラリ、コメントをどの程度書いてほしいかなどです。今後のすべてのセッションは、プロンプトを読む前にこのファイルを読みます。 + +## まとめと次のステップ + +ワークスペースに、実際のコードに基づくカスタム指示が加わりました。[レッスン 3: コンテキストの確認とテスト][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 000000000..0b7feb1a7 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "レッスン 3 - コンテキストの確認とテスト" +description: "Copilot Chat のリクエストに添付されたコンテキストを確認し、Git に変更を記録する前にブラウザーレベルのスモークテストを実行します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +公開する前に、Copilot が参照できる情報を確認し、クイズが動作することを確かめます。 + +このレッスンでは、次の内容を学習します。 + +- チャットのリクエストに含まれるコンテキストを確認する。 +- ブラウザーレベルのスモークテストを実行する。 +- Git の操作に進む前に、問題を修正する。 + +## 右下からコンテキストを確認する + +VS Code は、Copilot Chat の入力欄の右下に、現在のコンテキストを表示します。 + +1. チャット入力欄の**右下**にあるコンテキストインジケーターを開きます。 +2. リクエストに含まれるファイル、カスタム指示、シンボルを確認します。 +3. 続ける前に、無関係なコンテキストを削除するか、クイズのファイルを添付します。 + +## Git に変更を記録する前に構築してテストする + +リポジトリを初期化したり、何かをコミットしたりする前に、統合ブラウザーとスモークテスト用のプロンプトを使います。 + +```plaintext +Run a browser-level smoke test for the quiz. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. スモークテストを実行し、統合ブラウザーを確認します。 +2. 問題があれば修正し、すべて合格するまでテストを再実行します。 +3. ビルドとテストが成功してから、Git の操作に進みます。 + +## まとめと次のステップ + +Copilot が参照できる情報を確認し、公開前にクイズをテストしました。[レッスン 4: プロジェクトの公開][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md new file mode 100644 index 000000000..8e72d0c02 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "レッスン 4 - プロジェクトの公開" +description: "VS Code に組み込まれた Source Control の統合機能だけを使い、Space Quiz を初期化、コミット、公開します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +組み込みの Git 統合機能だけを使い、テスト済みのクイズを GitHub に公開します。実際の変更内容に基づいて、Copilot にコミットメッセージの下書きを作成してもらいます。 + +このレッスンでは、次の内容を学習します。 + +- **Source Control** からリポジトリを初期化する。 +- ステージングされた差分からコミットメッセージを生成する。 +- 新しい GitHub のパブリックリポジトリにブランチを公開する。 + +## 初期化、コミット、公開 + +1. **Source Control** を開き、**Initialize Repository** を選択します。 +2. ファイルをステージングします。 +3. コミットメッセージ欄の**きらめき付きの鉛筆**アイコンを選択し、ステージングされた差分から Copilot にメッセージを書いてもらいます。メッセージを読み、誤りがあれば編集してからコミットします。 +4. **Publish Branch** を選択し、GitHub にパブリックの `space-quiz` リポジトリを作成します。 +5. テスト済みのファイルが GitHub にあることを確認します。 + +![VS Code の Source Control ビューの図。Changes 一覧に index.html と .github/copilot-instructions.md が表示されています。コミットメッセージ欄のきらめきボタンを指す注記には Copilot wrote your message とあり、メッセージには Add per-question timer to the quiz と表示されています。Commit ボタンの下で Create Pull Request ボタンが強調され、Commit first, then this button appears right inside Source Control と注記されています。](/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg) + +きらめきボタンは、ステージングされた差分からコミットメッセージの下書きを作成します。コミットすると、**Source Control** からプルリクエストの作成も提案されます。 + +## まとめと次のステップ + +テスト済みのクイズを GitHub に公開しました。[レッスン 5: 編集前の計画][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md new file mode 100644 index 000000000..5b256ee93 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "レッスン 5 - 編集前の計画" +description: "Copilot Chat を Plan モードに切り替え、ファイルを編集する前にワークスペースを調査してアプローチを提案してもらいます。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Plan モードは、ファイルを変更せずにワークスペースを調査し、実装計画を書きます。 + +このレッスンでは、次の内容を学習します。 + +- Copilot Chat を Agent から Plan に切り替える。 +- 提案された計画をレビューして改善する。 +- Agent に戻して計画を実装する。 + +## 編集前にアプローチに合意する + +1. Copilot Chat を開き、入力欄の上にある**モードのドロップダウン**を使います。 +2. **Agent** から **Plan** に切り替えます。 +3. 次のプロンプトで次の機能を説明し、Copilot にワークスペースを調査してもらいます。 + + ```plaintext + Plan how to add a review screen that shows every question with the answer I chose. Investigate the existing quiz, list the changes you would make, call out accessibility and single-file risks, and stop before editing. + ``` + +4. 計画を読み、変更を依頼してから、**Agent** に戻して実装します。 + +> [!TIP] +> **計画モードが役立つ場面** +> +> 曖昧な作業、複数箇所にまたがる作業、元に戻すコストが高い作業には Plan モードを使います。不適切なアプローチを最も低いコストで修正できるのは、最初の編集を行う前です。 + +## まとめと次のステップ + +Copilot がコードを書く前に、アプローチに合意しました。[レッスン 6: Copilot に GitHub を扱うツールを提供する][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md new file mode 100644 index 000000000..26ecf0592 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "レッスン 6 - Copilot に GitHub を扱うツールを提供する" +description: "Copilot に Issue やプルリクエストの操作を依頼する前に、VS Code の GitHub MCP サーバーを有効にしてレビューします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Copilot に Issue の作成やプルリクエストの操作を依頼する*前に*、GitHub MCP サーバーを有効にします。これらのツールを使うと、Copilot はチャットから直接 GitHub のデータを読み書きできます。 + +このレッスンでは、次の内容を学習します。 + +- GitHub MCP サーバーを有効にする。 +- サーバーが要求するツールとアクセス許可をレビューする。 +- チャットで GitHub のツールが利用できることを確認する。 + +## GitHub MCP を有効にする + +1. VS Code の **Settings** を開き、使用中のバージョンに組み込みの **GitHub MCP** サーバーが含まれる場合は、有効にします。 +2. そうでない場合は、[MCP サーバーの設定手順][mcp-servers]に従って、信頼できる GitHub MCP サーバーをインストールします。 +3. 承認する前に、サーバーが要求するツールとアクセス許可をレビューします。 +4. Copilot Chat のツールピッカーに GitHub のツールが表示されることを確認します。 + +## まとめと次のステップ + +Copilot が GitHub を扱うツールを利用できるようになりました。[レッスン 7: Issue の計画と実装][next-lesson]に進みます。 + +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 000000000..b35504dd1 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "レッスン 7 - Issue の計画と実装" +description: "GitHub のツールを使って Copilot Chat から Issue を作成し、新しいチャットセッションで 1 つ実装します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +GitHub MCP を有効にすると、Copilot はチャットから直接 Issue を作成し、読むことができます。 + +このレッスンでは、次の内容を学習します。 + +- Copilot Chat から、範囲を絞った GitHub Issue を 3 つ作成する。 +- 1 つの Issue 用に新しいチャットセッションを開始する。 +- Issue を実装して確認する。 + +## Issue を作成する + +次のプロンプトを送信します。 + +```plaintext +Review the space quiz and suggest three focused feature ideas. Use the GitHub tools to create a separate issue for each with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +## 1 つの Issue を実装する + +1. アクティビティバーの **GitHub** ビューを開き、新しい Issue を確認します。 +2. Issue を 1 つ選び、Copilot Chat の **+** ボタンを選択して、その Issue 用の新しいセッションを開始します。 +3. Agent モードで Issue を実装します。元のセッションは比較用に残しておきます。 +4. プルリクエストを作成する前に、[レッスン 3][lesson-3] の統合ブラウザーでのスモークテストを実行します。 + +## まとめと次のステップ + +Issue を作成し、専用のセッションで 1 つ実装しました。[レッスン 8: レビューとマージ][next-lesson]に進みます。 + +[lesson-3]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 000000000..d41070ff3 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "レッスン 8 - レビューとマージ" +description: "Source Control からプルリクエストを作成し、Copilot にコードレビューを依頼して GitHub のツールでフィードバックに対応し、マージします。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +VS Code の GitHub ツールで、新しい作業を確認し、レビューしてマージします。 + +このレッスンでは、次の内容を学習します。 + +- 新しい作業をコミットし、**Source Control** からプルリクエストを作成する。 +- Copilot にコードレビューを依頼する。 +- GitHub MCP でフィードバックと失敗したチェックに対応する。 +- プルリクエストをマージする。 + +## 確認、レビュー、マージ + +1. 何かを作成する前に **Source Control** を開き、変更されたファイルと差分を確認します。 +2. もう一度**きらめき**ボタンでメッセージを書いてもらい、新しい作業をコミットします。 +3. **Source Control** に表示される **Create Pull Request** ボタンを選択します。Copilot がコミットに基づいてタイトルと説明の下書きを作成するため、何もない状態から依頼するよりもよいプルリクエストになります。 +4. プルリクエストの作成時、VS Code の **GitHub** ビュー、または GitHub で、**Copilot code review** を依頼します。 +5. GitHub MCP を使って、プルリクエストの確認、マージ競合の解決、レビューコメントへの対応、失敗した CI チェックの調査を Copilot に依頼します。 +6. 統合ブラウザーで再テストし、提案されたすべての変更をレビューして、ブランチを更新します。 +7. チェックとレビューが完了したら、エージェントにマージを依頼するか、GitHub の統合機能からマージします。 + +> [!NOTE] +> いつでも、代わりにチャットで Copilot にこれらの作業を依頼できます。まず **Source Control** の操作を学ぶ価値があるのは、実際の変更内容からコミットとプルリクエストの文章を書いてくれるためです。 + +## まとめと次のステップ + +VS Code を離れずにプルリクエストをレビューしてマージしました。[レッスン 9: 次のアイデアをクラウドセッションに任せる][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md new file mode 100644 index 000000000..2aa4b28a2 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "レッスン 9 - 次のアイデアをクラウドセッションに任せる" +description: "Copilot Chat のハーネスを Local から Cloud に切り替え、単独で完結する機能の作成を委任して、プルリクエストとして受け取ります。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +ローカルで開発の流れをひととおり体験したので、望ましい成果物がどのようなものかを把握できました。今が、作業を任せて自分が付き添わずに進めてもらうよいタイミングです。Copilot Chat は、実行するハーネスを自分のコンピューターから GitHub に切り替えられます。 + +このレッスンでは、次の内容を学習します。 + +- Copilot Chat のハーネスを **Local** から **Cloud** に切り替える。 +- 明確な受け入れ条件を持つ、単独で完結する機能の作成を委任する。 +- 作成されたプルリクエストをレビューする。 + +> [!NOTE] +> クラウドセッションには、対象となる有料の Copilot プランが必要です。Business と Enterprise では、管理者によるアクセスの有効化も必要な場合があります。 + +## クラウドに委任する + +![VS Code の Copilot Chat で Harness ピッカーを開いた図。Copilot の下で Local ではなく Cloud が選択され、Claude や Codex などのほかのハーネスも並んでいます。上部には、3 つの新しいカラーテーマを追加するリクエストと Working in the cloud が表示され、GitHub でセッションの進行を確認するリンクがあります。](/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg) + +**Harness** ピッカーには、ほかのハーネスとともに、Copilot を **Local** または **Cloud** で実行する選択肢が表示されます。**Cloud** に切り替えると、次のリクエストは自分のコンピューターではなく GitHub で実行されます。 + +1. Copilot Chat で **Harness** ピッカーを開き、Copilot を **Local** から **Cloud** に切り替えます。 +2. 新しいセッションを開始し、明確な受け入れ条件を持つ、単独で完結する機能を依頼します。 + + ```plaintext + Add a theme picker to the space quiz with three named themes: Deep Space, Launch Pad, and Lunar. Persist the choice in localStorage, keep everything in the single index.html with no dependencies, keep contrast accessible in every theme, and open a pull request when the tests pass. + ``` + +3. ノートパソコンを閉じます。作業は GitHub で続き、プルリクエストとして届きます。 +4. 自分で作成したプルリクエストとまったく同じように、注意深くレビューします。 + +> [!TIP] +> **説明できる作業を委任する** +> +> クラウドセッションでは、正確な作業指示がよい結果につながります。受け入れ条件を書けないなら、そのタスクはまだ自分のコンピューターの外に任せる準備ができていません。 + +## まとめと次のステップ + +クラウドセッションに機能の作成を委任し、結果をレビューしました。[レッスン 10: 振り返りと次のステップ][next-lesson]に進みます。 + +[next-lesson]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/index.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/index.md new file mode 100644 index 000000000..8704f6635 --- /dev/null +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/first-steps/vscode/index.md @@ -0,0 +1,51 @@ +--- +title: "Visual Studio Code のはじめの一歩" +description: "Space Quiz を構築、テスト、公開しながら、Visual Studio Code の GitHub Copilot をガイド付きコースで体験します。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +初心者向けのハンズオンで、Visual Studio Code の GitHub Copilot を体験します。空のフォルダーからカラフルな Space Quiz を構築し、エディター中心の開発の流れを学びます。ワークスペースで構築し、コンテキストを確認して、Git に変更を記録する前にテストします。編集前に計画を立て、VS Code を離れずに GitHub のツールで Issue とプルリクエストを扱います。 + +ワークショップの所要時間は約 60～90 分です。プロジェクトは実行時の依存関係を持たない単一の HTML ファイルで構成されるため、エディターでの Copilot の学習に集中できます。 + +> [!NOTE] +> このワークショップは [James Montemagno][james] が作成し、[First Steps with GitHub Copilot][source-lab] を基に構成されています。元のコンテンツは [MIT License][source-license] で公開されています。 + +## レッスン + +| レッスン | トピック | 実施内容 | +| ------ | ----- | ---------------- | +| [0. 前提条件とセットアップ][lesson-0] | セットアップ | 前提条件を確認し、GitHub 拡張機能を追加してフォルダーを開き、モデルを選ぶ | +| [1. ワークスペースでの構築][lesson-1] | 構築 | クイズを構築し、統合ブラウザーでプレビューして、選んだ要素を仕上げる | +| [2. プロジェクトの指示の記録][lesson-2] | 指示 | `/init` で `.github/copilot-instructions.md` を生成して調整する | +| [3. コンテキストの確認とテスト][lesson-3] | テスト | チャットのコンテキストを確認し、Git に変更を記録する前にスモークテストを実行する | +| [4. プロジェクトの公開][lesson-4] | 公開 | Source Control で初期化、コミット、公開する | +| [5. 編集前の計画][lesson-5] | 計画 | Plan モードを使って次の機能のアプローチに合意する | +| [6. Copilot に GitHub を扱うツールを提供する][lesson-6] | ツール | GitHub MCP サーバーを有効にしてレビューする | +| [7. Issue の計画と実装][lesson-7] | 実装 | GitHub のツールで Issue を作成し、新しいセッションで 1 つ実装する | +| [8. レビューとマージ][lesson-8] | レビュー | Source Control からプルリクエストを作成し、レビューを依頼してマージする | +| [9. クラウドセッションに引き継ぐ][lesson-9] | 委任 | ハーネスを Cloud に切り替え、新機能の作成を委任する | +| [10. 振り返りと次のステップ][lesson-10] | 振り返り | ワークフローを振り返り、学習を続ける | + +## はじめる + +[レッスン 0: 前提条件とセットアップから始めます][lesson-0]。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites/ +[lesson-1]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ +[lesson-2]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ +[lesson-3]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[lesson-4]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ +[lesson-5]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ +[lesson-6]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ +[lesson-7]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ +[lesson-8]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ +[lesson-9]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ +[lesson-10]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/index.md b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/index.md index 98b0ba693..fb39ab779 100644 --- a/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/index.md +++ b/website/src/content/docs/ja-jp/learning-hub/copilot-workshops/index.md @@ -1,41 +1,44 @@ --- -title: "GitHub Copilot のエージェントを実践で学ぶ" +title: "GitHub Copilot ワークショップ" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -GitHub Copilot に最近追加された機能は、ソフトウェア開発ライフサイクル (SDLC) 全体を通して開発者を支援する強力なツールです。GitHub の Issue や pull request を使った作業、外部サービスとの連携、そしてもちろんコードの作成も含まれます。このラボでは、実際のユースケースを通して機能を試し、ツールを最大限に活用するためのヒントを紹介します。 +学びたい内容と深さに合わせてワークショップを選びます。**はじめの一歩**では GitHub Copilot をガイドに沿って体験し、**実践的な開発**では完成したアプリケーションとチームのバックログを使って、本番環境を意識したワークフローを学びます。 + +## はじめの一歩 + +既存のコードベースを用意せずに、GitHub Copilot 製品の主要な機能を学べる、目的を絞ったガイド形式のワークショップです。 + +### [GitHub Copilot app ツアー][first-steps-app] + +空のフォルダーから Space Quiz を作成し、GitHub への公開、Issue の実装、Copilot レビュー、オートメーションのスケジュール設定、Canvas ワークフローの体験まで進めます。 + +### [GitHub Copilot CLI のはじめの一歩][first-steps-cli] + +同じ Space Quiz をターミナルから作成し、差分のレビュー、worktree での並列セッション、編集前の計画、シェルを離れずに行うプル リクエストの作成、マージ、委任まで進めます。 + +### [Visual Studio Code のはじめの一歩][first-steps-vscode] + +VS Code で Space Quiz を作成し、統合ブラウザーでのテスト、ソース管理での公開、GitHub ツールを使った Issue とプル リクエストの操作、クラウド セッションへの委任まで進めます。 + +## 実践的な開発 + +Tailspin Toys アプリケーションとバックログを使い、現実的なソフトウェア開発ライフサイクルで GitHub Copilot を実践します。作業環境を選び、意味のある変更を計画、実装、テスト、レビュー、リリースします。 + +### [実践的な開発ワークショップを見る][real-world-development] + +GitHub Copilot CLI、GitHub Copilot app、GitHub Copilot cloud agent、Visual Studio Code から選択できます。 > [!CAUTION] -> GitHub Copilot は決定論的ではなく確率的に動作するため、生成されるコードや変更されるファイルなどは毎回異なる場合があります。そのため、ラボ内のスクリーンショットやコード スニペットと、実際の結果に多少の違いが生じることがあります。これは想定される動作であり、この種のツールが持つ特性によるものです。 +> GitHub Copilot は決定論的ではなく確率的に動作するため、生成されるコードや変更されるファイルは例と異なる場合があります。多少の違いは想定される動作です。 > -> 何かが壊れているように見える場合や正しく動作しない場合は、メンターに相談してください。 +> 講師が進行するワークショップで正しく動作しない場合は、メンターに相談してください。 -## 利用環境を選ぶ - -GitHub Copilot は、どの環境で作業していても利用できます。希望する開発方法に合った利用環境を選び、共通の Tailspin Toys バックログに沿って演習を進めます。どの利用環境にも専用のセットアップ手順が用意されているため、選んだものからすぐに始められます。 - -### 🖥️ [VS Code](/ja-jp/learning-hub/copilot-workshops/vscode/) - -**Visual Studio Code** と GitHub Codespaces 内で GitHub Copilot を使用します。普段使っているエディターを離れることなく、Copilot Chat のエージェント モード、MCP サーバー、カスタム エージェントを利用できます。AI 支援を IDE に直接組み込んで使いたい場合に最適です。 - -### 💻 [Copilot CLI](/ja-jp/learning-hub/copilot-workshops/cli/) - -**GitHub Copilot CLI** は、ターミナルで動作するエージェント型アシスタントです。インストールして MCP サーバーに接続し、プラン モードでコードを生成できます。さらに、独自のスキル、カスタム エージェント、スラッシュ コマンドをすべてコマンド ラインから構築できます。 - -### 🤖 [Copilot App](/ja-jp/learning-hub/copilot-workshops/app/) - -**GitHub Copilot app** は、Copilot CLI を基盤とするデスクトップ アプリケーションです。複数のエージェント セッションを並行して実行し、セッション モードの切り替え、キャンバスでの共同作業、GitHub Issue と pull request の管理をアプリ内で行えます。さらに **Agent Merge** を使用すると、リベース、レビュー フィードバックへの対応、CI の修正、マージまで、pull request の一連の作業を進められます。 - -### ☁️ [Copilot Cloud Agent](/ja-jp/learning-hub/copilot-workshops/cloud/) - -**Copilot cloud agent** は、GitHub Issue の作業をバックグラウンドで進める非同期のペア プログラマーです。作業の割り当て、カスタム エージェントによる指示、エージェント ダッシュボードでの進捗確認、作成された pull request のレビューを行えます。 - -## シナリオ - -架空の企業 Tailspin Toys に新しく参加した開発者として作業します。Tailspin Toys は、開発者をテーマにしたボード ゲームのクラウドファンディングを提供しています。これは巨大な市場です。チームのバックログはすでに GitHub Issue として登録されており、フィルタリングやページネーションなどの機能開発に加えて、アクセシビリティやコーディング規約などの品質改善にもすぐに取り組めます。サイトと Copilot の機能を確認しながら反復的に作業し、タスクを完了させます。 - -## はじめる - -上から利用環境を選んで開始します。どの利用環境も、開発に必要なセットアップから始まります。 \ No newline at end of file +[first-steps-app]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /ja-jp/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /ja-jp/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-development]: /ja-jp/learning-hub/copilot-workshops/real-world-development/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/0-prerequisites.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/0-prerequisites.md index 466bd2361..483d5ca79 100644 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/0-prerequisites.md +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/0-prerequisites.md @@ -1,9 +1,9 @@ --- -title: "Lesson 0 - 필수 조건" +title: "레슨 0 - 필수 조건" description: "Tailspin Toys 프로젝트에 필요한 Node.js를 설치하고 템플릿에서 리포지토리 복사본을 만들어 GitHub Copilot app 레슨을 준비합니다." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- GitHub Copilot app은 Copilot과 GitHub를 모두 사용하는 중앙 허브 역할을 하는 데스크톱 앱입니다. 이 앱에서 이슈와 끌어오기 요청에 빠르게 접근하고 GitHub Copilot을 사용해 빌드할 수 있습니다. 이 워크숍에서는 Astro로 구축된 Tailspin Toys 앱과 GitHub Copilot app을 모두 로컬에서 사용합니다. 시작하기 전에 Node.js가 로컬에 설치되어 있는지 확인한 다음 Copilot app을 설치합니다. @@ -15,18 +15,18 @@ GitHub Copilot app은 Copilot과 GitHub를 모두 사용하는 중앙 허브 역 ## Node.js 설치 -여러 레슨에서 에이전트에게 기능을 구축하고 Tailspin Toys 테스트 도구 모음을 로컬에서 실행하도록 요청합니다. 이 작업에는 프로젝트에 필요한 유일한 런타임인 [**Node.js**][nodejs]가 필요합니다. **22 이상** 버전을 설치합니다. 현재 **LTS** 릴리스가 안전한 선택입니다. +여러 레슨에서 에이전트에게 기능을 구축하고 Tailspin Toys 테스트 도구 모음을 로컬에서 실행하도록 요청합니다. 이 작업에는 프로젝트에 필요한 유일한 런타임인 [**Node.js**][nodejs]가 필요합니다. 현재 **LTS** 릴리스를 설치합니다. 모든 플랫폼에서 가장 간단한 방법은 공식 설치 프로그램을 사용하는 것입니다. 1. 운영 체제에서 Windows Terminal, macOS 터미널 또는 평소 사용하는 도구로 터미널 창을 엽니다. -2. 다음 명령을 실행하여 Node.js 22 이상이 설치되어 있는지 확인합니다. +2. 다음 명령을 실행하여 설치된 Node.js 버전을 확인합니다. ```shell node --version ``` -3. `v22` 이상의 숫자가 표시되면 다음 섹션으로 건너뛸 수 있습니다. +3. 프로젝트의 README와 `package.json`에 명시된 요구 사항을 충족하면 다음 섹션으로 건너뛸 수 있습니다. > [!TIP] > Node가 설치되어 있지 않거나 업데이트해야 하는 경우에만 다음 단계를 수행하면 됩니다. @@ -41,10 +41,10 @@ GitHub Copilot app은 Copilot과 GitHub를 모두 사용하는 중앙 허브 역 node --version ``` -9. `v22.x.x` 이상이 표시되어야 합니다. +9. 설치한 버전이 표시되는지 확인합니다. -> [!TIP] -> 컨테이너를 선호합니까? [**Docker**][docker]가 있다면 Node.js를 로컬에 설치하는 대신 리포지토리의 [dev container][dev-containers]를 사용할 수 있습니다. 이 컨테이너에는 Node가 포함되어 있으므로 두 가지가 모두 필요하지는 않습니다. +> [!IMPORTANT] +> 각 워크트리에는 프로젝트 의존성과 E2E 검사용 Playwright Chromium도 필요합니다. 워크트리를 준비할 때 학습용 리포지토리의 README를 따르고, 설치 요청을 검토한 후 승인합니다. ## 실습 리포지토리 설정 @@ -64,11 +64,16 @@ Tailspin Toys 프로젝트의 복사본에서 작업합니다. 지금 [템플릿 > [!NOTE] > 템플릿에서 리포지토리를 만들면 GitHub 이슈 백로그가 자동으로 생성됩니다. 워크숍 전체에서 이 이슈를 사용하므로 직접 등록할 항목은 없습니다. +워크숍 템플릿의 새 복사본을 사용합니다. 리포지토리 지침, 애플리케이션 코드, 테스트, quality-checks 스킬, 기존 캔버스 확장이 포함되어 있습니다. 워크숍에서 스킬을 사용자 지정하고 QA 에이전트를 만듭니다. 이전 복사본을 사용한다면 필요한 파일이 있는지 진행자와 확인합니다. + ## 요약 및 다음 단계 -설정이 완료되었습니다. 프로젝트를 컴퓨터에서 빌드하고 테스트할 수 있도록 Node.js를 설치하고, 템플릿에서 Tailspin Toys 리포지토리의 복사본을 만들었습니다. +설정이 완료되었습니다. 이 레슨에서는 다음 작업을 수행했습니다. -다음으로 GitHub Copilot app을 설치하고, 방금 만든 리포지토리를 연결하고, 워크스페이스를 살펴봅니다. [레슨 1 - GitHub Copilot app 설치][next-lesson]를 계속 진행합니다. +- 프로젝트를 컴퓨터에서 빌드하고 테스트할 수 있도록 Node.js를 설치했습니다. +- 템플릿에서 Tailspin Toys 리포지토리의 복사본을 만들었습니다. + +다음으로 [GitHub Copilot app을 설치][next-lesson]하고, 방금 만든 리포지토리를 연결하고, 워크스페이스를 살펴봅니다. ## 리소스 @@ -79,7 +84,5 @@ Tailspin Toys 프로젝트의 복사본에서 작업합니다. 지금 [템플릿 [next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app/ [nodejs]: https://nodejs.org/ [node-download]: https://nodejs.org/en/download -[docker]: https://www.docker.com/products/docker-desktop/ -[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers [template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app.md index 9e0f96368..e5a6bd1a1 100644 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app.md +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app.md @@ -1,9 +1,9 @@ --- -title: "Lesson 1 - GitHub Copilot app 설치" +title: "레슨 1 - GitHub Copilot app 설치" description: "GitHub Copilot app을 설치하고, 템플릿에서 만든 리포지토리를 연결하고, 워크스페이스를 살펴보고, 빠른 채팅을 사용해 봅니다." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- [**GitHub Copilot app**][about-copilot-app]은 에이전트 기반 개발을 위한 데스크톱 애플리케이션입니다. GitHub Copilot CLI를 기반으로 하며 GitHub와 기본적으로 통합되어 리포지토리, 브랜치, CI 파이프라인을 바로 사용할 수 있습니다. 모든 작업을 직접 수행하고 반복 작업을 자동화하는 방식 대신, 각자 격리된 워크스페이스에서 여러 에이전트를 병렬로 지시하는 워크플로를 위해 설계되었습니다. Node.js를 설치하고 프로젝트 복사본을 준비했으므로 이제 앱을 설치하고 해당 리포지토리를 연결합니다. @@ -41,32 +41,39 @@ GitHub Copilot app을 사용하려면 먼저 앱을 설치해야 합니다. Wind 프로젝트를 연결했으므로 잠시 워크스페이스의 구성을 살펴봅니다. 앱의 사이드바는 몇 가지 영역으로 구성됩니다. +- **New** - 이름에서 알 수 있듯이 여기서 Copilot과 새 채팅 세션을 시작할 수 있습니다. +- **Pull requests** - 앱의 GitHub 기본 통합을 통해 끌어오기 요청을 표시합니다. 앱을 벗어나지 않고 끌어오기 요청을 찾아 필터링하고, CI 상태를 확인하고, 끌어오기 요청을 검토할 수 있습니다. +- **Issues** - 같은 방식으로 이슈를 표시합니다. 이슈를 찾아 필터링하고 이슈에서 세션을 시작할 수 있습니다. +- **Automations** — 일정에 따라 또는 요청 시 실행되는 저장된 에이전트 작업입니다. 할 일 목록 관리, 정기적인 프로젝트 유지 관리, 기타 반복 작업을 맡기는 데 유용합니다. 마무리에서 다음 단계로 링크를 제공하며 추가 워크숍 실습으로 다루지는 않습니다. +- **Customize** - MCP 서버, 플러그인, 스킬, 기타 구성 요소 형태로 Copilot app에 기능을 추가합니다. Playwright MCP를 구성할 때 사용합니다. +- **Chats** — 별도의 브랜치나 워크스페이스가 필요하지 않은 질문과 브레인스토밍을 위한 가벼운 대화입니다. 이 레슨의 마지막에서 사용해 봅니다. - **Sessions** — 에이전트가 작업하는 곳입니다. 각 세션은 격리된 워크스페이스에서 실행되므로 변경 내용이 충돌하지 않게 여러 세션을 동시에 실행할 수 있습니다. 다음 레슨에서 첫 번째 세션을 시작합니다. -- **Quick chats** — 별도의 브랜치나 워크스페이스가 필요하지 않은 질문과 브레인스토밍을 위한 가벼운 대화입니다. 이 레슨의 마지막에서 사용해 봅니다. -- **My work** — 앱의 **GitHub 기본 통합**을 통해 이슈와 끌어오기 요청을 표시합니다. 앱을 벗어나지 않고 이슈와 끌어오기 요청을 찾아 필터링하고, CI 상태를 확인하고, 이슈에서 세션을 시작하고, 끌어오기 요청을 검토할 수 있습니다. -- **Automations** — 일정에 따라 또는 요청 시 실행되는 저장된 에이전트 작업입니다. 이 실습 과정의 끝부분에서 하나를 만듭니다. + +워크숍을 진행하면서 워크스페이스를 살펴봅니다. + +> [!TIP] +> 확실하지 않으면 Copilot에 질문합니다. 방법을 모르거나 가능한지 궁금한 작업이 있다면 Copilot에 질문하여 안내를 받을 수 있습니다. ### 미리 생성된 백로그 찾기 -앱은 GitHub와 기본적으로 통합되므로 리포지토리에서 대기 중인 작업을 앱 안에서 바로 볼 수 있습니다. 템플릿에서 리포지토리를 만들 때 이슈 백로그가 생성되었습니다. 백로그가 있는지 확인합니다. +백로그가 없는 프로젝트는 거의 없으며 Tailspin Toys도 마찬가지입니다. 템플릿에서 리포지토리를 만들 때 생성된 백로그를 살펴봅니다. -1. 사이드바에서 **My work**를 선택합니다. -2. 템플릿은 백로그에 여덟 개의 이슈를 생성했습니다. 이 하네스에서는 다음 세 이슈에 집중합니다. 표시되는지 확인합니다. +1. 사이드바에서 **Issues**를 선택합니다. +2. 이슈 번호를 가정하지 말고 다음 제목으로 이슈를 찾습니다. - Allow users to filter games by category and publisher - Update our repository coding standards - - Implement pagination on the game list page -3. 이슈를 선택하여 세부 정보를 읽습니다. 각 이슈는 에이전트 세션을 시작하는 지점이기도 합니다. 이 실습 과정의 뒷부분에서 이 이슈를 바탕으로 작업을 시작합니다. +3. 이슈를 선택하여 세부 정보를 읽습니다. 각 이슈는 에이전트 세션을 시작하는 지점이기도 합니다. 먼저 빠른 변경을 완료한 후 필터링 이슈에서 시작합니다. > [!NOTE] -> My work의 항목 목록은 Copilot app에 추가한 리포지토리의 항목만 표시하도록 자동으로 필터링됩니다. 다른 리포지토리의 작업 항목을 보려면 해당 리포지토리를 앱에 추가합니다. +> **Issues**와 **Pull requests**의 항목 목록은 Copilot app에 추가한 리포지토리의 항목만 표시하도록 자동으로 필터링됩니다. 다른 리포지토리의 작업 항목을 보려면 해당 리포지토리를 앱에 추가합니다. ## 빠른 채팅 사용해 보기 앱에 익숙해지는 좋은 방법은 앱을 사용하여 *앱 자체*에 관해 알아보는 것입니다. 이때 **빠른 채팅**이 적합합니다. 빠른 채팅에서는 브랜치나 작업 트리를 만들지 않고 질문하거나 브레인스토밍할 수 있으므로, 세션이 필요 없는 일회성 질문에 알맞습니다. -1. 사이드바에서 **Quick chats** 옆의 **+**를 선택하여 새 채팅을 엽니다. +1. 사이드바에서 **Chats** 옆의 **+**를 선택하여 새 채팅을 엽니다. 2. 앱의 세션이 어떻게 작동하는지 질문합니다. ```plaintext @@ -81,10 +88,10 @@ GitHub Copilot app을 설치하고 프로젝트를 연결하고 워크스페이 - 앱을 설치하고 GitHub에 로그인합니다. - GitHub 리포지토리에서 프로젝트를 추가합니다. -- 워크스페이스를 살펴보고 **My work**에서 미리 생성된 백로그를 찾습니다. +- 워크스페이스를 살펴보고 **Issues**에서 미리 생성된 백로그를 찾습니다. - 빠른 채팅을 사용하여 일회성 질문을 합니다. -다음으로 첫 번째 에이전트 세션을 시작하고 프로젝트를 처음으로 변경하여 게임 카드에 별점을 표시합니다. [레슨 2 - 첫 번째 에이전트 세션 실행][next-lesson]을 계속 진행합니다. +다음으로 첫 번째 에이전트 세션을 시작하고 프로젝트를 처음으로 변경하여 게임 카드에 별점을 표시합니다. [레슨 2 - 별점 추가로 작은 성과 얻기][next-lesson]를 계속 진행합니다. ## 리소스 @@ -92,7 +99,6 @@ GitHub Copilot app을 설치하고 프로젝트를 연결하고 워크스페이 - [GitHub Copilot app 시작하기][getting-started] - [GitHub Copilot app에서 에이전트 세션 사용][agent-sessions] -[ex0]: /ko-kr/learning-hub/copilot-workshops/app/0-prerequisites/ [next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/2-add-star-rating/ [about-copilot-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 diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/10-review.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/10-review.md new file mode 100644 index 000000000..bca59ccef --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/10-review.md @@ -0,0 +1,77 @@ +--- +title: "레슨 10 - 마무리 및 다음 단계" +description: "App 워크플로, 두 PR 마일스톤, 캔버스 실습, 재사용 가능한 품질 관행을 돌아보고 추가 리소스를 살펴봅니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +하나로 이어지는 Tailspin Toys 워크플로 전체에서 GitHub Copilot app을 사용했습니다. 다음 작업을 수행했습니다. + +- 리포지토리를 연결하고 앱의 워크스페이스와 미리 생성된 백로그를 살펴보고 빠른 채팅을 사용했습니다. +- 별점에 초점을 맞춘 세션을 시작하고 브라우저 캔버스에서 결과를 검토한 다음 첫 번째 끌어오기 요청(PR)을 직접 병합했습니다. +- 필터링 이슈에서 시작하여 **Plan** 모드에서 접근 방식을 정의하고, **Autopilot** 모드로 구축하고, **Interactive** 모드에서 검토했습니다. +- 사용자 지정 지침으로 에이전트를 안내한 다음 기존 `quality-checks` 스킬을 사용자 지정하고 단위 테스트, 린트, 타입 검사를 실행하는 데 사용했습니다. +- Playwright Model Context Protocol(MCP) 서버를 추가하고 실제 브라우저에서 필터링을 살펴보는 데 사용했습니다. +- 품질 보증(QA) 사용자 지정 에이전트를 만들고 선택하여 요구 사항, 커버리지, 스킬 결과, 브라우저 근거를 평가했습니다. +- 완성된 필터링 변경을 검토하고 두 번째 PR에 **Agent Merge**를 승인했습니다. +- 기존 Database Explorer 캔버스를 사용한 다음, 리포지토리에 저장되는 이슈 분류 캔버스를 만들고 테스트했습니다. + +## 제공한 결과 + +워크숍에는 두 번의 PR 마일스톤이 있으며, 각각 업데이트된 `main`에서 시작한 자체 브랜치를 사용합니다. + +1. **별점:** 게임 카드에 기존 `starRating`과 명시적인 미평가 상태를 표시합니다. +2. **필터링과 품질 워크플로:** 필터링을 구현하고, 지침을 업데이트하여 기능에 적용하고, `quality-checks` 보고서를 사용자 지정하고, QA 프로필을 만들고, 관련 테스트를 포함합니다. + +필터링 계획부터 PR을 열 때까지 동일한 세션, 워크트리, 브랜치를 사용했습니다. 워크숍을 간소화하기 위해 이 작업을 하나의 PR로 결합했습니다. 이후 기존 Database Explorer를 사용하고 PR 워크플로를 반복하지 않은 채 리포지토리에 저장되는 이슈 분류 캔버스를 만들었습니다. + +## 서로 다른 검증 방식 + +자동 테스트, 직접 수행한 브라우저 확인, MCP를 통한 Copilot의 브라우저 탐색 등 여러 방식으로 코드를 검사했습니다. `quality-checks` 스킬은 단위 테스트, 린트, 타입 검사를 실행하여 새로운 형식으로 결과를 보고했습니다. QA는 PR 전에 이 결과를 요구 사항 및 테스트 커버리지 검토와 결합했습니다. + +추가한 테스트는 실제 커버리지 부족을 해결해야 합니다. 새 테스트가 필요 없는 QA 실행도 올바를 수 있습니다. 누락된 도구, 건너뛴 검사, 실패는 드러내야 할 차단 요인이지 통과가 아닙니다. 병합 승인 전에 코드와 근거를 검토하고 변경 후 관련 근거를 갱신합니다. + +## 모범 사례 + +Copilot에 제공하는 컨텍스트와 도구는 작업 방식에 영향을 줍니다. 이 워크숍에서는 지침을 업데이트하고, 스킬을 사용자 지정하고, QA 프로필을 만들고, MCP 서버를 구성하고, 캔버스를 만들었습니다. 세션 간에 이러한 사용자 지정을 재사용하고 팀의 요구가 바뀌면 조정합니다. 지침은 표준을 정하고, 스킬은 반복 가능한 작업을 설명하며, 사용자 지정 에이전트는 전문가 역할을 정의하고, MCP 서버는 외부 도구를 연결하며, 캔버스는 공유 대화형 화면을 제공합니다. 에이전트의 요약뿐 아니라 실제 변경 내용과 도구 결과를 검토합니다. + +작업에 맞는 **모드와 모델**을 선택합니다. 구축 전에 접근 방식을 검토하려면 **Plan**을 사용하고, 범위가 명확한 변경에서 계속 참여하려면 **Interactive**를 사용하며, 범위가 명확하고 격리된 작업에만 **Autopilot**을 사용합니다. 일상적인 편집에는 빠른 모델을 선택하고 복잡한 작업에는 추론 능력이 더 높은 모델을 선택합니다. + +컨텍스트는 인프라만큼 중요합니다. 만들려는 *항목*, 그 *이유*, 원하는 *방식*을 명확하게 설명하면 출력이 크게 달라집니다. 빠른 채팅은 아이디어를 전체 세션에 적용하기 전에 범위를 정하기에 적합합니다. + +## 더 살펴볼 내용 + +핵심 워크플로를 모두 살펴봤습니다. 다음 기능도 확인해 볼 만합니다. + +- 최근 작업 요약 같은 반복 또는 요청 시 작업을 위한 [**Automations**][using-automations]. 도입 전에 일정, 권한, 범위를 검토합니다. 자동화 만들기는 다음 단계이며 이 워크숍에 포함되지 않습니다. +- 구축 전에 문제를 함께 검토하고 유용한 피드백을 받기 위한 **Rubber duck** +- 세션에서 일어난 일을 서술형으로 생성하는 [`/chronicle`][chronicle] +- Ollama, Foundry Local, LM Studio를 통한 로컬 모델을 포함하여 자체 공급자의 모델을 사용하는 [Bring your own key (BYOK)][byok] +- 리포지토리, 세션, 프롬프트에서 바로 앱을 여는 [Deep links][deep-links] + +## 다음 단계 + +어떤 도구든 더 능숙하게 사용하려면 계속 사용해야 합니다. 프로덕션 코드, 취미 프로젝트, 오랫동안 생각만 하고 만들지 못했던 작은 앱에 사용해 봅니다. 배운 내용을 팀과 공유하고 팀의 경험에서도 배웁니다. 언제나 그렇듯 문서를 살펴봅니다. + +GitHub Copilot 생태계를 더 살펴보려면 [VS Code 실습 과정][vscode-harness], [Copilot CLI 실습 과정][cli-harness], [Cloud agent 실습 과정][cloud-harness]을 확인합니다. + +## 리소스 + +- [GitHub Copilot app 정보][about-copilot-app] +- [GitHub Copilot app 시작하기][getting-started] +- [GitHub Copilot app 사용자 지정][customize] +- [자동화 사용][using-automations] +- [캔버스 확장 사용][canvas-docs] + +[vscode-harness]: /ko-kr/learning-hub/copilot-workshops/vscode/ +[cli-harness]: /ko-kr/learning-hub/copilot-workshops/cli/ +[cloud-harness]: /ko-kr/learning-hub/copilot-workshops/cloud/ +[about-copilot-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 +[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle +[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models +[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/2-add-star-rating.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/2-add-star-rating.md index ec5874bfb..fe9f6de24 100644 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/2-add-star-rating.md +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/2-add-star-rating.md @@ -1,9 +1,9 @@ --- -title: "Lesson 2 - 첫 번째 에이전트 세션 실행" +title: "레슨 2 - 별점 추가로 작은 성과 얻기" description: "GitHub Copilot app에서 첫 번째 에이전트 세션을 시작하고 게임 카드를 조금 변경한 다음 첫 번째 끌어오기 요청으로 병합합니다." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- 이전 레슨에서는 워크스페이스를 살펴보고 빠른 채팅을 사용했습니다. 이제 **에이전트 세션**을 시작하고 프로젝트를 처음으로 변경합니다. 변경 범위는 작게 유지합니다. 게임 데이터에는 이미 별점이 있지만 홈페이지의 게임 카드에는 아직 표시되지 않습니다. 에이전트에게 별점을 표시하도록 요청하고, 변경 내용을 검토하고, 첫 번째 끌어오기 요청으로 병합합니다. @@ -31,21 +31,15 @@ Tailspin Toys의 각 게임에는 별점이 있을 수 있으며, 별점은 이 새 세션을 시작하여 프로젝트를 탐색하고 기능을 구현합니다. [이전 레슨][prior-lesson]에서 GitHub 리포지토리의 프로젝트를 추가했습니다. 해당 리포지토리에 새 세션을 만들고 변경을 요청합니다. 1. GitHub Copilot app으로 돌아가거나 앱을 엽니다. -2. **Home screen**을 선택합니다. -3. 리포지토리로 `tailspin-toys`가 선택되어 있는지 확인합니다. +2. **Projects** 옆의 **+**를 선택합니다. +3. 리포지토리로 `tailspin-toys`를 선택합니다. +4. 프롬프트 상자 아래에서 **new working tree**와 **Interactive** 모드를 선택합니다. 다음 프롬프트로 변경을 요청합니다. - ![리포지토리 선택기가 tailspin-toys로 설정되고 프롬프트 아래에 모델 선택기가 표시된 GitHub Copilot app 프롬프트 상자](/images/learning-hub/copilot-workshops/app-2-start-session.png) + ```plaintext + Show each game's starRating out of 5 in the game cards on the list page. If the rating is null, show "No rating yet". Keep the card layout as it is, add tests, and run the relevant checks. + ``` -4. 다음 프롬프트를 사용하여 변경을 요청합니다. - - ```plaintext - On the game cards, show each game's star rating. The Game type already includes a starRating field — it's a number out of 5, or null when a game hasn't been rated yet. Display it on each card in src/components/GameCard.astro, and when starRating is null show "No rating yet" instead. Keep the change small and don't restructure the card layout. - ``` - -> [!NOTE] -> 프롬프트에 Copilot이 업데이트할 파일 이름을 포함했습니다. Copilot이 작업에 포함할 파일을 반드시 지정할 필요는 없지만, 방향을 제시하면 Copilot이 코드를 더 빠르게 생성하고 토큰 사용량을 줄이는 데 도움이 됩니다. - -5. Enter를 선택하여 Copilot에 프롬프트를 보냅니다. +5. Enter를 눌러 Copilot에 프롬프트를 보냅니다. Copilot app은 먼저 프로젝트의 격리된 복사본인 새 작업 트리를 만들고 작업을 시작합니다. 그런 다음 프로젝트를 탐색하고 새 기능을 추가하기 위해 업데이트해야 할 파일을 찾은 후 필요한 코드를 만듭니다. 이제 Copilot app으로 새 기능을 추가했습니다. @@ -55,7 +49,7 @@ AI가 생성한 모든 변경 내용은 작더라도 병합하기 전에 검토 1. 앱 오른쪽 위에서 **Toggle review panel**을 선택합니다. Copilot이 적용한 보류 중인 모든 변경 내용을 보여 주는 diff 화면이 열립니다. - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](/images/learning-hub/copilot-workshops/app-2-review-panel.png) + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](/images/learning-hub/copilot-workshops/app-2-review-panel.png) 2. 게임 세부 정보를 표시하는 핵심 파일인 `GameCard.astro`에 코드가 추가된 것을 확인합니다. 다음 코드와 비슷해야 합니다. 별점이 있으면 표시하고 `starRating`이 `null`이면 "No rating yet"으로 대체하는 작은 블록입니다. @@ -76,40 +70,38 @@ AI가 생성한 모든 변경 내용은 작더라도 병합하기 전에 검토 ## 변경 내용 확인 -코드를 읽고 작동한다고 가정해서는 안 됩니다. 모든 내용을 시각적으로 테스트해야 합니다. 터미널에서 앱을 시작한 다음 모든 기능이 작동하는지 확인합니다. Copilot app에는 터미널이 기본 제공됩니다. +브라우저를 열기 전에 에이전트의 자동 검사 결과를 검토합니다. 숫자 `starRating`과 `null` 대체 표시를 테스트하는지 확인합니다. 누락된 필수 조건이나 건너뛴 검사는 통과가 아닙니다. 설치 요청이 있으면 검토한 후 승인합니다. -1. Copilot app 오른쪽의 검토 패널에서 **Terminal**을 선택합니다. **Terminal** 버튼이 없으면 **+**(**Open in panel** 레이블)를 선택한 다음 **Terminal**을 선택합니다. +물론 코드만 읽고 작동한다고 가정해서는 안 됩니다. 업데이트된 UI를 살펴볼 수 있도록 Copilot에 웹사이트를 열어 달라고 요청합니다. 웹사이트를 시작하고 브라우저 캔버스에서 열도록 하면 됩니다. - ![GitHub Copilot app 검토 패널의 Terminal 버튼](/images/learning-hub/copilot-workshops/app-terminal-screenshot.png) +> [!TIP] +> 캔버스는 Copilot app 안에서 바로 사용할 수 있는 대화형 위젯입니다. 이후 사용자 지정 캔버스를 살펴보고 직접 만들어 보겠지만, 지금은 기본 제공 브라우저 캔버스를 사용합니다. -2. 터미널 창에 다음 명령을 입력하여 웹앱의 개발 서버를 시작합니다. +1. 다음 프롬프트로 Copilot에 앱을 시작하고 브라우저 캔버스에서 페이지를 열도록 요청합니다. - ```shell - npm run dev - ``` + ```plaintext + Start the app and open it in the browser canvas. + ``` -3. 서버가 시작되면 브라우저 창을 엽니다. 잠시만 기다리면 됩니다. -4. [http://localhost:4321](http://localhost:4321)로 이동합니다. -5. 이제 랜딩 페이지의 모든 게임에 별점이 표시되어야 합니다. -6. 터미널 창으로 돌아갑니다. -7. Ctrl+C를 선택하여 개발 서버를 중지합니다. +2. 잠시 후 앱이 시작되고 Copilot app 안에 브라우저 창이 열립니다. +3. 별점이 있는 게임 카드에 5점 만점의 값이 표시되는지 확인합니다. +4. 완료하면 다음 프롬프트로 이 세션에서 시작한 개발 서버를 중지하도록 Copilot에 요청합니다. + + ```plaintext + Stop the dev server and close the browser canvas. + ``` ## 첫 번째 끌어오기 요청 열기 및 병합 -변경 내용이 올바르게 작동하므로 이제 제공할 차례입니다. 에이전트에게 끌어오기 요청을 열도록 요청한 다음 github.com에서 직접 검토하고 병합합니다. 지금은 이 과정을 수동으로 관리합니다. 이후 레슨에서는 Copilot이 일부 작업을 자동으로 처리하는 방법을 살펴봅니다. +이제 기능을 만들었습니다. 새 코드를 기존 코드베이스에 병합할 끌어오기 요청(PR)을 만듭니다. -1. 오른쪽 위에서 **Create PR**을 선택합니다. +1. 오른쪽 위의 **Create PR**을 선택합니다. 2. 메시지가 표시되면 **Sign in with your browser**를 선택하고 안내에 따라 인증합니다. 3. Copilot이 PR을 만들기 시작합니다. - -PR이 만들어지면 Copilot은 리포지토리에서 실행해야 하는 워크플로를 모니터링합니다. 잠시 후 오른쪽 위의 버튼이 **Ready to merge**로 바뀝니다. 이는 PR을 병합할 준비가 되었다는 표시입니다. - 4. 채팅 바로 위의 **PR** 버블을 선택하여 검토 창에서 PR을 열고 끌어오기 요청을 확인합니다. 필요에 따라 여기에서 PR을 검토할 수 있습니다. 5. 준비가 되면 **Ready to merge**를 선택합니다. 6. 새 대화 상자에서 **Merge pull request**를 선택하여 끌어오기 요청을 병합합니다. -이제 웹사이트에 새 기능을 제공했습니다. - ## 요약 및 다음 단계 첫 번째 에이전트 세션을 시작하고 첫 번째 변경을 제공했습니다. 구체적으로 다음 작업을 수행했습니다. @@ -118,9 +110,9 @@ PR이 만들어지면 Copilot은 리포지토리에서 실행해야 하는 워 - 에이전트에게 게임 카드를 작고 구체적으로 변경하도록 지시했습니다. - 워크스페이스의 diff 보기에서 변경 내용을 검토했습니다. - 앱을 로컬에서 실행하여 브라우저에서 별점을 확인했습니다. -- 끌어오기 요청을 열고 github.com에서 직접 병합했습니다. +- PR 1을 만들고 검사를 검토한 다음 명시적으로 병합했습니다. -다음으로 백로그의 이슈 중 하나에서 시작하여 앱으로 리포지토리에 사용자 지정 지침 표준을 추가합니다. [레슨 3 - 사용자 지정 지침으로 Copilot 안내][next-lesson]를 계속 진행합니다. +다음으로 [필터링 이슈에서 시작하여 Plan 및 Autopilot 모드][next-lesson]로 더 큰 기능을 구축합니다. ## 리소스 @@ -128,8 +120,8 @@ PR이 만들어지면 Copilot은 리포지토리에서 실행해야 하는 워 - [GitHub Copilot app 정보][about-copilot-app] - [GitHub Copilot app으로 이슈 및 끌어오기 요청 관리][managing-issues-prs] -[prior-lesson]: /ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app/#github-copilot-app-설치-및-구성 -[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/3-custom-instructions/ +[prior-lesson]: /ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app/#github-copilot-app-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EA%B5%AC%EC%84%B1 +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/3-agent-modes/ [agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app [managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/3-agent-modes.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/3-agent-modes.md new file mode 100644 index 000000000..298910321 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/3-agent-modes.md @@ -0,0 +1,131 @@ +--- +title: "레슨 3 - 에이전트 모드: Plan 및 Autopilot" +description: "에이전트 모드를 살펴봅니다. Plan으로 접근 방식에 합의하고, Autopilot으로 이슈의 필터링 기능을 구축하고, Interactive로 결과를 검토하고 검증합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +프로젝트에 작은 기능을 추가하는 것으로 시작했습니다. 하지만 더 큰 변경에는 더 견고한 프로세스가 필요합니다. 다행히 GitHub Copilot app은 조직의 기존 흐름에 맞춰 올바른 대상을 올바른 방식으로 구축하도록 설계되어 있습니다. 이 레슨부터 여러 레슨에 걸쳐 일반적인 에이전트 기반 개발 프로세스를 따릅니다. 이슈를 바탕으로 새 기능을 생성하고, 코드가 유효하며 기능이 예상대로 동작하는지 확인한 뒤, 최종적으로 프로젝트에 성공적으로 병합합니다. + +> [!NOTE] +> 기능 워크플로를 계속 진행하는 동안 동일한 세션을 사용합니다. 일반적으로는 작업하는 파일 유형에 따라 서로 다른 세션이나 PR을 사용하지만, 여기서는 핵심 개념에 집중할 수 있도록 단계를 간소화합니다. + +먼저 이 레슨에서는 다음 작업을 수행합니다. + +- GitHub 이슈에서 새 에이전트 세션을 시작합니다. +- **Plan** 모드에서 요구 사항을 정의합니다. +- **Autopilot** 모드로 새 기능을 구현합니다. +- 코드를 검토합니다. +- 브라우저 캔버스에서 기능을 수동으로 검증합니다. + +이 기능을 계속 개발하면서 리포지토리 지침을 업데이트하고, 기존 quality-checks 스킬을 사용자 지정하고, MCP 검증을 추가하고, QA 에이전트를 만든 다음 기능 PR을 엽니다. + +## 시나리오 + +Tailspin Toys의 카탈로그가 커지면서 방문자가 카테고리와 퍼블리셔로 게임을 좁혀 볼 수 있어야 합니다. 백로그 이슈에 기능이 설명되어 있지만 카테고리 조합 방식 같은 세부 사항은 코딩 전에 합의해야 합니다. Plan 모드로 결정을 정리한 다음 Autopilot으로 범위가 정해진 구현을 승인합니다. + +## 배경 + +AI 코딩 에이전트를 개발 흐름에 도입해도 기본 원칙은 달라지지 않습니다. 오히려 더 중요해집니다. 대부분의 개발자는 다음과 비슷한 흐름을 따릅니다. + +1. 수행할 작업의 세부 정보가 담긴 이슈를 엽니다. +2. 구축할 항목을 계획합니다. +3. 코드를 구축하고 검토합니다. +4. 테스트를 실행하여 코드를 검증합니다. +5. 새 기능을 수동으로 검증합니다. +6. 끌어오기 요청(PR)을 만듭니다. +7. 코드를 검토하고 지속적 통합 프로세스가 성공하면 코드를 병합합니다. + +> [!NOTE] +> 정확한 세부 사항은 팀과 조직에 따라 다르지만 대부분 위 흐름의 변형입니다. + +이 표준 접근 방식을 따르면 AI가 생성한 코드가 요구 사항을 충족하고 사람이 작성한 코드와 동일한 검증 과정을 거치게 할 수 있습니다. + +## 세션 모드 + +**세션 모드**는 에이전트의 자율성 수준을 제어합니다. 프롬프트 필드 아래의 드롭다운에서 설정하고 언제든지 변경할 수 있습니다. + +- **Interactive**: 사용자와 에이전트가 함께 작업합니다. 에이전트는 변경을 제안하고 진행하기 전에 사용자의 입력을 기다립니다. +- **Plan**: 에이전트가 먼저 계획을 만듭니다. 에이전트가 실행하기 전에 계획을 검토하고 승인합니다. +- **Autopilot**: 에이전트가 입력을 기다리지 않고 코드 작성, 테스트 실행, 반복 작업을 완전히 자율적으로 수행합니다. + +Plan 모드에서 시작하여 계획을 검토한 다음 Autopilot으로 구현합니다. + +## 이슈에서 세션 시작 + +시작하기 전에 별점 PR이 병합되었고 로컬 `main`이 최신 상태인지 확인합니다. + +1. **Issues**를 선택하고 **Allow users to filter games by category and publisher**를 엽니다. +2. **New session**을 선택하고 업데이트된 `main`을 기반으로 하는 **new working tree**를 선택합니다. + + ![New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) + +3. 세션에 이슈가 첨부되었는지 확인하고 모드 선택기에서 **Plan**을 선택합니다. + +## 필터링 기능 계획 + +계획을 세우면 Copilot이 코드를 작성하기 전에 접근 방식을 검토할 수 있습니다. 이슈에서 시작했으므로 Copilot은 이미 기능 요청을 컨텍스트로 갖고 있습니다. 다음 프롬프트를 보냅니다. + +```plaintext +Build this feature. +``` + +Copilot의 질문에 답하고 계획을 이슈의 수락 기준과 비교합니다. 카테고리 및 퍼블리셔 필터링, 접근성 있는 컨트롤, 데이터 액세스 변경, 테스트가 포함되었는지 확인합니다. 여러 카테고리를 조합하는 방식이나 일치하는 게임이 없을 때의 동작처럼 불명확한 부분을 논의합니다. + +계획에는 프로젝트의 기존 도구를 사용하는 린트, 단위 테스트, E2E 테스트, 타입 검사가 포함되어야 합니다. 필터링 구현과 테스트에 집중합니다. 품질 워크플로를 완료한 후 PR을 만듭니다. 승인 전에 필요한 계획 수정을 요청하고, 이후 검증에서 사용할 이슈 URL과 합의한 추가 사항을 보관합니다. + +## Autopilot 명시적 승인 + +계획이 만족스러우면 **Approve and implement with autopilot** 또는 사용 중인 버전의 동등한 옵션을 선택합니다. 모드 표시가 **Autopilot**인지 확인합니다. + +Copilot이 구현을 시작합니다. 수립한 계획을 따라 코드를 생성하고 테스트까지 실행하며 작업을 반복하는 모습을 확인할 수 있습니다. + +> [!NOTE] +> 승인 즉시 구현이 시작될 수 있으므로 먼저 계획을 검토합니다. Copilot이 누락된 종속성이나 포트 충돌을 보고하면 검사가 완료되었다고 판단하기 전에 설정 문제를 해결합니다. 직접 시작한 서버만 중지합니다. + +## 구현 검토 및 검증 + +생성한 코드도 다른 코드와 마찬가지로 병합 전에 검토해야 합니다. 코드와 사이트를 모두 확인하여 문제가 없는지 검증합니다. + +1. **Changes**를 열고 필터링 구현과 테스트를 살펴봅니다. +2. 여러 카테고리와 퍼블리셔 조합을 포함하여 결과를 이슈 및 승인한 추가 합의 사항과 비교합니다. 변경 내용이 기존 리포지토리 지침을 따르는지 확인합니다. +3. 린트, 단위 테스트, E2E 테스트, 타입 검사 출력을 확인합니다. 건너뛴 검사는 통과가 아닙니다. +4. 구현을 수락하기 전에 실패를 해결하고 관련 검사를 다시 실행합니다. Playwright E2E 구성은 빌드하고 미리 보기를 제공하며 로컬 서버를 재사용할 수 있습니다. 테스트한 서버가 이전 레슨이 아니라 이 워크트리의 서버인지 확인합니다. + +## 새 기능 살펴보기 + +코드는 괜찮아 보이지만 실제로 실행되는지도 확인해야 합니다. 이전과 마찬가지로 사이트를 시작하고 브라우저 캔버스에서 엽니다. + +1. 다음 프롬프트를 사용하여 Copilot에 앱을 시작하고 브라우저 캔버스에서 페이지를 열도록 요청합니다. + + ```plaintext + Start the app and open it in the browser canvas. + ``` + +2. 잠시 후 앱이 시작되고 Copilot app 안에 브라우저 창이 열립니다. +3. 별점이 있는 게임 카드에 5점 만점의 값이 표시되는지 확인합니다. +4. 완료하면 다음 프롬프트로 이 세션에서 시작한 개발 서버를 중지하도록 Copilot에 요청합니다. + + ```plaintext + Stop the dev server and close the browser canvas. + ``` + +## 요약 및 다음 단계 + +서로 다른 에이전트 모드를 사용하여 기능을 구축하고 검토했습니다. 이 레슨에서는 다음 작업을 수행했습니다. + +- GitHub 이슈에서 새 에이전트 세션을 시작했습니다. +- **Plan** 모드에서 요구 사항을 정의했습니다. +- **Autopilot** 모드로 새 기능을 구현했습니다. +- 코드를 검토했습니다. +- 브라우저 캔버스에서 기능을 수동으로 검증했습니다. + +다음으로 [사용자 지정 지침을 사용][next-lesson]하여 코드가 문서화된 관행을 따르도록 코드 생성 방식을 더 자세히 살펴봅니다. + +## 리소스 + +- [GitHub Copilot app에서 에이전트 세션 사용][agent-sessions] + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/4-custom-instructions/ +[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/3-custom-instructions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/3-custom-instructions.md deleted file mode 100644 index 0ea5c2344..000000000 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/3-custom-instructions.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "Lesson 3 - 사용자 지정 지침으로 Copilot 안내" -description: "GitHub Copilot app을 사용하여 백로그의 이슈에서 시작해 리포지토리에 사용자 지정 지침 표준을 추가하고 변경 내용을 끌어오기 요청으로 병합합니다." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -생성형 AI를 사용할 때는 컨텍스트가 중요합니다. 작업을 특정 방식으로 수행해야 하거나 Copilot이 알아야 할 배경 정보가 있다면 해당 컨텍스트를 제공해야 합니다. 가장 강력한 도구 중 하나는 원하는 코드의 *내용*뿐 아니라 코드의 *구조*도 설명하는 [지침 파일][instruction-files]입니다. 이 레슨에서는 리포지토리에 문서화 표준을 추가합니다. 이후 대부분의 작업과 마찬가지로 백로그의 이슈에서 시작하여 에이전트가 변경하도록 합니다. - -이 레슨에서는 다음 작업을 수행합니다. - -- 리포지토리 지침과 경로 범위 지침 파일이 에이전트에 전달되는 방식을 살펴봅니다. -- 백로그의 지침 이슈에서 세션을 시작합니다. -- 에이전트에게 `.github/copilot-instructions.md`에 문서화 표준을 추가하도록 요청합니다. -- 변경 내용을 검토하고 끌어오기 요청으로 병합합니다. - -## 시나리오 - -모범적인 개발 조직인 Tailspin Toys에는 개발 방식에 관한 지침과 요구 사항이 있습니다. 여기에는 다음 항목이 포함됩니다. - -- 코드에 TSDoc doc comments 형식의 문서를 추가해야 합니다. -- 형식을 문서화하고 린팅으로 적용해야 합니다. - -지침 파일을 사용하면 Copilot이 이러한 방식에 맞게 작업을 수행하는 데 필요한 정보를 제공할 수 있습니다. - -## 지침 파일 - -사용자 지정 지침은 Copilot에 컨텍스트와 기본 설정을 제공하여 코딩 스타일과 요구 사항을 더 잘 이해하게 합니다. 이 기능을 사용하면 Copilot이 더 관련성 높은 제안과 코드 조각을 생성하도록 안내할 수 있습니다. 선호하는 코딩 규칙과 라이브러리는 물론 코드에 포함할 주석 유형까지 지정할 수 있습니다. 리포지토리 전체에 적용되는 지침이나 작업 수준의 컨텍스트를 제공하는 특정 파일 유형용 지침을 만들 수 있습니다. - -지침 파일에는 두 가지 유형이 있습니다. - -- `.github/copilot-instructions.md`는 리포지토리의 **모든** 요청에서 Copilot에 전달되는 단일 지침 파일입니다. 이 파일에는 Copilot에 보내는 대부분의 채팅 또는 CLI 요청과 관련된 프로젝트 수준 정보를 포함해야 합니다. 사용 중인 기술 스택, 구축 중인 항목의 개요, 모범 사례, 기타 전역 지침을 포함할 수 있습니다. -- 특정 작업이나 파일 유형에 맞게 `.github/instructions/*.instructions.md` 파일을 만들 수 있습니다. TypeScript 또는 Astro 같은 특정 언어나 UI 구성 요소 또는 새 단위 테스트 집합 만들기와 같은 작업에 관한 지침을 제공할 수 있습니다. - -> [!NOTE] -> Copilot은 AGENTS.md, CLAUDE.md, GEMINI.md를 통해 지침을 가져오는 다른 표준도 지원하므로 항상 올바른 컨텍스트를 제공할 수 있습니다. - -### 지침 파일 관리 모범 사례 - -지침 파일 만들기를 모두 다루는 것은 이 워크숍의 범위를 벗어납니다. 하지만 샘플 프로젝트의 예제는 대표적인 접근 방식을 보여 줍니다. 개괄적인 지침은 다음과 같습니다. - -- `copilot-instructions.md`의 지침은 구축 중인 항목의 설명, 프로젝트 구조, 전역 코딩 표준 등 프로젝트 수준의 안내에 집중합니다. -- `*.instructions.md` 파일을 사용하여 파일 유형(단위 테스트, Astro 구성 요소, 데이터 계층) 또는 특정 작업에 관한 구체적인 지침을 제공합니다. -- 자연어를 사용하고 지침을 명확하게 유지합니다. 코드가 따라야 하는 예와 피해야 하는 예를 제공합니다. - -AI를 사용하는 방식이 하나로 정해져 있지 않듯 지침 파일을 만드는 방식도 하나로 정해져 있지 않습니다. 실험을 통해 프로젝트에 가장 적합한 방법을 찾을 수 있습니다. - -> [!TIP] -> GitHub Copilot을 사용하는 모든 프로젝트에는 충실한 지침 파일 모음이 있어야 합니다. 이 프로젝트의 파일을 살펴보면 여러 코드 파일 유형을 위한 지침 파일이 있다는 것을 알 수 있습니다. -> -> 템플릿이나 시작점을 찾고 있습니까? 지침 파일, 사용자 지정 에이전트, 기타 리소스가 가득한 리포지토리인 [awesome-copilot][awesome-copilot]을 살펴봅니다. - -## 프로젝트의 사용자 지정 지침 파일 살펴보기 - -이 리포지토리와 함께 제공되는 지침 파일을 읽어 봅니다. 핵심 `copilot-instructions.md` 하나와 여러 작업을 위한 `*.instructions.md` 파일 모음이 있습니다. 편집기 또는 GitHub 웹 UI에서 파일을 엽니다. - -1. 검토 패널이 표시되지 않으면 오른쪽 위의 **Toggle review panel**을 선택하여 엽니다. - - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](/images/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. 검토 패널에 새 항목을 추가하려면 **+**를 선택합니다. -3. **File**을 선택합니다. -4. `copilot-instructions.md`를 검색합니다. -5. 파일 목록에서 `copilot-instructions.md`를 선택하여 엽니다. -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/learning-hub/copilot-workshops/app-show-folder-view.png) - -8. `.github/instructions` 폴더로 이동하여 파일을 살펴봅니다. Astro 파일, Drizzle 데이터 계층, 테스트 등에 관한 지침이 있습니다. -9. `.github/instructions/unit-tests.instructions.md`를 엽니다. 위쪽의 `applyTo` 필드는 지침이 적용되는 파일을 결정하는 glob을 리포지토리 루트 기준으로 설정합니다. 여기서는 TypeScript 테스트 파일(예: `**/*.test.ts`와 일치하는 파일)이 모두 일치합니다. -10. 이 프로젝트의 단위 테스트 작성에 관한 구체적인 지침을 확인합니다. -11. 마지막으로 `.github/instructions/drizzle.instructions.md`를 열고 아래쪽으로 스크롤합니다. 다른 지침 파일(예: `unit-tests.instructions.md`)과 프로젝트의 기존 파일로 연결되는 링크를 확인합니다. 이를 통해 큰 지침 집합을 더 작고 재사용 가능한 파일로 나누고 Copilot이 코드를 생성할 때 따를 예제를 지정할 수 있습니다. 이 경로는 리포지토리 루트가 아니라 지침 파일을 기준으로 합니다. - -> [!NOTE] -> `copilot-instructions.md`의 **Code formatting requirements** 섹션에는 프로젝트의 코딩 표준이 있지만 아직 코드 내 문서는 요구하지 않습니다. 다음 단계에서 TSDoc doc comments와 파일 주석 헤더에 관한 규칙을 추가합니다. - -## 지침 이슈에서 시작 - -이전 레슨에서는 직접 프롬프트로 세션을 시작했습니다. 하지만 대부분의 작업은 이슈에서 시작합니다. 지침 파일 업데이트를 위해 등록된 이슈를 바탕으로 새 세션을 만들고 업데이트를 요청합니다. - -> [!NOTE] -> 지침 파일은 Copilot이 생성하는 코드에 큰 영향을 주므로 Copilot을 명확하게 안내하는지 주의 깊게 확인해야 합니다. 이 레슨처럼 Copilot으로 초안을 만든 다음 요구 사항을 충족하는지 직접 검토하는 방법이 좋습니다. - -1. 사이드바에서 **My work**를 선택합니다. -2. **Update our repository coding standards** 이슈를 선택하여 엽니다. -3. 오른쪽 위의 **New session**을 선택하여 이슈를 바탕으로 새 세션을 시작합니다. - - ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) - -4. 다음 프롬프트를 사용하여 이슈에 문서화된 요구 사항에 맞게 지침 파일을 업데이트하도록 Copilot에 요청합니다. - - ```plaintext - Following this issue, make the updates to the instructions files in this project to meet the requirements documented. Don't create the PR quite yet! - ``` - -Copilot이 업데이트를 적용합니다. - -## 변경 내용 검토 - -Copilot이 적용한 업데이트를 읽고, 업데이트된 지침을 바탕으로 앞으로 생성할 코드의 예제도 요청합니다. - -1. 오른쪽 위의 **Changes**를 선택하여 코드 변경 내용을 엽니다. - - ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](/images/learning-hub/copilot-workshops/app-select-changes.png) - -2. 업데이트된 지침 파일을 검토합니다. 코드에 문서와 주석을 추가하는 지침이 있는지 확인합니다. - -> [!NOTE] -> AI는 결정론적이 아니라 확률적으로 작동하므로 정확한 텍스트는 달라질 수 있습니다. - -3. 다음 프롬프트를 사용하여 앞으로 생성할 코드의 예제를 만들도록 Copilot에 요청합니다. - - ```plaintext - Do not make any updates, but show me what the code would look like. Based on the new instructions, if I asked Copilot to create a new library component to return all Publishers what would that code look like? - ``` - -4. Copilot이 제안한 코드를 검토합니다. 업데이트된 지침에서 요구한 대로 TSDoc doc comments와 파일 헤더 주석이 포함되어 있는지 확인합니다. - -이제 프로젝트의 지침 파일을 업데이트하고 그 영향을 확인했습니다. - -## 끌어오기 요청 열기 및 병합 - -지침 파일은 리포지토리 자산이므로 팀의 다른 구성원과 공유됩니다. 다른 자산과 마찬가지로 작업 내용이 포함된 PR을 만듭니다. - -1. 오른쪽 위에서 **Create PR**을 선택합니다. -2. 메시지가 표시되면 **Sign in with your browser**를 선택하고 안내에 따라 인증합니다. -3. Copilot이 PR을 만들기 시작합니다. - -PR이 만들어지면 Copilot은 리포지토리에서 실행해야 하는 워크플로를 모니터링합니다. 잠시 후 오른쪽 위의 버튼이 **Ready to merge**로 바뀝니다. 이는 PR을 병합할 준비가 되었다는 표시입니다. - -4. **Ready to merge**를 선택합니다. -5. 새 대화 상자에서 **Merge pull request**를 선택하여 끌어오기 요청을 병합합니다. - -> [!NOTE] -> 표준을 기본 브랜치에 병합하면 모든 사용자와 새 세션에서 프로젝트의 일부로 사용됩니다. 다음 레슨에서 최신 기본 브랜치로 필터링 세션을 시작하면 에이전트가 이 표준을 자동으로 따릅니다. 요청하지 않아도 생성된 TypeScript에 TSDoc doc comments가 포함되는 것을 통해 지침이 생성 코드에 미치는 작지만 실제적인 영향을 확인할 수 있습니다. - -## 요약 및 다음 단계 - -앱이 지침 파일에서 컨텍스트를 가져오는 방식을 살펴본 다음 세션을 사용하여 리포지토리 전체에 적용되는 표준을 추가하고 병합했습니다. 구체적으로 다음 작업을 수행했습니다. - -- 리포지토리의 `copilot-instructions.md`와 경로 범위 `*.instructions.md` 파일을 살펴봤습니다. -- 백로그의 지침 이슈에서 세션을 시작했습니다. -- 에이전트에게 `.github/copilot-instructions.md`에 문서화 표준을 추가하도록 요청했습니다. -- 변경 내용을 검토하고 끌어오기 요청으로 병합했습니다. - -다음으로 새 세션에서 필터링 기능을 구축하고 방금 병합한 표준이 자동으로 적용되는지 확인합니다. [레슨 4 - Autopilot으로 기능 구축][next-lesson]을 계속 진행합니다. - -## 리소스 - -- [GitHub Copilot 사용자 지정을 위한 지침 파일][instruction-files] -- [GitHub Copilot app 사용자 지정][customize-app] -- [사용자 지정 지침 만들기 모범 사례][instructions-best-practices] -- [Awesome Copilot — 지침 파일 및 기타 리소스 모음][awesome-copilot] - -[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/4-build-filtering/ -[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository -[awesome-copilot]: https://awesome-copilot.github.com/ -[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support -[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md -[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/4-build-filtering.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/4-build-filtering.md deleted file mode 100644 index 2d926c2bc..000000000 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/4-build-filtering.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: "Lesson 4 - Autopilot으로 기능 구축" -description: "GitHub Copilot app의 Plan 및 Autopilot 모드로 정적 클라이언트 쪽 필터링 기능을 구축하고, 문서화 표준이 적용되는지 확인하고, 에이전트 스킬로 검증합니다." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -지금까지 프로젝트를 작게 몇 차례 업데이트했습니다. 하지만 더 큰 변경에는 더 탄탄한 프로세스가 필요합니다. GitHub Copilot app은 기존 흐름과 함께 작동하도록 구축되어 올바른 항목을 올바른 방식으로 만들 수 있게 합니다. 이 레슨은 일반적인 개발 프로세스를 따르는 세 레슨 중 첫 번째입니다. 이슈를 사용하여 새 기능을 생성하고 에이전트 스킬로 검증 테스트와 린터를 실행합니다. - -이 레슨에서는 다음 작업을 수행합니다. - -- 필터링 이슈에서 새 세션을 시작합니다. -- **Plan** 모드로 기능을 계획한 다음 **Autopilot**으로 구축합니다. -- 생성된 코드가 이전에 병합한 문서화 표준을 따르는지 확인합니다. -- 프로젝트의 `quality-checks` 스킬로 작업을 검증합니다. - -## 시나리오 - -홈페이지에는 모든 게임이 표시되지만 방문자는 목록을 좁힐 수 없습니다. 필터링 이슈에서는 **category**와 **publisher**로 게임을 필터링할 수 있게 해 달라고 요청합니다. Copilot을 사용하여 이 기능을 구현합니다. - -## 배경 - -AI 코딩 에이전트를 개발 흐름에 도입해도 기본 원칙은 달라지지 않습니다. 오히려 더 중요해집니다. 대부분의 개발자는 다음과 비슷한 흐름을 따릅니다. - -1. 수행할 작업의 세부 정보가 담긴 이슈를 엽니다. -2. 구축할 항목을 계획합니다. -3. 코드를 구축하고 검토합니다. -4. 테스트를 실행하여 코드를 검증합니다. -5. 새 기능을 수동으로 검증합니다. -6. 끌어오기 요청(PR)을 만듭니다. -7. 코드를 검토하고 지속적 통합 프로세스가 성공하면 코드를 병합합니다. - -> [!NOTE] -> 정확한 세부 사항은 팀과 조직에 따라 달라지지만 대부분 위 주제의 변형입니다. - -이 표준 접근 방식을 따르면 AI가 생성한 코드가 요구 사항을 충족하고 사람이 작성한 코드와 동일한 검증 과정을 거치게 할 수 있습니다. - -## 세션 모드 - -**세션 모드**는 에이전트의 자율성 수준을 제어합니다. 프롬프트 필드 아래의 드롭다운에서 설정하고 언제든지 변경할 수 있습니다. - -- **Interactive**: 사용자와 에이전트가 함께 작업합니다. 에이전트는 변경을 제안하고 진행하기 전에 사용자의 입력을 기다립니다. -- **Plan**: 에이전트가 먼저 계획을 만듭니다. 에이전트가 실행하기 전에 계획을 검토하고 승인합니다. -- **Autopilot**: 에이전트가 입력을 기다리지 않고 코드 작성, 테스트 실행, 반복 작업을 완전히 자율적으로 수행합니다. - -## 필터링 기능 계획 - -잠재적인 문제는 코드를 작성하기 전에 발견하는 것이 가장 좋으며, 사전 계획이 이를 돕습니다. Copilot에 계획을 요청하면 단계와 접근 방식을 문서화합니다. 계획을 검토하고 개선 제안을 한 후 해당 계획을 바탕으로 Copilot이 코드를 생성하게 할 수 있습니다. - -이슈를 열고 새 세션을 시작한 다음 Plan 모드로 전환하여 계획을 만듭니다. - -1. 탐색 탭에서 **My work**를 선택합니다. -2. **Allow users to filter games by category and publisher** 이슈를 선택합니다. -3. 오른쪽 위의 **New session**을 선택합니다. - - ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) - -4. 모드에 **Plan**이 표시될 때까지 Shift+Tab을 선택합니다. - - ![Plan으로 설정된 모드 선택기를 화살표로 가리키는 GitHub Copilot app 프롬프트 상자](/images/learning-hub/copilot-workshops/app-4-plan-mode.png) - -5. 다음 프롬프트를 보냅니다. 이슈에서 세션을 시작했으므로 필터링 이슈는 이미 세션의 컨텍스트에 있습니다. - - ```plaintext - Plan the work based on the requirements documented in the issue. Please ask any clarifying questions you might have as you build the plan. - ``` - -6. 에이전트가 계획을 세우면서 후속 질문을 할 수 있습니다. 기능을 구축할 방식에 따라 답변합니다. - -> [!NOTE] -> Copilot은 확률적으로 작동하므로 정확한 후속 질문은 달라질 수 있으며 질문을 하지 않을 수도 있습니다. 이는 정상입니다. - -7. 완료되면 Copilot이 계획 요약을 제공합니다. 계획을 검토합니다. 쿼리 구축, 필터 컨트롤 추가, 테스트를 제안해야 합니다. 원하는 경우 피드백을 제공하여 구체화할 수 있으며 에이전트는 제안을 새 버전에 반영합니다. - -## Autopilot으로 구축 - -계획을 만들었으므로 Copilot이 구현을 구축하게 합니다. - -1. **Plan summary** 대화 상자의 옵션 목록에서 **Approve and implement with autopilot**과 가장 가까운 옵션을 선택합니다. - -Copilot이 구현 작업을 시작합니다. - -> [!NOTE] -> Copilot이 필요한 코드를 자동으로 만들기 시작하지 않으면 "Go ahead and start building out the plan!" 같은 프롬프트로 요청할 수 있습니다. -> -> 필요한 업데이트를 만드는 데 몇 분 정도 걸립니다. 에이전트는 파일을 편집하고 만들며, 테스트를 작성하고 실행하고, 반복해서 개선합니다. 지금까지 살펴본 내용을 돌아보거나 잠시 쉬어도 좋습니다. - -## 변경 내용 검토 - -AI가 생성한 모든 코드는 병합 전에 검토해야 합니다. 코드를 검토하고 사이트를 실행하여 올바르게 작동하는지 확인합니다. - -1. 오른쪽 위의 **Changes**를 선택하여 코드 변경 내용을 엽니다. - - ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](/images/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/app-terminal-screenshot.png) - -4. 터미널 창에 다음 명령을 입력하여 웹앱의 개발 서버를 시작합니다. - - ```shell - npm run dev - ``` - -5. 서버가 시작되면 브라우저 창을 엽니다. 잠시만 기다리면 됩니다. -6. [http://localhost:4321](http://localhost:4321)로 이동합니다. -7. 이제 랜딩 페이지에 필터가 표시되어야 합니다. -8. 올바르게 보이지 않는 항목이 있으면 Copilot에 업데이트를 요청할 수 있습니다. -9. 만족하면 터미널 창으로 돌아갑니다. -10. Ctrl+C를 선택하여 개발 서버를 중지합니다. - -## quality-checks 스킬로 작업 검증 - -diff를 눈으로 확인하고 끝낼 수도 있지만 팀에는 정해진 품질 기준과 이를 반복해서 확인하는 방법이 있습니다. - -**에이전트 스킬(Agent skills)**은 테스트 실행, 빌드 생성, 끌어오기 요청 만들기처럼 반복 가능한 작업을 수행하는 방법을 Copilot에 안내합니다. 스킬은 에이전트가 필요할 때 불러올 수 있는 지침, 스크립트, 리소스가 담긴 폴더입니다. [Agent Skills는 공개 표준][agent-skills-repo]이며 다양한 에이전트에서 사용되므로 동일한 스킬을 에이전트 모드의 Copilot Chat, Copilot cloud agent, Copilot CLI, GitHub Copilot app에서 사용할 수 있습니다. - -스킬은 프로젝트의 `.github/skills` 폴더 또는 전역 `~/.copilot/skills`에 있습니다. 각 스킬은 YAML frontmatter의 `name`과 `description` 뒤에 Markdown 지침이 이어지는 `SKILL.md` 파일을 포함하는 폴더입니다. - -```yaml ---- -name: quality-checks -description: Run the project's test suites and linter to verify code changes are ready to commit, push, or merge. ---- -``` - -스킬에는 스크립트, 자산, 참조 자료가 담긴 하위 폴더도 포함할 수 있습니다. 전체 구조는 [에이전트 스킬 사양][agent-skills-spec]에서 확인할 수 있습니다. - -> [!TIP] -> 스킬은 동적으로 불러옵니다. 에이전트는 `description` 필드를 바탕으로 적용할 스킬을 결정하므로, 명확하고 시나리오에 맞는 설명이 있어야 스킬을 제대로 사용할 수 있습니다. - -## quality-checks 스킬 살펴보기 - -스킬의 작동 방식을 살펴봅니다. - -1. 검토 패널이 표시되지 않으면 오른쪽 위의 **Toggle review panel**을 선택하여 엽니다. - - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](/images/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. 검토 패널에 새 항목을 추가하려면 **+**를 선택합니다. -3. **File**을 선택합니다. -4. `SKILL.md`를 검색합니다. -5. 파일 목록에서 `SKILL.md .github/skills/quality-checks`를 선택하여 엽니다. -6. `name`과 `description`을 확인합니다. 설명은 커밋, 푸시, 병합 전에 코드 변경을 테스트하거나 린팅하거나 검증할 때 이 스킬을 사용하라고 에이전트에 알려 줍니다. -7. 스킬을 읽습니다. 어떤 스크립트가 어떤 도구 모음(단위 테스트, Playwright 엔드투엔드 테스트, ESLint)을 어떤 순서로 실행하는지, 일반적인 실패를 디버그하는 방법은 무엇인지 확인합니다. 따라서 에이전트가 추측하지 않고 팀의 방식대로 검사를 실행합니다. - -## 검사 실행 - -동일한 필터링 세션에서 에이전트에게 작업을 검증하도록 요청합니다. 스킬 이름을 설명하지 않아도 에이전트가 요청과 일치시킵니다. - -1. Copilot app으로 돌아갑니다. -2. 슬래시 명령 `/quality-checks`를 사용하여 스킬을 직접 호출하고 Enter를 선택합니다. -3. 에이전트는 스킬에 따라 단위 테스트, 린터, 엔드투엔드 테스트를 실행하고 결과를 보고합니다. 실패하는 항목이 있으면 문제를 수정하고 모두 통과할 때까지 검사를 다시 실행하도록 요청합니다. -4. **이 세션을 열어 둡니다.** 다음 레슨에서 Playwright MCP 서버를 추가하고 실제 브라우저에서 필터링 기능이 작동하는지 확인합니다. - -## 요약 및 다음 단계 - -실제 기능을 처음부터 끝까지 구축하고 팀의 품질 기준에 맞게 검증했습니다. 구체적으로 다음 작업을 수행했습니다. - -- 최신 프로젝트의 필터링 이슈에서 새 세션을 시작했습니다. -- Plan 모드로 기능을 계획하고 Autopilot으로 구축했습니다. -- 생성된 도우미가 레슨 3에서 병합한 문서화 표준을 따르는지 확인했습니다. -- `quality-checks` 스킬로 작업을 검증했습니다. - -다음으로 Playwright MCP 서버를 연결하고 에이전트에게 실제 브라우저에서 필터링 기능을 살펴보도록 요청합니다. [레슨 5 - Playwright MCP 서버로 테스트][next-lesson]를 계속 진행합니다. - -## 리소스 - -- [GitHub Copilot app에서 에이전트 세션 사용][agent-sessions] -- [Agent Skills 정보][about-agent-skills] -- [GitHub Copilot app 사용자 지정][customize-app] -- [GitHub Copilot용 클라우드 및 로컬 샌드박스 정보][sandboxes] - -[ex0]: /ko-kr/learning-hub/copilot-workshops/app/0-prerequisites/ -[ex2]: /ko-kr/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /ko-kr/learning-hub/copilot-workshops/app/3-custom-instructions/ -[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions -[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[agent-skills-repo]: https://github.com/agentskills/agentskills -[agent-skills-spec]: https://agentskills.io/specification \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/4-custom-instructions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/4-custom-instructions.md new file mode 100644 index 000000000..ce881b59c --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/4-custom-instructions.md @@ -0,0 +1,121 @@ +--- +title: "레슨 4 - 사용자 지정 지침으로 Copilot 안내" +description: "리포지토리 지침을 살펴보고 문서화 표준을 추가한 다음 필터링 코드에 적용합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +생성형 AI를 사용할 때는 컨텍스트가 중요합니다. 작업을 특정 방식으로 수행해야 한다면 Copilot이 해당 지침을 사용할 수 있어야 합니다. [지침 파일][instruction-files]은 원하는 코드의 *내용*뿐 아니라 코드의 *구조*도 설명합니다. 필터링을 구축했으므로 이제 Copilot이 사용한 지침을 살펴보고 문서화 표준을 추가한 다음 코드에 적용합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 리포지토리 지침과 경로 범위 지침 파일이 에이전트에 전달되는 방식을 살펴봅니다. +- 코딩 표준을 준수하도록 지침 파일을 업데이트합니다. +- 지침 파일이 코드에 미치는 영향을 확인합니다. + +## 시나리오 + +모범적인 개발 조직인 Tailspin Toys에는 개발 방식에 관한 지침과 요구 사항이 있습니다. 여기에는 다음 항목이 포함됩니다. + +- 주석은 코드를 다시 설명하기보다 의도와 명확하지 않은 결정을 설명해야 합니다. +- `db/`와 `src/lib/`에서 내보내는 함수는 TSDoc/JSDoc으로 목적, 매개 변수, 반환값을 문서화하고, 주입 가능한 `db` 인수가 있다면 함께 설명해야 합니다. +- 재사용 가능한 Astro 구성 요소는 `Props` 계약을 문서화하고, 관련 코드가 바뀌면 주석도 최신 상태로 유지해야 합니다. +- 기존 서식과 린트 지침을 보존해야 합니다. + +지침 파일을 사용하면 Copilot이 이러한 관행에 맞게 작업하는 데 필요한 정보를 제공할 수 있습니다. + +## 지침 파일 + +사용자 지정 지침은 Copilot에 컨텍스트와 기본 설정을 제공하여 코딩 스타일과 요구 사항을 더 잘 이해하게 합니다. 이 기능을 사용하면 Copilot이 더 관련성 높은 제안과 코드 조각을 생성하도록 안내할 수 있습니다. 선호하는 코딩 규칙과 라이브러리는 물론 코드에 포함할 주석 유형까지 지정할 수 있습니다. 리포지토리 전체에 적용되는 지침이나 작업 수준의 컨텍스트를 제공하는 특정 파일 유형용 지침을 만들 수 있습니다. + +지침 파일에는 두 가지 유형이 있습니다. + +- `.github/copilot-instructions.md`는 리포지토리의 **모든** 요청에서 Copilot에 전달되는 단일 지침 파일입니다. 이 파일에는 Copilot에 보내는 대부분의 채팅 또는 CLI 요청과 관련된 프로젝트 수준 정보를 포함해야 합니다. 사용 중인 기술 스택, 구축 중인 항목의 개요, 모범 사례, 기타 전역 지침을 포함할 수 있습니다. +- 특정 작업이나 파일 유형에 맞게 `.github/instructions/*.instructions.md` 파일을 만들 수 있습니다. TypeScript 또는 Astro 같은 특정 언어나 UI 구성 요소 또는 새 단위 테스트 집합 만들기와 같은 작업에 관한 지침을 제공할 수 있습니다. + +> [!NOTE] +> 다른 지침 형식과 지원 여부는 하네스에 따라 다릅니다. 특정 형식에 의존하기 전에 [사용자 지정 지침 지원 참조][custom-instructions-support]를 확인합니다. + +## 프로젝트의 사용자 지정 지침 파일 살펴보기 + +시작을 돕기 위해 시작 프로젝트에는 지침 파일 모음이 이미 포함되어 있습니다. 변경하기 전에 기존 내용을 살펴보고 그 영향을 확인합니다. + +1. 이전 레슨의 세션으로 돌아갑니다. +2. 검토 패널이 표시되지 않으면 오른쪽 위의 **Toggle review panel**을 선택하여 엽니다. + + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](/images/learning-hub/copilot-workshops/app-2-review-panel.png) + +3. **+** 아이콘을 선택하여 새 캔버스를 패널에서 엽니다. +4. **Files**를 선택합니다. +5. **Gear** 아이콘을 선택하고 **Show hidden files**에 체크 표시가 있는지 확인합니다. +6. `.github/copilot-instructions.md`로 이동합니다. +7. 파일을 살펴봅니다. 프로젝트에 관한 간단한 설명과 **Agent notes**, **Code standards**, **Scripts**, **Repository Structure** 같은 섹션을 확인합니다. **Code standards** 아래에서 중첩된 **GitHub Actions Workflows** 지침을 확인합니다. 이 내용은 Copilot과의 모든 상호 작용에 적용됩니다. +8. `.github/instructions` 폴더로 이동하여 파일을 살펴봅니다. Astro 파일, Drizzle 데이터 계층, 테스트 등에 관한 지침이 있습니다. +9. `.github/instructions/unit-tests.instructions.md`를 엽니다. 위쪽의 `applyTo` 필드는 지침이 적용되는 파일을 결정하는 glob을 리포지토리 루트 기준으로 설정합니다. 여기서는 TypeScript 테스트 파일(예: `**/*.test.ts`와 일치하는 파일)이 모두 일치합니다. +10. 이 프로젝트의 단위 테스트 작성에 관한 구체적인 지침을 확인합니다. +11. 마지막으로 `.github/instructions/drizzle.instructions.md`를 열고 아래쪽으로 스크롤합니다. 다른 지침 파일(예: `unit-tests.instructions.md`)과 프로젝트의 기존 파일로 연결되는 링크를 확인합니다. 이를 통해 큰 지침 집합을 더 작고 재사용 가능한 파일로 나누고 Copilot이 코드를 생성할 때 따를 예제를 지정할 수 있습니다. 이 경로는 리포지토리 루트가 아니라 지침 파일을 기준으로 합니다. + +## 팀 지침에 맞게 지침 파일 업데이트 + +기존 파일은 좋은 출발점이지만 아직 부족한 부분이 있습니다. 새로 생성하는 TypeScript 파일에 [TSDoc 주석][tsdoc]을 추가하도록 핵심 `copilot-instructions.md` 파일을 수정합니다. + +> [!NOTE] +> 지침 파일은 Copilot이 생성하는 코드에 큰 영향을 주므로 Copilot을 명확하게 안내하는지 주의 깊게 확인해야 합니다. Copilot으로 초안을 만든 다음 요구 사항을 충족하는지 직접 검토할 수 있습니다. 좋은 출발점이 되는 [Awesome Copilot의 지침 파일 모음][awesome-copilot]도 확인할 수 있습니다. + +1. 동일한 파일 캔버스에서 `.github/copilot-instructions.md`로 이동합니다. +2. 파일 중간쯤에 있는 **Code formatting requirements** 헤더를 찾습니다. +3. 해당 헤더 아래의 마지막 글머리 기호로 다음 내용을 추가합니다. + + ```plaintext + All new TypeScript should contain TSDocs comments for documentation purposes. + ``` + +파일이 자동으로 저장되어 사용할 준비가 됩니다. + +## 업데이트된 지침 사용 + +지침 파일을 업데이트했으므로 Copilot에 업데이트를 검토하고 필요한 변경을 수행하도록 요청하여 코드에 미치는 영향을 확인합니다. + +> [!NOTE] +> 방금 지침 파일을 변경했으므로 Copilot에 명시적으로 사용하도록 요청합니다. 지침 파일이 이미 있는 상태에서 코드를 만들면 별도로 요청하지 않아도 Copilot이 자동으로 사용합니다. + +1. 다음 프롬프트로 지침 파일을 사용하여 새 요구 사항에 맞게 코드를 업데이트하도록 Copilot에 요청합니다. + + ```plaintext + We just updated our instructions and code guidance. Can you please update the code you generated to match that guidance? + ``` + +2. 오른쪽 위의 **Changes**를 선택하여 코드 변경 내용을 엽니다. + + ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](/images/learning-hub/copilot-workshops/app-select-changes.png) + +3. TypeScript 파일을 살펴보고 새로 생성된 TSDoc 주석을 확인합니다. + +## 요약 및 다음 단계 + +앱이 지침 파일에서 컨텍스트를 가져오는 방식을 살펴보고 새 표준을 기능에 적용했습니다. 구체적으로 다음 작업을 수행했습니다. + +- 리포지토리의 `copilot-instructions.md`와 경로 범위 `*.instructions.md` 파일을 살펴봤습니다. +- 코딩 표준을 준수하도록 지침 파일을 업데이트했습니다. +- 지침 파일이 생성된 코드에 미치는 영향을 확인했습니다. + +다음으로 린트와 테스트를 일관되게 실행하도록 [재사용 가능한 quality-checks 스킬을 사용자 지정하고 실행][next-lesson]합니다. + +## 리소스 + +- [GitHub Copilot 사용자 지정을 위한 지침 파일][instruction-files] +- [GitHub Copilot app 사용자 지정][customize-app] +- [사용자 지정 지침 만들기 모범 사례][instructions-best-practices] +- [Awesome Copilot의 지침 파일 및 기타 리소스 모음][awesome-copilot] + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/5-agent-skills/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[instructions-best-practices]: https://docs.github.com/copilot/concepts/prompting/response-customization#writing-effective-custom-instructions +[awesome-copilot]: https://awesome-copilot.github.com/ +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +[tsdoc]: https://tsdoc.org/ +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/5-agent-skills.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/5-agent-skills.md new file mode 100644 index 000000000..fff7c38ad --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/5-agent-skills.md @@ -0,0 +1,110 @@ +--- +title: "레슨 5 - quality-checks 스킬 사용자 지정 및 사용" +description: "기존 quality-checks 스킬을 살펴보고 보고서 형식을 사용자 지정한 다음 필터링을 검증합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +코드 작성에는 코드 자체를 작성하는 것보다 더 많은 작업이 필요합니다. 코드가 작동하는지 수동으로 검증하고 지침 파일을 사용하여 표준을 따르게 했습니다. 하지만 테스트, 린트, 그 밖의 지속적 통합(CI) 요소는 어떻게 처리해야 할까요? + +이러한 작업에는 **에이전트 스킬**이 가장 적합합니다. 스킬은 Copilot이 이런 작업을 올바르게 실행하는 방법을 이해하도록 돕습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 기존 `quality-checks` 스킬을 살펴봅니다. +- 결과 형식을 사용자 지정합니다. +- 스킬을 실행하고 출력을 검토합니다. + +## 시나리오 + +Tailspin Toys는 단위 테스트, 린트, 타입 검사에 `quality-checks` 스킬을 사용합니다. 팀은 결과를 더 쉽게 읽을 수 있도록 보고서를 개선하려고 합니다. + +## 지침, 스크립트, 리소스 + +에이전트 스킬은 에이전트가 필요할 때 불러오는 재사용 가능한 작업 지침, 실행 가능한 스크립트, 보조 리소스를 묶습니다. 기본적으로 스킬 이름의 폴더와 `SKILL.md`라는 Markdown 파일로 구성됩니다. Markdown에는 스킬의 이름과 설명을 정의하는 프런트매터, 스킬의 기능 개요, 호출 시점에 관한 지침이 포함됩니다. 스킬 폴더에는 스크립트와 기타 리소스를 담는 하위 폴더도 포함할 수 있습니다. + +> [!NOTE] +> 스킬에 추가 폴더와 파일이 반드시 필요한 것은 아닙니다. 이 예제의 스킬은 `npm` 명령으로 테스트와 린터를 실행하므로 추가 보조 파일이 필요하지 않습니다. + +스킬은 프로젝트의 `.github/skills` 폴더에 두어 팀에서 공유하고 재사용하는 리포지토리 자산으로 만들거나, 일반적으로 `~/.copilot/skills`인 Copilot 루트 폴더에 둘 수 있습니다. + +## 스킬 살펴보기 + +Tailspin Toys 팀이 단위 테스트, 린트, 타입 검사 실행을 위해 만든 `quality-checks` 스킬을 살펴봅니다. + +1. **Files** 캔버스가 열려 있지 않으면 검토 패널에서 **+**, **File**을 차례로 선택합니다. +2. `.github/skills/quality-checks/SKILL.md`를 검색합니다. +3. 상단의 `name`과 `description`을 읽습니다. 설명은 Copilot이 스킬 호출 시점을 이해하는 데 도움이 됩니다. +4. 지침을 읽고 테스트와 린트 프로세스를 통해 Copilot을 안내하는 방식을 확인합니다. + +## 변경 전 스킬 실행 + +스킬은 슬래시(`/`) 명령으로 직접 호출하거나 자연어로 호출할 수 있습니다. 스킬의 세 가지 검사를 실행하도록 Copilot에 요청합니다. + +1. 모드 드롭다운에서 **Interactive**를 선택하여 Copilot이 해당 모드인지 확인합니다. +2. 다음 프롬프트로 스킬을 호출합니다. + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. 마지막에 표시되는 보고서를 확인합니다. + +## 보고서 사용자 지정 + +무엇을 실행했는지, 성공했는지, 도구가 실제로 무엇을 보고했는지 보여 주는 더 나은 보고서를 원합니다. 이 보고서를 생성하도록 스킬을 업데이트합니다. + +1. **Files** 캔버스로 돌아갑니다. +2. 아직 열려 있지 않으면 `.github/skills/quality-checks/SKILL.md`를 엽니다. +3. 파일 끝에 다음 섹션을 추가합니다. + + ```markdown + ## Results output formatting + + Upon completion, report each command that ran and whether it passed, failed, or was blocked. Include test counts, durations, errors, warnings, and other metrics only when the tool reports them. Identify the next action for any failure or blocker, and never describe a skipped or incomplete check as passed. + ``` + +파일이 자동으로 저장됩니다. + +## 업데이트된 스킬 실행 + +변경 사항을 적용했으므로 같은 프롬프트를 사용하여 스킬을 실행해 봅니다. + +1. 모드 드롭다운에서 **Interactive**를 선택하여 Copilot이 해당 모드인지 확인합니다. +2. 다음 프롬프트로 스킬을 호출합니다. + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. 마지막에 표시되는 보고서를 확인합니다. + +## 요약 및 다음 단계 + +기존 에이전트 스킬을 사용자 지정하고 사용했습니다. 이 레슨에서는 다음 작업을 수행했습니다. + +- 단위 테스트, 린트, 타입 검사를 위한 `quality-checks` 스킬을 살펴봤습니다. +- 결과 형식을 사용자 지정했습니다. +- 스킬을 실행하고 출력을 검토했습니다. + +이 변경은 기능 PR에서 필터링과 함께 포함됩니다. 다음으로 Copilot이 [Playwright MCP 서버를 통해][next-lesson] 사이트와 직접 상호 작용하게 합니다. + +## 더 많은 스킬 예제 + +이 커뮤니티 예제는 참고 자료이며 추가 작업이 아닙니다. 채택하기 전에 필수 조건과 동작을 검토합니다. + +- [Agent Skills 명세][skill-spec]. +- [기여 워크플로: `make-repo-contribution`][contribution-example]. +- [요구 사항 문서: `prd`][prd-example]. +- [다이어그램과 함께 제공되는 내보내기 스크립트: `drawio`][drawio-example]. +- [브라우저 테스트: `webapp-testing`][browser-example]. + +업스트림 기여 예제의 이름은 `make-repo-contribution`이며, 이전 Tailspin 템플릿은 `make-contribution`이라는 다른 이름을 사용했습니다. 이 워크숍은 두 기여 스킬 중 어느 것에도 의존하지 않습니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[skill-spec]: https://agentskills.io/specification +[contribution-example]: https://github.com/github/awesome-copilot/tree/main/skills/make-repo-contribution +[prd-example]: https://github.com/github/awesome-copilot/tree/main/skills/prd +[drawio-example]: https://github.com/github/awesome-copilot/tree/main/skills/drawio +[browser-example]: https://github.com/github/awesome-copilot/tree/main/skills/webapp-testing diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/6-agent-merge.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/6-agent-merge.md deleted file mode 100644 index 7491a3d6c..000000000 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/6-agent-merge.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "Lesson 6 - Agent Merge로 병합" -description: "필터링 끌어오기 요청을 열고 My work에서 검토한 다음, Agent Merge가 차단 요소를 수정하고 병합하도록 하여 병합 자동화의 최상위 단계를 경험합니다." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -필터링 기능을 구축하고 검증하고 브라우저에서 작동하는 모습까지 확인했습니다. 마지막 단계는 병합입니다. 이 실습 과정에서 이미 두 번 병합했으며, 두 번 모두 끌어오기 요청을 열고 github.com에서 직접 병합했습니다. 이번에는 앱 안에서 끌어오기 요청의 전체 수명 주기를 관리하는 **Agent Merge**를 사용하여 앱이 번거로운 작업을 처리하게 합니다. - -이 레슨에서는 다음 작업을 수행합니다. - -- Agent Merge의 개념과 병합 수명 주기를 자동화하는 방식을 알아봅니다. -- 필터링 세션에서 Agent Merge를 활성화합니다. -- Agent Merge가 끌어오기 요청을 만들고 CI를 실행한 다음 모든 검사가 통과하면 병합하는 과정을 확인합니다. - -## 시나리오 - -지난 몇 개 모듈에서 코드 생성부터 Copilot이 UI를 직접 검증하도록 하는 것까지 다양한 자동화 수준을 살펴봤습니다. Tailspin Toys는 개발 속도를 더욱 높이기 위해 검토와 검증을 마친 끌어오기 요청을 자동으로 병합할 방법이 있는지 알아보려고 합니다. - -## Agent Merge 소개 - -**Agent Merge**는 Copilot app을 통해 끌어오기 요청을 병합하는 마지막 단계를 자동화합니다. 활성화하면 앱의 세션이 끌어오기 요청을 읽고, 실패한 CI 검사 수정, 검토 의견 대응, 필요할 때 리베이스 수행 등 병합을 차단하는 문제를 해결한 다음 GitHub에서 허용하는 즉시 병합합니다. 백그라운드에서 실행되고 앱을 다시 시작해도 계속 작동하며 끌어오기 요청이 병합되면 자동으로 꺼집니다. - -지금까지는 github.com에서 직접 **Merge pull request**를 선택했습니다. Agent Merge는 해당 책임을 에이전트로 옮기므로, 에이전트가 PR 완료 과정을 관리하는 동안 다음 작업으로 넘어갈 수 있습니다. 작업을 검토하고 승인하는 책임은 여전히 사용자에게 있으며, 에이전트는 기계적인 마무리 작업만 처리합니다. - -## Agent Merge로 PR 관리 - -코드를 직접 검토하고 테스트를 실행했으며 Copilot이 UI를 검증하도록 했습니다. 이제 새 코드를 코드베이스에 병합합니다. Agent Merge가 지속적 통합(CI)과 병합 과정을 관리하게 합니다. - -1. 이전 모듈에서 필터링 기능을 추가하며 열어 둔 세션으로 돌아갑니다. -2. 오른쪽 위에서 **Create PR** 옆의 드롭다운을 선택합니다. -3. **Agent merge**를 선택하여 Agent Merge를 활성화합니다. - - ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](/images/learning-hub/copilot-workshops/app-enable-agent-merge.png) - -4. 이제 버튼 텍스트가 **Agent merge**로 바뀝니다. -5. **Agent merge** 버튼을 선택하여 Agent Merge 프로세스를 시작합니다. - -Copilot app이 PR을 만들고 관리하는 프로세스를 시작합니다. 먼저 프로젝트를 탐색하여 PR을 만드는 최적의 방법을 결정한 다음 새 PR을 만듭니다. - -잠시 후 Copilot이 다시 작업을 시작하여 PR 조건, 즉 리포지토리의 모든 테스트를 실행하는 CI 프로세스를 확인합니다. 다른 팀 구성원이 남긴 검토, 실행해야 하는 검사(CI 프로세스), PR의 병합 가능 여부를 보고합니다. - -6. **Agent merge** 옆의 드롭다운을 선택한 다음 **Merge pull request**를 선택하여 Agent Merge가 끌어오기 요청을 병합하도록 허용합니다. - - ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](/images/learning-hub/copilot-workshops/app-agent-merge-merge.png) - -7. 모든 CI 프로세스가 통과하면, 즉 테스트가 성공하면 Copilot이 끌어오기 요청을 병합합니다. - -## 요약 및 다음 단계 - -코드 생성, 코드 테스트와 검증, 끌어오기 요청 프로세스를 포함한 개발 프로세스의 여러 부분을 자동화했습니다. 다음 작업을 수행했습니다. - -- Agent Merge의 개념과 병합 수명 주기를 자동화하는 방식을 배웠습니다. -- 필터링 세션에서 Agent Merge를 활성화했습니다. -- Agent Merge가 끌어오기 요청을 만들고 CI를 실행한 다음 모든 검사가 통과했을 때 병합하는 과정을 확인했습니다. - -다음으로 에이전트와 함께 작업을 계획하고 시각화하는 더 풍부한 방법인 **캔버스**를 살펴봅니다. [레슨 7 - 캔버스로 계획 수립][next-lesson]을 계속 진행합니다. - -## 리소스 - -- [GitHub Copilot app으로 이슈 및 끌어오기 요청 관리][managing-issues-prs] -- [GitHub Copilot app 정보][about-copilot-app] - -[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/7-canvases/ -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/5-mcp-playwright.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/6-mcp-playwright.md similarity index 55% rename from website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/5-mcp-playwright.md rename to website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/6-mcp-playwright.md index 86ceb5766..c2cd72217 100644 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/5-mcp-playwright.md +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/6-mcp-playwright.md @@ -1,17 +1,17 @@ --- -title: "Lesson 5 - Playwright MCP 서버로 테스트" -description: "GitHub Copilot app에 Playwright MCP 서버를 추가하고 에이전트에게 실제 브라우저에서 필터링 기능을 수동으로 테스트하도록 요청합니다." +title: "레슨 6 - Playwright MCP로 기능 검증" +description: "Customize에서 Playwright MCP를 구성하고 기존 기능 워크트리의 필터링을 브라우저에서 관찰합니다." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -이전 레슨에서는 프로젝트의 자동화된 테스트 도구 모음으로 필터링 기능을 만들고 검증했습니다. 테스트는 코드 검증을 자동화하지만 에이전트가 동작을 직접 확인하게 하는 것도 강력합니다. 에이전트는 자신이 만드는 실제 UI에서 발견한 문제에 대응할 수 있습니다. MCP가 AI 에이전트에 외부 기능을 제공하는 방식을 살펴보고, Copilot이 구축 중인 사이트와 직접 상호 작용할 수 있도록 Playwright MCP 서버를 추가합니다. +앞서 강조했듯이 코드 작성에는 코드 자체를 작성하는 것보다 더 많은 작업이 필요합니다. 데이터와 외부 서비스를 사용하고 Copilot에 추가 자동화 기능을 제공해야 합니다. 이때 MCP 서버를 사용합니다. MCP 서버는 Copilot이 앱에 기본 제공된 기능을 넘어 더 많은 도구와 서비스를 사용하도록 합니다. 이 레슨에서는 다음 작업을 수행합니다. - Model Context Protocol (MCP)의 개념과 GitHub Copilot app에서 사용하는 방식을 이해합니다. -- 앱 설정에서 Playwright MCP 서버를 추가합니다. +- **Customize**에서 Playwright MCP 서버를 추가합니다. - 에이전트에게 브라우저를 조작하여 필터링 기능을 살펴보도록 요청합니다. ## 시나리오 @@ -36,43 +36,42 @@ lastUpdated: 2026-08-03 ## Playwright MCP 서버 추가 -앱 설정에서 MCP 서버를 추가하고 관리합니다. 앱에는 인기 서버 카탈로그가 포함되어 있으므로 몇 번의 선택만으로 [Playwright MCP 서버][playwright-mcp-server]를 추가할 수 있습니다. +사이드바의 **Customize**에서 MCP 서버를 관리합니다. 리포지토리나 Copilot CLI에 구성한 서버를 App에서 이미 사용할 수도 있으므로 중복 추가 전에 확인합니다. [App 사용자 지정 문서][customize-app]에서 사용 가능한 옵션을 설명합니다. -1. Ctrl+,를 선택하여 Copilot app 설정 페이지를 엽니다. -2. **MCP servers**를 선택합니다. -3. 검색 대화 상자에 `Playwright`를 입력합니다. -4. **Popular MCP servers** 목록에서 **Playwright**를 선택합니다. -5. **Add server**를 선택하여 사용 가능한 MCP 서버 목록에 추가합니다. -6. Esc를 선택하여 설정 대화 상자를 닫습니다. +1. 사이드바에서 **Customize**를 선택합니다. +2. **MCP**를 선택한 다음 **Installed**에서 기존 Playwright 서버를 확인합니다. +3. 필요하면 사용 가능한 서버에서 **Playwright**를 찾거나 게시자가 문서화한 사용자 지정 서버 추가 절차를 사용합니다. +4. 게시자, 구성, 설치 요청을 검토한 후 승인합니다. 안내에 따라 서버를 추가합니다. 조직 정책이나 누락된 필수 조건으로 설정이 차단될 수 있습니다. +5. **Interactive** 모드의 필터링 세션으로 돌아가 Playwright MCP 도구를 사용할 수 있는지 확인합니다. -이제 Playwright MCP 서버를 추가했습니다. +설정이 실패하면 계속하기 전에 구성이나 권한 문제를 해결합니다. ## Copilot에 Playwright로 기능 탐색 요청 -Copilot에 Playwright MCP 서버를 사용하여 기능을 수동으로 테스트하도록 요청합니다. +필터링을 계획하고 구현한 세션에서 계속합니다. 이슈와 합의한 결정이 이미 컨텍스트에 있습니다. Copilot에 서버 시작을 요청하기 전에 앞서 직접 시작한 개발 서버를 중지합니다. 1. 다음 프롬프트를 사용하여 새 기능을 검증하도록 Copilot에 요청합니다. - ```plaintext - Start the dev server then use the Playwright MCP server to validate the functionality you just added exists. Use the details in the issue to ensure the newly added behavior matches the specs. - ``` + ```plaintext + Start the app and use Playwright MCP to check filtering against the issue and our plan. Tell me what works and what doesn't, without making changes. Stop the server you started when you're done. + ``` -Copilot은 Playwright MCP 서버를 통해 브라우저를 시작하고 각 단계를 수행한 다음 발견한 내용을 보고합니다. 작업을 수행하기 위해 시스템에서 브라우저가 실제로 열리는 것을 볼 수 있습니다. +> [!NOTE] +> Copilot에 특정 MCP 서버를 사용하도록 지시할 필요는 없습니다. 일반적으로 현재 컨텍스트를 바탕으로 올바른 서버를 찾습니다. 하지만 중요하다고 생각하는 내용을 Copilot에 알려도 좋습니다. -2. 이슈의 승인 조건과 비교하여 요약을 읽습니다. 올바르지 않은 부분이 있으면 후속 질문을 하거나 끌어오기 요청을 열기 전에 코드를 수정하도록 요청합니다. -3. 다음 레슨에서 이 세션을 마무리하므로 세션을 열어 둡니다. + 2. 작업 과정을 지켜봅니다. -이제 Copilot은 사용자처럼 기능을 살펴보며 브라우저에서도 기능을 검증했습니다. + Copilot은 서버를 시작하고 브라우저를 열어 웹사이트와 상호 작용합니다. 완료되면 서버를 중지하고 보고서를 제공합니다. ## 요약 및 다음 단계 GitHub Copilot app에서 Playwright MCP 서버를 사용하여 실제 브라우저로 기능을 살펴봤습니다. 요약하면 다음 작업을 수행했습니다. - Model Context Protocol (MCP)의 개념과 앱에서 MCP 도구를 제공하는 방식을 배웠습니다. -- 앱 설정에서 Playwright MCP 서버를 추가했습니다. +- **Customize**에서 Playwright MCP 서버를 구성했습니다. - 에이전트에게 브라우저를 조작하여 필터링 기능을 살펴보도록 요청했습니다. -기능을 구축하고 검증하고 작동하는 모습까지 확인했습니다. 이제 **Agent Merge**를 사용하여 끌어오기 요청을 열고 병합하도록 합니다. [레슨 6 - Agent Merge로 병합][next-lesson]을 계속 진행합니다. +다음으로 [레슨 7 - QA 에이전트 만들기 및 사용][next-lesson]에서 전문가 역할을 통해 스킬과 브라우저 도구를 결합합니다. ## 리소스 @@ -80,7 +79,7 @@ GitHub Copilot app에서 Playwright MCP 서버를 사용하여 실제 브라우 - [Microsoft Playwright MCP Server][playwright-mcp-server] - [GitHub Copilot app에서 MCP 서버 구성][customize-app] -[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/6-agent-merge/ +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/7-qa-agent/ [mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ [playwright-mcp-server]: https://github.com/microsoft/playwright-mcp [customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/7-canvases.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/7-canvases.md deleted file mode 100644 index c954ce736..000000000 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/7-canvases.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: "Lesson 7 - 캔버스로 계획 수립" -description: "GitHub Copilot app에서 공유 에이전트 기반 캔버스를 만들어 에이전트와 함께 작업을 계획하고 추적합니다." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -지금까지 채팅을 통해 에이전트를 지시했습니다. 하지만 많은 작업은 대화가 아니라 보드, 문서, 검사 목록에서 이루어집니다. **캔버스**는 바로 이러한 작업을 위해 앱 안에서 사용자와 에이전트가 함께 사용하는 화면을 제공합니다. 이 레슨에서는 지금까지 처리한 백로그를 계획하고 추적하는 간단한 캔버스를 만듭니다. - -이 레슨에서는 다음 작업을 수행합니다. - -- 캔버스의 개념과 사용 시점을 이해합니다. -- 백로그를 분류하는 공유 Kanban 보드 캔버스를 만듭니다. -- 캔버스를 리포지토리에 저장하고 팀에서 사용할 수 있도록 병합합니다. -- 새 세션에서 캔버스를 열고 캔버스에서 작업을 시작합니다. - -## 시나리오 - -이슈 목록은 아무리 좋은 상황에서도 부담스러울 수 있습니다. Tailspin Toys 개발자는 이슈를 빠르게 분류하고 Copilot app에서 작업을 시작할 수 있는 도구를 찾고 있습니다. - -## 캔버스란? - -[캔버스][canvas-docs]는 계획, 분류 보드, 릴리스 검사 목록, 대시보드, 문서 같은 작업 산출물을 위한 공유 대화형 화면입니다. 채팅은 의도를 설명하고 모호한 부분을 함께 추론하는 데 유용하지만 대부분의 작업은 *화면*에서 이루어집니다. 캔버스를 사용하면 해당 화면에서 에이전트와 직접 협업할 수 있습니다. - -캔버스는 **양방향**입니다. 에이전트가 작업하면서 캔버스를 업데이트할 수 있고 사용자도 동일한 화면을 편집할 수 있습니다. 캔버스를 만들면 에이전트가 프롬프트와 워크플로를 바탕으로 구축하며, 진행하면서 기능을 추가하거나 제거하거나 수정하도록 요청할 수 있습니다. 캔버스를 만들면 앱의 오른쪽 패널에서 열립니다. - -일반적인 예는 다음과 같습니다. - -- 하루를 계획하고 이슈와 끌어오기 요청의 우선순위를 정하는 **Markdown 캔버스** -- 사용자와 에이전트가 카드를 추가하고 열 사이에서 작업을 이동하는 **에이전트 Kanban 보드** -- 리포지토리의 주요 이슈와 반복되는 주제를 요약하는 **이슈 분류 보드** - -## 캔버스를 사용하는 이유 - -작업에 구조화, 반복, 검증이 필요하고 채팅만으로 충분하지 않다면 캔버스를 사용합니다. 캔버스로 다음 작업을 수행할 수 있습니다. - -- 워크플로에 맞는 실제 산출물을 기반으로 에이전트가 작업하게 합니다. -- 공유 화면에서 작업을 직접 안내하거나 수정한 다음 에이전트가 변경 내용에서 계속 작업하게 합니다. -- 채팅 응답만 보는 대신 산출물의 눈에 보이는 변경으로 진행 상황을 확인합니다. - -## 작업 추적 캔버스 만들기 - -별점, 문서화 표준, 필터링 기능을 모두 병합하여 많은 작업을 제공했습니다. 하지만 백로그에는 아직 항목이 남아 있습니다. 작업을 빠르게 분류하는 데 도움이 되는 캔버스를 만듭니다. - -1. GitHub Copilot app으로 돌아가거나 앱을 엽니다. -2. **Home screen**을 선택합니다. -3. 리포지토리로 `tailspin-toys`가 선택되어 있는지 확인합니다. -4. 프롬프트 상자에서 다음 프롬프트를 사용하여 요구 사항을 충족하는 캔버스를 만듭니다. - - ```plaintext - Create a basic Kanban board canvas that allows me to quickly triage work. Highlight the three issues which are most likely to need attention right now, with the remainder in a second section down below. The top three cards should include a description of the issue's content and a justification of why they're at the top of the list. Each issue should have a button that allows me to add it to the current context for the current session so I can get to work on it straightaway. - ``` - -Copilot이 캔버스를 만들기 시작합니다. - -> [!NOTE] -> 이 작업에는 몇 분 정도 걸립니다. 복잡한 작업이므로 첫 번째 버전이 만족스럽지 않을 수 있습니다. 원하는 도구가 완성될 때까지 프롬프트로 계속 개선할 수 있습니다. - -## 캔버스를 저장하고 리포지토리에 병합 - -캔버스는 지침 파일 및 스킬과 마찬가지로 리포지토리의 자산이 될 수 있습니다. Copilot에 캔버스를 리포지토리에 추가하고 병합하도록 요청하여 팀 전체에서 사용하게 합니다. - -1. 같은 세션에서 다음 프롬프트를 사용하여 캔버스를 리포지토리에 저장하도록 Copilot에 요청합니다. - - ```plaintext - Let's save this canvas definition to the repository so I can share it with my development team - ``` - -2. Copilot이 캔버스 파일을 저장하면 오른쪽 위에서 **Create PR** 옆의 드롭다운을 선택합니다. -3. **Agent merge**를 선택하여 Agent Merge를 활성화합니다. - - ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](/images/learning-hub/copilot-workshops/app-enable-agent-merge.png) - -4. 이제 버튼 텍스트가 **Agent merge**로 바뀝니다. -5. **Agent merge** 버튼을 선택하여 Agent Merge 프로세스를 시작합니다. - -Copilot app이 PR을 만들고 관리하는 프로세스를 시작합니다. 먼저 프로젝트를 탐색하여 PR을 만드는 최적의 방법을 결정한 다음 PR을 만듭니다. - -잠시 후 Copilot이 다시 작업을 시작하여 PR 조건, 즉 리포지토리의 모든 테스트를 실행하는 CI 프로세스를 확인합니다. 다른 팀 구성원이 남긴 검토, 실행해야 하는 검사(CI 프로세스), PR의 병합 가능 여부를 보고합니다. - -6. **Agent merge** 옆의 드롭다운을 선택한 다음 **Merge pull request**를 선택하여 Agent Merge가 끌어오기 요청을 병합하도록 허용합니다. - - ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](/images/learning-hub/copilot-workshops/app-agent-merge-merge.png) - -7. 모든 CI 프로세스가 통과할 때까지 기다립니다. 모두 통과하면 Copilot이 끌어오기 요청을 자동으로 병합합니다. - -이제 팀을 위한 새 공유 캔버스를 만들었습니다. - -## 캔버스에서 작업 - -캔버스를 만들었으므로 새 세션을 시작하고 사용해 봅니다. - -1. Copilot app에서 **tailspin-toys** 옆의 **New session**을 선택하여 새 세션을 시작합니다. -2. 다음 프롬프트를 사용하여 분류 캔버스를 열도록 Copilot에 요청합니다. - - ```plaintext - Open the triage issues canvas - ``` - -3. 이제 새 세션에서 만든 캔버스가 열리는 것을 확인합니다. -4. 가장 관심 있는 이슈 중 하나에서 **Add to current context**를 선택합니다. -5. Copilot이 이슈 작업을 시작합니다. - -이제 직접 만든 캔버스를 사용하여 개발 프로세스를 간소화했습니다. - -## 요약 및 다음 단계 - -사용자와 에이전트가 협업하는 공유 화면을 만들었습니다. 다음 작업을 수행했습니다. - -- 캔버스의 개념과 사용 시점을 배웠습니다. -- 에이전트와 공유 Kanban 분류 보드 캔버스를 만들었습니다. -- Agent Merge를 사용하여 캔버스를 리포지토리에 저장하고 병합했습니다. -- 새 세션에서 캔버스를 열고 캔버스를 사용하여 작업을 시작했습니다. - -백로그를 추적하도록 설정했으므로 지금까지 구축한 항목과 다음 단계를 돌아봅니다. [레슨 8 - 검토 및 다음 단계][next-lesson]를 계속 진행합니다. - -## 리소스 - -- [GitHub Copilot app에서 캔버스 확장 사용][canvas-docs] -- [Awesome Copilot의 캔버스][awesome-copilot-canvases] -- [GitHub Copilot app 정보][about-copilot-app] - -[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/8-review/ -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/7-qa-agent.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/7-qa-agent.md new file mode 100644 index 000000000..2c646905f --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/7-qa-agent.md @@ -0,0 +1,78 @@ +--- +title: "레슨 7 - QA 에이전트 만들기 및 사용" +description: "테스트 커버리지, quality-checks 스킬, 직접 관찰한 브라우저 근거를 통합하는 요구 사항 우선 QA 프로필을 만듭니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +`quality-checks` 스킬로 자동 검사를 실행하고 Playwright MCP로 브라우저에서 필터링 환경을 관찰했습니다. 이제 명확하게 정의된 QA 프로세스를 가진 사용자 지정 에이전트에서 이러한 기능을 함께 사용합니다. + +이 레슨에서는 다음을 수행합니다. + +- 사용자 지정 에이전트가 지침, 스킬, MCP 도구와 함께 작동하는 방식을 이해합니다. +- 재사용 가능한 QA 프로필을 만들고 검토합니다. +- QA 에이전트를 선택하고 필터링 이슈와 비교해 결과를 검토합니다. + +## 시나리오 + +Tailspin Toys는 끌어오기 요청(PR)을 열기 전에 요구 사항, 코드 품질, 자동 검사, 테스트 커버리지, 브라우저 동작을 일관되게 검토하려고 합니다. 사용자 지정 에이전트가 이 QA 프로세스를 조정하고 재사용 가능한 보고서를 제공할 수 있습니다. + +## 사용자 지정 에이전트란? + +사용자 지정 에이전트는 Markdown 프로필로 정의하는 특수한 Copilot입니다. 프로필은 에이전트의 목적, 지침, 사용 가능한 도구를 설명합니다. 이 워크숍에서는 `.github/agents/qa.agent.md`에 QA 역할을 정의하고 앱에서 선택합니다. + +지금까지 만든 사용자 지정 요소는 서로 다른 역할을 합니다. 리포지토리 지침은 팀 표준을 설명합니다. quality-checks 스킬은 반복 가능한 검사를 묶습니다. Playwright MCP는 브라우저 도구를 제공합니다. QA 프로필은 이러한 기능을 사용해 요구 사항을 평가하고 결과를 보고하는 방법을 Copilot에 지시합니다. 기존 기능을 대체하거나 별도 에이전트 세션을 요구하지 않습니다. + +## QA 프로필 만들기 + +기능 PR을 열기 전에 Copilot에 재사용 가능한 QA 프로필을 만들도록 요청합니다. 프로필에는 QA가 수행하는 검사와 따라야 할 경계를 모두 정의합니다. + +1. 세션이 **Interactive** 모드인지 확인합니다. +2. 다음 프롬프트를 Copilot에 보내 새 사용자 지정 에이전트를 만듭니다. + + ```plaintext + Create a custom agent named QA in .github/agents/qa.agent.md. It should check features against their issues and agreed requirements, follow the repository instructions, run the quality-checks skill, use Playwright MCP to verify behavior, and add tests when coverage is missing. + + Have it report each requirement as pass, fail, or blocked with supporting evidence. It must ask before changing implementation code, and it must not commit changes or open pull requests. Use the current model and available tools. Just create the profile for now so I can review it. + ``` + +## 프로필 검토 + +1. **Changes**를 열고 `.github/agents/qa.agent.md`를 선택합니다. +2. 프런트매터를 읽습니다. `description`은 필수이며 `name`은 선택 사항이지만, 포함하면 에이전트에 명확한 표시 이름이 생깁니다. +3. 프로필 지침을 읽고 QA가 요구 사항에서 시작하고, 리포지토리 지침을 따르고, `quality-checks` 스킬을 실행하고, Playwright MCP를 사용하는지 확인합니다. +4. QA가 근거를 보고하고, 구현 코드를 변경하기 전에 확인을 요청하고, 커밋하거나 끌어오기 요청을 열지 않는지 확인합니다. +5. 생성된 프로필에 이러한 책임이나 경계가 빠져 있으면 계속하기 전에 일반 Copilot 에이전트에 수정을 요청합니다. + +## 이슈에 대한 QA 실행 + +프로필을 검토했으므로 현재 세션에서 QA를 선택합니다. 그러면 이미 컨텍스트에 있는 필터링 이슈와 계획 결정을 사용할 수 있습니다. 검토를 요청하기 전에 활성 에이전트를 확인합니다. + +1. 현재 세션의 프롬프트 상자에서 에이전트 선택기를 엽니다. +2. **QA**를 선택하고 실행 프롬프트를 보내기 전에 앱이 **QA**를 활성 에이전트로 명확히 표시하는지 확인합니다. +3. 다음 프롬프트로 QA에 기능 검토를 요청합니다. + + ```plaintext + Review the filtering feature against the issue and the decisions in our plan. Is it ready for a PR? + ``` + +4. QA가 올바른 이슈와 계획 결정을 사용하는지 확인합니다. 요청하면 이슈 URL이나 누락된 컨텍스트를 제공합니다. +5. 작업이 끝나면 제공된 보고서를 읽습니다. + +## 요약 및 다음 단계 + +워크플로에 재사용 가능한 전문가 역할을 추가하고 그 작업을 검토했습니다. 이 레슨에서는 다음을 수행했습니다. + +- 사용자 지정 에이전트가 지침, 스킬, MCP 도구와 함께 작동하는 방식을 살펴봤습니다. +- 요구 사항에서 시작하는 재사용 가능한 QA 프로필을 만들고 검토했습니다. +- QA 에이전트를 선택하고 필터링 이슈와 비교하여 결과를 검토했습니다. + +이제 검토에 필요한 구현, 스킬 업데이트, QA 프로필, 테스트, 검증 보고서를 갖췄습니다. [레슨 8 - 기능 PR 생성 및 병합][next-lesson]에서 이를 함께 검토하고 Agent Merge를 사용합니다. + +## 리소스 + +- [사용자 지정 에이전트 선택을 포함한 GitHub Copilot App 사용자 지정][customize-app] + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/8-create-pull-request/ +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-create-pull-request.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-create-pull-request.md new file mode 100644 index 000000000..2c6e83b76 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-create-pull-request.md @@ -0,0 +1,73 @@ +--- +title: "레슨 8 - 기능 PR 만들기 및 병합" +description: "필터링, 스킬 업데이트, QA 프로필, 테스트를 함께 검토하고 PR을 만든 다음 Agent Merge를 사용합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +필터링 구현, 지침 업데이트, 스킬 업데이트, 품질 보증(QA) 프로필, 테스트를 하나의 브랜치에 저장했습니다. 이제 함께 검토하고 끌어오기 요청을 엽니다. 별점 끌어오기 요청(PR)은 직접 병합했지만, 이번에는 **Agent Merge**가 프로세스를 관리하도록 합니다. + +> [!NOTE] +> 일반적으로는 기능, 지침 업데이트, 스킬 업데이트, QA 에이전트를 몇 개의 별도 PR로 나눕니다. 워크숍을 간소화하기 위해 전체 필터링과 품질 워크플로를 하나의 세션과 브랜치에서 유지하고 이 PR에 모두 포함합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- Agent Merge의 개념과 병합 수명 주기를 자동화하는 방식을 알아봅니다. +- 전체 기능 PR과 검증 근거를 살펴봅니다. +- 검토한 후에만 Agent Merge를 승인하고 PR 병합을 확인합니다. + +## 시나리오 + +필터링 워크플로 전체에서 Copilot으로 기능을 계획하고 구현하고 검증했습니다. 이제 Tailspin Toys는 병합 권한을 개발자가 계속 제어하면서 남은 PR 작업을 자동화하려고 합니다. + +## Agent Merge 소개 + +**Agent Merge**는 Copilot app을 통해 끌어오기 요청을 병합하는 마지막 단계를 자동화합니다. 활성화하면 앱의 세션이 끌어오기 요청을 읽고, 실패한 CI 검사 수정, 검토 의견 대응, 필요할 때 리베이스 수행 등 병합을 차단하는 문제를 해결한 다음 GitHub에서 허용하는 즉시 병합합니다. 백그라운드에서 실행되고 앱을 다시 시작해도 계속 작동하며 끌어오기 요청이 병합되면 자동으로 꺼집니다. + +지금까지는 직접 **Merge pull request**를 선택했습니다. Agent Merge가 이 책임을 맡을 수 있지만 코드 편집과 병합에는 명시적 승인이 필요합니다. 병합 권한을 부여하기 전에 허용된 작업과 변경 내용을 검토합니다. + +## Agent Merge로 PR 관리 + +코드 작성과 검토를 마쳤으므로 Agent Merge가 PR 프로세스를 관리하도록 합니다. + +1. 에이전트 선택기에서 **Default agent**를 선택합니다. +2. **Create PR** 옆의 드롭다운을 선택합니다. +3. **Agent merge**를 선택합니다. 버튼이 **Agent merge**로 바뀝니다. +4. **Agent merge**를 선택하여 Agent Merge 프로세스를 시작합니다. + +Agent Merge 프로세스가 시작되면 다음 작업을 수행합니다. + +- 제목과 설명이 있는 끌어오기 요청을 만듭니다. +- 이슈에서 세션을 시작했다면 설명 본문에서 관련 이슈를 참조합니다. +- 대상 브랜치와의 잠재적 병합 충돌을 리베이스하거나 처리합니다. +- 모든 검사가 통과하도록 CI 프로세스를 모니터링합니다. +- 다른 개발자나 Copilot 코드 검토의 피드백이 있는지 PR을 모니터링하고 의견을 해결하도록 업데이트합니다. +- 선택적으로 모든 작업이 성공하면 PR을 자동으로 병합할 수 있습니다. + +모든 검사가 통과하면 Agent Merge가 PR도 병합하도록 합니다. + +5. **Agent merge** 옆의 드롭다운을 선택합니다. +6. **Merge pull request** 옆에 체크 표시가 있는지 확인합니다. + +> [!IMPORTANT] +> Agent Merge는 리포지토리 보호나 누락된 권한을 우회하지 않습니다. 계속하기 전에 이러한 차단 요인을 해결합니다. + +## 요약 및 다음 단계 + +코드 생성, 코드 테스트와 검증, 끌어오기 요청 프로세스를 포함한 개발 프로세스의 여러 부분을 자동화했습니다. 다음 작업을 수행했습니다. + +- Agent Merge의 개념과 병합 수명 주기를 자동화하는 방식을 배웠습니다. +- 전체 기능 PR과 검증 근거를 살펴봤습니다. +- 검토한 후에만 Agent Merge를 승인하고 PR이 병합되었는지 확인했습니다. + +다음으로 에이전트와 함께 작업을 계획하고 시각화하는 더 풍부한 방법인 **캔버스**를 살펴봅니다. [레슨 9 - 캔버스 살펴보기 및 만들기][next-lesson]를 계속 진행합니다. + +## 리소스 + +- [GitHub Copilot app으로 이슈 및 끌어오기 요청 관리][managing-issues-prs] +- [GitHub Copilot app 정보][about-copilot-app] + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/9-canvases/ +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md new file mode 100644 index 000000000..24484d759 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md @@ -0,0 +1,151 @@ +--- +title: "프로젝트와 모델 준비" +description: "Tailspin 카탈로그를 내보내고, Foundry 프로젝트와 모델 배포를 만든 다음 Canvas에서 검증합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/ + label: "선택 사항: Foundry 통합" +next: + link: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: 에이전트 빌드 및 배포 +--- + +첫 번째 모듈에서는 Backer Concierge에 필요한 데이터와 Azure 리소스를 준비합니다. 아직 에이전트 코드나 호스팅 배포는 필요하지 않습니다. + +이 모듈을 마치면 다음을 갖추게 됩니다. + +- 그라운딩(Grounding)에 사용할 수 있는 정보의 한계를 명시한 카탈로그 내보내기 파일 +- 기능 요구 사항에 맞게 선택한 Foundry 프로젝트와 모델 배포 +- Canvas에서 검증한 배포와 카탈로그 범위 내에서 수행한 간단한 모델 스모크 테스트(Smoke test) 결과 + +## 시나리오 + +Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링할 수 있지만, *Git 말장난을 좋아하는 사람에게는 어떤 게임이 어울립니까?* 같은 질문에는 드롭다운만으로 답할 수 없습니다. Backer Concierge는 Tailspin 카탈로그에 있는 게임만 추천해야 하며 게임, 퍼블리셔, 평점, 펀딩 총액, 후원자 수, 가격, 플레이어 수, 플레이 시간, 출시일을 지어내서는 안 됩니다. 신뢰할 수 있는 카탈로그와 적합한 모델이 이러한 답변의 기반이 됩니다. + +## 도구와 이슈 세션 준비 + +모든 기능 작업을 한곳에서 진행할 수 있도록 GitHub Copilot app을 Azure에 연결합니다. + +1. Azure 구독이 있는지 확인합니다. 구독이 필요하다면 [$200 크레딧이 제공되는 무료 Azure 구독][azure-free] 또는 [$100 크레딧이 제공되는 Azure for Students][azure-students]를 사용할 수 있습니다. +2. 운영 체제에 맞는 [Azure CLI][install-azure-cli]를 설치한 다음 `az version`으로 설치를 확인합니다. +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/learning-hub/copilot-workshops/app-8-install-foundry-plugin.png) + +5. **Customize**에서 **Plugins**를 선택하고 `azure`를 검색하거나 **Featured** 목록에서 선택한 다음, Azure 플러그인의 **Install**을 선택합니다. +6. 사이드바에서 **Issues**를 선택한 다음 Tailspin Toys 리포지토리의 **Add a Backer Concierge assistant for catalog questions** 이슈를 찾아 엽니다. **New session**을 선택하여 새 워크트리(Worktree)에서 이슈에 연결된 세션을 시작합니다. 세 모듈 모두에서 이 리포지토리, 워크트리 브랜치, 이슈 세션을 유지합니다. +7. `/microsoft-foundry`를 입력한 다음 `/azure`를 입력하여 두 스킬이 모두 설치되어 사용할 수 있는지 확인합니다. 아직 프롬프트를 보내지는 않습니다. 플러그인이 바로 나타나지 않으면 앱을 다시 시작하고 동일한 이슈 세션으로 돌아와 다시 확인합니다. + +## 카탈로그 내보내기 파일 생성 + +샘플 리포지토리에는 에이전트가 읽을 수 있는 파일을 생성하는 내보내기 스크립트가 포함되어 있습니다. + +8. 이슈에 연결된 이 워크트리 세션의 프롬프트 상자에서 기본 `/fix-issue` 프롬프트를 다음으로 바꿉니다. + + ```plaintext + Install the project dependencies, seed the database, then run the existing db:export script. Show me the command output and summarize the shape and grounding limits of db/catalog.json. + ``` + +9. 명령 출력을 검토합니다. Copilot은 다음과 같은 명령을 실행해야 합니다. + + ```bash + npm install + npm run db:setup + npm run db:export + ``` + + ![카탈로그 내보내기 파일 생성](/images/learning-hub/copilot-workshops/app-8-generate-catalog-export.png) + +10. `db/catalog.json`을 열고 제목, 설명, 카테고리, 퍼블리셔, 별점을 포함한 게임 21개가 있는지 확인합니다. `note` 필드를 확인합니다. 카탈로그에는 펀딩 총액, 후원자 수, 후원 등급, 출시일이 없습니다. 가격, 플레이어 수, 플레이 시간도 누락되어 있다면 외부 지식으로 채우지 말고 제공되지 않는 정보로 취급합니다. 내보내기가 실패하거나 내용이 다르면 계속하기 전에 Copilot에 원인을 조사하고 다시 실행하도록 요청합니다. + + ![Copilot app에서 연 카탈로그 내보내기 파일](/images/learning-hub/copilot-workshops/app-8-view-catalog.png) + +## Foundry 프로젝트와 모델 설정 + +먼저 채팅에서 프로젝트와 배포를 만들면 Canvas는 이미 존재하는 리소스에만 연결합니다. + +11. **+**를 선택하고 **Terminal**을 선택한 다음 Azure에 로그인합니다. + + ```bash + az login + ``` + +12. 선택한 구독을 확인하고 해당 리소스 그룹을 나열합니다. + + ```bash + az account show --output table + az group list --output table + ``` + + 구독이 올바르지 않다면 `az account set --subscription `를 실행한 다음 두 명령을 다시 실행합니다. + + `rg-tailspin-toys`가 표시되면 해당 리소스를 검사합니다. + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + 관련 없는 리소스나 공유 리소스가 포함되어 있다면 중단하고 전용 이름을 정한 후에 다음 프롬프트를 사용합니다. 이후 모든 프롬프트와 명령의 예시 이름을 승인한 이름으로 바꿉니다. +13. 동일한 이슈 세션에서 다음을 입력합니다. + + ```plaintext + Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. + ``` + + ![Foundry 프로젝트 생성](/images/learning-hub/copilot-workshops/app-8-foundry-project-created.png) + +14. Copilot에 모델을 추천하도록 요청합니다. 이슈에서 시작한 세션이므로 이슈의 승인 기준이 이미 컨텍스트에 포함되어 있습니다. + + ```plaintext + Use the Microsoft Foundry skill to recommend two or three current chat models in the tailspin-toys project that meet this issue's acceptance criteria. Explain the tradeoffs and wait for me to choose. + ``` + +15. Copilot이 `microsoft-foundry` 스킬을 로드하는지 확인한 다음, 장단점을 고려하여 사용 가능한 모델을 선택합니다. Microsoft Foundry 호스팅 에이전트 빠른 시작에서는 현재 `gpt-5.4-mini`를 사용하지만, 가용성과 할당량은 지역에 따라 다릅니다. + + ![모델 선택](/images/learning-hub/copilot-workshops/app-8-select-model.png) + +16. Copilot에 선택한 모델을 배포하도록 요청하고, 승인하기 전에 대상 프로젝트와 비용을 검토합니다. + + ```plaintext + Deploy the model I selected to the tailspin-toys Foundry project, using the model name as the deployment name. + ``` + +> [!TIP] +> 모델 가용성은 시간이 지나면서 달라집니다. 이 모듈에 고정된 모델보다는 Copilot이 프로젝트에서 사용할 수 있다고 확인한 모델을 선택하는 것이 적절합니다. + +## Canvas에서 모델 검증 및 스모크 테스트 + +에이전트 코드를 작성하기 전에 프로젝트와 모델을 확인합니다. 모델 스모크 테스트는 모듈 2의 호스팅 에이전트 그라운딩 테스트를 대체하지 않습니다. + +17. **+**, **Canvas**, **Microsoft Foundry (Preview)**를 차례로 선택합니다. +18. Canvas 오른쪽 위의 **More options** 메뉴를 연 다음 **Sign in**을 선택합니다. +19. **tailspin-toys** Foundry 프로젝트를 선택합니다. **Models**를 펼치고 배포가 예상한 이름과 상태로 표시되는지 확인합니다. + + ![Canvas에서 프로젝트와 모델 검증](/images/learning-hub/copilot-workshops/app-8-validate-project-model.png) + +20. 동일한 세션에 다음 프롬프트를 입력합니다. + + ```plaintext + Microsoft Foundry 스킬을 사용하여 에이전트를 만들지 않고 tailspin-toys 프로젝트에 배포한 모델을 직접 테스트합니다. @db/catalog.json의 콘텐츠를 근거로 "버그를 추적하는 퍼즐 게임을 좋아합니다. 어떤 게임을 후원해야 하며, 얼마나 많은 자금을 모았나요?"라고 질문합니다. 응답과 사용한 토큰 수, 응답 시간 등의 유용한 메타데이터를 확인할 수 있는 경우에만 표시합니다. 기존 Azure 로그인을 사용합니다. 자격 증명을 표시하거나 파일을 변경하거나 리소스를 만들지 않습니다. + ``` + +21. 응답을 검토합니다. `db/catalog.json`에 실제로 있는 게임만 추천하고 올바른 제목, 퍼블리셔, 평점을 사용하며 자금 조달 정보가 없다고 설명해야 합니다. 모델이 게임, 카탈로그 세부 정보 또는 자금 조달 금액을 지어내면 계속하기 전에 다른 추천 모델과 비교합니다. + +> [!NOTE] +> Canvas는 다시 열어도 선택한 프로젝트를 기억합니다. Canvas의 단계는 기본 구조를 생성하는 **Create new hosted agents**, 모델, 도구 상자, 스킬, 가드레일(Guardrail)을 연결하는 **Build current hosted agent**, 로컬 실행과 Microsoft Foundry 배포를 수행하는 **Deploy and test**로 구성됩니다. + +## 체크포인트 및 다음 단계 + +Azure 도구를 준비하고 카탈로그를 내보낸 다음 배포된 모델이 Backer Concierge의 그라운딩 규칙을 따르는지 테스트했습니다. 이 모듈의 체크포인트는 누락된 정보를 지어내지 않고 실제 카탈로그 게임을 추천하는 모델입니다. + +다음에는 동일한 Tailspin Toys 리포지토리, 워크트리 브랜치, 이슈에 연결된 세션, Foundry 프로젝트, 선택한 모델 배포를 사용하여 [에이전트를 빌드하고 배포합니다][next-module]. 여기서 중단한다면 지속적인 비용을 방지하도록 [Azure 리소스를 정리합니다][cleanup]. + +[azure-free]: https://azure.microsoft.com/pricing/purchase-options/azure-account +[azure-students]: https://azure.microsoft.com/free/students +[install-azure-cli]: https://learn.microsoft.com/cli/azure/install-azure-cli +[install-azd]: https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd +[next-module]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[cleanup]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/#%EB%A6%AC%EC%86%8C%EC%8A%A4-%EC%A0%95%EB%A6%AC diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md new file mode 100644 index 000000000..dde97c571 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md @@ -0,0 +1,160 @@ +--- +title: "에이전트 빌드 및 배포" +description: "Canvas에서 Backer Concierge의 기본 구조를 생성하고 로컬에서 검사한 다음, Foundry에 배포하고 다시 테스트합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: 프로젝트와 모델 준비 +next: + link: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + label: 에이전트를 사이트에 연결 +--- + +이 모듈에서는 [프로젝트와 모델 준비][previous-module]에서 마련한 프로젝트, 모델 배포, 카탈로그를 사용하여 Microsoft Foundry Canvas로 호스팅 Backer Concierge를 구축합니다. + +이 모듈을 마치면 다음을 갖추게 됩니다. + +- 패키징한 카탈로그 데이터와 집중 테스트를 포함하는 에이전트 기본 구조 +- 카탈로그 및 대화의 각 승인 기준에 대한 로컬 검증 증거 +- 배포 후 Foundry에서 다시 테스트한 에이전트 버전 + +## 시나리오 + +Tailspin Toys에는 실제 카탈로그 질문에 답하고, 정보가 없으면 이를 인정하며, 대화에서 다룬 게임을 기억하는 도우미가 필요합니다. 이 서비스는 상점 사이트의 일부가 되기 전에 신뢰성을 입증해야 합니다. + +## 배포 도구 준비 + +호스팅 에이전트를 검사하고 배포할 때는 Canvas를 통해 Azure Developer CLI를 사용하며, 기존 Foundry 프로젝트와 모델을 재사용합니다. + +1. 모듈 1의 **Add a Backer Concierge assistant for catalog questions** 이슈에 연결된 동일한 세션을 다시 시작합니다. `db/catalog.json`이 그대로 있고 올바른 구독과 Foundry 프로젝트에 연결되어 있으며 모델 배포가 유지되는지 확인합니다. 리소스를 정리했다면 먼저 관련 [프로젝트와 모델 설정][previous-module]을 다시 수행합니다. + +2. **+**를 선택하고 **Terminal**을 선택한 다음 Azure Developer CLI에 로그인합니다. 메시지가 표시되면 브라우저에서 인증을 완료합니다. + + ```bash + azd auth login + ``` + +3. `azd config show`를 실행하여 Azure 구독을 확인합니다. 비어 있거나 올바르지 않으면 `azd config set defaults.subscription `로 업데이트한 후 `azd config show`를 다시 실행하여 변경 내용을 확인합니다. +## Backer Concierge 기본 구조 생성 + +Canvas는 Backer Concierge를 기존 모델 배포에 연결하는 코드, 폴더 구조, 루트 `azure.yaml`을 생성합니다. + +4. **Create new hosted agents** 미리 보기에서 다음을 입력합니다. + + ```plaintext + Scaffold a hosted agent named Backer Concierge in agent/backer-concierge, connected to the tailspin-toys project and the model deployment I just confirmed. Use Microsoft Agent Framework with the Responses API. Ground it in db/catalog.json and ensure it meets the acceptance criteria in this issue. Keep a single azure.yaml at the repository root with the hosted-agent service pointing to agent/backer-concierge. Make sure the deployed agent includes the catalog data it needs, and add focused tests. + ``` + + Canvas는 프롬프트와 현재 구독 및 Foundry 프로젝트 컨텍스트를 Copilot에 전달합니다. Agent Framework + Responses API 샘플을 검색하며, **Agent with Local Tools (Responses, Agent Framework, Python)** 같은 선택 항목이 나타날 수 있습니다. + + ![Canvas에서 Backer Concierge 에이전트 기본 구조 생성](/images/learning-hub/copilot-workshops/app-8-scaffold-backer-concierge.png) + +5. **Files** 탭에서 다음 체크포인트를 기준으로 Copilot의 변경 내용을 검토합니다. `src` 안에 생성된 파일 이름은 다를 수 있지만 프로젝트 경계와 `azure.yaml` 위치는 일치해야 합니다. + + - 에이전트는 `agent/backer-concierge`에 있습니다. + - 리포지토리 루트의 단일 `azure.yaml`에 `host: azure.ai.agent`를 사용하는 서비스가 포함되어 있습니다. + - 배포 가능한 에이전트에 자체적으로 생성한 카탈로그 복사본이 포함되어 있습니다. + - 집중 테스트가 카탈로그 그라운딩(Grounding) 요구 사항을 검증합니다. + - 자격 증명이나 로컬 환경 파일이 포함되어 있지 않습니다. + + ```text + tailspin-toys/ + ├── azure.yaml + ├── agent/ + │ └── backer-concierge/ + │ └── requirements.txt + ├── db/ + │ └── catalog.json + └── src/ + ``` + +6. **Deploy and test**로 진행하기 전에 Copilot에 집중 테스트를 실행하고 실패한 부분을 수정하도록 요청합니다. + +## 로컬에서 에이전트 검사 + +**Inspect Locally**는 Copilot 통합 터미널에서 `azd ai agent run`을 실행하고 호스팅 에이전트가 시작될 때까지 기다린 다음, 내장 Agent Inspector를 엽니다. + +7. **Deploy and test**에서 **Inspect Locally**를 선택하고 Agent Inspector가 열릴 때까지 기다립니다. + +> [!NOTE] +> 처음 로컬에서 실행할 때는 `azd`가 환경을 만들고 종속성을 설치하므로 몇 분 정도 걸릴 수 있습니다. + +8. 검사 도구가 연결되지 않으면 다른 프로세스가 필요한 포트를 사용하고 있지 않은지 확인하고 오류를 Copilot에 전달한 다음, 문제를 수정한 후 다시 시도합니다. +9. Agent Inspector에서 **카탈로그에 근거한 추천**을 테스트합니다. + + ```text + I love puzzle games about tracking down bugs. What should I back? + ``` + + 예상 결과: 카탈로그에 실제로 존재하는 게임만 언급하고 각 게임에 대해 올바른 정보를 사용합니다. + + ![Agent Inspector에서 카탈로그에 근거한 추천](/images/learning-hub/copilot-workshops/app-8-grounded-recommendation.png) + +10. **환각(Hallucination) 유도 질문**을 테스트합니다. + + ```text + How much has Pipeline Conquest raised so far, and how many backers does it have? + ``` + + 예상 결과: 카탈로그에는 펀딩이나 후원자 정보가 없음을 설명하고, 대신 카탈로그에 있는 정보를 제공합니다. + +11. **카탈로그 외 게임 요청에 대한 대응**을 테스트합니다. + + ```text + Do you have Wingspan? If not, what's the closest thing you've got? + ``` + + 예상 결과: 카탈로그에 Wingspan이 없다고 밝히고, 외부 지식으로 이 게임을 설명하지 않으며, 실제 Tailspin 게임을 안내합니다. + +12. **모호한 요청**을 테스트합니다. + + ```text + Recommend me something good. + ``` + + 예상 결과: 짧은 확인 질문을 하나 하고 아직 게임을 추천하지 않습니다. + +13. **순위 정확성**을 테스트합니다. + + ```text + What are your three highest rated games? + ``` + + 예상 결과: 카탈로그에서 평점이 가장 높은 게임 세 개를 올바른 순서와 평점으로 반환합니다. + +14. 동일한 대화에서 다음 프롬프트를 보내 **대화 연속성**을 테스트합니다. + + ```text + Show me two highly rated strategy games. + ``` + + ```text + Which of those has the higher rating? + ``` + + 예상 결과: 두 번째 응답은 첫 번째 응답의 두 게임만 언급하고 카탈로그 평점을 올바르게 비교합니다. + +15. 모든 응답을 `db/catalog.json` 및 이슈의 승인 기준과 비교합니다. 에이전트가 게임, 퍼블리셔, 평점, 펀딩 총액, 후원자 수, 가격, 플레이어 수, 플레이 시간, 출시일을 절대 지어내지 않는지 확인합니다. Agent Inspector가 오류를 보고하거나 응답이 그라운딩 범위를 벗어나면 결과를 Canvas 프롬프트 영역에 복사하고 Copilot에 수정하도록 요청합니다. 변경할 때마다 로컬 검사를 다시 시작하고 실패한 테스트를 다시 실행한 다음, 배포하기 전에 여섯 가지 검사를 모두 통과하는지 확인합니다. + +## 호스팅 에이전트 배포 및 재테스트 + +Canvas는 `azd`로 테스트를 마친 에이전트를 배포합니다. Foundry는 서비스 소스를 패키징하고 종속성을 해결한 다음 원격으로 빌드하여 Microsoft Foundry에 게시합니다. + +16. Canvas의 **Deploy and test**에서 **Deploy to Foundry**를 선택합니다. 채팅에 삽입된 프롬프트를 검토합니다. + + ![Canvas의 Deploy to Foundry 프롬프트](/images/learning-hub/copilot-workshops/app-8-deploy-to-foundry.png) + +17. 배포 확인 메시지, 에이전트 버전, 상태, Foundry 에이전트 플레이그라운드(Playground) 링크를 확인합니다. 배포에 실패하면 오류를 Copilot에 전달하고 동일한 프로젝트에서 문제를 해결한 다음 Canvas를 통해 다시 시도합니다. +18. Canvas에서 **Test in Foundry Portal**을 선택하여 배포된 에이전트 플레이그라운드를 엽니다. 이 배포 버전에 대해 9~14단계의 승인 검사 여섯 가지를 모두 다시 실행합니다. 연속성을 확인하는 두 프롬프트는 하나의 대화에서 유지합니다. 응답을 카탈로그와 비교합니다. 실패한 검사가 있으면 Copilot에 수정하도록 요청하고 로컬 테스트를 다시 실행한 다음, Canvas로 다시 배포하고 호스팅 버전을 다시 테스트합니다. + +## 체크포인트 및 다음 단계 + +Backer Concierge의 기본 구조를 생성하고 카탈로그 그라운딩과 대화 동작을 로컬에서 테스트한 다음 Microsoft Foundry에 배포하고 호스팅 버전을 다시 테스트했습니다. 이 모듈의 체크포인트는 누락된 정보를 지어내지 않고 여섯 가지 승인 검사를 모두 통과하는 호스팅 에이전트입니다. + +다음에는 동일한 Tailspin Toys 리포지토리, 워크트리 브랜치, 이슈에 연결된 세션, Foundry 프로젝트, 선택한 모델 배포, 호스팅 에이전트를 사용하여 [에이전트를 사이트에 연결합니다][next-module]. 여기서 중단한다면 지속적인 비용을 방지하도록 [Azure 리소스를 정리합니다][cleanup]. + +[previous-module]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[next-module]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[cleanup]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/#%EB%A6%AC%EC%86%8C%EC%8A%A4-%EC%A0%95%EB%A6%AC diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md new file mode 100644 index 000000000..a863dddb6 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md @@ -0,0 +1,90 @@ +--- +title: "에이전트를 사이트에 연결" +description: "자격 증명을 안전하게 보호하는 로컬 프록시로 호스팅 Backer Concierge를 통합하고 위젯을 엔드투엔드로 테스트합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: 에이전트 빌드 및 배포 +next: { link: /ko-kr/learning-hub/copilot-workshops/app/10-review/, label: 검토 및 다음 단계 } +--- + +마지막 모듈에서는 [에이전트 빌드 및 배포][previous-module]에서 테스트한 호스팅 에이전트를 로컬에서 실행하는 Tailspin Toys 웹사이트에 연결합니다. + +이 모듈을 마치면 다음을 갖추게 됩니다. + +- Foundry 자격 증명과 대화 식별자를 보호하는 로컬 Azure Functions 프록시(Proxy) +- 엔드투엔드(End-to-end) 동작을 검증한 접근성 있는 채팅 위젯 +- 로컬에서 검증한 통합과 리소스 정리 체크포인트 + +## 시나리오 + +Tailspin Toys 후원자는 게임을 둘러보는 곳에서 카탈로그 관련 안내를 받아야 합니다. Backer Concierge는 대화를 유지하고 키보드 탐색을 지원하며, 제공되지 않는 정보와 오류를 명확하게 처리해야 합니다. 이러한 편의성을 제공하더라도 서비스 자격 증명이나 내부 대화 세부 정보를 브라우저에 노출해서는 안 됩니다. + +## 호스팅 에이전트 체크포인트에서 재개 + +통합할 때는 새 Foundry 리소스를 만드는 대신 기존 호스팅 에이전트를 사용합니다. + +1. 이전 모듈의 동일한 Tailspin Toys 리포지토리, 워크트리(Worktree) 브랜치, **Add a Backer Concierge assistant for catalog questions** 이슈 세션으로 돌아갑니다. 루트 `azure.yaml`, 에이전트 소스, 카탈로그가 있는지 확인하고, 기록해 둔 구독, 전용 리소스 그룹, Foundry 프로젝트, 모델 배포, 테스트한 호스팅 에이전트 버전을 확인합니다. +2. 리소스를 정리했다면 통합하기 전에 관련 [프로젝트와 모델][project-module] 및 [테스트한 호스팅 배포][previous-module]를 복원합니다. + +## 서버 측 프록시 빌드 + +Tailspin Toys는 전체를 사전 렌더링합니다. 브라우저 코드는 호스팅 에이전트를 직접 호출하거나 Foundry 자격 증명을 받아서는 절대 안 됩니다. 로컬 Azure Functions의 **서버 측 자격 증명 경계**에서 Foundry 인증을 처리하고 브라우저에는 에이전트 응답만 반환합니다. 브라우저는 각 메시지를 불투명한 대화 핸들(Opaque conversation handle)과 함께 전송합니다. 프록시는 내부 식별자를 노출하지 않고 해당 핸들을 Foundry 대화에 매핑합니다. + +Azure 자격 증명에 액세스할 수 있는 코드는 프록시뿐입니다. 이 워크숍에서는 Function과 사이트를 로컬에서 실행하며, Astro 개발 서버가 `/api` 요청을 Function으로 전달합니다. + +> [!IMPORTANT] +> 이 워크숍 프록시는 로컬 개발 전용입니다. 익명 공개 엔드포인트로 배포해서는 안 됩니다. 프로덕션 통합에는 적절한 속도 제한 또는 할당량, CORS 제한, 모니터링, 비용 제어를 포함하여 애플리케이션에 맞게 설계한 인증 및 악용 방지 방안이 필요합니다. + +3. 동일한 Copilot 세션에서 다음을 입력합니다. + + ```plaintext + Add a local Azure Functions proxy in api for the static Astro site to call my deployed Backer Concierge during development. Use my existing local Azure sign-in, keep credentials and Foundry conversation identifiers out of the browser, return an opaque conversation handle, validate requests, sanitize errors, and add focused tests. Configure the Astro development server so /api requests reach the local Function. Don't create public deployment infrastructure. + ``` + +4. 생성된 프록시와 집중 테스트를 검토하여 요청 유효성 검사, 민감한 정보를 제거한 오류, 불투명한 대화 핸들, 서버 전용 자격 증명 경계를 확인합니다. Copilot에 집중 테스트를 실행하고 실패한 부분을 수정하도록 요청합니다. +5. 다른 터미널을 열고 Copilot이 제공한 명령으로 로컬 Function을 시작한 다음 실행 상태로 둡니다. +6. 채팅으로 돌아가 Copilot에 로컬 프록시를 테스트하도록 요청합니다. + + ```plaintext + Test the local /api/concierge endpoint by asking "Which games are under $30?" Show me the sanitized response and confirm that no credentials or internal conversation identifiers are returned. + ``` + +7. 응답을 검사합니다. 카탈로그에 가격 정보가 없음을 설명해야 합니다. Foundry 토큰, 자격 증명, 내부 대화 식별자, 프로젝트 엔드포인트, 스택 추적이 포함되어 있지 않은지 확인합니다. Function에 연결할 수 없거나 응답이 세부 정보를 유출하거나 가격을 지어내면, 민감한 정보를 제거한 실패 내용을 Copilot에 전달하고 수정한 다음, 계속하기 전에 프록시 테스트를 다시 실행합니다. + + ![로컬 프록시 테스트](/images/learning-hub/copilot-workshops/app-8-local-proxy-test.png) + +## 채팅 위젯 빌드 및 테스트 + +프록시가 실행 중인 상태에서 위젯은 Foundry 세부 정보를 노출하지 않고 사이트에 대화 화면을 제공합니다. + +8. Copilot에 사이트 통합을 구현하도록 요청합니다. + + ```plaintext + 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, keep Foundry details out of the browser, and add end-to-end tests covering the chat flow, conversation continuity, accessibility, error handling, and grounding boundaries. + ``` + +9. 다른 터미널에서 Copilot이 제공한 명령으로 Astro 개발 서버를 시작합니다. 사이트와 로컬 Function을 모두 실행 상태로 유지합니다. +10. Copilot에 엔드투엔드 테스트를 실행하도록 요청합니다. + + ```plaintext + Run the end-to-end tests for the Backer Concierge widget in the 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. + ``` + +11. 보고서를 검토하고 키보드 사용과 [호스팅 에이전트 승인 검사][agent-checks]의 두 턴 대화를 포함하여 보고된 동작을 브라우저에서 검증합니다. 브라우저 요청이 Foundry로 직접 전송되지 않고 불투명한 핸들과 함께 `/api/concierge`를 거치는지, 응답에 자격 증명이나 내부 Foundry 식별자가 노출되지 않는지 확인합니다. 추천과 누락된 정보에 대한 답변이 카탈로그 범위 안에 머무르는지 확인합니다. 실패한 테스트를 Copilot과 함께 해결하고 필요한 경우 영향을 받는 로컬 서비스를 다시 시작한 다음 테스트를 다시 실행합니다. + + ![Backer Concierge 위젯의 엔드투엔드 테스트 결과](/images/learning-hub/copilot-workshops/app-8-e2e-test-results.png) + +## 체크포인트 및 다음 단계 + +자격 증명을 안전하게 보호하는 로컬 프록시를 빌드하고 접근성 있는 채팅 위젯을 연결한 다음, 호스팅 Backer Concierge를 대상으로 전체 대화 흐름을 검증했습니다. 이 모듈의 체크포인트는 카탈로그 범위를 유지하고 자격 증명과 내부 Foundry 식별자를 브라우저에 노출하지 않는, 로컬에서 테스트한 웹사이트 통합입니다. 프록시나 사이트를 프로덕션에 배포한 것은 아닙니다. + +실험을 마치면 두 로컬 서비스를 모두 중지하고 [Azure 리소스를 정리합니다][cleanup]. 그런 다음 핵심 워크숍 경로의 [검토 및 다음 단계][core-review]로 계속 진행합니다. + +[previous-module]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[project-module]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[agent-checks]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/#%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8-%EA%B2%80%EC%82%AC +[cleanup]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/#%EB%A6%AC%EC%86%8C%EC%8A%A4-%EC%A0%95%EB%A6%AC +[core-review]: /ko-kr/learning-hub/copilot-workshops/app/10-review/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md new file mode 100644 index 000000000..14cb8b24a --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md @@ -0,0 +1,89 @@ +--- +title: "선택 사항: Foundry 통합" +description: "Microsoft Foundry Canvas로 카탈로그에 근거한 Backer Concierge를 구축하고, 각 단계에서 안전하게 작업을 마치는 방법을 알아봅니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: { link: /ko-kr/learning-hub/copilot-workshops/app/10-review/, label: 검토 및 다음 단계 } +next: + link: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: 프로젝트와 모델 준비 +tags: + - workshop +--- + +이 선택 실습 과정에서는 GitHub Copilot app의 Microsoft Foundry Canvas를 사용하여 Tailspin Toys에 **Backer Concierge**를 추가합니다. 카탈로그에 근거한 모델 실험으로 시작하여 호스팅 에이전트를 구축한 다음 로컬 웹사이트에 통합합니다. + +## 실습 과정 + +각 모듈은 체크포인트와 안전하게 작업을 마칠 수 있는 지점으로 끝납니다. 전체 과정에서 동일한 Tailspin Toys 리포지토리, 워크트리(Worktree) 브랜치, 이슈에 연결된 세션, Foundry 프로젝트, 모델 배포를 계속 사용합니다. + +- [프로젝트와 모델 준비][module-1]에서는 카탈로그 정보의 범위를 정하고, 프로젝트와 모델 배포를 만든 다음 Canvas에서 확인합니다. +- [에이전트 빌드 및 배포][module-2]에서는 Backer Concierge의 기본 구조를 생성하고 로컬에서 테스트한 다음, 호스팅 에이전트를 배포하고 다시 테스트합니다. +- [에이전트를 사이트에 연결][module-3]에서는 자격 증명을 안전하게 보호하는 로컬 프록시, 접근성을 갖춘 채팅 위젯, 엔드투엔드(End-to-end) 테스트를 추가합니다. + +> [!IMPORTANT] +> Microsoft Foundry Canvas와 호스팅 에이전트는 공개 미리 보기 상태입니다. +> +> 이 과정에서는 모델 배포와 모듈 2부터 사용하는 호스팅 에이전트 등 요금이 발생하는 Azure 리소스를 만듭니다. 리소스를 만들기 전에 구독, 지역, 할당량, 예상 비용을 승인해야 합니다. 프로젝트와 모델까지만 준비하고 중단하더라도 리소스를 정리해야 합니다. + +1. [프로젝트와 모델 준비][module-1]부터 시작합니다. 이 워크숍 콘텐츠 리포지토리가 아니라 Tailspin Toys 리포지토리에서 작업합니다. +2. 핵심 워크숍을 마치려면 [검토 및 다음 단계][core-review]로 이동합니다. + +## 리소스 정리 + +어느 체크포인트에서 실험을 마치든 원치 않는 비용을 방지하려면 Azure 리소스를 삭제합니다. 정리하면 이후 모듈에 필요한 리소스도 삭제되므로 나중에 계속하려면 다시 만들어야 합니다. + +> [!WARNING] +> `rg-tailspin-toys`가 이 실습 전용이고 유지해야 하는 리소스를 포함하지 않는 경우에만 삭제합니다. 공유 리소스 그룹을 삭제하면 관련 없는 리소스도 삭제됩니다. +> +> 모듈 1에서 다른 리소스 그룹 이름을 승인했다면 아래 모든 명령에서 `rg-tailspin-toys`를 해당 이름으로 바꿉니다. + +1. 시작한 로컬 Agent Inspector, Azure Function 또는 Astro 개발 서버를 각각의 터미널에서 중지합니다. +2. 모듈 2 또는 3에서 호스팅 에이전트를 배포했다면 동일한 Tailspin Toys 워크트리에서 터미널을 열고 같은 `azd` 환경을 사용하여 다음 명령을 실행합니다. + + ```bash + azd down --purge + ``` + +3. 선택된 구독과 워크숍 리소스 그룹이 아직 존재하는지 확인합니다. + + ```bash + az account show --output table + az group exists --name rg-tailspin-toys + ``` + + 명령이 `false`를 반환하면 정리가 완료된 것입니다. `true`를 반환하면 그룹의 리소스를 검사합니다. + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + 남아 있는 모든 리소스가 이 실습에 속하는지 확인합니다. 모듈 1 이후에 중단했다면 `azd` 서비스를 배포하지 않았더라도 Foundry 프로젝트와 모델을 정리해야 합니다. +4. 전용 워크숍 리소스 그룹이 남아 있고 삭제할 리소스만 포함되어 있다면 다음 명령을 실행합니다. + + ```bash + az group delete --name rg-tailspin-toys --yes --no-wait + ``` + +5. `--no-wait` 명령은 삭제가 완료되기 전에 반환되므로 다음 명령이 `false`를 반환할 때까지 다시 실행합니다. + + ```bash + az group exists --name rg-tailspin-toys + ``` + +## 리소스 + +Microsoft 문서에서는 Canvas, 호스팅 배포, 관련 권한을 설명합니다. + +- [Microsoft Foundry Canvas란?][foundry-canvas] +- [Foundry Canvas로 첫 번째 호스팅 에이전트 배포][hosted-agent-quickstart] +- [호스팅 에이전트 권한][hosted-agent-permissions] + +[module-1]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[module-2]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[module-3]: /ko-kr/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[core-review]: /ko-kr/learning-hub/copilot-workshops/app/10-review/ +[foundry-canvas]: https://learn.microsoft.com/azure/foundry/agents/concepts/foundry-canvas +[hosted-agent-quickstart]: https://learn.microsoft.com/azure/foundry/agents/quickstarts/quickstart-hosted-agent?pivots=canvas +[hosted-agent-permissions]: https://learn.microsoft.com/azure/foundry/agents/concepts/hosted-agent-permissions diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-review.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-review.md deleted file mode 100644 index 14fb8d89a..000000000 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/8-review.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: "Lesson 8 - 검토 및 다음 단계" -description: "GitHub Copilot app 실습 과정을 되짚어 보고, 반복 작업을 자동화하고, 다음에 살펴볼 내용을 알아봅니다." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -지난 여러 레슨에서 GitHub Copilot app으로 아이디어를 기능으로 만들고 병합하기까지 다음 작업을 수행했습니다. - -- 리포지토리를 연결하고 앱의 워크스페이스와 미리 생성된 백로그를 살펴봤습니다. -- 직접 작업과 이슈에서 세션을 시작하고 Plan 및 Autopilot 모드로 에이전트의 작업 방식을 제어했습니다. -- 사용자 지정 지침과 재사용 가능한 스킬로 에이전트를 안내했습니다. -- Playwright MCP 서버를 사용하여 실제 브라우저에서 작업을 테스트했습니다. -- 공유 캔버스에서 에이전트와 협업했습니다. -- github.com에서 직접 병합하는 단계부터 **Agent Merge**가 끌어오기 요청을 병합하는 단계까지 병합 자동화 수준을 높여 변경 내용을 제공했습니다. - -이제 반복 작업을 자동화하고 모범 사례를 살펴본 다음 앞으로 진행할 방향을 알아봅니다. - -## 반복 작업 자동화 - -앱은 **자동화**를 통해 일정에 따라 또는 요청 시 에이전트를 실행할 수 있습니다. 새 이슈 분류나 최근 활동 요약 같은 일상적인 작업에 유용합니다. 간단하고 비파괴적인 자동화를 하나 만듭니다. - -1. 사이드바에서 **Automations**를 선택한 다음 **New automation**을 선택합니다. -2. `Recap my recent work` 같은 이름을 지정합니다. -3. 트리거를 선택합니다. **Manual**은 요청 시 실행하고, **On a schedule**은 자동으로 실행하며, **When an issue is created**는 새 이슈에 반응합니다. 이 레슨에서는 **Manual**을 선택합니다. -4. 자동화가 내용을 변경할 수 없도록 다음과 같은 읽기 전용 프롬프트를 입력합니다. - - ```plaintext - Summarize the pull requests merged in this repository over the last week, and list any issues still open in the backlog. - ``` - -5. 프로젝트(Tailspin Toys 리포지토리)를 선택하고 자동화를 만듭니다. -6. 요청 시 실행하여 결과를 확인합니다. - -> [!TIP] -> 자동화는 로컬 또는 클라우드에서 실행할 수 있습니다. 일정에 따라 사용자 없이 실행하려면 **Run in the cloud**를 활성화하고 자동화에서 사용할 수 있는 **Tools**를 선택합니다. 출력 결과를 신뢰할 수 있을 때까지 예약 자동화의 범위를 제한하고 비파괴적으로 유지합니다. - -## 모범 사례 - -AI 도구를 사용할 때는 도구를 둘러싼 인프라가 결과의 품질을 좌우합니다. 이 워크숍에서는 지침 파일, 스킬, 사용자 지정 에이전트를 모두 사용했습니다. 이러한 항목에 투자하고 세션 간에 재사용합니다. - -작업에 맞는 **모드와 모델**을 선택합니다. 구축 전에 접근 방식을 검토하려면 **Plan**을 사용하고, 범위가 명확한 변경에서 계속 참여하려면 **Interactive**를 사용하며, 범위가 명확하고 격리된 작업에만 **Autopilot**을 사용합니다. 일상적인 편집에는 빠른 모델을 선택하고 복잡한 작업에는 추론 능력이 더 높은 모델을 선택합니다. - -컨텍스트는 인프라만큼 중요합니다. 만들려는 *항목*, 그 *이유*, 원하는 *방식*을 명확하게 설명하면 출력이 크게 달라집니다. 빠른 채팅은 아이디어를 전체 세션에 적용하기 전에 범위를 정하기에 적합합니다. - -## 더 살펴볼 내용 - -핵심 워크플로를 모두 살펴봤습니다. 다음 기능도 확인해 볼 만합니다. - -- 전체 세션이 필요 없는 빠른 일회성 질문을 위한 **Quick chats** -- 구축 전에 문제를 함께 검토하고 유용한 피드백을 받기 위한 **Rubber duck** -- 반복 가능한 전문 작업을 위해 역할, 도구, 지침을 패키지하는 [**Custom agents**][custom-agents] -- 세션에서 일어난 일을 서술형으로 생성하는 [`/chronicle`][chronicle] -- Ollama, Foundry Local, LM Studio를 통한 로컬 모델을 포함하여 자체 공급자의 모델을 사용하는 [Bring your own key (BYOK)][byok] -- GitHub에서 호스팅하는 격리된 환경에서 세션을 실행하는 [Cloud sandboxes][sandboxes] -- 리포지토리, 세션, 프롬프트에서 바로 앱을 여는 [Deep links][deep-links] - -## 다음 단계 - -어떤 도구든 더 능숙하게 사용하려면 계속 사용해야 합니다. 프로덕션 코드, 취미 프로젝트, 오랫동안 생각만 하고 만들지 못했던 작은 앱에 사용해 봅니다. 배운 내용을 팀과 공유하고 팀의 경험에서도 배웁니다. 언제나 그렇듯 문서를 살펴봅니다. - -GitHub Copilot 생태계를 더 살펴보려면 [VS Code 실습 과정](/ko-kr/learning-hub/copilot-workshops/vscode/), [Copilot CLI 실습 과정](/ko-kr/learning-hub/copilot-workshops/cli/), [Cloud agent 실습 과정](/ko-kr/learning-hub/copilot-workshops/cloud/)을 확인합니다. - -## 리소스 - -- [GitHub Copilot app 정보][about-copilot-app] -- [GitHub Copilot app 시작하기][getting-started] -- [GitHub Copilot app 사용자 지정][customize] -- [자동화 사용][using-automations] -- [캔버스 확장 사용][canvas-docs] -- [클라우드 및 로컬 샌드박스 정보][sandboxes] - -[about-copilot-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 -[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle -[custom-agents]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents -[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models -[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/9-canvases.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/9-canvases.md new file mode 100644 index 000000000..f7a7282c1 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/9-canvases.md @@ -0,0 +1,115 @@ +--- +title: "레슨 9 - 캔버스 살펴보기 및 만들기" +description: "기존 Database Explorer 캔버스를 사용한 다음, 리포지토리에 저장되는 이슈 분류 캔버스를 만들고 검토합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +지금까지 채팅을 통해 에이전트를 지시했습니다. 하지만 많은 작업은 대화가 아니라 보드, 문서, 검사 목록에서 이루어집니다. **캔버스**는 바로 이러한 작업을 위해 앱 안에서 사용자와 에이전트가 함께 사용하는 화면을 제공합니다. 이 레슨에서는 먼저 Tailspin Toys에 포함된 캔버스를 사용한 다음, 지금까지 처리한 백로그용 캔버스를 만듭니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 캔버스의 개념과 사용 시점을 이해합니다. +- 기존 Database Explorer 캔버스로 프로젝트 데이터를 살펴봅니다. +- 백로그를 분류하는 공유 Kanban 보드 캔버스를 만듭니다. +- 다른 기능을 구현하지 않고 새 캔버스를 살펴보고 사용해 봅니다. + +## 시나리오 + +Tailspin Toys에는 데이터베이스를 살펴보는 캔버스가 이미 포함되어 있습니다. 캔버스가 프로젝트 데이터를 대화형 화면으로 바꾸는 방식을 확인한 다음, 다른 기능을 시작하지 않고 다음 작업을 선택할 수 있는 재사용 가능한 보드를 만듭니다. + +## 캔버스란? + +[캔버스][canvas-docs]는 계획, 분류 보드, 릴리스 검사 목록, 대시보드, 문서 같은 작업 산출물을 위한 공유 대화형 화면입니다. 채팅은 의도를 설명하고 모호한 부분을 함께 추론하는 데 유용하지만 대부분의 작업은 *화면*에서 이루어집니다. 캔버스를 사용하면 해당 화면에서 에이전트와 직접 협업할 수 있습니다. + +캔버스는 **양방향**입니다. 에이전트가 작업하면서 캔버스를 업데이트할 수 있고 사용자도 동일한 화면을 편집할 수 있습니다. 캔버스를 만들면 에이전트가 프롬프트와 워크플로를 바탕으로 구축하며, 진행하면서 기능을 추가하거나 제거하거나 수정하도록 요청할 수 있습니다. 캔버스를 만들면 앱의 오른쪽 패널에서 열립니다. + +일반적인 예는 다음과 같습니다. + +- 하루를 계획하고 이슈와 끌어오기 요청의 우선순위를 정하는 **Markdown 캔버스** +- 사용자와 에이전트가 카드를 추가하고 열 사이에서 작업을 이동하는 **에이전트 Kanban 보드** +- 리포지토리의 주요 이슈와 반복되는 주제를 요약하는 **이슈 분류 보드** + +## 캔버스를 사용하는 이유 + +작업에 구조화, 반복, 검증이 필요하고 채팅만으로 충분하지 않다면 캔버스를 사용합니다. 캔버스로 다음 작업을 수행할 수 있습니다. + +- 워크플로에 맞는 실제 산출물을 기반으로 에이전트가 작업하게 합니다. +- 공유 화면에서 작업을 직접 안내하거나 수정한 다음 에이전트가 변경 내용에서 계속 작업하게 합니다. +- 채팅 응답만 보는 대신 산출물의 눈에 보이는 변경으로 진행 상황을 확인합니다. + +## Database Explorer 캔버스 사용 + +프로젝트의 기존 Database Explorer 캔버스부터 사용합니다. 직접 만들기 전에 작동하는 예제를 사용하여 리포지토리 범위 캔버스의 동작을 확인합니다. + +1. 필터링 끌어오기 요청(PR)이 병합되었는지 확인하고 로컬 `main`을 업데이트합니다. +2. GitHub Copilot app으로 돌아가 **Home screen**을 선택합니다. +3. `tailspin-toys`가 선택된 리포지토리인지 확인합니다. +4. 업데이트된 `main`을 기반으로 하는 **new working tree**에서 세션을 만들고 **Interactive** 모드를 선택합니다. +5. 필요한 경우 로컬 데이터베이스를 준비하고 기존 캔버스를 변경하지 않은 채 열도록 Copilot에 요청합니다. + + ```plaintext + Set up the local database if needed, then open the repository's Database Explorer canvas. Do not change any files. + ``` + +6. Database Explorer에서 사용 가능한 테이블을 살펴보고 `games`를 선택합니다. +7. 평점이 높은 게임 5개를 보여 주는 읽기 전용 쿼리를 실행합니다. + + ```sql + SELECT title, star_rating + FROM games + ORDER BY star_rating DESC + LIMIT 5; + ``` + +8. 결과에 게임이 5개 이하로 포함되고 평점 내림차순으로 정렬되는지 확인합니다. +9. **Files**를 열고 `.github/extensions/database-explorer/extension.mjs`를 살펴봅니다. 캔버스가 프로젝트와 함께 저장되고 쿼리를 읽기 전용 `SELECT` 및 `WITH` 문으로 제한하는 방식을 확인합니다. +10. 세션에 변경된 파일이 없는지 확인합니다. + +## 이슈 분류 캔버스 만들기 + +이제 다른 유형의 공유 화면을 만듭니다. 이슈 분류 캔버스를 프로젝트 범위에 저장하면 팀에서 검토하고 재사용할 수 있는 리포지토리 자산이 됩니다. + +1. 동일한 세션에서 `/create-canvas`를 입력한 다음 만들려는 캔버스를 설명합니다. + + ```plaintext + Create a Kanban triage canvas for this repo's open issues and save it under .github/extensions/. Highlight the three issues you'd prioritize and explain why, with the rest below. Include summaries and links. + + Give each card an "Add to current context" action that adds the issue details without starting work or changing the issue. Make it keyboard-accessible and open it so I can try it. + ``` + +Copilot은 `.github/extensions` 아래에 캔버스 확장을 만들고 앱의 오른쪽 패널에 공유 화면을 엽니다. 생성된 확장은 단순한 시각적 산출물이 아니라 실행 가능한 리포지토리 콘텐츠이므로 다음으로 파일과 동작을 살펴봅니다. + +## 캔버스 검토 및 사용 + +1. **Changes**를 열고 캔버스 정의가 사용자나 세션 전용이 아니라 리포지토리의 `.github/extensions/` 아래에 저장되었는지 확인합니다. 기존 확장과 애플리케이션 파일이 변경되지 않았는지 확인합니다. +2. 보드를 실제 열린 이슈와 비교하고 순위 설명을 평가합니다. +3. 카드와 컨트롤이 읽기 쉽고 키보드로 사용할 수 있는지 확인합니다. +4. 이슈의 **Add to current context**를 선택하고 세부 정보만 대화에 들어오는지 확인합니다. 구현이나 이슈 상태 변경이 시작되면 안 됩니다. +5. 수정 사항을 검토하고 변경된 파일에 적용되는 기존 검증을 실행하도록 Copilot에 요청합니다. 대화형 화면이 열렸다는 이유로 올바르다고 가정하지 말고 결과와 차단 요인을 기록합니다. +6. 캔버스를 변경해야 한다면 이슈 분류 범위 안에서 집중된 개선을 요청한 다음 영향을 받는 검사를 반복합니다. 이 캔버스 작업의 일부로 백로그 이슈를 구현하지 않습니다. + +워크숍에서는 이미 직접 병합과 Agent Merge를 모두 연습했으므로 다른 PR을 만들기 전에 종료합니다. 프로덕션에서는 다른 사용자가 캔버스를 사용하기 전에 팀의 일반 프로세스로 검토하고 병합합니다. + +## 요약 및 다음 단계 + +사용자와 에이전트가 협업하는 공유 화면을 만들었습니다. 다음 작업을 수행했습니다. + +- 캔버스의 개념과 사용 시점을 배웠습니다. +- 기존 Database Explorer 캔버스로 프로젝트 데이터를 살펴봤습니다. +- 백로그를 분류하는 공유 Kanban 보드 캔버스를 만들었습니다. +- 다른 기능을 구현하지 않고 새 캔버스를 살펴보고 사용해 봤습니다. + +백로그를 추적하도록 설정했으므로 지금까지 구축한 항목과 다음 단계를 돌아봅니다. [레슨 10 - 마무리 및 다음 단계][next-lesson]를 계속 진행합니다. + +## 리소스 + +- [GitHub Copilot app에서 캔버스 확장 사용][canvas-docs] +- [Awesome Copilot의 캔버스][awesome-copilot-canvases] +- [GitHub Copilot app 정보][about-copilot-app] + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/app/10-review/ +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/index.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/index.md index 82455aceb..e3273831a 100644 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/index.md +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/app/index.md @@ -2,12 +2,26 @@ title: "GitHub Copilot app" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -[**GitHub Copilot app**](https://docs.github.com/copilot/concepts/agents/github-copilot-app)은 Copilot CLI를 기반으로 구축된 데스크톱 애플리케이션으로, 에이전트 기반 개발을 하나의 집중된 워크스페이스에서 수행할 수 있게 해 줍니다. 병렬 에이전트 세션, 전환 가능한 세션 모드, 공유 캔버스, GitHub 이슈 및 끌어오기 요청 기본 관리 기능을 제공합니다. 여기에는 끌어오기 요청의 리베이스, 검토 피드백, CI 수정, 병합 과정을 관리하는 **Agent Merge**도 포함됩니다. +[**GitHub Copilot app**](https://docs.github.com/copilot/concepts/agents/github-copilot-app)은 Copilot CLI를 기반으로 구축된 데스크톱 애플리케이션으로, 에이전트 기반 개발을 하나의 집중된 워크스페이스에서 수행할 수 있게 해 줍니다. 병렬 에이전트 세션, 전환 가능한 세션 모드, 공유 캔버스, GitHub 이슈 및 끌어오기 요청 기본 관리 기능을 제공합니다. 여기에는 끌어오기 요청의 리베이스, 검토 피드백, 지속적 통합(CI) 수정, 병합 과정을 관리하는 **Agent Merge**도 포함됩니다. -이 레슨에서는 앱을 설치하고 프로젝트를 설정한 다음, 앱 워크스페이스와 템플릿에서 미리 생성한 백로그를 살펴봅니다. 별점을 추가하는 작은 변경으로 시작한 뒤, 이슈를 바탕으로 사용자 지정 지침 표준을 추가하고, 격리된 에이전트 세션에서 필터링 기능을 구축하고, 재사용 가능한 스킬로 검증합니다. Playwright MCP 서버를 추가하여 실제 브라우저에서 기능을 살펴본 다음, **Agent Merge**가 끌어오기 요청을 병합하는 단계까지 병합 자동화 수준을 높입니다. 마지막으로 공유 캔버스에서 협업하고 반복 작업을 자동화하여 아이디어를 병합된 기능으로 완성하는 전체 과정을 경험합니다. +워크숍은 하나로 이어지는 Tailspin Toys 워크플로를 따릅니다. + +1. 프로젝트를 준비하고, 앱을 설치하고, 리포지토리를 연결하고, 워크스페이스와 미리 생성된 백로그를 살펴봅니다. +2. 별점에 초점을 맞춘 변경을 수행하고 브라우저에서 검토한 다음 첫 번째 끌어오기 요청(PR)을 직접 병합합니다. +3. 필터링 이슈에서 시작하여 **Plan** 모드에서 접근 방식을 정의하고, **Autopilot** 모드로 구축한 다음, **Interactive** 모드에서 검토합니다. +4. 리포지토리 지침을 업데이트하고 필터링 작업에 적용합니다. +5. 기존 `quality-checks` 스킬을 사용자 지정하고 프로젝트 검사에 사용합니다. +6. Playwright Model Context Protocol(MCP) 서버를 추가하고 브라우저에서 필터링을 살펴보는 데 사용합니다. +7. 품질 보증(QA) 사용자 지정 에이전트를 만들고 요구 사항, 커버리지, 검증 근거를 검토하는 데 사용합니다. +8. 완성된 필터링 변경을 검토하고 두 번째 PR에 Agent Merge를 사용합니다. +9. 기존 Database Explorer 캔버스를 사용한 다음, 리포지토리에 저장되는 이슈 분류 캔버스를 만들고 테스트합니다. + +워크숍에 집중할 수 있도록 별점 PR과 필터링 PR의 두 PR을 만듭니다. 필터링 PR에는 지침 업데이트, 스킬 업데이트, QA 프로필, 테스트도 포함됩니다. 각 PR은 업데이트된 `main`에서 시작합니다. 필터링과 품질 워크플로는 하나의 세션, 워크트리, 브랜치를 공유하므로 각 도구를 살펴보면서 앞선 작업을 이어 갈 수 있습니다. 마지막 캔버스 연습은 해당 세션에 유지되므로 PR 워크플로를 반복하지 않고 공유 화면을 만들고 테스트하는 데 집중할 수 있습니다. ## 레슨 @@ -15,13 +29,15 @@ lastUpdated: 2026-08-03 |--------|-------|-------------| | [0. 필수 조건][ex0] | 설정 | Node.js를 설치하고 Tailspin Toys 프로젝트의 복사본 만들기 | | [1. Copilot app 설치][ex1] | 설정 | 앱을 설치하고 프로젝트를 연결한 다음 워크스페이스 살펴보기 | -| [2. 첫 번째 에이전트 세션 실행][ex2] | 첫 번째 변경 | 세션을 시작하고 작은 변경을 첫 번째 끌어오기 요청으로 제공하기 | -| [3. 사용자 지정 지침으로 Copilot 안내][ex3] | 컨텍스트 | 이슈를 바탕으로 문서화 표준을 추가하고 병합하기 | -| [4. Autopilot으로 기능 구축][ex4] | 핵심 기능 | Plan과 Autopilot으로 필터링 기능을 구축한 다음 스킬로 검증하기 | -| [5. Playwright MCP로 테스트][ex5] | 외부 도구 | Playwright MCP 서버를 추가하고 브라우저에서 기능 살펴보기 | -| [6. Agent Merge로 병합][ex6] | 병합 | Agent Merge가 필터링 끌어오기 요청을 수정하고 병합하도록 하기 | -| [7. 캔버스로 계획 수립][ex7] | 협업 | 작업을 계획하고 추적하는 공유 캔버스 만들기 | -| [8. 검토 및 다음 단계][ex8] | 요약 | 반복 작업을 자동화하고 다음에 살펴볼 내용 알아보기 | +| [2. 별점 추가로 작은 성과 얻기][ex2] | 첫 번째 변경 | 기존 별점과 null 대체 표시를 추가하고 PR 1 병합하기 | +| [3. 에이전트 모드: Plan 및 Autopilot][ex3] | 에이전트 모드 | 이슈를 바탕으로 기능을 계획하고 Autopilot으로 구축한 다음 Interactive 모드에서 검토하기 | +| [4. 사용자 지정 지침으로 Copilot 안내][ex4] | 컨텍스트 | 지침을 살펴보고 업데이트한 다음 필터링에 적용하기 | +| [5. quality-checks 스킬 사용자 지정 및 사용][ex5] | 반복 가능한 검사 | 기존 스킬을 살펴보고 보고서 형식을 변경한 다음 실행하기 | +| [6. Playwright MCP로 기능 검증][ex6] | 브라우저 관찰 | Customize에서 MCP를 구성하고 필터링 동작 살펴보기 | +| [7. QA 에이전트 만들기 및 사용][ex7] | 요구 사항과 커버리지 | 전문가 프로필을 선택하고 최종 검증 근거 수집하기 | +| [8. 기능 PR 만들기 및 병합][ex8] | 검토와 병합 | 필터링, 지침, 스킬, QA 프로필, 테스트를 검토한 다음 두 번째 PR에 Agent Merge 사용하기 | +| [9. 캔버스 살펴보기 및 만들기][ex9] | 협업 | Database Explorer를 사용한 다음 리포지토리에 저장되는 이슈 분류 캔버스를 만들고 테스트하기 | +| [10. 마무리 및 다음 단계][ex10] | 요약 | 워크플로, 산출물, 추가 리소스 돌아보기 | ## 필수 조건 @@ -47,11 +63,13 @@ lastUpdated: 2026-08-03 [ex0]: /ko-kr/learning-hub/copilot-workshops/app/0-prerequisites/ [ex1]: /ko-kr/learning-hub/copilot-workshops/app/1-install-copilot-app/ [ex2]: /ko-kr/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /ko-kr/learning-hub/copilot-workshops/app/3-custom-instructions/ -[ex4]: /ko-kr/learning-hub/copilot-workshops/app/4-build-filtering/ -[ex5]: /ko-kr/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[ex6]: /ko-kr/learning-hub/copilot-workshops/app/6-agent-merge/ -[ex7]: /ko-kr/learning-hub/copilot-workshops/app/7-canvases/ -[ex8]: /ko-kr/learning-hub/copilot-workshops/app/8-review/ +[ex3]: /ko-kr/learning-hub/copilot-workshops/app/3-agent-modes/ +[ex4]: /ko-kr/learning-hub/copilot-workshops/app/4-custom-instructions/ +[ex5]: /ko-kr/learning-hub/copilot-workshops/app/5-agent-skills/ +[ex6]: /ko-kr/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[ex7]: /ko-kr/learning-hub/copilot-workshops/app/7-qa-agent/ +[ex8]: /ko-kr/learning-hub/copilot-workshops/app/8-create-pull-request/ +[ex9]: /ko-kr/learning-hub/copilot-workshops/app/9-canvases/ +[ex10]: /ko-kr/learning-hub/copilot-workshops/app/10-review/ [install-git]: https://github.com/git-guides/install-git [callout-student-plan-education]: https://github.com/education/students \ No newline at end of file diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 000000000..f32782a9c --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "레슨 0 - 사전 준비 및 설정" +description: "워크숍의 사전 준비 사항을 확인하고, GitHub Copilot app을 설치하고, 워크스페이스에 익숙해집니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Space Quiz를 만들기 전에 필요한 사항을 확인하고, GitHub Copilot app을 설치하고, 워크스페이스에 익숙해집니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 워크숍의 사전 준비 사항을 확인합니다. +- GitHub Copilot app을 설치하고 로그인합니다. +- 세션에서 사용할 모델을 선택합니다. +- 앱의 주요 작업 영역을 파악합니다. +- 간단한 채팅을 시도합니다. + +## 사전 준비 + +다음 사항이 필요합니다. + +- GitHub 계정. [GitHub 계정을 만들거나][github-signup] 기존 계정을 사용합니다. +- 활성 Copilot 플랜. [Copilot Free 또는 유료 Copilot 플랜을 활성화합니다][copilot-plans]. 조직에서 이미 Copilot 액세스를 제공한다면 해당 계정을 사용합니다. +- macOS, Windows 또는 Linux를 실행하는 컴퓨터. + +앱에 Git이 포함되어 있으므로 다른 도구를 설치할 필요가 없습니다. + +> [!NOTE] +> Copilot Business 또는 Copilot Enterprise를 사용하는 경우, 관리자가 **Copilot CLI** 정책을 활성화해야 에이전트 세션이 작동합니다. + +## 앱 설치 및 구성 + +1. 운영 체제에 맞는 [GitHub Copilot app][download-app]을 다운로드하고 설치합니다. +2. 앱을 엽니다. +3. **Sign in to GitHub**를 선택하고 인증합니다. +4. 테마를 선택한 다음 **Finish**를 선택합니다. + +## 모델 선택 + +모델을 선택할 때 다음 우선순위에 따라 사용 가능한 첫 번째 옵션을 선택합니다. + +1. **GPT-6-Luna**(권장). +2. 균형 잡힌 대안인 **Auto**. +3. [활성 모델 목록][active-models]의 모델 중 하나. + +사용할 수 있는 모델은 플랜, 조직 정책, 제품 버전에 따라 달라집니다. + +## 주요 화면 살펴보기 + +앱은 개발 워크플로를 한곳에 모아 제공합니다. + +- **New**: 프로젝트에서 세션을 시작하거나, 간단한 질문을 위해 **Chat**을 선택합니다. +- **Pull requests**: 모든 리포지토리의 풀 리퀘스트(Pull request)를 검토하고 추적합니다. +- **Issues**: 자신에게 할당된 이슈, 자신이 만든 이슈, 자신을 언급한 이슈를 찾습니다. +- **Automations**: 리포지토리에서 반복할 에이전트 작업을 예약합니다. +- **Customize**: 테마와 모델을 변경하고 Canvas 확장을 관리합니다. +- **Projects**: 리포지토리를 엽니다. 각 리포지토리의 세션은 그 아래에 나열됩니다. + +## 간단한 채팅 시도 + +모든 질문에 워크스페이스가 필요한 것은 아닙니다. **New**에서 프로젝트 대신 **Chat**을 선택합니다. 채팅에는 리포지토리가 연결되어 있지 않고 파일을 편집할 수 없으므로, 실제 세션을 시작하기 전에 질문하거나 설명을 듣거나 접근 방식을 생각해 보는 가장 빠른 방법입니다. + +채팅에서 다음 프롬프트를 보냅니다. + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +## 요약 및 다음 단계 + +사전 준비 사항을 확인하고, 앱을 설치하고, 모델을 선택하고, 주요 작업 영역을 살펴봤습니다. [레슨 1: Space Quiz 워크스페이스 만들기][next-lesson]를 계속 진행합니다. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[download-app]: https://gh.io/app +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 000000000..72cf45932 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "레슨 1 - Space Quiz 워크스페이스 만들기" +description: "빈 폴더에서 Space Quiz용 로컬 Interactive 세션을 시작합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Space Quiz용 로컬 워크스페이스를 만들고, 에이전트가 작업을 시작할 때 직접 작업을 제어할 수 있도록 세션을 구성합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 빈 로컬 폴더를 엽니다. +- Interactive 에이전트 세션을 시작합니다. +- 첫 프롬프트를 보내기 전에 폴더, 모드, 모델을 확인합니다. + +## 워크스페이스 만들기 + +1. GitHub Copilot app을 열고 로그인되어 있는지 확인합니다. +2. **New**를 선택한 다음 **Open folder**를 선택하고, `space-quiz`라는 빈 폴더를 선택합니다. 폴더가 없으면 먼저 만듭니다. +3. 세션 모드를 **Interactive**로 설정합니다. +4. [레슨 0의 우선순위][model-order]에 따라 선호하는 모델을 선택합니다. +5. **Create**를 선택합니다. 빈 세션이 열리고 첫 프롬프트를 기다립니다. + +![프롬프트 입력란, Interactive 모드, Auto 모델 및 Default 에이전트 선택 도구, Local main 브랜치의 space-quiz 폴더가 표시된 Copilot app의 New 화면 일러스트레이션.](/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg) + +**New** 화면에서는 첫 프롬프트를 입력하기 전에 폴더, 모드, 에이전트를 설정합니다. Interactive 세션에서는 에이전트가 프로젝트를 만드는 동안 작업을 지시하고 각 단계를 검토할 수 있습니다. + +## 요약 및 다음 단계 + +빈 Space Quiz 워크스페이스가 준비되었습니다. [레슨 2: 퀴즈 만들고 다듬기][next-lesson]를 계속 진행합니다. + +[model-order]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/#%EB%AA%A8%EB%8D%B8-%EC%84%A0%ED%83%9D +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md new file mode 100644 index 000000000..2c6be6586 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "레슨 10 - 원격으로 세션 이어가기(선택 사항)" +description: "/remote를 사용하여 컴퓨터에서 계속 실행 중인 앱 세션을 웹이나 GitHub Copilot mobile app에서 확인합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +이 레슨은 선택 사항이며, 로컬 작업 사이클에 익숙해진 뒤 진행하는 것이 좋습니다. `/remote` 명령은 세션을 로컬에서 계속 실행하면서 웹과 GitHub Copilot mobile app에서도 이용할 수 있게 합니다. 다른 기기에서 세션을 확인하는 동안 컴퓨터를 켜 두어야 합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 진행 중인 세션을 원격으로 이용할 수 있게 합니다. +- 브라우저나 GitHub Copilot mobile app에서 세션을 확인합니다. +- 다른 풀 리퀘스트(Pull request)와 마찬가지로 결과 변경 사항을 검토합니다. + +## 원격으로 세션 이어가기 + +1. 작업이 진행 중인 세션을 엽니다. +2. `/remote`를 실행하여 해당 세션을 원격으로 이용할 수 있게 합니다. +3. 반환된 링크를 브라우저에서 열거나 GitHub Copilot mobile app에서 세션에 액세스합니다. +4. 그곳에서 진행 상황을 확인한 다음 다른 풀 리퀘스트와 동일한 방식으로 변경 사항을 검토합니다. + +> [!NOTE] +> **위임하는 것이 아닙니다** +> +> 세션은 여전히 컴퓨터에서 실행됩니다. 작업을 다른 에이전트에 넘기거나 클라우드로 옮기는 것이 아닙니다. + +## 요약 및 다음 단계 + +다른 기기에서 로컬 세션을 이용할 수 있게 했습니다. [레슨 11: Canvas 살펴보기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md new file mode 100644 index 000000000..b6ab268e6 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "레슨 11 - Canvas 살펴보기" +description: "Repository Issues Kanban Canvas를 설치하고 이슈 카드에서 세션을 시작합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +**캔버스(Canvas)**는 사용자와 에이전트가 같은 계획, 보드, 검사 목록, 대시보드를 업데이트할 수 있는 양방향 공유 화면입니다. 리포지토리 이슈를 시각적인 워크플로로 바꾸는 Kanban Canvas를 살펴봅니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- Canvas 확장을 설치합니다. +- 캔버스를 Space Quiz 리포지토리에 연결합니다. +- 이슈를 진행 중인 작업으로 옮깁니다. +- 이슈에서 생성된 세션을 살펴봅니다. + +## Repository Issues Kanban Canvas 설치 + +1. [Canvas 확장 갤러리][canvas-gallery]를 살펴봅니다. +2. [Repository Issues Kanban 확장][kanban-extension]을 엽니다. +3. **Install in GitHub Copilot app**을 선택하고 설치를 승인합니다. +4. 앱에서 **Customize**를 연 다음 **Canvas**를 엽니다. +5. 확장이 설치되어 있는지 확인합니다. + +## 캔버스에서 작업 시작하기 + +1. 캔버스의 **New session**을 선택합니다. +2. `space-quiz` 프로젝트를 선택합니다. +3. 이슈 보드를 살펴봅니다. +4. 이슈 카드를 진행 중인 작업 열로 옮깁니다. +5. 자동으로 생성된 세션을 엽니다. +6. 선택한 이슈를 세션 컨텍스트에서 이용할 수 있는지 확인합니다. + +![Backlog, Plan, Ready, Implement 레인이 있는 Repository Issues Kanban Canvas 일러스트레이션. 13번 이슈 Review screen을 Backlog에서 Plan 레인으로 드래그하고 있으며, 12번 이슈 Per-question timer는 Backlog에 남아 있습니다.](/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg) + +카드를 레인에 놓으면 캔버스가 해당 이슈를 이미 로드한 새 세션으로 전달합니다. + +> [!NOTE] +> 현재 Repository Issues Kanban 확장은 포인터를 사용하는 드래그 앤 드롭으로 카드를 이동합니다. 이 조작을 사용할 수 없다면 보드에서 이슈 번호를 기록하고, **Issues**에서 이슈를 연 다음 **New session**을 선택합니다. 카드를 옮기지 않고도 동일하게 이슈를 바탕으로 하는 세션을 만듭니다. + +캔버스는 에이전트가 이슈를 바탕으로 작업하도록 유지하면서 작업을 시각적으로 선택하고 시작하는 방법을 제공합니다. + +## 요약 및 다음 단계 + +시각적 공유 화면을 사용하여 에이전트 세션을 시작했습니다. [레슨 12: 복습 및 다음 단계][next-lesson]를 계속 진행합니다. + +[canvas-gallery]: https://awesome-copilot.github.com/extensions/ +[kanban-extension]: https://awesome-copilot.github.com/extension/accessibility-kanban/ +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md new file mode 100644 index 000000000..3909fcb14 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "레슨 12 - 복습 및 다음 단계" +description: "GitHub Copilot app 워크플로를 돌아보고 학습을 이어갈 리소스를 찾습니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +빈 폴더에서 시작하여 작업 계획, 격리된 구현, 코드 검토, 자동화, 세션 원격 액세스, 시각적 Canvas까지 전체 개발 워크플로에서 에이전트를 지시했습니다. + +## 완료한 작업 + +다음 작업을 수행했습니다. + +- Interactive 모드에서 로컬 프로젝트를 만들었습니다. +- 실시간 브라우저 피드백으로 퀴즈를 만들고 다듬었습니다. +- 세션 세부 정보를 살펴보고 브라우저 수준의 스모크 테스트(Smoke test)를 실행했습니다. +- `/init`으로 프로젝트 규칙을 기록했습니다. +- 프로젝트를 GitHub 리포지토리로 게시했습니다. +- 범위가 명확한 백로그를 만들었습니다. +- 격리된 워크트리(Worktree)에서 이슈를 구현하고 변경 사항을 검토했습니다. +- 코드를 변경하기 전에 두 번째 이슈의 계획을 세웠습니다. +- 풀 리퀘스트(Pull request) 검토와 Agent Merge를 거쳐 이슈의 구현을 출시했습니다. +- 주간 이슈 분류를 자동화했습니다. +- 로컬 세션을 원격으로 확인했습니다. +- 공유 Kanban Canvas를 살펴봤습니다. + +## 계속 살펴보기 + +- [GitHub Copilot app에 대해 알아봅니다][about-app]. +- [공식 시작 가이드를 검토합니다][getting-started]. +- [에이전트 세션으로 작업하는 방법을 알아봅니다][agent-sessions]. +- [앱에서 이슈와 풀 리퀘스트를 관리합니다][issues-and-prs]. +- [Copilot 코드 검토에 대해 알아봅니다][code-review]. +- [Canvas 확장을 만들고 사용합니다][canvas-extensions]. +- [실제 코드에서도 효과적인 프롬프트를 작성하는 모범 사례를 살펴봅니다][best-practices]. +- [Copilot 플랜을 비교합니다][copilot-plans]. + +[Copilot CLI 첫걸음 워크숍][first-steps-cli]이나 [Visual Studio Code 첫걸음 워크숍][first-steps-vscode]에서 다른 작업 방식으로 동일한 Space Quiz를 만들어 봅니다. 완전한 애플리케이션과 팀 백로그를 사용하는 더 심도 있는 시나리오를 진행할 준비가 되었다면 [실전 GitHub Copilot app 워크숍][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 +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-cli]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-app]: /ko-kr/learning-hub/copilot-workshops/app/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 000000000..b024a2ed1 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "레슨 2 - 퀴즈 만들고 다듬기" +description: "단일 파일로 Space Quiz를 만들고 통합 브라우저와 요소 선택 도구로 다듬습니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +하나의 상세한 프롬프트로 Space Quiz를 만들고, 통합 브라우저에서 동작을 확인하고, 요소 선택 도구로 시각적인 부분을 개선합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 의존성이 없는 퀴즈를 `index.html`에 만듭니다. +- 통합 브라우저에서 퀴즈를 테스트합니다. +- 생성된 코드를 살펴봅니다. +- 접근성을 유지하면서 선택한 요소를 다듬습니다. + +## 퀴즈 만들기 + +`space-quiz` 세션에서 다음 프롬프트를 보냅니다. + +```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. +``` + +에이전트가 작업을 마치면 여러 문제를 풀어 보고 다음 사항을 확인합니다. + +- 진행률 표시줄의 진행률이 올라갑니다. +- 점수가 업데이트됩니다. +- 정답을 선택하면 초록색 상태가 표시됩니다. +- 오답을 선택하면 빨간색 흔들림 애니메이션이 나타납니다. +- 마지막 문제를 푼 뒤 결과 화면이 나타납니다. + +## 생성된 코드 살펴보기 + +왼쪽 사이드바와 오른쪽 브라우저 패널을 접은 다음, 넓어진 코드 영역에서 `index.html`을 검토합니다. HTML, CSS, JavaScript가 하나의 파일에서 함께 작동하는 방식을 살펴봅니다. 검토를 마치면 두 패널을 모두 복원합니다. + +## 요소 선택 도구로 다듬기 + +1. 브라우저 도구 모음에서 요소 선택 도구를 선택합니다. +2. 퀴즈 제목이나 답변 영역을 선택합니다. +3. 다음 프롬프트를 보냅니다. + + ```plaintext + Make the selected element feel more like a mission-control display. Keep it accessible and preserve the existing light and dark themes. + ``` + +4. 통합 브라우저가 새로 고쳐지는 모습을 보고 변경 사항을 확인합니다. + +## 추가 개선 사항(선택) + +계속 실험하고 싶다면 에이전트에 다음 작업을 요청합니다. + +- `prefers-reduced-motion`을 준수하는 은은한 별 배경을 추가합니다. +- 점수가 8점 이상일 때 결과 화면의 축하 분위기를 더합니다. +- 키보드 포커스 상태를 개선한 다음 마우스 없이 퀴즈를 확인합니다. + +## 요약 및 다음 단계 + +Space Quiz를 만들고, 코드를 살펴보고, 다듬었습니다. [레슨 3: 세션 살펴보기 및 퀴즈 테스트][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 000000000..a6efc1e57 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "레슨 3 - 세션 살펴보기 및 퀴즈 테스트" +description: "세션 세부 정보에서 에이전트의 작업 대상을 확인한 다음, Git에 기록하기 전에 브라우저 수준의 스모크 테스트를 실행합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +이제 세션에서 실제 작업을 수행했으므로 살펴볼 내용이 있습니다. 에이전트의 작업 대상을 확인한 다음, 통합 브라우저에서 퀴즈를 조작하고 의도한 결과가 아니라 실제로 일어난 결과를 보고하게 합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 세션 세부 정보 패널을 읽습니다. +- 세션의 프로젝트, 경로, 브랜치, 변경 사항, 컨텍스트 사용량을 확인합니다. +- 브라우저 수준의 스모크 테스트(Smoke test)를 실행하고 실패한 부분을 수정합니다. + +## 세션 세부 정보 읽기 + +세션 세부 정보는 에이전트가 정확히 무엇을 작업하는지 알려 줍니다. 이 패널을 계속 지켜볼 필요는 없지만, 예상과 다른 결과가 나오면 패널의 모든 정보가 중요합니다. + +![Space Quiz 빌드 세션의 Copilot app 세션 세부 정보 패널 일러스트레이션. origin/main에서 시작한 main 브랜치, 경로, 프로젝트, 세션 이름, 세션 ID 및 에이전트, 변경된 파일 1개, 토큰 수, 컨텍스트 사용량 27%, 세션 비용, 원격 제어 활성화, 이름 변경, 인사이트 보기, 비밀 gist로 공유, 세션 보관 옵션이 표시되어 있습니다.](/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg) + +패널에는 작업 위치, 변경 사항, 컨텍스트 윈도우(Context window)가 얼마나 찼는지가 표시됩니다. 요청마다 입력 영역에서 모델을 선택하므로 모델 행은 없습니다. + +1. **project**, **path**, **branch**가 편집하려는 대상과 일치하는지 확인합니다. +2. **Changes**를 읽고 세션에서 변경한 내용이 있는지 확인합니다. +3. **context usage**를 확인합니다. 사용량이 늘어날수록 에이전트가 실제 작업에 활용할 여유 공간이 줄어듭니다. 이때 새 세션을 시작합니다. + +> [!TIP] +> **잘못된 결과는 대부분 컨텍스트 문제에서 비롯됩니다** +> +> 잘못된 브랜치, 잘못된 폴더, 거의 가득 찬 컨텍스트 윈도우가 부정확한 프롬프트보다 훨씬 더 자주 예상 밖 결과의 원인이 됩니다. + +## Git에 기록하기 전에 테스트하기 + +통합 브라우저는 실제 브라우저이므로 에이전트가 퀴즈를 조작하고 동작을 검증할 수 있습니다. 다음 프롬프트를 보냅니다. + +```plaintext +Run a browser-level smoke test for the quiz in the integrated browser. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. 에이전트가 문제를 풀어 가는 동안 통합 브라우저를 지켜봅니다. +2. 실패한 부분이 있으면 에이전트가 수정하고 모든 항목이 통과할 때까지 테스트를 다시 실행하게 합니다. +3. 빌드와 테스트가 모두 통과한 뒤에만 다음 단계로 진행합니다. + +아직 Git에 기록한 내용은 없습니다. 다음 단계인 `/init`은 현재 상태의 프로젝트를 읽으므로, 먼저 프로젝트가 정상적으로 작동하는지 확인하는 것이 좋습니다. + +## 요약 및 다음 단계 + +세션의 작업 대상을 확인하고 브라우저 수준의 스모크 테스트로 퀴즈를 검증했습니다. [레슨 4: 프로젝트 지침 작성][next-lesson]을 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 000000000..658884d52 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "레슨 4 - 프로젝트 지침 작성" +description: "/init을 실행하여 완성된 Space Quiz를 설명하는 에이전트 지침을 생성한 다음, 작업 방식에 맞게 조정합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +이제 퀴즈를 만들고 다듬고 테스트했으므로, 이후 세션에서 이 프로젝트를 어떻게 다뤄야 하는지 기록합니다. 모든 세션이 작업을 시작하기 전에 에이전트 지침을 읽으므로, 프롬프트마다 같은 안내를 반복할 필요가 없습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/init`으로 에이전트 지침을 생성합니다. +- 생성된 파일을 수락하기 전에 검토합니다. +- 지침을 간결하게 정리하고 맞춤 설정합니다. + +## `/init`으로 규칙 기록하기 + +1. 앱 세션에서 `/init`을 실행합니다. +2. 생성된 에이전트 지침 파일을 수락하기 전에 검토합니다. +3. 단일 파일, 의존성 없음, 접근성, 브라우저 테스트 등 이 프로젝트에 맞는 안내만 남깁니다. + +> [!IMPORTANT] +> **다듬은 뒤에 실행하는 이유** +> +> `/init`은 현재 상태의 프로젝트를 읽습니다. 퀴즈를 만들고 테스트한 뒤 실행하면 빈 폴더가 아니라 실제 코드를 설명하는 지침을 생성합니다. + +## 작업 방식에 맞게 조정하기 + +지침 파일에는 프로젝트에 관한 사실만 적는 것이 아닙니다. 선호하는 코드 작성 방식, 명명 규칙, 사용하지 않을 라이브러리, 원하는 주석의 양처럼 프롬프트마다 반복할 구체적인 사항을 추가합니다. 이후 모든 세션은 프롬프트를 읽기 전에 이 파일을 읽습니다. + +## 요약 및 다음 단계 + +이제 프로젝트에 실제 코드를 바탕으로 작성한 에이전트 지침이 있습니다. [레슨 5: 프로젝트 게시][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md new file mode 100644 index 000000000..600d06481 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "레슨 5 - 프로젝트 게시" +description: "로컬 Space Quiz 실험 프로젝트를 공개 GitHub 리포지토리로 전환합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Space Quiz를 게시하여 이슈를 관리하고, 격리된 워크트리(Worktree)를 사용하고, 풀 리퀘스트(Pull request) 워크플로를 완료할 수 있도록 합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 폴더를 Git 리포지토리로 초기화합니다. +- 공개 GitHub 리포지토리를 만들고 푸시합니다. +- Copilot app에서 프로젝트를 GitHub에 연결합니다. + +## 리포지토리 게시 + +다음 프롬프트를 보냅니다. + +```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] +> 에이전트는 리포지토리를 만들거나 코드를 푸시하기 전에 확인을 요청합니다. 승인하기 전에 제안한 작업과 대상을 검토합니다. + +에이전트가 작업을 마치면 다음을 수행합니다. + +1. GitHub에서 새 리포지토리를 엽니다. +2. `index.html`이 있는지 확인합니다. +3. Copilot app으로 돌아가 프로젝트가 리포지토리에 연결되어 있는지 확인합니다. + +## 요약 및 다음 단계 + +이제 프로젝트가 GitHub 리포지토리가 되었습니다. [레슨 6: 이슈 및 세션으로 작업하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 000000000..f9d5618d9 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "레슨 6 - 이슈 및 세션으로 작업하기" +description: "범위가 명확한 백로그를 만들고, 이슈를 선택하고, 격리된 워크트리에서 구현한 뒤 변경 사항을 직접 검토합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +에이전트에 범위가 명확한 제품 개선 사항을 제안하도록 요청하고, 아이디어를 GitHub 이슈로 만든 다음 격리된 세션에서 이슈 하나를 구현합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- Space Quiz를 위한 범위가 명확한 이슈 3개를 만듭니다. +- **Issues**에서 백로그를 살펴봅니다. +- 이슈에서 새 워크트리(Worktree)의 세션을 시작합니다. +- **Changes** 탭에서 변경 사항을 검토하고 기능을 검증합니다. + +## Issues에서 백로그 만들기 + +다음 프롬프트를 보냅니다. + +```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. +``` + +**Issues**를 열고 이슈 3개를 검토한 다음, 가치가 명확하고 범위를 감당할 수 있는 이슈 하나를 선택합니다. + +![Copilot app의 Issues 화면 일러스트레이션. 사이드바에는 New, Pull requests, Issues, Automations, Customize, More 및 space-quiz 프로젝트가 나열되어 있습니다. 주요 영역에는 Assigned to me, Created by me, Mentioning me, Done 탭, 검색란, State 및 Assignee 필터, space-quiz 리포지토리의 열린 이슈 3개 목록이 있습니다.](/images/learning-hub/copilot-workshops/first-steps-app-issues.svg) + +**Issues**는 모든 리포지토리의 GitHub 이슈를 앱으로 가져오고 **Assigned to me**, **Created by me**, **Mentioning me**, **Done**으로 필터링합니다. + +## 이슈 구현 + +1. **Issues**에서 선택한 이슈를 엽니다. +2. **New session**을 선택합니다. +3. 메시지가 표시되면 **new worktree**를 선택합니다. +4. **Interactive** 모드와 선호하는 모델을 사용합니다. +5. 다음 프롬프트를 보냅니다. + + ```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. + ``` + +새 워크트리는 검토하고 병합할 준비가 될 때까지 이 기능을 기본 브랜치와 격리합니다. + +## 변경 사항 직접 검토하기 + +에이전트가 결과를 보고하면 보고 내용만 믿고 넘어가지 않습니다. + +1. 오른쪽 플라이아웃 패널을 열고 **Changes** 탭을 선택합니다. +2. 세션에서 수정한 모든 파일의 변경 사항을 읽습니다. +3. 통합 브라우저에서 기능을 테스트하고 이슈의 인수 기준을 충족하는지 확인합니다. + +![오른쪽 플라이아웃 패널에 Changes 탭이 열린 Copilot app 세션 일러스트레이션. 변경된 파일 1개인 index.html에 142줄 추가 및 8줄 삭제가 표시되며, 세션 대화 옆에 인라인 변경 사항이 나타납니다.](/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg) + +**Changes** 탭에는 세션에서 수정한 모든 파일과 인라인 변경 사항이 나열됩니다. + +## 요약 및 다음 단계 + +백로그를 만들고, 격리된 세션에서 이슈 하나를 구현하고, 변경 사항을 검토했습니다. [레슨 7: 편집 전에 계획하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 000000000..a22b16a8d --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "레슨 7 - 편집 전에 계획하기" +description: "두 번째 이슈에 Plan 모드를 사용하여 에이전트가 파일을 변경하기 전에 프로젝트를 조사하고 접근 방식을 제안하게 합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +모든 이슈를 편집부터 시작해야 하는 것은 아닙니다. Plan 모드는 프로젝트를 조사하고 접근 방식을 제안한 다음, 코드를 변경하기 전에 승인을 기다립니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 두 번째 이슈의 세션을 Plan 모드로 시작합니다. +- 에이전트가 제안한 계획을 검토하고 다듬습니다. +- 계획을 승인하고 세션을 이어갈 방식을 선택합니다. + +## 코드를 변경하기 전에 접근 방식에 합의하기 + +1. **Issues**에서 **두 번째 이슈**를 열고 **New session**을 선택합니다. +2. 세션 구성에서 **Interactive**나 **Autopilot** 대신 **Plan**을 선택합니다. +3. 다음 프롬프트를 보내 에이전트가 파일을 변경하지 않고 조사하게 합니다. + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. 제안한 계획을 읽고 빠진 내용이 있으면 수정을 요청합니다. +5. 계획을 승인합니다. +6. 메시지가 표시되면 세션을 **Interactive** 또는 **Autopilot** 중 어떤 모드로 이어갈지 선택합니다. + +> [!TIP] +> **Plan 모드가 도움이 되는 경우** +> +> 모호하거나 여러 영역에 걸쳐 있거나 되돌리는 비용이 큰 작업에 Plan 모드를 사용합니다. 잘못된 접근 방식을 수정하는 데 드는 비용은 첫 편집 전에 가장 적습니다. + +## 요약 및 다음 단계 + +에이전트가 코드를 작성하기 전에 접근 방식에 합의했습니다. [레슨 8: Copilot 검토 사이클 완료][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 000000000..0a30a95ba --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "레슨 8 - Copilot 검토 사이클 완료" +description: "풀 리퀘스트를 만들고, Copilot 검토를 요청하고, 반영할 수 있는 피드백을 처리하고, Agent Merge가 풀 리퀘스트를 병합 가능한 상태로 유지하게 합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +구현한 이슈를 풀 리퀘스트(Pull request)로 만들고, Copilot에 검토를 요청하고, 병합 전에 피드백을 처리합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 세션의 변경 사항을 마지막으로 살펴봅니다. +- 에이전트 세션에서 풀 리퀘스트를 만듭니다. +- Copilot 코드 검토를 요청합니다. +- 반영할 수 있는 피드백을 검토하고 적용합니다. +- Agent Merge를 켜서 병합할 때까지 풀 리퀘스트를 병합 가능한 상태로 유지합니다. + +## 풀 리퀘스트 생성 및 검토 + +1. 오른쪽 플라이아웃 패널을 열고 **Changes** 탭을 선택하여 세션에서 변경한 파일을 살펴봅니다. +2. 세션 도구 모음에서 **Create PR**을 선택합니다. +3. 생성된 제목과 설명을 검토한 다음 풀 리퀘스트를 만듭니다. +4. GitHub에서 풀 리퀘스트를 엽니다. +5. **Reviewers** 메뉴에서 **Copilot**에 검토를 요청합니다. +6. **Files changed** 탭을 열고 모든 검토 댓글을 읽습니다. +7. 반영할 수 있는 각 댓글에 대해 앱의 Copilot **Fix** 작업을 사용하거나 직접 수정합니다. +8. 각 변경 사항을 검토하고 기능을 다시 테스트합니다. +9. 변경한 내용을 간결하게 설명하는 답글을 작성한 다음 대화를 해결 처리합니다. + +> [!NOTE] +> 제안이 해당 작업에 맞지 않거나 풀 리퀘스트의 범위를 벗어나면 불필요한 수정을 하지 말고 이유를 답글로 남깁니다. 병합 전에 모든 검토 대화를 해결 처리합니다. + +## Agent Merge로 병합하기 + +풀 리퀘스트에서 **Agent Merge**를 켜서 에이전트가 병합 가능한 상태를 유지하게 합니다. 에이전트는 검토 댓글을 처리하고, 실패한 검사를 수정하고, 충돌이 발생하면 해결한 다음 모든 항목이 통과하면 병합합니다. + +직접 병합하고 싶다면 최종 변경 사항을 검토하고, 기능을 검증하고, 모든 검사가 통과한 뒤 풀 리퀘스트를 병합합니다. + +## 요약 및 다음 단계 + +이슈부터 검토와 병합을 마친 풀 리퀘스트까지 개발 사이클을 완료했습니다. [레슨 9: 이슈 분류 자동화][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md new file mode 100644 index 000000000..b31d198a0 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "레슨 9 - 이슈 분류 자동화" +description: "최근 열린 이슈를 요약하는 주간 자동화를 만들고 실행합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +자동화를 사용하여 반복되는 이슈 분류 작업을 예약된 에이전트 워크플로로 전환합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 주간 자동화를 만듭니다. +- 자동화를 Space Quiz 프로젝트에 연결합니다. +- 자동화를 즉시 실행하고 결과를 검토합니다. + +## 자동화 만들기 + +![All, Local, Cloud 필터, 검색란, Templates 및 New automation 버튼, space-quiz 프로젝트의 주간 자동화 카드 2개인 Issue triage와 Accessibility audit가 표시된 Copilot app의 Automations 화면 일러스트레이션.](/images/learning-hub/copilot-workshops/first-steps-app-automations.svg) + +자동화는 일정에 따라 같은 프롬프트를 각각 별도의 세션에서 실행하므로 작업을 방해하지 않습니다. **All**, **Local**, **Cloud**로 필터링할 수 있으며 원하는 자동화를 필요할 때 실행할 수 있습니다. + +1. **Automations**를 엽니다. +2. 새 주간 자동화용 템플릿을 선택합니다. +3. 다음 프롬프트를 입력합니다. + + ```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. 세션 모드를 **Autopilot**으로 설정합니다. +5. 모델을 **Auto**로 설정합니다. +6. `space-quiz` 프로젝트를 선택합니다. +7. **Create** 드롭다운을 열고 **Create and run**을 선택합니다. + +생성된 요약을 검토하고 리포지토리에서 최근 생성되어 아직 열린 이슈를 참조하는지 확인합니다. + +## 요약 및 다음 단계 + +일정에 따라 실행되는 재사용 가능한 에이전트 워크플로를 만들었습니다. [레슨 10: 원격으로 세션 이어가기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/index.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/index.md new file mode 100644 index 000000000..a0e74d3e5 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/index.md @@ -0,0 +1,55 @@ +--- +title: "GitHub Copilot app 둘러보기" +description: "Space Quiz를 만들고 출시하면서 GitHub Copilot app을 단계별로 살펴봅니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +초보자도 쉽게 따라 할 수 있는 실습으로 GitHub Copilot app을 살펴봅니다. 빈 폴더에서 다채로운 Space Quiz를 만들고, 첫 프롬프트부터 검토를 마친 풀 리퀘스트(Pull request)까지 전체 개발 사이클을 진행합니다. + +워크숍에는 약 60~90분이 걸립니다. 프로젝트는 런타임 의존성이 없는 단일 HTML 파일을 사용하므로 앱과 에이전트 기반 워크플로를 익히는 데 집중할 수 있습니다. + +> [!NOTE] +> 이 워크숍은 [James Montemagno][james]가 만들었으며 [First Steps with GitHub Copilot][source-lab]을 바탕으로 구성했습니다. 원본 콘텐츠는 [MIT License][source-license]로 제공됩니다. + +## 레슨 + +| 레슨 | 주제 | 수행할 작업 | +| ------ | ----- | ---------------- | +| [0. 사전 준비 및 설정][lesson-0] | 설정 | 사전 준비 사항을 확인하고, 앱을 설치하고, 모델을 선택하고, 워크스페이스를 살펴봅니다 | +| [1. 워크스페이스 만들기][lesson-1] | 생성 | 빈 로컬 폴더에서 Interactive 세션을 시작합니다 | +| [2. 만들고 다듬기][lesson-2] | 빌드 | 퀴즈를 만들고 통합 브라우저에서 다듬습니다 | +| [3. 살펴보고 테스트하기][lesson-3] | 컨텍스트 및 테스트 | 세션 세부 정보를 읽고 브라우저 수준의 스모크 테스트(Smoke test)를 실행합니다 | +| [4. 프로젝트 지침 작성][lesson-4] | 지침 | `/init`으로 에이전트 지침을 생성하고 맞춤 설정합니다 | +| [5. 프로젝트 게시][lesson-5] | 게시 | 로컬 프로젝트에서 공개 GitHub 리포지토리를 만듭니다 | +| [6. 이슈 및 세션으로 작업하기][lesson-6] | 구현 | 백로그를 만들고, 격리된 워크트리(Worktree)에서 이슈 하나를 구현하고, 변경 사항을 검토합니다 | +| [7. 편집 전에 계획하기][lesson-7] | 계획 | Plan 모드로 두 번째 이슈의 접근 방식에 합의합니다 | +| [8. 검토 사이클 완료][lesson-8] | 검토 | 풀 리퀘스트를 만들고, Copilot 검토 피드백을 반영하고, Agent Merge를 사용합니다 | +| [9. 이슈 분류 자동화][lesson-9] | 자동화 | 주간 이슈 분류 자동화를 예약하고 실행합니다 | +| [10. 원격으로 세션 이어가기][lesson-10] | 원격(선택 사항) | `/remote`로 진행 중인 로컬 세션을 웹이나 모바일에서 확인합니다 | +| [11. Canvas 살펴보기][lesson-11] | Canvas | Repository Issues Kanban Canvas에서 작업을 시작합니다 | +| [12. 복습 및 다음 단계][lesson-12] | 복습 | 워크플로를 돌아보고 학습을 이어갑니다 | + +## 시작하기 + +[레슨 0: 사전 준비 및 설정부터 시작합니다][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/ +[lesson-1]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ +[lesson-2]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ +[lesson-3]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ +[lesson-4]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ +[lesson-5]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ +[lesson-6]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ +[lesson-7]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ +[lesson-8]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ +[lesson-9]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ +[lesson-10]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ +[lesson-11]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ +[lesson-12]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 000000000..38ffaca3a --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "레슨 0 - 사전 준비 및 설정" +description: "워크숍의 사전 준비 사항을 확인하고, GitHub Copilot CLI를 설치하고, 로그인하고, 빈 프로젝트 폴더에서 모델을 선택합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +터미널에서 에이전트를 사용합니다. 필요한 사항을 확인하고, GitHub Copilot CLI를 설치하고, 로그인하고, 빈 폴더에서 첫 요청을 보낼 준비를 합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 워크숍의 사전 준비 사항을 확인합니다. +- GitHub Copilot CLI를 설치하고 로그인합니다. +- 프로젝트 폴더를 만들고 신뢰하도록 설정합니다. +- 세션에서 사용할 모델을 선택합니다. + +## 사전 준비 + +다음 사항이 필요합니다. + +- GitHub 계정. [GitHub 계정을 만들거나][github-signup] 기존 계정을 사용합니다. +- 활성 Copilot 플랜. [Copilot Free 또는 유료 Copilot 플랜을 활성화합니다][copilot-plans]. 조직에서 이미 Copilot 액세스를 제공한다면 해당 계정을 사용합니다. +- 설치된 [Git][git]. `git --version`을 실행하여 확인합니다. +- macOS, Windows 또는 Linux를 실행하는 컴퓨터. + +[GitHub CLI][gh-cli](`gh`)는 선택 사항이지만 권장합니다. 에이전트가 대신 리포지토리와 풀 리퀘스트(Pull request)를 만들 수 있게 해 주기 때문입니다. + +> [!NOTE] +> Copilot Business 또는 Copilot Enterprise를 사용하는 경우, 관리자가 **Copilot CLI** 정책을 활성화해야 에이전트 세션이 작동합니다. + +## CLI 설정 + +1. 플랫폼에 맞는 [GitHub Copilot CLI][install-cli]를 설치합니다. +2. 프로젝트 폴더를 만들고 해당 폴더로 이동합니다. + + ```bash + mkdir space-quiz && cd space-quiz + ``` + +3. `copilot`을 실행하고 로그인한 다음 메시지가 표시되면 폴더를 신뢰하도록 설정합니다. +4. `/model`을 실행하고 다음 섹션의 우선순위에 따라 모델을 선택합니다. +5. 아직 설치하지 않았다면 선택적으로 [GitHub CLI][gh-cli]를 설치합니다. + +![space-quiz라는 제목의 터미널 창에 표시된 Copilot CLI 일러스트레이션. 이 폴더의 파일을 신뢰할지 묻고 Yes, proceed가 선택되어 있으며, 세션의 모델을 선택하는 /model 명령과 모든 슬래시 명령을 나열하는 /help 명령을 제안합니다. 프롬프트 줄에는 Create a space exploration quiz가 표시되어 있습니다.](/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg) + +CLI는 신뢰 여부를 묻는 메시지와 `/model` 등 몇 가지 시작 명령을 표시합니다. + +> [!TIP] +> 언제든 `/`를 입력하여 사용 가능한 모든 명령을 살펴보거나, `/help`를 실행하여 전체 참조 정보를 확인합니다. + +## 모델 선택 + +`/model`을 실행할 때 다음 우선순위에 따라 사용 가능한 첫 번째 옵션을 선택합니다. + +1. **GPT-6-Luna**(권장). +2. 균형 잡힌 대안인 **Auto**. +3. [활성 모델 목록][active-models]의 모델 중 하나. + +사용할 수 있는 모델은 플랜, 조직 정책, 제품 버전에 따라 달라집니다. + +## 요약 및 다음 단계 + +Copilot CLI를 설치하고 로그인했으며, 빈 `space-quiz` 폴더에서 실행 중입니다. [레슨 1: 터미널에서 퀴즈 만들기][next-lesson]를 계속 진행합니다. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[git]: https://git-scm.com/downloads +[gh-cli]: https://cli.github.com/ +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md new file mode 100644 index 000000000..8ca106ea7 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "레슨 1 - 터미널에서 퀴즈 만들기" +description: "하나의 상세한 요청으로 Copilot CLI에 전체 Space Quiz를 만들도록 한 다음, 범위를 한정하여 한 가지를 개선합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +하나의 상세한 요청으로 전체 프로젝트를 만들도록 하고, 승인 전에 에이전트의 제안을 검토한 다음 범위를 한정하여 작은 변경을 한 가지 적용합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 의존성이 없는 퀴즈를 `index.html`에 만듭니다. +- 세션에서 퀴즈를 브라우저로 엽니다. +- 범위를 한정하여 한 가지를 수정하고 검증합니다. + +## 퀴즈 만들기 + +Copilot CLI 세션에서 다음 프롬프트를 보냅니다. + +```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 an emoji reaction at the end. Single index.html, no server or dependencies. Accessible, keyboard-navigable, and respects prefers-color-scheme. +``` + +1. 제안한 계획을 읽고 파일 변경을 승인합니다. +2. 브라우저에서 `index.html`을 열고 몇 문제를 풀어 봅니다. 세션에서 실행하려면 macOS에서는 `!open index.html`, Windows에서는 `!start index.html`, Linux에서는 `!xdg-open index.html`을 실행합니다. + +## 작은 변경을 적용한 다음 확인하기 + +범위를 한정한 요청이 어떻게 작동하는지 확인하기 위해 한 가지에 집중한 개선을 요청합니다. + +```plaintext +The results screen feels flat. Give it a stronger sense of arrival: animate the score counting up and make the emoji reaction larger. Change nothing else. +``` + +1. 브라우저에서 페이지를 새로 고침하고 끝까지 풀어 봅니다. +2. 아직 Git에 기록한 내용이 없어 변경 사항을 비교할 기준도 없다는 점을 확인합니다. 프로젝트를 게시하면 달라집니다. + +## 요약 및 다음 단계 + +퀴즈를 만들고 범위를 한정한 요청으로 다듬었습니다. [레슨 2: 프로젝트 지침 작성][next-lesson]을 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md new file mode 100644 index 000000000..58acd99eb --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "레슨 10 - 복습 및 다음 단계" +description: "Copilot CLI 워크플로를 돌아보고 학습을 이어갈 리소스를 찾습니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +터미널 중심의 작업 사이클을 완료했습니다. 터미널을 벗어나지 않고 퀴즈를 만들고, 변경 사항을 검토하고, 게시하고, 세션을 병렬로 실행하고, 편집 전에 계획을 세우고, 세션을 재개하고, 풀 리퀘스트(Pull request)를 병합하고, 새 작업을 위임했습니다. + +## 완료한 작업 + +다음 작업을 수행했습니다. + +- Copilot CLI를 설치하고 `/model`로 모델을 선택했습니다. +- 하나의 프롬프트로 퀴즈를 만들고 다듬었습니다. +- `/init`으로 프로젝트 규칙을 기록했습니다. +- 프롬프트로 요청하거나 직접 프로젝트를 게시했습니다. +- 사이드 패널에서 채팅에 이슈를 추가하고 `/diff`로 변경 사항을 검토했습니다. +- `/worktree`로 별도의 워크트리(Worktree)에서 두 번째 세션을 실행했습니다. +- 코드를 변경하기 전에 `/plan`으로 두 번째 이슈의 계획을 세웠습니다. +- `/context`와 `/clear`로 컨텍스트를 살펴보고 관리했습니다. +- `copilot --resume`과 `/resume`으로 세션을 재개했습니다. +- `/pr create`와 `/pr agentmerge`로 풀 리퀘스트를 만들고 병합했습니다. +- `/delegate`로 새 기능을 위임했습니다. + +## 계속 살펴보기 + +- [macOS, Windows, Linux에 Copilot CLI를 설치합니다][install-cli]. +- [Copilot CLI와 슬래시 명령 및 플래그에 대해 알아봅니다][about-cli]. +- [리포지토리와 풀 리퀘스트에 GitHub CLI를 사용합니다][gh-cli]. +- [Git을 설치합니다][git]. +- [실제 코드에서도 효과적인 프롬프트를 작성하는 모범 사례를 살펴봅니다][best-practices]. +- [Copilot 플랜을 비교합니다][copilot-plans]. + +[GitHub Copilot app 첫걸음 워크숍][first-steps-app]이나 [Visual Studio Code 첫걸음 워크숍][first-steps-vscode]에서 다른 작업 방식으로 동일한 Space Quiz를 만들어 봅니다. 완전한 애플리케이션과 팀 백로그를 사용하는 더 심도 있는 시나리오를 진행할 준비가 되었다면 [실전 Copilot CLI 워크숍][real-world-cli]을 계속 진행합니다. + +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[about-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[gh-cli]: https://cli.github.com/ +[git]: https://git-scm.com/downloads +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-vscode]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-cli]: /ko-kr/learning-hub/copilot-workshops/cli/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 000000000..be3d4c3f6 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "레슨 2 - 프로젝트 지침 작성" +description: "/init을 실행하여 완성된 Space Quiz를 설명하는 에이전트 지침을 생성한 다음, 작업 방식에 맞게 조정합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +디스크에 정상적으로 작동하는 퀴즈가 있으므로 실제 프로젝트를 설명하는 에이전트 지침을 생성합니다. 이후 모든 세션은 작업을 시작하기 전에 이 지침을 읽으므로, 프롬프트마다 같은 안내를 반복할 필요가 없습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/init`으로 에이전트 지침을 생성합니다. +- 생성된 파일을 수락하기 전에 검토합니다. +- 지침을 간결하게 정리하고 맞춤 설정합니다. + +## `/init`으로 규칙 기록하기 + +1. 세션에서 `/init`을 실행합니다. +2. 생성된 지침 파일을 수락하기 전에 검토합니다. +3. 단일 파일, 의존성 없음, 접근성, 브라우저 테스트 등 이 프로젝트에 맞는 안내만 남깁니다. + +> [!IMPORTANT] +> **순서가 중요합니다** +> +> `/init`은 현재 상태의 프로젝트를 읽습니다. 퀴즈를 만들고 다듬은 뒤 실행하면 실제 코드를 바탕으로 하는 지침을 생성합니다. + +## 작업 방식에 맞게 조정하기 + +지침 파일에는 프로젝트에 관한 사실만 적는 것이 아닙니다. 선호하는 코드 작성 방식, 명명 규칙, 사용하지 않을 라이브러리, 원하는 주석의 양처럼 프롬프트마다 반복할 구체적인 사항을 추가합니다. 이후 모든 세션은 프롬프트를 읽기 전에 이 파일을 읽습니다. + +## 요약 및 다음 단계 + +이제 프로젝트에 실제 코드를 바탕으로 작성한 에이전트 지침이 있습니다. [레슨 3: 프로젝트 게시][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md new file mode 100644 index 000000000..aa06127b3 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "레슨 3 - 프로젝트 게시" +description: "프롬프트로 요청하거나 직접 명령을 실행하여 Space Quiz를 초기화하고 커밋하고 GitHub에 게시합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +실험 프로젝트를 공개 GitHub 리포지토리로 전환합니다. 하나의 프롬프트로 요청하거나 직접 명령을 실행할 수 있습니다. 두 방식을 한 번씩 시도하면 에이전트가 대신 어떤 작업을 수행하는지 정확히 알 수 있습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- Git 리포지토리를 초기화하고 첫 커밋을 만듭니다. +- 공개 GitHub 리포지토리를 만들고 푸시합니다. +- 커밋과 파일이 반영되었는지 확인합니다. + +## 옵션 A: 에이전트에 요청하기 + +다음 프롬프트를 보냅니다. + +```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. +``` + +에이전트가 요청할 때마다 각 Git 및 GitHub 작업을 승인합니다. + +## 옵션 B: 직접 실행하기 + +각 명령 앞에 `!`를 붙여 세션 안에서 실행하거나, 직접 사용하는 터미널에서 접두사 없이 명령을 실행합니다. + +```plaintext +!git init -b main +!git add . +!git commit -m "Add space quiz" +!gh repo create space-quiz --public --source=. --push +``` + +마지막 명령은 [GitHub CLI][gh-cli]를 사용합니다. 설치되어 있지 않다면 GitHub에서 리포지토리를 만든 다음 `!git remote add origin `과 `!git push -u origin main`을 실행합니다. + +## 결과 확인 + +1. `!git log --oneline`을 실행하여 커밋이 반영되었는지 확인합니다. +2. GitHub에서 리포지토리를 열고 `index.html`이 있는지 확인합니다. + +## 요약 및 다음 단계 + +이제 프로젝트는 정상 동작이 확인된 버전을 비교 기준으로 사용할 수 있는 GitHub 리포지토리입니다. [레슨 4: 이슈를 병렬로 작업하기][next-lesson]를 계속 진행합니다. + +[gh-cli]: https://cli.github.com/ +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 000000000..4951ad093 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "레슨 4 - 이슈를 병렬로 작업하기" +description: "백로그를 만들고, 사이드 패널에서 채팅에 이슈를 추가하고, /diff로 변경 사항을 검토하고, 별도의 워크트리에서 두 번째 세션을 시작합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +터미널에서 백로그와 구현 사이클을 관리하고, 독립적인 작업을 위해 별도의 세션을 엽니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 범위가 명확한 GitHub 이슈 3개를 만듭니다. +- 사이드 패널에서 채팅에 이슈를 추가하고 구현합니다. +- `/diff`로 변경 사항을 검토합니다. +- 격리된 워크트리(Worktree)에서 두 번째 세션을 시작합니다. + +## 백로그 만들기 + +다음 프롬프트를 보냅니다. + +```plaintext +Review the space quiz and create three focused GitHub issues with clear titles, user-focused descriptions, and acceptance criteria. Do not implement them yet. +``` + +## 현재 세션에서 첫 번째 이슈 작업하기 + +1. Left arrow 키를 눌러 사이드 패널을 연 다음 Tab을 눌러 **Issues** 탭으로 이동합니다. +2. 첫 번째 이슈를 강조 표시하고 c를 눌러 채팅에 컨텍스트로 추가합니다. 먼저 전체 이슈를 읽으려면 대신 Enter를 누릅니다. +3. 에이전트에 이슈 구현을 요청합니다. + +![터미널에 표시된 Copilot CLI 사이드 패널 일러스트레이션. Current, Sessions, Issues, Pull requests, Gists 탭 중 Issues 탭이 선택되어 있습니다. space-quiz 리포지토리의 열린 이슈 검색 필터에 Add a score screen at the end of the quiz라는 이슈 하나가 표시됩니다. 안내에는 Left arrow 키로 패널을 열고 Tab으로 탭 사이를 이동한다고 설명되어 있으며, 맨 아래에는 검색용 슬래시, 세부 정보용 Enter, 열기용 o, 워크트리용 w, 채팅용 c, 전체 보기용 a 키가 나열되어 있습니다.](/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg) + +사이드 패널의 맨 위에는 모든 탭이 나열되어 있으며, 맨 아래의 안내에는 강조 표시된 항목에 작업을 수행하는 키가 표시됩니다. + +## `/diff`로 변경 사항 검토하기 + +프로젝트를 게시했으므로 정상 동작이 확인된 버전을 비교 기준으로 사용할 수 있습니다. `/diff`는 그 버전에서 이 이슈로 인해 달라진 내용을 정확히 보여 줍니다. 바로 이 내용을 다른 사람에게 검토하도록 요청하게 됩니다. + +1. `/diff`를 실행하고 변경된 모든 파일을 읽습니다. +2. 잘못된 부분이 있으면 수정을 요청한 다음 `/diff`를 다시 실행합니다. +3. Git을 직접 살펴보고 싶을 때마다 `!git status` 또는 `!git diff`를 실행합니다. + +## 두 번째 이슈를 병렬로 작업하기 + +1. 사이드 패널을 다시 열고 **Sessions** 탭으로 전환합니다. +2. 첫 번째 세션을 유지하면서 두 번째 이슈를 위한 다른 세션을 시작합니다. +3. 새 세션에서 `/worktree`를 실행하여 현재 위치에서 브랜치를 만드는 대신 격리된 워크트리를 사용하게 합니다. 이제 두 세션이 서로 간섭하지 않고 동시에 실행될 수 있습니다. +4. c로 해당 세션에 두 번째 이슈를 추가합니다. +5. 지금은 세션을 이 상태로 둡니다. 다음 레슨에서는 코드를 작성하기 전에 이 이슈의 계획을 세웁니다. + +![Copilot CLI에서 /worktree를 실행한 뒤의 출력 일러스트레이션. issue-13-review-screen 브랜치에 ../space-quiz-13 워크트리를 만들었으며, main은 변경하지 않고 현재 세션이 그곳에서 작업한다고 보고합니다.](/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg) + +`/worktree`는 세션을 별도 브랜치의 별도 체크아웃으로 옮기므로 첫 번째 세션은 방해받지 않고 계속 작업합니다. + +## 요약 및 다음 단계 + +첫 번째 이슈를 구현하고, `/diff`로 검토하고, 별도의 워크트리에서 두 번째 세션을 시작했습니다. [레슨 5: 편집 전에 계획하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 000000000..5a1c6f1ca --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "레슨 5 - 편집 전에 계획하기" +description: "/plan으로 두 번째 세션을 계획 모드로 전환하여 에이전트가 파일을 편집하기 전에 접근 방식을 제안하게 합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +이미 별도의 워크트리(Worktree)에서 두 번째 세션이 실행 중입니다. 그 세션에서는 코드부터 작성하지 않습니다. 계획 모드는 파일을 변경하지 않고 프로젝트를 조사하여 접근 방식을 제안합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 두 번째 세션을 계획 모드로 전환합니다. +- 에이전트가 제안한 계획을 검토하고 다듬습니다. +- 계획을 승인하고 세션에서 구현하게 합니다. + +## 편집하기 전에 접근 방식에 합의하기 + +1. 이전 레슨에서 연 **두 번째 세션**으로 전환합니다. +2. `/plan`을 실행하여 해당 세션을 계획 모드로 전환합니다. +3. 다음 프롬프트를 보내 에이전트가 아무것도 편집하지 않고 조사하게 합니다. + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. 계획을 읽고 빠진 내용은 보완하도록 요청한 다음 승인합니다. +5. 세션은 승인된 계획을 작업 지침으로 삼아 구현을 이어갑니다. + +> [!TIP] +> **계획 모드가 도움이 되는 경우** +> +> 모호하거나 여러 영역에 걸쳐 있거나 되돌리는 비용이 큰 작업에 계획 모드를 사용합니다. 잘못된 접근 방식을 수정하는 데 드는 비용은 첫 편집 전에 가장 적습니다. + +## 요약 및 다음 단계 + +에이전트가 코드를 작성하기 전에 접근 방식에 합의했습니다. [레슨 6: 에이전트가 볼 수 있는 내용 파악하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md new file mode 100644 index 000000000..ac3a37370 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "레슨 6 - 에이전트가 볼 수 있는 내용 파악하기" +description: "/context로 컨텍스트 윈도우를 채우는 내용을 살펴보고, 대화가 주제에서 벗어나면 /clear로 새로 시작합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +터미널 명령으로 컨텍스트를 확인하고 의도적으로 관리할 수 있습니다. 에이전트가 볼 수 있는 내용을 알면 결과를 이해하고 언제 새로 시작할지 판단하는 데 도움이 됩니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/context`로 컨텍스트 윈도우(Context window)를 살펴봅니다. +- 각 부분이 윈도우에서 차지하는 공간을 확인합니다. +- `/clear`로 주제에서 벗어난 대화를 초기화합니다. + +## 컨텍스트 살펴보기 + +1. `/context`를 실행하여 파일, 지침, 대화 기록을 살펴봅니다. +2. 각 부분이 윈도우에서 얼마나 많은 공간을 사용하는지 확인합니다. +3. 대화가 주제에서 벗어나면 `/clear`를 실행하여 새로 시작합니다. +4. 다른 변경을 요청하기 전에 적절한 파일을 다시 추가합니다. + +![Copilot CLI에서 /context를 실행한 뒤의 출력 일러스트레이션. 컨텍스트 윈도우 사용량은 61%로 표시되며 대화, 읽은 파일, 지침으로 나뉩니다. 남은 공간이 적으면 /compact로 요약하거나 새 세션을 시작하라는 안내가 있습니다.](/images/learning-hub/copilot-workshops/first-steps-cli-context.svg) + +`/context`는 컨텍스트 윈도우를 정확히 무엇이 채우는지, 공간이 얼마나 남았는지 보여 줍니다. 남은 공간이 적으면 `/compact`로 대화를 요약하거나 새 세션을 시작합니다. + +## 요약 및 다음 단계 + +이제 에이전트가 아는 내용을 확인하고 관리할 수 있습니다. [레슨 7: 세션 재개 및 원격 이용][next-lesson]을 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 000000000..f457f5e71 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "레슨 7 - 세션 재개 및 원격 이용" +description: "Copilot CLI 세션을 나갔다가 나중에 copilot --resume 또는 /resume으로 돌아오고, 선택적으로 /remote로 다른 기기에서 확인합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +대화나 워크스페이스 컨텍스트를 잃지 않고 세션을 일시 중지할 수 있습니다. 세션을 나갔다가 나중에 돌아오고, 필요하다면 다른 기기에서도 이용할 수 있게 합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 세션을 종료하고 터미널에서 재개합니다. +- CLI를 벗어나지 않고 세션 사이를 전환합니다. +- 선택적으로 세션을 원격으로 이용할 수 있게 합니다. + +## 세션을 나갔다가 나중에 돌아오기 + +1. 다른 작업으로 전환할 준비가 되면 현재 Copilot CLI 세션을 종료합니다. +2. 터미널에서 `copilot --resume`을 실행하여 이전 세션을 선택합니다. +3. Copilot CLI 안에서 `/resume`을 사용하여 CLI를 벗어나지 않고 세션 사이를 전환합니다. +4. 복원된 세션에 예상한 파일, 이슈 컨텍스트, 모델이 그대로 있는지 확인합니다. + +## 선택 사항: 원격으로 세션 이어가기 + +`/remote`를 실행하여 *동일한 세션*을 로컬에서 계속 실행하면서 웹과 GitHub Copilot mobile app에서도 이용할 수 있게 합니다. 컴퓨터를 켜 두어야 합니다. 반환된 링크를 브라우저에서 열거나 GitHub Copilot mobile app에서 세션에 액세스합니다. + +> [!NOTE] +> `/remote`는 위임하는 기능이 아니며 실행을 클라우드로 옮기지 않습니다. 이 워크숍의 필수 과정이 아니므로 로컬 작업 사이클에 익숙해진 뒤 시도합니다. + +## 요약 및 다음 단계 + +세션을 일시 중지하고 재개하며, 다른 기기에서 로컬 세션을 확인할 수 있습니다. [레슨 8: CLI에서 생성, 검토, 병합][next-lesson]을 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 000000000..7687713d1 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "레슨 8 - CLI에서 생성, 검토, 병합" +description: "최종 변경 사항을 살펴보고, /pr create로 풀 리퀘스트를 만들고, 피드백을 처리하고, /pr agentmerge로 병합합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +데스크톱 사용자 인터페이스로 전환하지 않고 개발 사이클을 마무리합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 변경된 파일을 마지막으로 살펴봅니다. +- 현재 브랜치에서 풀 리퀘스트(Pull request)를 만듭니다. +- 풀 리퀘스트를 검토하고 피드백을 처리합니다. +- `/pr agentmerge`로 풀 리퀘스트를 검증하고 병합합니다. + +## 생성, 검토, 병합 + +1. `/diff`를 실행하여 변경된 파일을 마지막으로 살펴봅니다. +2. Copilot에 현재 브랜치에서 풀 리퀘스트를 만들도록 요청하거나 `/pr create`를 실행합니다. +3. 사이드 패널의 **Pull requests** 탭을 열고 제목, 설명, 파일, 상태 검사를 확인합니다. +4. 반영할 수 있는 피드백에 따라 수정하고, 브라우저에서 결과를 확인하고, 변경한 내용을 답글로 남깁니다. +5. 풀 리퀘스트가 준비되면 `/pr agentmerge`를 실행하여 검증하고, 필요한 확인과 검사를 통과한 뒤 병합합니다. + +## 요약 및 다음 단계 + +터미널을 벗어나지 않고 풀 리퀘스트를 만들고 검토하고 병합했습니다. [레슨 9: 작업 사이클을 신뢰하게 된 뒤 위임하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 000000000..f7c88eb84 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "레슨 9 - 작업 사이클을 신뢰하게 된 뒤 위임하기" +description: "새 Space Quiz 기능을 /delegate에 맡기고, 실행되는 동안 계속 작업하고, CLI에서 클라우드 세션을 확인합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +기능 하나를 출시했습니다. 이제 좋은 결과가 어떤 모습인지 알게 되었으므로, 완전히 새로운 아이디어를 직접 지켜보며 진행하기보다 다른 작업과 나란히 실행해 볼 만합니다. 이 레슨에서는 완료한 퀴즈 결과를 플레이어가 게시할 수 있는 카드로 바꾸는 **공유 가능한 미션 보고서** 구현을 위임합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/delegate`로 새 기능을 위임합니다. +- 위임한 작업이 실행되는 동안 기본 세션에서 계속 작업합니다. +- 위임한 결과를 수락하기 전에 비교합니다. + +> [!NOTE] +> `/delegate`와 클라우드 세션에는 이용 자격이 있는 유료 Copilot 플랜이 필요합니다. Business와 Enterprise의 액세스도 관리자가 활성화해야 할 수 있습니다. + +## 새 기능 위임 + +`/delegate`를 실행하고 다음 작업을 맡깁니다. + +```plaintext +Delegate this: add a shareable mission report to the space quiz. At the end of a run, generate a compact summary card with the score, a rank title based on the percentage, and the slowest question. Add a Copy result button that puts a short plain-text version on the clipboard. Keep it in the single index.html with no dependencies, keep it keyboard accessible, and report back with what changed. +``` + +1. 위임한 작업이 실행되는 동안 기본 세션에서 계속 작업합니다. +2. 위임한 결과를 수락하기 전에 현재 세션의 결과와 비교합니다. +3. 규모가 더 크고 요구 사항이 명확한 이슈라면 **클라우드 세션**을 시작하고 CLI에서 진행 상황을 확인합니다. + +## 요약 및 다음 단계 + +하나의 완전한 기능을 위임하고 결과를 검토했습니다. [레슨 10: 복습 및 다음 단계][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md new file mode 100644 index 000000000..3212200dd --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md @@ -0,0 +1,52 @@ +--- +title: "GitHub Copilot CLI 첫걸음" +description: "Space Quiz를 만들고 출시하면서 터미널 중심으로 GitHub Copilot CLI를 단계별로 살펴봅니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop + - cli +--- + +초보자도 쉽게 따라 할 수 있는 실습으로 GitHub Copilot CLI를 살펴봅니다. 빈 폴더에서 다채로운 Space Quiz를 만들고 터미널 중심의 작업 사이클을 익힙니다. Git에 기록하기 전에 빌드하고 변경 사항을 검토하며, 세션을 나란히 실행하고, 편집 전에 계획을 세운 다음 셸을 벗어나지 않고 풀 리퀘스트(Pull request)를 만들고 병합합니다. + +워크숍에는 약 60~90분이 걸립니다. 프로젝트는 런타임 의존성이 없는 단일 HTML 파일을 사용하므로 CLI와 에이전트 기반 워크플로를 익히는 데 집중할 수 있습니다. + +> [!NOTE] +> 이 워크숍은 [James Montemagno][james]가 만들었으며 [First Steps with GitHub Copilot][source-lab]을 바탕으로 구성했습니다. 원본 콘텐츠는 [MIT License][source-license]로 제공됩니다. + +## 레슨 + +| 레슨 | 주제 | 수행할 작업 | +| ------ | ----- | ---------------- | +| [0. 사전 준비 및 설정][lesson-0] | 설정 | 사전 준비 사항을 확인하고, Copilot CLI를 설치하고, 로그인하고, 모델을 선택합니다 | +| [1. 퀴즈 만들기][lesson-1] | 빌드 | 터미널에서 퀴즈를 만들고 범위를 한정하여 한 가지를 수정합니다 | +| [2. 프로젝트 지침 작성][lesson-2] | 지침 | `/init`으로 에이전트 지침을 생성하고 맞춤 설정합니다 | +| [3. 프로젝트 게시][lesson-3] | 게시 | 프롬프트로 요청하거나 직접 초기화, 커밋, 게시를 수행합니다 | +| [4. 이슈를 병렬로 작업하기][lesson-4] | 구현 | 백로그를 만들고, 채팅에 이슈를 추가하고, `/diff`로 검토하고, 워크트리(Worktree)에서 두 번째 세션을 시작합니다 | +| [5. 편집 전에 계획하기][lesson-5] | 계획 | `/plan`으로 두 번째 이슈의 접근 방식에 합의합니다 | +| [6. 에이전트가 볼 수 있는 내용 파악하기][lesson-6] | 컨텍스트 | `/context`와 `/clear`로 컨텍스트를 살펴보고 초기화합니다 | +| [7. 세션 재개 및 원격 이용][lesson-7] | 재개 | `/resume`으로 세션을 나갔다가 돌아오고, 선택적으로 `/remote`로 다른 기기에서 로컬 세션을 확인합니다 | +| [8. 생성, 검토, 병합][lesson-8] | 검토 | `/pr create`와 `/pr agentmerge`로 풀 리퀘스트를 만들고 병합합니다 | +| [9. 작업 위임][lesson-9] | 위임 | 새 기능을 `/delegate`에 맡기고 클라우드 세션을 확인합니다 | +| [10. 복습 및 다음 단계][lesson-10] | 복습 | 워크플로를 돌아보고 학습을 이어갑니다 | + +## 시작하기 + +[레슨 0: 사전 준비 및 설정부터 시작합니다][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites/ +[lesson-1]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ +[lesson-2]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ +[lesson-3]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ +[lesson-4]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ +[lesson-5]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ +[lesson-6]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ +[lesson-7]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ +[lesson-8]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ +[lesson-9]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ +[lesson-10]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/index.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/index.md new file mode 100644 index 000000000..a92eb274b --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/index.md @@ -0,0 +1,36 @@ +--- +title: "첫걸음" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +첫걸음 워크숍은 기존 애플리케이션이나 구체적인 개발 시나리오 없이도 GitHub Copilot을 살펴볼 수 있도록 안내하는 입문 과정입니다. 각 워크숍은 작은 작업부터 시작하여 제품을 직접 사용하면서 익히고, 하나의 완전한 워크플로를 끝까지 진행합니다. + +모든 워크숍에서 빈 폴더로 시작하여 동일한 Space Quiz를 만듭니다. 배우고 싶은 도구를 선택하거나, 여러 워크숍을 완료하여 도구별 작업 방식을 비교할 수 있습니다. + +> [!NOTE] +> 이 워크숍은 [James Montemagno][james]가 만들었으며, [MIT License][source-license]로 제공하는 [First Steps with GitHub Copilot][source-lab]을 바탕으로 구성했습니다. + +## 워크숍 + +### [GitHub Copilot app 둘러보기][copilot-app] + +빈 폴더에서 다채로운 Space Quiz를 만들고 개발 사이클을 진행합니다. 생성, 개선, 테스트, 프로젝트 지침 작성, 게시, 작업 계획, 이슈 구현, 풀 리퀘스트(Pull request) 검토 및 병합, 반복 작업 자동화, Canvas 확장 탐색을 수행합니다. + +### [GitHub Copilot CLI 첫걸음][copilot-cli] + +터미널 중심의 작업 사이클을 익힙니다. Git에 기록하기 전에 빌드하고 변경 사항을 검토하며, 워크트리(Worktree)에서 세션을 나란히 실행하고, 편집 전에 계획을 세우고, 컨텍스트를 관리합니다. 이어서 셸을 벗어나지 않고 작업을 생성하고 병합하고 위임합니다. + +### [Visual Studio Code 첫걸음][vscode] + +편집기 중심의 작업 사이클을 사용합니다. 워크스페이스에서 빌드하고, 통합 브라우저로 요소를 다듬고, 컨텍스트를 살펴보고, Git에 기록하기 전에 테스트하고, 편집 전에 계획을 세웁니다. 또한 VS Code를 벗어나지 않고 GitHub 도구로 이슈, 풀 리퀘스트, 클라우드 세션을 처리합니다. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[copilot-app]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/ +[copilot-cli]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[vscode]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md new file mode 100644 index 000000000..6f19f55d1 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "레슨 0 - 사전 준비 및 설정" +description: "워크숍의 사전 준비 사항을 확인하고, VS Code의 Copilot Chat을 확인하고, GitHub Pull Requests and Issues 확장을 추가하고, 모델을 선택합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +편집기에서 Copilot을 사용합니다. VS Code에는 Copilot이 포함되어 있으므로 채팅을 위해 따로 설치할 필요가 없습니다. GitHub 확장을 추가한 다음 빈 폴더를 엽니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 워크숍의 사전 준비 사항을 확인합니다. +- VS Code에서 Copilot Chat이 응답하는지 확인합니다. +- GitHub Pull Requests and Issues 확장을 설치합니다. +- 빈 프로젝트 폴더를 열고 모델을 선택합니다. + +## 사전 준비 + +다음 사항이 필요합니다. + +- GitHub 계정. [GitHub 계정을 만들거나][github-signup] 기존 계정을 사용합니다. +- 활성 Copilot 플랜. [Copilot Free 또는 유료 Copilot 플랜을 활성화합니다][copilot-plans]. 조직에서 이미 Copilot 액세스를 제공한다면 해당 계정을 사용합니다. +- [Visual Studio Code][vscode]. +- 설치된 [Git][git]. 터미널에서 `git --version`을 실행하여 확인합니다. + +## VS Code 설정 + +1. [VS Code][vscode]를 설치하고 GitHub에 로그인합니다. Copilot과 Copilot Chat은 기본 제공되므로 제목 표시줄에서 **Chat** 보기를 열고 응답하는지 확인합니다. +2. **Extensions** 보기를 열고 공식 [GitHub Pull Requests and Issues][pr-extension] 확장을 설치하여 사이드바에 이슈와 풀 리퀘스트(Pull request)가 표시되도록 합니다. +3. `space-quiz`라는 빈 폴더를 만든 다음 **File** > **Open Folder**를 선택하여 엽니다. +4. 다음 섹션의 우선순위에 따라 **Chat** 보기의 모델 선택 도구에서 모델을 선택합니다. + +## 모델 선택 + +사용 가능한 첫 번째 옵션을 선택합니다. + +1. **GPT-6-Luna**(권장). +2. 균형 잡힌 대안인 **Auto**. +3. [활성 모델 목록][active-models]의 모델 중 하나. + +사용할 수 있는 모델은 플랜, 조직 정책, 제품 버전에 따라 달라집니다. + +## 요약 및 다음 단계 + +VS Code에 Copilot Chat, GitHub 확장, 빈 `space-quiz` 폴더가 준비되었습니다. [레슨 1: 워크스페이스에서 만들기][next-lesson]를 계속 진행합니다. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[vscode]: https://code.visualstudio.com/ +[git]: https://git-scm.com/downloads +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 000000000..9f9d61106 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "레슨 1 - 워크스페이스에서 만들기" +description: "VS Code에서 Space Quiz를 만들고, 통합 브라우저에서 미리 보고, 선택한 요소를 다듬습니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +편집기, 채팅, 파일, 미리 보기를 한곳에서 사용합니다. 퀴즈를 만들고 통합 브라우저에서 풀어 본 다음, 특정 요소를 채팅에 바로 전달하여 범위를 한정한 변경을 적용합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 단일 `index.html`에 퀴즈를 만듭니다. +- 통합 브라우저에서 퀴즈를 미리 봅니다. +- 브라우저에서 요소를 선택하고 다듬습니다. + +## 퀴즈 만들기 + +Copilot Chat에서 다음 프롬프트를 보냅니다. + +```plaintext +Create a colorful, accessible space exploration quiz with 10 questions in a single index.html. Add a progress bar, score counter, animated correct and incorrect feedback, and a results screen. Use no server or dependencies. Open it in the VS Code integrated browser. +``` + +1. 편집기에서 생성된 파일을 검토합니다. +2. 통합 브라우저를 열고 여러 문제를 풀어 봅니다. +3. 언제든 **Source Control**을 열어 변경된 파일과 변경 사항을 확인합니다. + +## 요소를 선택하고 다듬기 + +통합 브라우저는 특정 요소를 채팅에 바로 전달할 수 있으므로 어떤 버튼을 가리키는지 설명할 필요가 없습니다. + +1. 통합 브라우저에서 퀴즈를 연 상태로 브라우저 도구 모음에서 요소 선택을 시작합니다. +2. 답변 버튼을 선택하여 해당 요소를 다음 채팅 메시지에 첨부합니다. +3. 다음 프롬프트를 보내고 미리 보기가 새로 고쳐지는 모습을 지켜봅니다. + + ```plaintext + Using the selected element, make the answer buttons feel more tactile: add a subtle press state, a clearer focus ring for keyboard users, and a smoother transition into the correct and incorrect colors. Change nothing else. + ``` + +4. 변경 사항을 유지하기 전에 **Source Control**에서 변경 사항을 읽습니다. +5. Tab을 눌러 답변 사이를 이동하고 포커스 링이 보이는지 확인합니다. + +## 요약 및 다음 단계 + +편집기를 벗어나지 않고 퀴즈를 만들고 미리 보고 다듬었습니다. [레슨 2: 프로젝트 지침 작성][next-lesson]을 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/10-review.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/10-review.md new file mode 100644 index 000000000..88e0efa26 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "레슨 10 - 복습 및 다음 단계" +description: "VS Code 워크플로를 돌아보고 학습을 이어갈 리소스를 찾습니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +편집기 중심의 작업 사이클을 완료했습니다. 편집기에서 퀴즈를 만들고, 지침을 기록하고, 통합 브라우저에서 테스트하고, 편집 전에 계획을 세우고, GitHub 도구로 병합하고, 다음 아이디어를 클라우드 세션에 위임했습니다. + +## 완료한 작업 + +다음 작업을 수행했습니다. + +- Copilot Chat을 확인하고 GitHub Pull Requests and Issues 확장을 추가했습니다. +- 퀴즈를 만들고 통합 브라우저에서 선택한 요소를 다듬었습니다. +- `/init`으로 `.github/copilot-instructions.md`를 생성했습니다. +- 채팅 컨텍스트를 살펴보고 Git에 기록하기 전에 스모크 테스트(Smoke test)를 수행했습니다. +- **Source Control**과 Copilot이 초안을 작성한 커밋 메시지로 게시했습니다. +- 편집하기 전에 Plan 모드에서 기능의 계획을 세웠습니다. +- GitHub MCP를 활성화하고 채팅에서 이슈를 만들었습니다. +- VS Code에서 풀 리퀘스트(Pull request)를 만들고 검토하고 병합했습니다. +- 클라우드 세션에 기능을 위임했습니다. + +## 계속 살펴보기 + +- [채팅, 에이전트 모드, 편집기 기능을 포함하여 VS Code의 Copilot에 대해 알아봅니다][copilot-vscode]. +- [GitHub Pull Requests 확장으로 사이드바에서 이슈와 풀 리퀘스트를 관리합니다][pr-extension]. +- [VS Code의 MCP 서버로 에이전트가 호출할 수 있는 도구를 추가합니다][mcp-servers]. +- [커스텀 지침으로 Copilot에 프로젝트 규칙을 알려 줍니다][custom-instructions]. +- [Git을 설치합니다][git]. +- [Copilot 플랜을 비교합니다][copilot-plans]. + +[GitHub Copilot app 첫걸음 워크숍][first-steps-app]이나 [GitHub Copilot CLI 첫걸음 워크숍][first-steps-cli]에서 다른 작업 방식으로 동일한 Space Quiz를 만들어 봅니다. 완전한 애플리케이션과 팀 백로그를 사용하는 더 심도 있는 시나리오를 진행할 준비가 되었다면 [실전 VS Code 워크숍][real-world-vscode]을 계속 진행합니다. + +[copilot-vscode]: https://code.visualstudio.com/docs/copilot/overview +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[custom-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[git]: https://git-scm.com/downloads +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[real-world-vscode]: /ko-kr/learning-hub/copilot-workshops/vscode/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md new file mode 100644 index 000000000..7932a0b18 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "레슨 2 - 프로젝트 지침 작성" +description: "Copilot Chat에서 /init을 실행하여 Space Quiz의 .github/copilot-instructions.md를 생성한 다음 조정합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +워크스페이스에 정상적으로 작동하는 퀴즈가 있으므로 실제 프로젝트를 설명하는 리포지토리 커스텀 지침을 생성합니다. Copilot은 채팅 요청마다 이 지침을 읽습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/init`으로 리포지토리 커스텀 지침을 생성합니다. +- 저장하기 전에 `.github/copilot-instructions.md`를 검토합니다. +- 지침을 간결하게 정리하고 맞춤 설정합니다. + +## `/init`으로 규칙 기록하기 + +1. Copilot Chat에서 `/init`을 실행합니다. +2. 생성된 `.github/copilot-instructions.md` 파일을 저장하기 전에 검토합니다. +3. 단일 파일, 의존성 없음, 접근성, 브라우저 테스트 등 이 프로젝트에 맞는 안내만 남깁니다. + +![편집기에 .github/copilot-instructions.md를 열고 Explorer에서 index.html 옆의 해당 파일을 선택한 VS Code 일러스트레이션. 파일 제목은 Space Quiz이며, 의존성과 빌드 단계가 없는 단일 index.html, 키보드로 접근 가능한 모든 답변, 두 테마에서 prefers-color-scheme 준수라는 규칙이 나열되어 있습니다. How I like code written 섹션에는 작은 함수, 조기 반환, 이해하기 어려운 한 줄 코드 지양, 실제로 예상하기 어려운 부분에만 주석 작성이라는 요청이 있습니다.](/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg) + +리포지토리 커스텀 지침은 `.github/copilot-instructions.md`에 저장되며 모든 채팅 요청에 적용됩니다. + +> [!IMPORTANT] +> **순서가 중요합니다** +> +> `/init`은 현재 상태의 워크스페이스를 읽습니다. 퀴즈를 만든 뒤 실행하면 실제 코드를 바탕으로 하는 지침을 생성합니다. + +## 작업 방식에 맞게 조정하기 + +지침 파일에는 프로젝트에 관한 사실만 적는 것이 아닙니다. 선호하는 코드 작성 방식, 명명 규칙, 사용하지 않을 라이브러리, 원하는 주석의 양처럼 프롬프트마다 반복할 구체적인 사항을 추가합니다. 이후 모든 세션은 프롬프트를 읽기 전에 이 파일을 읽습니다. + +## 요약 및 다음 단계 + +이제 워크스페이스에 실제 코드를 바탕으로 작성한 커스텀 지침이 있습니다. [레슨 3: 컨텍스트 확인 및 테스트][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 000000000..a85358e9c --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "레슨 3 - 컨텍스트 확인 및 테스트" +description: "Copilot Chat 요청에 첨부된 컨텍스트를 살펴본 다음, Git에 기록하기 전에 브라우저 수준의 스모크 테스트를 실행합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +게시하기 전에 Copilot이 볼 수 있는 내용을 확인하고 퀴즈가 작동하는지 검증합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 채팅 요청에 포함된 컨텍스트를 살펴봅니다. +- 브라우저 수준의 스모크 테스트(Smoke test)를 실행합니다. +- Git 작업으로 넘어가기 전에 실패한 부분을 수정합니다. + +## 오른쪽 아래에서 컨텍스트 확인하기 + +VS Code는 Copilot Chat 입력란의 오른쪽 아래에 활성 컨텍스트를 표시합니다. + +1. 채팅 입력란의 **오른쪽 아래**에 있는 컨텍스트 표시기를 엽니다. +2. 요청에 포함된 파일, 커스텀 지침, 심볼을 살펴봅니다. +3. 계속하기 전에 관련 없는 컨텍스트를 제거하거나 퀴즈 파일을 첨부합니다. + +## Git에 기록하기 전에 빌드하고 테스트하기 + +리포지토리를 초기화하거나 커밋하기 전에 통합 브라우저와 스모크 테스트 프롬프트를 사용합니다. + +```plaintext +Run a browser-level smoke test for the quiz. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. 스모크 테스트를 실행하고 통합 브라우저를 확인합니다. +2. 실패한 부분을 수정하고 모든 항목이 통과할 때까지 테스트를 다시 실행합니다. +3. 빌드와 테스트가 통과한 뒤에만 Git 작업으로 넘어갑니다. + +## 요약 및 다음 단계 + +Copilot이 볼 수 있는 내용을 확인하고 게시 전에 퀴즈를 테스트했습니다. [레슨 4: 프로젝트 게시][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md new file mode 100644 index 000000000..d7ac76fd5 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "레슨 4 - 프로젝트 게시" +description: "VS Code에 내장된 Source Control 통합만으로 Space Quiz를 초기화하고 커밋하고 게시합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +내장 Git 통합만으로 테스트를 마친 퀴즈를 GitHub에 게시하고, Copilot이 실제 변경 사항을 바탕으로 커밋 메시지 초안을 작성하게 합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- **Source Control**에서 리포지토리를 초기화합니다. +- 스테이징된 변경 사항을 바탕으로 커밋 메시지를 생성합니다. +- 새 공개 GitHub 리포지토리에 브랜치를 게시합니다. + +## 초기화, 커밋, 게시 + +1. **Source Control**을 열고 **Initialize Repository**를 선택합니다. +2. 파일을 스테이징합니다. +3. 커밋 메시지 입력란의 **sparkle pencil** 아이콘을 선택하여 Copilot이 스테이징된 변경 사항을 바탕으로 메시지를 작성하게 합니다. 메시지를 읽고 잘못된 부분을 수정한 다음 커밋합니다. +4. **Publish Branch**를 선택하고 GitHub에 공개 `space-quiz` 리포지토리를 만듭니다. +5. 테스트한 파일이 GitHub에 있는지 확인합니다. + +![VS Code의 Source Control 보기 일러스트레이션. Changes 목록에는 index.html과 .github/copilot-instructions.md가 표시되어 있습니다. 커밋 메시지 입력란의 반짝이는 버튼에 대한 설명은 Copilot wrote your message이며, 메시지는 Add per-question timer to the quiz입니다. Commit 버튼 아래에는 Create Pull Request 버튼이 강조 표시되어 있으며, 먼저 커밋하면 이 버튼이 Source Control 안에 나타난다는 안내가 있습니다.](/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg) + +반짝이는 버튼은 스테이징된 변경 사항을 바탕으로 커밋 메시지 초안을 작성합니다. 커밋하면 **Source Control**에서 풀 리퀘스트(Pull request) 생성도 제안합니다. + +## 요약 및 다음 단계 + +이제 테스트를 마친 퀴즈가 GitHub에 게시되었습니다. [레슨 5: 편집 전에 계획하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md new file mode 100644 index 000000000..8bd4d645d --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "레슨 5 - 편집 전에 계획하기" +description: "Copilot Chat을 Plan 모드로 전환하여 파일을 편집하기 전에 워크스페이스를 조사하고 접근 방식을 제안하게 합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Plan 모드는 파일을 변경하지 않고 워크스페이스를 조사하여 구현 계획을 작성합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- Copilot Chat을 Agent에서 Plan으로 전환합니다. +- 제안한 계획을 검토하고 다듬습니다. +- Agent로 다시 전환하여 계획을 구현합니다. + +## 편집하기 전에 접근 방식에 합의하기 + +1. Copilot Chat을 열고 입력란 위의 **mode dropdown**을 사용합니다. +2. **Agent**에서 **Plan**으로 전환합니다. +3. 다음 프롬프트로 다음 기능을 설명하고 Copilot이 워크스페이스를 조사하게 합니다. + + ```plaintext + Plan how to add a review screen that shows every question with the answer I chose. Investigate the existing quiz, list the changes you would make, call out accessibility and single-file risks, and stop before editing. + ``` + +4. 계획을 읽고 수정을 요청한 다음 **Agent**로 다시 전환하여 구현합니다. + +> [!TIP] +> **계획 모드가 도움이 되는 경우** +> +> 모호하거나 여러 영역에 걸쳐 있거나 되돌리는 비용이 큰 작업에 Plan 모드를 사용합니다. 잘못된 접근 방식을 수정하는 데 드는 비용은 첫 편집 전에 가장 적습니다. + +## 요약 및 다음 단계 + +Copilot이 코드를 작성하기 전에 접근 방식에 합의했습니다. [레슨 6: Copilot에 GitHub 연동 도구 제공][next-lesson]을 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md new file mode 100644 index 000000000..2c7d09a52 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "레슨 6 - Copilot에 GitHub 연동 도구 제공" +description: "Copilot에 이슈와 풀 리퀘스트 작업을 요청하기 전에 VS Code에서 GitHub MCP 서버를 활성화하고 검토합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Copilot에 이슈 생성이나 풀 리퀘스트(Pull request) 작업을 요청하기 *전에* GitHub MCP 서버를 활성화합니다. 이 도구를 사용하면 Copilot이 채팅에서 직접 GitHub 데이터를 읽고 쓸 수 있습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- GitHub MCP 서버를 활성화합니다. +- 서버가 요청하는 도구와 권한을 검토합니다. +- 채팅에서 GitHub 도구를 사용할 수 있는지 확인합니다. + +## GitHub MCP 활성화 + +1. VS Code **Settings**를 열고, 사용 중인 버전에 내장 **GitHub MCP** 서버가 포함되어 있다면 활성화합니다. +2. 그렇지 않다면 [MCP 서버 구성 절차][mcp-servers]에 따라 신뢰할 수 있는 GitHub MCP 서버를 설치합니다. +3. 승인하기 전에 서버가 요청하는 도구와 권한을 검토합니다. +4. Copilot Chat의 도구 선택기에 GitHub 도구가 표시되는지 확인합니다. + +## 요약 및 다음 단계 + +이제 Copilot에 GitHub 연동 도구가 있습니다. [레슨 7: 이슈 계획 및 구현][next-lesson]을 계속 진행합니다. + +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 000000000..8e3232fdc --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "레슨 7 - 이슈 계획 및 구현" +description: "GitHub 도구를 사용하여 Copilot Chat에서 이슈를 만든 다음, 새 채팅 세션에서 하나를 구현합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +GitHub MCP를 활성화하면 Copilot이 채팅에서 직접 이슈를 만들고 읽을 수 있습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- Copilot Chat에서 범위가 명확한 GitHub 이슈 3개를 만듭니다. +- 이슈 하나를 위한 새 채팅 세션을 시작합니다. +- 이슈를 구현하고 검증합니다. + +## 이슈 만들기 + +다음 프롬프트를 보냅니다. + +```plaintext +Review the space quiz and suggest three focused feature ideas. Use the GitHub tools to create a separate issue for each with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +## 이슈 하나 구현하기 + +1. Activity Bar에서 **GitHub** 보기를 열고 새 이슈를 살펴봅니다. +2. 이슈 하나를 선택한 다음 Copilot Chat의 **+** 버튼을 선택하여 해당 이슈의 새 세션을 시작합니다. +3. 비교를 위해 원래 세션을 유지하면서 Agent 모드로 이슈를 구현합니다. +4. 풀 리퀘스트(Pull request)를 만들기 전에 [레슨 3][lesson-3]의 통합 브라우저 스모크 테스트(Smoke test)를 실행합니다. + +## 요약 및 다음 단계 + +이슈를 만들고 별도의 세션에서 하나를 구현했습니다. [레슨 8: 검토 및 병합][next-lesson]을 계속 진행합니다. + +[lesson-3]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 000000000..2a123c510 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "레슨 8 - 검토 및 병합" +description: "Source Control에서 풀 리퀘스트를 만들고, Copilot 코드 검토를 요청하고, GitHub 도구로 피드백을 처리하고, 병합합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +VS Code의 GitHub 도구로 새 작업을 살펴보고 검토하고 병합합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 새 작업을 커밋하고 **Source Control**에서 풀 리퀘스트(Pull request)를 만듭니다. +- Copilot 코드 검토를 요청합니다. +- GitHub MCP로 피드백과 실패한 검사를 처리합니다. +- 풀 리퀘스트를 병합합니다. + +## 확인, 검토, 병합 + +1. 무언가를 만들기 전에 **Source Control**을 열어 변경된 파일과 변경 사항을 살펴봅니다. +2. **sparkle** 버튼을 다시 사용하여 메시지를 작성하고 새 작업을 커밋합니다. +3. **Source Control**에 나타나는 **Create Pull Request** 버튼을 선택합니다. Copilot은 커밋을 바탕으로 제목과 설명 초안을 작성하므로 처음부터 작성하도록 요청하는 것보다 더 나은 풀 리퀘스트를 얻을 수 있습니다. +4. 풀 리퀘스트를 만드는 동안, VS Code의 **GitHub** 보기에서, 또는 GitHub에서 **Copilot code review**를 요청합니다. +5. GitHub MCP를 사용하는 Copilot에 풀 리퀘스트를 살펴보고, 병합 충돌을 해결하고, 검토 댓글을 처리하고, 실패한 지속적 통합(CI) 검사를 조사하도록 요청합니다. +6. 통합 브라우저에서 다시 테스트하고, 제안한 모든 변경 사항을 검토하고, 브랜치를 업데이트합니다. +7. 검사와 검토를 마치면 에이전트에 병합을 요청하거나 GitHub 통합에서 병합합니다. + +> [!NOTE] +> 대신 언제든 채팅에서 Copilot에 이 작업을 요청할 수 있습니다. **Source Control** 방식은 실제 변경 사항을 바탕으로 커밋과 풀 리퀘스트 내용을 작성해 주므로 먼저 익혀 둘 만합니다. + +## 요약 및 다음 단계 + +VS Code를 벗어나지 않고 풀 리퀘스트를 검토하고 병합했습니다. [레슨 9: 다음 아이디어를 클라우드 세션에 맡기기][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md new file mode 100644 index 000000000..0b7d31ff4 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "레슨 9 - 다음 아이디어를 클라우드 세션에 맡기기" +description: "Copilot Chat 하네스를 Local에서 Cloud로 전환하고, 풀 리퀘스트로 전달되는 독립적인 기능을 위임합니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +로컬에서 전체 작업 사이클을 완료했으므로 이제 좋은 결과가 어떤 모습인지 알게 되었습니다. 직접 지켜보지 않고 작업이 실행되게 할 적절한 시점입니다. Copilot Chat은 실행에 사용하는 하네스(Harness)를 로컬 컴퓨터에서 GitHub로 전환할 수 있습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- Copilot Chat 하네스를 **Local**에서 **Cloud**로 전환합니다. +- 인수 기준이 명확한 독립적인 기능을 위임합니다. +- 결과 풀 리퀘스트(Pull request)를 검토합니다. + +> [!NOTE] +> 클라우드 세션에는 이용 자격이 있는 유료 Copilot 플랜이 필요합니다. Business와 Enterprise의 액세스도 관리자가 활성화해야 할 수 있습니다. + +## 클라우드에 위임하기 + +![Harness 선택기가 열린 VS Code의 Copilot Chat 일러스트레이션. Copilot 아래에서 Local 대신 Cloud가 선택되어 있으며 Claude와 Codex 등 다른 하네스도 나열되어 있습니다. 위쪽에는 새로운 색상 테마 3개를 추가하라는 요청에 Working in the cloud와 GitHub에서 세션을 확인하는 링크가 표시됩니다.](/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg) + +**Harness** 선택기에는 **Local** 또는 **Cloud**에서 실행되는 Copilot과 다른 하네스가 나열됩니다. **Cloud**로 전환하면 다음 요청은 로컬 컴퓨터가 아니라 GitHub에서 실행됩니다. + +1. Copilot Chat에서 **Harness** 선택기를 열고 Copilot을 **Local**에서 **Cloud**로 전환합니다. +2. 새 세션을 시작하고 인수 기준이 명확한 독립적인 기능을 맡깁니다. + + ```plaintext + Add a theme picker to the space quiz with three named themes: Deep Space, Launch Pad, and Lunar. Persist the choice in localStorage, keep everything in the single index.html with no dependencies, keep contrast accessible in every theme, and open a pull request when the tests pass. + ``` + +3. 노트북을 닫습니다. 작업은 GitHub에서 계속되며 풀 리퀘스트로 전달됩니다. +4. 직접 작성한 풀 리퀘스트와 똑같이 주의 깊게 검토합니다. + +> [!TIP] +> **설명할 수 있는 작업을 위임합니다** +> +> 클라우드 세션에는 정확한 작업 지침이 효과적입니다. 인수 기준을 작성할 수 없다면 아직 로컬 컴퓨터 밖으로 작업을 넘길 준비가 되지 않은 것입니다. + +## 요약 및 다음 단계 + +클라우드 세션에 기능을 위임하고 결과를 검토했습니다. [레슨 10: 복습 및 다음 단계][next-lesson]를 계속 진행합니다. + +[next-lesson]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/index.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/index.md new file mode 100644 index 000000000..ee39412f8 --- /dev/null +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/first-steps/vscode/index.md @@ -0,0 +1,51 @@ +--- +title: "Visual Studio Code 첫걸음" +description: "Space Quiz를 만들고 테스트하고 출시하면서 Visual Studio Code의 GitHub Copilot을 단계별로 살펴봅니다." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +초보자도 쉽게 따라 할 수 있는 실습으로 Visual Studio Code의 GitHub Copilot을 살펴봅니다. 빈 폴더에서 다채로운 Space Quiz를 만들고 편집기 중심의 작업 사이클을 익힙니다. 워크스페이스에서 빌드하고, 컨텍스트를 살펴보고, Git에 기록하기 전에 테스트하고, 편집 전에 계획을 세우고, VS Code를 벗어나지 않고 GitHub 도구로 이슈와 풀 리퀘스트(Pull request)를 처리합니다. + +워크숍에는 약 60~90분이 걸립니다. 프로젝트는 런타임 의존성이 없는 단일 HTML 파일을 사용하므로 편집기에서 Copilot을 익히는 데 집중할 수 있습니다. + +> [!NOTE] +> 이 워크숍은 [James Montemagno][james]가 만들었으며 [First Steps with GitHub Copilot][source-lab]을 바탕으로 구성했습니다. 원본 콘텐츠는 [MIT License][source-license]로 제공됩니다. + +## 레슨 + +| 레슨 | 주제 | 수행할 작업 | +| ------ | ----- | ---------------- | +| [0. 사전 준비 및 설정][lesson-0] | 설정 | 사전 준비 사항을 확인하고, GitHub 확장을 추가하고, 폴더를 열고, 모델을 선택합니다 | +| [1. 워크스페이스에서 만들기][lesson-1] | 빌드 | 퀴즈를 만들고, 통합 브라우저에서 미리 보고, 선택한 요소를 다듬습니다 | +| [2. 프로젝트 지침 작성][lesson-2] | 지침 | `/init`으로 `.github/copilot-instructions.md`를 생성하고 맞춤 설정합니다 | +| [3. 컨텍스트 확인 및 테스트][lesson-3] | 테스트 | 채팅 컨텍스트를 살펴보고 Git에 기록하기 전에 스모크 테스트(Smoke test)를 실행합니다 | +| [4. 프로젝트 게시][lesson-4] | 게시 | Source Control로 초기화, 커밋, 게시를 수행합니다 | +| [5. 편집 전에 계획하기][lesson-5] | 계획 | Plan 모드로 다음 기능의 접근 방식에 합의합니다 | +| [6. Copilot에 GitHub 연동 도구 제공][lesson-6] | 도구 | GitHub MCP 서버를 활성화하고 검토합니다 | +| [7. 이슈 계획 및 구현][lesson-7] | 구현 | GitHub 도구로 이슈를 만들고 새 세션에서 하나를 구현합니다 | +| [8. 검토 및 병합][lesson-8] | 검토 | Source Control에서 풀 리퀘스트를 만들고, 검토를 요청하고, 병합합니다 | +| [9. 클라우드 세션에 작업 넘기기][lesson-9] | 위임 | 하네스(Harness)를 Cloud로 전환하고 새 기능을 위임합니다 | +| [10. 복습 및 다음 단계][lesson-10] | 복습 | 워크플로를 돌아보고 학습을 이어갑니다 | + +## 시작하기 + +[레슨 0: 사전 준비 및 설정부터 시작합니다][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites/ +[lesson-1]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ +[lesson-2]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ +[lesson-3]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[lesson-4]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ +[lesson-5]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ +[lesson-6]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ +[lesson-7]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ +[lesson-8]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ +[lesson-9]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ +[lesson-10]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/index.md b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/index.md index c7ca6dcf3..c03bb048d 100644 --- a/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/index.md +++ b/website/src/content/docs/ko-kr/learning-hub/copilot-workshops/index.md @@ -1,41 +1,44 @@ --- -title: "GitHub Copilot 에이전트 실습" +title: "GitHub Copilot 워크숍" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -최근 GitHub Copilot에 추가된 기능은 소프트웨어 개발 수명 주기(SDLC) 전반에서 개발자에게 강력한 도구를 제공합니다. 여기에는 GitHub의 이슈 및 끌어오기 요청 작업, 외부 서비스와의 상호 작용, 그리고 코드 작성이 포함됩니다. 이 랩에서는 이러한 기능을 살펴보고, 실제 사용 사례와 도구를 최대한 활용하는 방법을 소개합니다. +학습 목표와 원하는 깊이에 따라 워크숍을 선택합니다. **첫 단계**에서는 GitHub Copilot을 따라 하며 익히고, **실제 개발**에서는 완성된 애플리케이션과 팀 백로그를 사용해 프로덕션 중심의 워크플로를 연습합니다. + +## 첫 단계 + +기존 코드베이스 없이도 GitHub Copilot 제품의 주요 기능을 익힐 수 있는 집중형 가이드 환경으로 시작합니다. + +### [GitHub Copilot 앱 둘러보기][first-steps-app] + +빈 폴더에서 Space Quiz를 만들고 GitHub에 게시한 다음, 이슈 구현, Copilot 검토, 자동화 예약, Canvas 워크플로 탐색까지 진행합니다. + +### [GitHub Copilot CLI 첫 단계][first-steps-cli] + +터미널에서 같은 Space Quiz를 만들고, diff를 검토하고, worktree에서 병렬 세션을 실행하고, 편집 전에 계획하며, 셸을 벗어나지 않고 끌어오기 요청을 만들고 병합하고 위임합니다. + +### [Visual Studio Code 첫 단계][first-steps-vscode] + +VS Code에서 Space Quiz를 만들고, 통합 브라우저에서 테스트하고, 소스 제어로 게시하고, GitHub 도구로 이슈와 끌어오기 요청을 다루고, 클라우드 세션에 작업을 넘깁니다. + +## 실제 개발 + +Tailspin Toys 애플리케이션과 백로그를 사용해 현실적인 소프트웨어 개발 수명 주기에서 GitHub Copilot을 연습합니다. 작업 환경을 선택한 다음 의미 있는 변경 사항을 계획하고, 빌드하고, 테스트하고, 검토하고, 제공합니다. + +### [실제 개발 워크숍 찾아보기][real-world-development] + +GitHub Copilot CLI, GitHub Copilot 앱, GitHub Copilot 클라우드 에이전트 또는 Visual Studio Code 중에서 선택합니다. > [!CAUTION] -> GitHub Copilot은 결정론적이 아니라 확률론적으로 작동하므로 정확한 코드와 변경되는 파일 등이 달라질 수 있습니다. 따라서 랩의 스크린샷 및 코드 조각과 실제 환경에서 약간의 차이가 나타날 수 있습니다. 이는 예상된 결과이며, 이러한 유형의 도구가 작동하는 방식에서 비롯됩니다. +> GitHub Copilot은 결정론적이 아니라 확률론적으로 작동하므로 정확한 코드와 변경되는 파일이 예제와 다를 수 있습니다. 약간의 차이는 예상된 결과입니다. > -> 무언가 제대로 작동하지 않거나 올바르게 실행되지 않는다면 멘토에게 문의하십시오! +> 강사가 진행하는 워크숍에서 무언가 제대로 작동하지 않는다면 멘토에게 문의하십시오. -## 하네스(Harness) 선택 - -GitHub Copilot은 어떤 작업 환경에서든 함께할 수 있습니다. 원하는 개발 방식에 맞는 하네스를 선택하고, Tailspin Toys의 공통 백로그를 바탕으로 연습을 진행합니다. 각 하네스는 자체 설정 과정으로 시작하므로 원하는 하네스를 선택해 바로 시작할 수 있습니다. - -### 🖥️ [VS Code](/ko-kr/learning-hub/copilot-workshops/vscode/) - -**Visual Studio Code**와 GitHub Codespaces에서 GitHub Copilot을 사용합니다. 익숙한 편집기를 벗어나지 않고 Copilot Chat 에이전트 모드, MCP 서버, 사용자 지정 에이전트를 활용합니다. AI 지원을 IDE에 직접 통합하고 싶을 때 적합합니다. - -### 💻 [Copilot CLI](/ko-kr/learning-hub/copilot-workshops/cli/) - -**GitHub Copilot CLI**는 터미널에서 실행되는 에이전트형 도우미입니다. 이를 설치하고, MCP 서버를 연결하고, 계획 모드로 코드를 생성하고, 명령줄에서 직접 스킬, 사용자 지정 에이전트, 슬래시 명령을 만듭니다. - -### 🤖 [Copilot 앱](/ko-kr/learning-hub/copilot-workshops/app/) - -**GitHub Copilot 앱**은 Copilot CLI를 기반으로 구축된 데스크톱 애플리케이션입니다. 여러 에이전트 세션을 병렬로 실행하고, 세션 모드를 전환하고, 캔버스에서 협업하고, GitHub 이슈와 끌어오기 요청을 기본 기능으로 관리합니다. 여기에는 끌어오기 요청의 리베이스, 검토 피드백, CI 수정, 병합 과정을 관리하는 **Agent Merge**도 포함됩니다. - -### ☁️ [Copilot 클라우드 에이전트](/ko-kr/learning-hub/copilot-workshops/cloud/) - -**Copilot 클라우드 에이전트**는 백그라운드에서 GitHub 이슈를 처리하는 비동기 동료 프로그래머입니다. 작업을 할당하고, 사용자 지정 에이전트로 작업 방향을 안내하고, 에이전트 대시보드에서 진행 상황을 모니터링하고, 에이전트가 생성한 끌어오기 요청을 검토합니다. - -## 시나리오 - -여러분은 개발자 테마의 보드게임 크라우드펀딩을 제공하는 가상 기업 Tailspin Toys에 새로 합류한 개발자입니다. 아주 큰 시장입니다! 팀의 백로그는 이미 GitHub 이슈로 등록되어 있어 바로 작업을 시작할 수 있습니다. 필터링 및 페이지 매김과 같은 기능 작업과 접근성 및 코딩 표준과 같은 품질 개선 작업이 함께 준비되어 있습니다. 사이트와 Copilot의 기능을 모두 살펴보면서 반복적으로 작업을 진행해 과제를 완료합니다. - -## 시작하기 - -위에서 하네스를 선택해 시작합니다. 각 하네스는 개발을 시작하는 데 필요한 설정 과정으로 시작합니다. \ No newline at end of file +[first-steps-app]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /ko-kr/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /ko-kr/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-development]: /ko-kr/learning-hub/copilot-workshops/real-world-development/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/0-prerequisites.md b/website/src/content/docs/learning-hub/copilot-workshops/app/0-prerequisites.md index 00c6ca221..3a5b9dfce 100644 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/0-prerequisites.md +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/0-prerequisites.md @@ -3,10 +3,10 @@ title: "Lesson 0 - Prerequisites" description: "Set up for the GitHub Copilot app lessons: install Node.js for the Tailspin Toys project and create your own copy of the repository from the template." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -The GitHub Copilot app is a desktop app, serving as your central hub for both Copilot and GitHub. It provides quick access to issues and pull requests, and of course allows you to build using GitHub Copilot. During this workshop you'll be working locally, using both the Tailspin Toys app, built on Astro, and of course the GitHub Copilot app. Before you get started, let's ensure Node.js is installed locally, then install the Copilot app. +The GitHub Copilot app is a desktop app serving as your central hub for both Copilot and GitHub. It provides quick access to issues and pull requests, and of course allows you to build using GitHub Copilot. During this workshop you'll be working locally, updating the Tailspin Toys app, built on Astro, using the GitHub Copilot app. Before you get started, let's ensure Node.js is installed locally, then install the Copilot app. In this lesson, you will: @@ -15,18 +15,18 @@ In this lesson, you will: ## Install Node.js -Several lessons ask an agent to build features and run the Tailspin Toys test suite locally, which needs **[Node.js][nodejs]** — the only runtime the project requires. Install version **22 or newer**; the current **LTS** release is a safe choice. +Several lessons ask an agent to build features and run the Tailspin Toys test suite locally, which needs **[Node.js][nodejs]** — the only runtime the project requires. Install the current **LTS** release. The simplest option on every platform is the official installer: 1. In your operating system, open a terminal window using Windows Terminal, macOS terminal, or whatever you typically use. -2. Run the following command to confirm you have at least Node.js 22 or higher installed: +2. Run the following command to check your installed Node.js version: ```shell node --version ``` -3. If you see `v22` or a higher number, you can skip to the next section! +3. If it meets the requirements in the project's README and `package.json`, you can skip to the next section. > [!TIP] > You only need to complete these steps if you don't have Node installed, or you need to update. @@ -41,14 +41,14 @@ The simplest option on every platform is the official installer: node --version ``` -9. You should see `v22.x.x` or higher. +9. You should see the version you installed. -> [!TIP] -> Prefer containers? If you have **[Docker][docker]**, you can use the repository's [dev container][dev-containers] instead of installing Node.js locally — it bundles Node for you. You don't need both. +> [!IMPORTANT] +> Each worktree also needs the project dependencies and Playwright Chromium for E2E checks. Follow the Tailspin Toys repository's README when preparing a worktree, and review any installation request before approving it. ## Set up the lab repository -You'll work against your own copy of the Tailspin Toys project. Create it now from the [template repository][template-repository]. The new repository contains every file the lab needs, and you'll connect it to the app in the next lesson. +You'll work against your own copy of the Tailspin Toys project. Create it now from the [template repository][template-repository]. The new repository contains every file the lab needs, and you'll connect it when you install the app. 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**. @@ -64,11 +64,16 @@ You'll work against your own copy of the Tailspin Toys project. Create it now fr > [!NOTE] > When you create your repository from the template, a backlog of GitHub issues is created for you automatically. You'll work from these issues throughout the workshop — there's nothing to file yourself. +Use a fresh copy of the workshop template. It includes repository instructions, application code, tests, a quality-checks skill, and an existing canvas extension. You'll customize the skill and create a QA agent during the workshop. If you use an older copy, check with your facilitator that it has the files you'll need. + ## Summary and next steps -You're set up! You installed Node.js so the project can build and test on your machine, and you created your own copy of the Tailspin Toys repository from the template. +You're set up! In this lesson, you: -Next, you'll install the GitHub Copilot app, connect the repository you just created, and get oriented in the workspace. Continue to [Lesson 1 - Installing the GitHub Copilot app][next-lesson]. +- installed Node.js so the project can build and test on your machine. +- created your own copy of the Tailspin Toys repository from the template. + +Next, you'll [install the GitHub Copilot app][next-lesson], connect the repository you just created, and get oriented in the workspace. ## Resources @@ -79,7 +84,5 @@ Next, you'll install the GitHub Copilot app, connect the repository you just cre [next-lesson]: /learning-hub/copilot-workshops/app/1-install-copilot-app/ [nodejs]: https://nodejs.org/ [node-download]: https://nodejs.org/en/download -[docker]: https://www.docker.com/products/docker-desktop/ -[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers [template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/1-install-copilot-app.md b/website/src/content/docs/learning-hub/copilot-workshops/app/1-install-copilot-app.md index 716086813..84d0433bf 100644 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/1-install-copilot-app.md +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/1-install-copilot-app.md @@ -3,7 +3,7 @@ title: "Lesson 1 - Installing the GitHub Copilot app" description: "Install the GitHub Copilot app, connect the repository you created from the template, get oriented in the workspace, and try a quick chat." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- The **[GitHub Copilot app][about-copilot-app]** is a desktop application for agent-driven development. It is built on GitHub Copilot CLI and integrates natively with GitHub, so your repositories, branches, and CI pipelines work out of the box. It's designed for workflows where you direct several agents in parallel — each in its own isolated workspace — rather than doing all of the work yourself, and automating repetitive tasks. With Node.js installed and your copy of the project ready, the next step is to install the app and connect that repository. @@ -41,32 +41,39 @@ To use the GitHub Copilot app the first step, as you might imagine, is to instal With your project connected, take a moment to learn your way around. The app organizes everything into a few areas in the sidebar: -- **Sessions** — where agents do their work. Each session runs in its own isolated workspace, so you can run several at once without their changes colliding. You'll start your first session in the next lesson. -- **Quick chats** — lightweight conversations for questions and brainstorming that don't need a branch or workspace of their own. You'll try one at the end of this lesson. -- **My work** — your issues and pull requests, surfaced through the app's **native GitHub integration**. From here you can browse and filter issues and pull requests, check CI status, start a session from an issue, and review pull requests — all without leaving the app. -- **Automations** — saved agent tasks that run on a schedule or on demand. You'll create one near the end of the harness. +- **New** - like you might expect, you can start a new chat session with Copilot here! +- **Pull requests** - your pull requests, surfaced through the app's native GitHub integration. From here you can browse and filter pull requests, check CI status, and review pull requests — all without leaving the app. +- **Issues** - your issues, surfaced the same way. From here you can browse and filter issues and start a session from an issue. +- **Automations** — saved agent tasks that run on a schedule or on demand. These are great for managing todo lists, regular project maintenance, or other bits of tedium you'd like to offload. The wrap-up links to these as a next step, not another workshop exercise. +- **Customize** - add features and functions to the Copilot app in the form of MCP servers, plugins, skills, and other components. You'll use it to configure Playwright MCP. +- **Chats** — lightweight conversations for questions and brainstorming that don't need a branch or workspace of their own. You'll try one at the end of this lesson. +- **Sessions** — where agents do their work. Each session runs in its own isolated workspace, so you can run several at once without their changes colliding. You'll start your first session when you add star ratings. + +As you work through the workshop, you'll explore the workspace! + +> [!TIP] +> When in doubt, ask Copilot! If you're not sure how to do something, or if something is possible, you can ask Copilot. It will help guide you. ### Find your seeded backlog -Because the app integrates with GitHub natively, the work waiting in your repository shows up right inside the app. When you created your repository from the template, a backlog of issues was filed for you — let's confirm it's there. +There's likely not a single project without a backlog, and Tailspin Toys isn't any different. Let's explore the backlog that currently exists, which was created when you created your template. -1. Select **My work** in the sidebar. -2. The template seeded eight issues in your backlog. This harness focuses on the following three — confirm you can see them: +1. Select **Issues** in the sidebar. +2. Find these issues by title rather than assuming their issue numbers: - Allow users to filter games by category and publisher - Update our repository coding standards - - Implement pagination on the game list page -3. Select an issue to read its details. Each issue is also a launch point for an agent session — you'll start work from these issues later in the harness. +3. Select an issue to read its details. Each issue is also a launch point for an agent session. You'll start from the filtering issue after completing a quick first change. > [!NOTE] -> The list of items in My work is automatically filtered to only display items from the repositories you've added to Copilot app. Want to see work items from other repos? Add them to the app! +> The lists of items in **Issues** and **Pull requests** are automatically filtered to only display items from the repositories you've added to Copilot app. Want to see work items from other repos? Add those repos to the app! ## Try a quick chat A great way to get comfortable with the app is to use it to learn about the *app itself* — and a **quick chat** is exactly the right tool for that. Quick chats let you ask a question or brainstorm without creating a branch or worktree, so they're perfect for a fast, throwaway question — no session required. -1. In the sidebar, select **+** next to **Quick chats** to open a new chat. +1. In the sidebar, select **+** next to **Chats** to open a new chat. 2. Ask the app how its own sessions work: ```plaintext @@ -81,10 +88,10 @@ Congratulations! You've installed the GitHub Copilot app, connected your project - install the app and sign in to GitHub. - add a project from its GitHub repository. -- get oriented in the workspace and find your seeded backlog in **My work**. +- get oriented in the workspace and find your seeded backlog in **Issues**. - use a quick chat to ask a fast, throwaway question. -Next, you'll start your first agent session and make your first change to the project — showing a star rating on the game cards. Continue to [Lesson 2 - Running your first agent session][next-lesson]. +Next, you'll [start your first agent session][next-lesson] and use it to show a star rating on the game cards. ## Resources @@ -92,7 +99,6 @@ Next, you'll start your first agent session and make your first change to the pr - [Getting started with the GitHub Copilot app][getting-started] - [Working with agent sessions in the GitHub Copilot app][agent-sessions] -[ex0]: /learning-hub/copilot-workshops/app/0-prerequisites/ [next-lesson]: /learning-hub/copilot-workshops/app/2-add-star-rating/ [about-copilot-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 diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/10-review.md b/website/src/content/docs/learning-hub/copilot-workshops/app/10-review.md new file mode 100644 index 000000000..81ee152bc --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/10-review.md @@ -0,0 +1,77 @@ +--- +title: "Lesson 10 - Wrap-up and next steps" +description: "Recap the App workflow, two PR milestones, canvas exercises, and reusable quality practices, then explore further resources." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You used the GitHub Copilot app across a continuous Tailspin Toys workflow. You: + +- connected a repository, explored the app's workspace and seeded backlog, and tried a quick chat. +- started a focused star-rating session, reviewed the result in a browser canvas, and manually merged your first pull request (PR). +- started from the filtering issue, defined the approach in **Plan** mode, built it in **Autopilot** mode, and reviewed it in **Interactive** mode. +- guided the agent with custom instructions, then customized the existing `quality-checks` skill and used it to run unit tests, lint, and type checks. +- added the Playwright Model Context Protocol (MCP) server and used it to explore filtering in a real browser. +- created and selected a quality assurance (QA) custom agent to assess requirements, coverage, skill results, and browser evidence. +- reviewed the complete filtering change and authorized **Agent Merge** for your second PR. +- used the existing Database Explorer canvas, then created and tested a repository-backed triage canvas. + +## What you shipped + +The workshop has two PR milestones, each on its own branch from updated `main`: + +1. **Star ratings:** display the existing `starRating` and an explicit unrated state on game cards. +2. **Filtering and quality workflow:** implement filtering, update the instructions and apply them to the feature, customize the `quality-checks` report, create a QA profile, and include the associated tests. + +From planning filtering through opening its PR, you used the same session, worktree, and branch. We combined that work in one PR to streamline the workshop. You then used the existing Database Explorer and created a repository-backed triage canvas without repeating the PR workflow. + +## Different kinds of verification + +You checked the code in several ways: automated tests, your own browser inspection, and Copilot's browser exploration through MCP. The `quality-checks` skill ran unit tests, lint, and type checks and reported them in your new format. QA brought those results together with a review of requirements and test coverage before the PR. + +Tests added should close genuine gaps; a QA run that needs no new tests can be correct. Missing tools, skipped checks, and failures are visible blockers, not passes. Review code and evidence before authorizing merge, and refresh affected evidence after changes. + +## Best practices + +The context and tools you give Copilot shape its work. In this workshop, you updated instructions, customized a skill, created a QA profile, configured an MCP server, and created a canvas. Reuse these customizations across sessions and adjust them as your team's needs change. Instructions set standards, skills describe repeatable tasks, custom agents define specialist roles, MCP servers connect external tools, and canvases provide shared interactive surfaces. Review the actual changes and tool results, not just the agent's summary. + +Match the **mode and model** to the task. Use **Plan** to think through an approach before building, **Interactive** to stay in the loop on focused changes, and **Autopilot** only for well-scoped, isolated tasks. Choose a faster model for routine edits and a more capable model with higher reasoning effort for complex work. + +Context still matters as much as infrastructure. Clearly describing *what* you want built, *why*, and *how* meaningfully changes the output. Quick chats are a useful place to scope an idea before you commit it to a full session. + +## More to explore + +You've covered the core workflow. A few more features worth a look: + +- [**Automations**][using-automations] for recurring or on-demand tasks such as summarizing recent work. Review the schedule, permissions, and scope before adopting one; creating an automation is a next step, not part of this workshop. +- **Rubber duck** to talk through a problem and get high-signal feedback before you build. +- [`/chronicle`][chronicle] to generate a narrative of what happened in a session. +- [Bring your own key (BYOK)][byok] to use models from your own provider, including local models via Ollama, Foundry Local, or LM Studio. +- [Deep links][deep-links] to open the app straight into a repository, session, or prompt. + +## Next steps + +The best way to improve with any tool is to keep using it! Use it for production code, for hobby code, for the little app you've had in mind for years but never got around to building. Share your learnings with your team, and learn from theirs. And, as always, explore the documentation. + +If you'd like to explore more of the GitHub Copilot ecosystem, check out the [VS Code harness][vscode-harness], the [Copilot CLI harness][cli-harness], or the [Cloud agent harness][cloud-harness]. + +## Resources + +- [About the GitHub Copilot app][about-copilot-app] +- [Getting started with the GitHub Copilot app][getting-started] +- [Customize the GitHub Copilot app][customize] +- [Using automations][using-automations] +- [Working with canvas extensions][canvas-docs] + +[vscode-harness]: /learning-hub/copilot-workshops/vscode/ +[cli-harness]: /learning-hub/copilot-workshops/cli/ +[cloud-harness]: /learning-hub/copilot-workshops/cloud/ +[about-copilot-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 +[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle +[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models +[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/2-add-star-rating.md b/website/src/content/docs/learning-hub/copilot-workshops/app/2-add-star-rating.md index ef2577b19..0b909cee7 100644 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/2-add-star-rating.md +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/2-add-star-rating.md @@ -1,12 +1,12 @@ --- -title: "Lesson 2 - Running your first agent session" +title: "Lesson 2 - Add star ratings: a quick win" description: "Start your first agent session in the GitHub Copilot app, make a small change to the game cards, and merge it as your first pull request." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -In the previous lesson you toured the workspace and used a quick chat. Now it's time to start an **agent session** and make your first change to the project. You'll keep it small: the games already have a star rating in their data, but the game cards on the home page don't show it yet. You'll ask the agent to surface it, review the change, and merge it as your first pull request. +Now that you've toured the workspace and used a quick chat, it's time to start an **agent session** and make your first change to the project. You'll keep it small: the games already have a star rating in their data, but the game cards on the home page don't show it yet. You'll ask the agent to surface it, review the change, and merge it as your first pull request. In this lesson, you will: @@ -28,24 +28,18 @@ Inside a session you'll see three things: the **conversation** with the agent, t ## Start a session and request our change -Let's start a new session to begin exploring the project and implementing our feature. In a [prior lesson][prior-lesson] you added your project from its GitHub repository. We'll create a new session for that repository and request our change. +Let's start a new session to begin exploring the project and implementing our feature. During [app setup][prior-lesson], you added your project from its GitHub repository. We'll create a new session for that repository and request our change. 1. Return to (or open) the GitHub Copilot app. -2. Select the **Home screen**. -3. Ensure `tailspin-toys` is selected for the repo. +2. Select the **+** next to **Projects**. +3. Select `tailspin-toys` for the repo. +4. Choose a **new working tree** and **Interactive** mode below the prompt box. Use the following prompt to request the change: - ![The GitHub Copilot app prompt box with the repository selector set to tailspin-toys and the model selector shown beneath the prompt](/images/learning-hub/copilot-workshops/app-2-start-session.png) + ```plaintext + Show each game's starRating out of 5 in the game cards on the list page. If the rating is null, show "No rating yet". Keep the card layout as it is, add tests, and run the relevant checks. + ``` -4. Use the following prompt to request the change: - - ```plaintext - On the game cards, show each game's star rating. The Game type already includes a starRating field — it's a number out of 5, or null when a game hasn't been rated yet. Display it on each card in src/components/GameCard.astro, and when starRating is null show "No rating yet" instead. Keep the change small and don't restructure the card layout. - ``` - -> [!NOTE] -> Notice how the prompt contained the name of the file for Copilot to update. While it's not required at all to specify which files Copilot should include in its work, pointing it in the right direction both helps Copilot quickly generate code and reduce token usage. - -5. Select Enter to send the prompt to Copilot. +5. Press Enter to send the prompt to Copilot. Copilot app begins work by first creating a new worktree, an isolated copy of the project. It then explores the project, locating the necessary files to update to add the new feature. It will then create the necessary code. You've now added a new feature with Copilot app! @@ -55,7 +49,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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/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`: @@ -76,51 +70,49 @@ All AI-generated changes deserve a review before they're merged, even small ones ## Check the changes -Of course we shouldn't just read the code and assume it works. We should visually test everything as well! To do so we'll need to start the app from the terminal, then confirm everything works. Fortunately there's a terminal built into Copilot app! +Review the agent's automated check results before opening a browser. Confirm that tests cover a numeric `starRating` and the `null` fallback. A missing prerequisite or skipped check is not a pass; review any installation request before approving it. -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**. +Of course we shouldn't just read the code and assume it works. Let's ask Copilot to open our website so we can examine the updated UI. We can do this by having it start the website and opening it in a browser canvas. - ![The Terminal button in the review panel of the GitHub Copilot app](/images/learning-hub/copilot-workshops/app-terminal-screenshot.png) +> [!TIP] +> A canvas is an interactive widget available right inside the Copilot app. You'll explore custom ones and even create your own a bit later, but for now we're going to use the built-in browser canvas. -2. Enter the following command in the terminal window to start the web app's dev server: +1. Use the following prompt to request Copilot start the app and open the page in the browser canvas: - ```shell - npm run dev - ``` + ```plaintext + Start the app and open it in the browser canvas. + ``` -3. Once the server starts (this will just take a moment), open a browser window. -4. Navigate to http://localhost:4321. -5. You should now see star ratings on all the games on the landing page! -6. Return to the terminal window. -7. Select Ctrl+C to stop the dev server. +2. In a few moments the app will start and a browser window will open inside the Copilot app. +3. Confirm rated game cards display their value out of five. +4. When finished, ask Copilot to stop the dev server it started for this session by using the following prompt: + + ```plaintext + Stop the dev server and close the browser canvas. + ``` ## Open and merge your first pull request -Your change looks good — now it's time to ship it! You'll ask the agent to open a pull request, then review and merge it yourself on github.com. For now we'll manage this manually. In an upcoming lesson we'll explore how Copilot can handle some of the work for you automatically. +You've now created the feature! It's time to create a pull request (PR) to merge the new code in with the existing codebase. -1. In the upper right hand corner, select **Create PR**. +1. Select **Create PR** in the upper right corner. 2. If prompted, select **Sign in with your browser** and follow the prompts to authenticate. 3. Copilot gets to work on creating the PR. - -Once the PR is created, Copilot will monitor any workflows on the repository that need to run. After a few moments, the button in the upper right will change to **Ready to merge**. This will be your indication your PR is ready to merge! - 4. Select the **PR** bubble just above chat to open your PR in the review pane to see your pull request. You can review the PR as needed here. 5. Once ready, select **Ready to merge**. 6. Select **Merge pull request** on the new dialog window to merge your pull request! -You've now pushed a new feature to the website! - ## Summary and next steps -You've started your first agent session and shipped your first change! Specifically, you: +Congratulations! You shipped your first change using the GitHub Copilot app! Specifically, you: - started an agent session and learned how sessions are structured. - directed the agent to make a small, focused change to the game cards. - reviewed the change in the workspace diff view. - ran the app locally to confirm the star rating in the browser. -- opened a pull request and merged it yourself on github.com. +- opened PR 1, reviewed its checks, and explicitly merged it. -Next, you'll use the app to add a custom instructions standard to the repository — starting from one of the issues in your backlog. Continue to [Lesson 3 - Guiding Copilot with custom instructions][next-lesson]. +Next, you'll [start from the filtering issue and use Plan and Autopilot modes][next-lesson] to build a larger feature. ## Resources @@ -129,7 +121,7 @@ Next, you'll use the app to add a custom instructions standard to the repository - [Managing issues and pull requests with the GitHub Copilot app][managing-issues-prs] [prior-lesson]: /learning-hub/copilot-workshops/app/1-install-copilot-app/#install-and-configure-the-github-copilot-app -[next-lesson]: /learning-hub/copilot-workshops/app/3-custom-instructions/ +[next-lesson]: /learning-hub/copilot-workshops/app/3-agent-modes/ [agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app [managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/3-agent-modes.md b/website/src/content/docs/learning-hub/copilot-workshops/app/3-agent-modes.md new file mode 100644 index 000000000..7e61e4938 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/3-agent-modes.md @@ -0,0 +1,131 @@ +--- +title: "Lesson 3 - Agent modes: Plan and Autopilot" +description: "Explore agent modes: use Plan to agree on an approach, Autopilot to build filtering from an issue, and Interactive to review and verify the result." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +We started by adding a small feature into our project. But larger changes require a more robust process. Fortunately, the GitHub Copilot app is built to work with an organization's existing flow, ensuring we build the right things the right way. This is the first of several lessons where you will follow a typical agent-driven development process, starting by using an issue to generate a new feature, ensuring the code is valid, the feature behaves as expected, and eventually merged successfully into the project. + +> [!NOTE] +> You'll use the same session as you continue through the feature workflow. Typically you'd have different sessions or PRs for the different file types you'd be working with, but we'll be taking a shortcut to help us focus on the core concepts. + +To start, in this lesson, you will: + +- started a new agent session from a GitHub issue. +- define requirements in **Plan** mode. +- implement the new feature using **Autopilot** mode. +- review the code. +- validate the feature manually in a browser canvas. + +As you continue this feature, you'll update the repository instructions, customize the existing quality-checks skill, add MCP validation, create a QA agent, and open the feature PR. + +## Scenario + +Tailspin Toys' catalog is growing, and visitors need to narrow the games by category and publisher. The backlog issue describes the feature, but details such as combining categories need agreement before coding. You'll use Plan mode to resolve those decisions, then authorize a bounded implementation with Autopilot. + +## Background + +Introducing AI coding agents to your development flow doesn't change the fundamentals. If anything, they become even more important! Most developers follow a flow that resembles: + +1. Open a filed issue with details of what needs to be done. +2. Create a plan of what needs to be built. +3. Build and review the code. +4. Run the tests to validate the code. +5. Manually validate the new functionality. +6. Create a pull request (PR). +7. Once the code has been reviewed and the continuous integration process succeeds, merge the code. + +> [!NOTE] +> Depending on your team and organization, the exact specifics will vary. But most will be a variation on the theme listed above. + +By sticking to this standard approach you ensure the code generated by AI meets the requirements set forth, and goes through the same vetting process as code written by hand. + +## Session modes + +The **session mode** controls how much autonomy the agent has. You can set it from the dropdown below the prompt field and change it at any time: + +- **Interactive**: You and the agent work together. The agent suggests changes and waits for your input before proceeding. +- **Plan**: The agent creates a plan first. You review and approve the plan before the agent executes it. +- **Autopilot**: The agent works fully autonomously—writing code, running tests, and iterating without waiting for input. + +Start in Plan mode, review the plan, then use Autopilot to implement it. + +## Start a session from the issue + +Confirm the star-rating PR is merged and your local `main` is up to date before starting. + +1. Select **Issues** and open **Allow users to filter games by category and publisher**. +2. Select **New session** and choose a **new working tree** based on the updated `main`. + + ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) + +3. Confirm the issue is attached to the session and select **Plan** from the mode selector. + +## Plan the filtering feature + +Planning gives you a chance to review the approach before Copilot writes code. Since you started from the issue, Copilot already has the feature request as context. Send: + +```plaintext +Build this feature. +``` + +Answer Copilot's questions and compare the plan with the issue's acceptance criteria. Check that it covers category and publisher filtering, accessible controls, data-access changes, and tests. Discuss any unclear behavior, such as how multiple categories combine or what happens when no games match. + +The plan should include lint, unit tests, E2E tests, and type checking using the project's existing tooling. Keep it focused on implementing and testing filtering; you'll create the PR after completing the quality workflow. Ask for changes to the plan before approving it, and keep the issue URL and any agreed clarifications handy for later validation. + +## Explicitly approve Autopilot + +Once you're happy with the plan, select **Approve and implement with autopilot**, or the equivalent option in your version. Confirm the mode indicator shows **Autopilot**. + +Copilot will begin work on the implementation! You'll notice it will iterate through the process, walking through the established plan, generating code, and even running tests. + +> [!NOTE] +> Approval can start implementation immediately, so review the plan first. If Copilot reports missing dependencies or a port conflict, resolve the setup issue before treating the checks as complete. Only stop servers you started. + +## Review and verify the implementation + +Once the code is generated, it needs to be reviewed before it's merged, just like any other code. Let's both review the code and run the site to ensure everything looks good. + +1. Open **Changes** and inspect the filtering implementation and tests. +2. Compare the result with the issue and approved clarifications, including multiple categories and publisher combinations. Check that the changes follow the existing repository instructions. +3. Inspect the output for lint, unit tests, E2E tests, and type checking. A skipped check is not a pass. +4. Resolve failures and rerun affected checks before accepting the implementation. Playwright's E2E configuration builds and serves a preview and can reuse a local server; make sure the tested server belongs to this worktree, not an earlier lesson. + +## Explore the new functionality + +Ok, the code looks good - but does it run? Let's start the app like we did before, opening the site in a browser canvas. + +1. Use the following prompt to request Copilot start the app and open the page in the browser canvas: + + ```plaintext + Start the app and open it in the browser canvas. + ``` + +2. In a few moments the app will start and a browser window will open inside the Copilot app. +3. Confirm rated game cards display their value out of five. +4. When finished, ask Copilot to stop the dev server it started for this session by using the following prompt: + + ```plaintext + Stop the dev server and close the browser canvas. + ``` + +## Summary and next steps + +You've used different agent modes to build and review a feature. In this lesson, you: + +- started a new agent session from a GitHub issue. +- defined requirements in **Plan** mode. +- implemented the new feature using **Autopilot** mode. +- reviewed the code. +- validated the feature manually in a browser canvas. + +Next, let's dig a little deeper into how code is generated, ensuring it follows documented practices, by [using custom instructions][next-lesson]. + +## Resources + +- [Working with agent sessions in the GitHub Copilot app][agent-sessions] + +[next-lesson]: /learning-hub/copilot-workshops/app/4-custom-instructions/ +[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/3-custom-instructions.md b/website/src/content/docs/learning-hub/copilot-workshops/app/3-custom-instructions.md deleted file mode 100644 index 5024018ea..000000000 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/3-custom-instructions.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "Lesson 3 - Guiding Copilot with custom instructions" -description: "Use the GitHub Copilot app to add a custom instructions standard to your repository, starting from an issue in your backlog and merging the change as a pull request." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Context is key when working with generative AI. If a task needs to be done a particular way — or there's background information Copilot should know — you want that context available. One of the most powerful tools for this is [instruction files][instruction-files], which describe not just *what* code you want but *how* it should be structured. In this lesson you'll add a documentation standard to your repository, and you'll do it the way you'll do most work from here on: starting from an issue in your backlog and letting the agent make the change. - -In this lesson, you will: - -- explore how repository instructions and path-scoped instruction files reach the agent. -- start a session from the instructions issue in your backlog. -- ask the agent to add a documentation standard to `.github/copilot-instructions.md`. -- review the change and merge it as a pull request. - -## Scenario - -As any good dev shop, Tailspin Toys has a set of guidelines and requirements for development practices. These include: - -- Documentation should be added to code in the form of TSDoc doc comments. -- Formatting should be documented and enforced through linting. - -Through the use of instruction files you'll ensure Copilot has the right information to perform the tasks in alignment with the practices highlighted. - -## Instruction files - -Custom instructions allow you to provide context and preferences to Copilot, so that it can better understand your coding style and requirements. This is a powerful feature that can help you steer Copilot to get more relevant suggestions and code snippets. You can specify your preferred coding conventions, libraries, and even the types of comments you like to include in your code. You can create instructions for your entire repository, or for specific types of files for task-level context. - -There are two types of instructions files: - -- `.github/copilot-instructions.md`, a single instruction file sent to Copilot for **every** request for the repository. This file should contain project-level information — context relevant for most chat or CLI requests sent to Copilot. This could include the tech stack being used, an overview of what's being built, best practices, and other global guidance. -- `.github/instructions/*.instructions.md` files can be created for specific tasks or file types. You can use them to provide guidelines for particular languages (like TypeScript or Astro), or for tasks like creating a UI component or a new set of unit tests. - -> [!NOTE] -> Copilot supports other standards to bring in instructions guidance through AGENTS.md, CLAUDE.md and GEMINI.md, allowing you to ensure Copilot always has the right context. - -### Best practices for managing instructions files - -A full conversation about creating instructions files is beyond the scope of the workshop. However, the examples provided in the sample project show a representative approach. At a high level: - -- Keep instructions in `copilot-instructions.md` focused on project-level guidance, such as a description of what's being built, the structure of the project, and global coding standards. -- Use `*.instructions.md` files to provide specific instructions for file types (unit tests, Astro components, the data layer), or for specific tasks. -- Use natural language. Keep guidance clear. Provide examples of how code should (and shouldn't) look. - -There isn't one specific way to create instructions files, just as there isn't one specific way to use AI. You will find through experimentation what works best for your project. - -> [!TIP] -> Every project using GitHub Copilot should have a robust collection of instruction files. As you explore the ones in this project, you may notice there are instructions files for numerous types of code files. -> -> Looking for templates or a starting point? Explore [awesome-copilot][awesome-copilot], a repository full of instruction files, custom agents, and other resources. - -## Explore the custom instructions files in this project - -Take a moment to read the instruction files this repository ships with — there's one core `copilot-instructions.md` and a collection of `*.instructions.md` files for various tasks. Open these in your editor or the GitHub web UI. - -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/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. Select the **+** to add a new item to the review panel. -3. Select **File**. -4. Search for `copilot-instructions.md`. -5. Select `copilot-instructions.md` from the list of files to open it. -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/learning-hub/copilot-workshops/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. -10. Note the instructions specific to creating unit tests for this project. -11. Finally, open `.github/instructions/drizzle.instructions.md` and scroll to the bottom. Note the links to other instruction files (like `unit-tests.instructions.md`) and existing files in the project. This lets you break larger instruction sets into smaller, reusable files, and point Copilot at examples to follow when generating code. (Paths there are relative to the instruction file rather than the repo root.) - -> [!NOTE] -> The **Code formatting requirements** section in `copilot-instructions.md` documents the project's coding standards, but it doesn't yet require in-code documentation. In the next steps, you'll add rules for TSDoc doc comments and file comment headers. - -## Start from the instructions issue - -In the previous lesson you started a session from a direct prompt. Most work, however, starts with an issue. Let's create a new session based off an issue filed to update the instructions files, then make the request for the update. - -> [!NOTE] -> Because instructions files have a large impact on the code generated by Copilot, care should be taken in ensuring they clearly guide Copilot. Having Copilot create a first version, like you'll do in this lesson is a great approach, followed by a review by you to ensure the updates meet your requirements. - -1. Select **My work** in the sidebar -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/learning-hub/copilot-workshops/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: - - ```plaintext - Following this issue, make the updates to the instructions files in this project to meet the requirements documented. Don't create the PR quite yet! - ``` - -Copilot will make the updates! - -## Review the change - -Let's both read through the updates Copilot made, but also ask it to provide an example of the code it will now generate based on the updated instructions. - -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/learning-hub/copilot-workshops/app-select-changes.png) - -2. Review the updated instructions file. Confirm it has the guidelines about adding documentation and comments to the code. - -> [!NOTE] -> Because AI is probabilistic rather than deterministic, the exact text will vary. - -3. Use the following prompt to ask Copilot to create an example of the code it will now generate: - - ```plaintext - Do not make any updates, but show me what the code would look like. Based on the new instructions, if I asked Copilot to create a new library component to return all Publishers what would that code look like? - ``` - -4. Review the code Copilot proposes. Note the TSDoc doc comments and the file header comment it includes — exactly what the updated instructions ask for. - -You've now updated the instructions files in the project and seen the impact it will have! - -## Open and merge the pull request - -Instructions files become assets in the repository, meaning they're shared with the rest of the team. Let's create a PR with our work, just like we would any other asset! - -1. In the upper right hand corner, select **Create PR**. -2. If prompted, select **Sign in with your browser** and follow the prompts to authenticate. -3. Copilot gets to work on creating the PR. - -Once the PR is created, Copilot will monitor any workflows on the repository that need to run. After a few moments, the button in the upper right will change to **Ready to merge**. This will be your indication your PR is ready to merge! - -4. Select **Ready to merge**. -5. Select **Merge pull request** on the new dialog window to merge your pull request! - -> [!NOTE] -> With the standard merged into your default branch, it becomes part of the project for everyone — and for every new session. When you start the filtering session in the next lesson from an up-to-date default branch, the agent will follow this standard automatically. You'll see the TypeScript it generates include TSDoc doc comments without being asked — a small but real demonstration of instructions shaping generated code. - -## Summary and next steps - -You explored how the app picks up context from instruction files, then used a session to add and merge a repository-wide standard. Specifically, you: - -- explored the repository's `copilot-instructions.md` and path-scoped `*.instructions.md` files. -- started a session from the instructions issue in your backlog. -- asked the agent to add a documentation standard to `.github/copilot-instructions.md`. -- reviewed the change and merged it as a pull request. - -Next, you'll build the filtering feature in a fresh session — and watch it pick up the standard you just merged. Continue to [Lesson 4 - Building a feature with Autopilot][next-lesson]. - -## Resources - -- [Instruction files for GitHub Copilot customization][instruction-files] -- [Customizing the GitHub Copilot app][customize-app] -- [Best practices for creating custom instructions][instructions-best-practices] -- [Awesome Copilot — a collection of instruction files and other resources][awesome-copilot] - -[next-lesson]: /learning-hub/copilot-workshops/app/4-build-filtering/ -[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository -[awesome-copilot]: https://awesome-copilot.github.com/ -[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support -[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md -[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/4-build-filtering.md b/website/src/content/docs/learning-hub/copilot-workshops/app/4-build-filtering.md deleted file mode 100644 index 5bbafae3c..000000000 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/4-build-filtering.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: "Lesson 4 - Building a feature with Autopilot" -description: "Use Plan and Autopilot modes in the GitHub Copilot app to build a static, client-side filtering feature, watch it inherit your documentation standard, and verify it with an agent skill." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -We've made a couple of small updates to our project thus far. But more robust changes require a more robust process. Fortunately, the GitHub Copilot app is built to work with our existing flow, ensuring we build the right things the right way. This is the first of three lessons where you will follow a typical development process, starting by using an issue to generate a new feature and an agent skill to run the validation tests and linters. - -In this lesson, you will: - -- start a fresh session from the filtering issue. -- use **Plan** mode to plan the feature, then **Autopilot** to build it. -- confirm the generated code follows the documentation standard you merged earlier. -- verify your work with the project's `quality-checks` skill. - -## Scenario - -The home page lists every game, but visitors can't narrow the list down. The filtering issue asks you to let them filter games by **category** and **publisher**. Let's use Copilot to implement that functionality. - -## Background - -Introducing AI coding agents to your development flow doesn't change the fundamentals. If anything, they become even more important! Most developers follow a flow that resembles: - -1. Open a filed issue with details of what needs to be done. -2. Create a plan of what needs to be built. -3. Build and review the code. -4. Run the tests to validate the code. -5. Manually validate the new functionality. -6. Create a pull request (PR). -7. Once the code has been reviewed and the continuous integration process succeeds, merge the code. - -> [!NOTE] -> Depending on your team and organization, the exact specifics will vary. But most will be a variation on the theme listed above. - -By sticking to this standard approach you ensure the code generated by AI meets the requirements set forth, and goes through the same vetting process as code written by hand. - -## Session modes - -The **session mode** controls how much autonomy the agent has. You can set it from the dropdown below the prompt field and change it at any time: - -- **Interactive**: You and the agent work together. The agent suggests changes and waits for your input before proceeding. -- **Plan**: The agent creates a plan first. You review and approve the plan before the agent executes it. -- **Autopilot**: The agent works fully autonomously—writing code, running tests, and iterating without waiting for input. - -## Plan the filtering feature - -The best time to catch a potential issue is before any code is written, and the best way to do that is a bit of planning in advance. By planning with Copilot you'll ask Copilot to generate a set of steps and document the approach it will take. You can then review the plan, make any suggestions you might have to improve it, before letting Copilot generate the code based on the plan. - -Let's open the issue, start a new session, and create a plan by switching into plan mode and making the request. - -1. Select **My work** from the navigation tab. -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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/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: - - ```plaintext - Plan the work based on the requirements documented in the issue. Please ask any clarifying questions you might have as you build the plan. - ``` - -6. The agent may ask follow-up questions as it builds the plan. Answer them based on how you'd build the feature. - -> [!NOTE] -> Because Copilot is probabilistic, the exact follow-up questions Copilot asks will vary. In fact, it might not ask any questions! This is perfectly normal. - -7. Once completed, Copilot will offer a plan summary. Review the plan. You should see it propose building queries, adding filter controls, and of course tests. Provide feedback to refine it if you'd like — the agent will incorporate your suggestions into a new version. - -## Build it with Autopilot - -With the plan created, let's let Copilot build the implementation! - -1. In the list of options in the **Plan summary** dialog, select the option closest to **Approve and implement with autopilot**. - -Copilot will begin work on the implementation! - -> [!NOTE] -> If Copilot doesn't automatically start creating the necessary code, you can prompt it to do so by using a prompt like "Go ahead and start building out the plan!". -> -> Creating the necessary updates will take several minutes. The agent edits and creates files, writes and runs tests, and iterates. Now's a good time to reflect on what you've explored so far, or to enjoy a beverage. - -## Review the changes - -All AI-generated code needs review before it's merged. Let's both review the code and run the site to ensure everything looks good. - -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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/app-terminal-screenshot.png) - -4. Enter the following command in the terminal window to start the web app's dev server: - - ```shell - npm run dev - ``` - -5. Once the server starts (this will just take a moment), open a browser window. -6. Navigate to http://localhost:4321. -7. You should now see filters available on the landing page! -8. If anything doesn't look right, you can ask Copilot to make the updates! -9. Once satisfied, return to the terminal window. -10. Select Ctrl+C to stop the dev server. - -## Verify your work with the quality-checks skill - -You could eyeball the diff and call it done, but the team has a defined quality bar — and a repeatable way to check it. - -**Agent skills** let you give Copilot guidance on how to perform repeatable tasks like running tests, generating builds, or creating pull requests. A skill is a folder of instructions, scripts, and resources that the agent can load on demand. [Agent Skills is an open standard][agent-skills-repo] used by a range of agents, so the same skill works across Copilot Chat in agent mode, Copilot cloud agent, Copilot CLI, and the GitHub Copilot app. - -Skills live in the `.github/skills` folder of a project, or globally in `~/.copilot/skills`. Each skill is a folder containing a `SKILL.md` file with YAML frontmatter (a `name` and a `description`) followed by the markdown instructions: - -```yaml ---- -name: quality-checks -description: Run the project's test suites and linter to verify code changes are ready to commit, push, or merge. ---- -``` - -Skills can also include subfolders with scripts, assets, and reference material. The full structure is covered in the [agent skills specification][agent-skills-spec]. - -> [!TIP] -> Skills are loaded dynamically. The agent decides which skill applies based on the `description` field — a clear, scenario-specific description is the difference between a skill that gets used and one that gets ignored. - -## Explore the quality-checks skill - -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/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. Select the **+** to add a new item to the review panel. -3. Select **File**. -4. Search for `SKILL.md`. -5. Select `SKILL.md .github/skills/quality-checks` from the list of files to open it. -6. Note the `name` and `description`. The description tells the agent *when* to use it — whenever code changes need to be tested, linted, or verified before a commit, push, or merge. -7. Read through the skill. Notice it documents which script runs which suite (unit tests, Playwright end-to-end tests, ESLint), in what order, and how to debug common failures — so the agent runs the checks the team's way instead of guessing. - -## Run the checks - -In the same filtering session, ask the agent to verify the work. You won't name the skill — the agent will match it from your request. - -1. Return to Copilot app. -2. Directly call the skill by using the slash command `/quality-checks` and select Enter. -3. Following the skill, the agent runs the unit tests, the linter, and the end-to-end tests, and reports the results. If anything fails, ask it to fix the issue and run the checks again until everything is green. -4. **Keep this session open.** In the next lesson you'll add the Playwright MCP server and use it to see the filtering feature working in a real browser. - -## Summary and next steps - -You built a real feature end to end and verified it against the team's bar! Specifically, you: - -- started a fresh session from the filtering issue on an up-to-date project. -- used Plan mode to plan the feature and Autopilot to build it. -- confirmed the generated helper followed the documentation standard you merged in Lesson 3. -- verified your work with the `quality-checks` skill. - -Next, you'll connect the Playwright MCP server and ask the agent to explore your filtering feature in a real browser. Continue to [Lesson 5 - Testing with the Playwright MCP server][next-lesson]. - -## Resources - -- [Working with agent sessions in the GitHub Copilot app][agent-sessions] -- [About Agent Skills][about-agent-skills] -- [Customizing the GitHub Copilot app][customize-app] -- [About cloud and local sandboxes for GitHub Copilot][sandboxes] - -[ex0]: /learning-hub/copilot-workshops/app/0-prerequisites/ -[ex2]: /learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /learning-hub/copilot-workshops/app/3-custom-instructions/ -[next-lesson]: /learning-hub/copilot-workshops/app/5-mcp-playwright/ -[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions -[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[agent-skills-repo]: https://github.com/agentskills/agentskills -[agent-skills-spec]: https://agentskills.io/specification diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/4-custom-instructions.md b/website/src/content/docs/learning-hub/copilot-workshops/app/4-custom-instructions.md new file mode 100644 index 000000000..4bf8df71f --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/4-custom-instructions.md @@ -0,0 +1,121 @@ +--- +title: "Lesson 4 - Guiding Copilot with custom instructions" +description: "Explore repository instructions, add a documentation standard, and apply it to the filtering code." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Context is key when working with generative AI. If a task needs to be done a particular way, you want that guidance available to Copilot. [Instruction files][instruction-files] describe not just *what* code you want but *how* it should be structured. Now that you've built filtering, you'll explore the instructions Copilot used, add a documentation standard, and apply it to your code. + +In this lesson, you will: + +- explore how repository instructions and path-scoped instruction files reach the agent. +- update the instructions file to ensure coding standards are followed. +- see the impact of instructions files on code. + +## Scenario + +As any good dev shop, Tailspin Toys has a set of guidelines and requirements for development practices. These include: + +- Comments should explain intent and non-obvious decisions rather than restate code. +- Exported functions in `db/` and `src/lib/` should document their purpose, parameters, and return values with TSDoc/JSDoc, including an injectable `db` argument where present. +- Reusable Astro components should document their `Props` contracts, and comments should stay current when related code changes. +- Existing formatting and lint guidance should be preserved. + +Through the use of instruction files you'll ensure Copilot has the right information to perform the tasks in alignment with the practices highlighted. + +## Instruction files + +Custom instructions allow you to provide context and preferences to Copilot, so that it can better understand your coding style and requirements. This is a powerful feature that can help you steer Copilot to get more relevant suggestions and code snippets. You can specify your preferred coding conventions, libraries, and even the types of comments you like to include in your code. You can create instructions for your entire repository, or for specific types of files for task-level context. + +There are two types of instructions files: + +- `.github/copilot-instructions.md`, a single instruction file sent to Copilot for **every** request for the repository. This file should contain project-level information — context relevant for most chat or CLI requests sent to Copilot. This could include the tech stack being used, an overview of what's being built, best practices, and other global guidance. +- `.github/instructions/*.instructions.md` files can be created for specific tasks or file types. You can use them to provide guidelines for particular languages (like TypeScript or Astro), or for tasks like creating a UI component or a new set of unit tests. + +> [!NOTE] +> Other instruction formats and support vary by harness. Consult the [custom instructions support reference][custom-instructions-support] before relying on a particular format. + +## Explore the custom instructions files in this project + +To help get things started, a set of instructions files has already been included with the starter project. Let's explore what's already there before making a change to see the impact. + +1. Return to the session from the previous lesson. +2. 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/learning-hub/copilot-workshops/app-2-review-panel.png) + +3. Select the **+** icon to "Open in panel" to open a new canvas. +4. Select **Files**. +5. Select the **Gear** icon, and ensure **Show hidden files** has a check next to it. +6. Navigate to `.github/copilot-instructions.md`. +7. 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. +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. +10. Note the instructions specific to creating unit tests for this project. +11. Finally, open `.github/instructions/drizzle.instructions.md` and scroll to the bottom. Note the links to other instruction files (like `unit-tests.instructions.md`) and existing files in the project. This lets you break larger instruction sets into smaller, reusable files, and point Copilot at examples to follow when generating code. (Paths there are relative to the instruction file rather than the repo root.) + +## Update instructions files to match team's guidance + +While the files already built are a good start, there's still some gaps. Let's modify the core `copilot-instructions.md` file to ensure [TSDoc comments][tsdoc] are added to any newly generated TypeScript files. + +> [!NOTE] +> Because instructions files have a large impact on the code generated by Copilot, care should be taken in ensuring they clearly guide Copilot. You can always have Copilot create a first version, followed by a review by you to ensure the updates meet your requirements. You can also find a [collection of instructions files on Awesome Copilot][awesome-copilot], which serves as a great starting point. + +1. In the same files canvas, navigate to `.github/copilot-instructions.md`. +2. Locate the **Code formatting requirements** header, which should be about halfway down in the file. +3. Add the following as the last bullet point below that header: + + ```plaintext + All new TypeScript should contain TSDocs comments for documentation purposes. + ``` + +The file is automatically saved and ready for use! + +## Use the updated guidance + +With the instructions file updated, let's see the impact it has on the code Copilot generates by asking it to review the update and make the necessary updates. + +> [!NOTE] +> We're going to explicitly tell Copilot to use the instructions file since we just made a change to it. When creating code where the instructions files are already there, Copilot will automatically use instructions files without having to instruct it to do so. + +1. Prompt Copilot to use the instructions files to update the code to match the newly added requirements: + + ```plaintext + We just updated our instructions and code guidance. Can you please update the code you generated to match that guidance? + ``` + +2. 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/learning-hub/copilot-workshops/app-select-changes.png) + +3. Read through any TypeScript files. Note the newly generated TSDocs comments. + +## Summary and next steps + +You explored how the app picks up context from instruction files and applied a new standard to your feature. Specifically, you: + +- explored the repository's `copilot-instructions.md` and path-scoped `*.instructions.md` files. +- updated the instructions file to ensure coding standards are followed. +- saw the impact of instructions files on generated code. + +Next, you'll [customize and run the reusable quality-checks skill][next-lesson] to ensure linting and tests are run consistently. + +## Resources + +- [Instruction files for GitHub Copilot customization][instruction-files] +- [Customizing the GitHub Copilot app][customize-app] +- [Best practices for creating custom instructions][instructions-best-practices] +- [Awesome Copilot — a collection of instruction files and other resources][awesome-copilot] + +[next-lesson]: /learning-hub/copilot-workshops/app/5-agent-skills/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[instructions-best-practices]: https://docs.github.com/copilot/concepts/prompting/response-customization#writing-effective-custom-instructions +[awesome-copilot]: https://awesome-copilot.github.com/ +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +[tsdoc]: https://tsdoc.org/ +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/5-agent-skills.md b/website/src/content/docs/learning-hub/copilot-workshops/app/5-agent-skills.md new file mode 100644 index 000000000..78460cf72 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/5-agent-skills.md @@ -0,0 +1,110 @@ +--- +title: "Lesson 5 - Customize and use a quality-checks skill" +description: "Explore the existing quality-checks skill, customize its report format, and use it to validate filtering." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +There's more to writing code that just writing code. We've been able to validate the code works manually, and used instructions files to ensure it follows our standards. But how about testing? Linting? All the other parts of continuous integration (CI)? + +For these types of tasks, **agent skills** are the best fit! Skills help Copilot understand how to properly run operations like these. + +In this lesson, you will: + +- explore the existing `quality-checks` skill. +- customize the format of its results. +- run the skill and review its output. + +## Scenario + +Tailspin Toys uses the `quality-checks` skill for unit tests, lint, and type checks. The team wants to improve the report to make the results easier to read. + +## Instructions, scripts, and resources + +Agent skills package reusable task instructions, executable scripts, and supporting resources that an agent loads on demand. At their core, they're a folder with the name of the skill, with a markdown file named `SKILL.md`. The markdown contains frontmatter with a name and description to define what the skill is, an overview of what it does, and guidance on when it should be called. The folder can also contain subfolders which contain scripts and other resources for the skill to use when called. + +> [!NOTE] +> Additional folders and files are not required for a skill! In our example, our skill will be running `npm` commands to run our tests and linters. As a result, we don't need additional supporting files. + +Skills can reside in a projects `.github/skills` folder to become a repository asset to be shared and reused by the rest of the team, or in the root folder for Copilot, typically `~/.copilot/skills`. + +## Explore the skill + +Let's explore the skill the Tailspin Toys team created for running unit tests, lint, and type checks, named `quality-checks`. + +1. If you don't already have a **Files** canvas open, in the review panel, select **+**, then **File** +2. Search for `.github/skills/quality-checks/SKILL.md`. +3. Read the `name` and `description` at the top. Note the description, which helps Copilot understand when to call the skill. +4. Read the instructions and note how it guides Copilot through the testing and linting process. + +## Run the skill before making a change + +Skills are callable directly via a slash (`/`) command, or by using natural language to call the skill. Let's ask Copilot to run the skill's three checks. + +1. Ensure Copilot is in **Interactive** mode by selecting it from the mode dropdown. +2. Use the following prompt to call the skill: + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. Note the report at the end. + +## Customize the report + +OK, we'd like a better report that tells us what ran, whether it succeeded, and what the tools actually reported. Let's update our skill to create that report! + +1. Return to the **Files** canvas. +2. If not already open, open `.github/skills/quality-checks/SKILL.md`. +3. Add the following section to the end of the file: + + ```markdown + ## Results output formatting + + Upon completion, report each command that ran and whether it passed, failed, or was blocked. Include test counts, durations, errors, warnings, and other metrics only when the tool reports them. Identify the next action for any failure or blocker, and never describe a skipped or incomplete check as passed. + ``` + +The file will automatically be saved. + +## Run the updated skill + +With our change made, let's see it in action! We'll use the exact same prompt as before. + +1. Ensure Copilot is in **Interactive** mode by selecting it from the mode dropdown. +2. Use the following prompt to call the skill: + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. Note the report at the end. + +## Summary and next steps + +You've customized and used an existing agent skill. In this lesson, you: + +- explored the `quality-checks` skill for unit tests, lint, and type checks. +- customized the format of its results. +- ran the skill and reviewed its output. + +That change will accompany filtering in the feature PR. Next, you'll allow Copilot to interact with the site directly [via the Playwright MCP server][next-lesson]. + +## More skill examples + +These community examples are references, not additional tasks. Review their prerequisites and behavior before adopting them: + +- [Agent Skills specification][skill-spec]. +- [Contribution workflow: `make-repo-contribution`][contribution-example]. +- [Requirements documents: `prd`][prd-example]. +- [Diagrams and a bundled export script: `drawio`][drawio-example]. +- [Browser testing: `webapp-testing`][browser-example]. + +The upstream contribution example is named `make-repo-contribution`; older Tailspin templates used a different name, `make-contribution`. This workshop does not depend on either contribution skill. + +[next-lesson]: /learning-hub/copilot-workshops/app/6-mcp-playwright/ +[skill-spec]: https://agentskills.io/specification +[contribution-example]: https://github.com/github/awesome-copilot/tree/main/skills/make-repo-contribution +[prd-example]: https://github.com/github/awesome-copilot/tree/main/skills/prd +[drawio-example]: https://github.com/github/awesome-copilot/tree/main/skills/drawio +[browser-example]: https://github.com/github/awesome-copilot/tree/main/skills/webapp-testing diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/6-agent-merge.md b/website/src/content/docs/learning-hub/copilot-workshops/app/6-agent-merge.md deleted file mode 100644 index 25ef0c199..000000000 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/6-agent-merge.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "Lesson 6 - Merging with Agent Merge" -description: "Open the filtering pull request, review it in My work, and let Agent Merge fix what's blocking it and merge it for you — the top rung of the merge-automation ladder." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Your filtering feature is built, verified, and seen working in a browser. The last step is to merge it. You've merged twice already in this harness — both times you opened the pull request and merged it yourself on github.com. This time you'll let the app do the heavy lifting with **Agent Merge**, which shepherds a pull request through its whole lifecycle from inside the app. - -In this lesson, you will: - -- learn what Agent Merge is and how it automates the merge lifecycle. -- enable Agent Merge on your filtering session. -- watch it create the pull request, run CI, and merge when everything is green. - -## Scenario - -Over the last few modules you've explored various levels of automation, from creating code to allowing Copilot to validate a UI directly. To further speed development, Tailspin Toys would like to see if there's a way pull requests that have been vetted and validated can automatically be merged. - -## Introducing Agent Merge - -**Agent Merge** allows automation of the last mile of landing a pull request via Copilot app. When you enable it, the app's session reads your pull request, addresses what's blocking it — fixing failing CI checks, responding to review comments, rebasing when needed — and merges it as soon as GitHub allows. It runs in the background, survives app restarts, and turns itself off once your pull request is merged. - -Up to this point you've been the one clicking **Merge pull request** on github.com. Agent Merge shifts that responsibility to the agent so you can move on to the next task while it shepherds the PR through to completion. You still review and approve the work — the agent just handles the mechanical finish line. - -## Use Agent Merge to manage the PR - -You've reviewed the code manually, run tests, and even allowed Copilot to validate the UI. Now it's time to merge the new code into the codebase! Let's allow agent merge to shepherd the PR through continuous integration (CI) and to merge. - -1. Return to the session you had open from the previous module where you were adding filtering functionality. -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/learning-hub/copilot-workshops/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. - -Copilot app then begins the process of creating and managing the PR! It starts by exploring the project to determine how best to create a PR, followed by creating the new PR. - -After a few moments, you'll notice Copilot starts work again, looking at the PR conditions - the CI process of running all the tests on your repository. It will report back status on any reviews left by other team members, any checks that need to run (the CI process), and if the PR is mergeable. - -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/learning-hub/copilot-workshops/app-agent-merge-merge.png) - -7. Once all CI processes are green (meaning the tests passed), Copilot will merge the pull request! - -## Summary and next steps - -You've automated several parts of the development process, including generating code, testing and validating code, and now the pull request process. You: - -- learned what Agent Merge is and how it automates the merge lifecycle. -- enabled Agent Merge on your filtering session. -- watched it create the pull request, run CI, and merge when everything was green. - -Next, you'll explore **canvases** — a richer way to plan and visualize work with the agent. Continue to [Lesson 7 - Planning with canvases][next-lesson]. - -## Resources - -- [Managing issues and pull requests with the GitHub Copilot app][managing-issues-prs] -- [About the GitHub Copilot app][about-copilot-app] - -[next-lesson]: /learning-hub/copilot-workshops/app/7-canvases/ -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/5-mcp-playwright.md b/website/src/content/docs/learning-hub/copilot-workshops/app/6-mcp-playwright.md similarity index 56% rename from website/src/content/docs/learning-hub/copilot-workshops/app/5-mcp-playwright.md rename to website/src/content/docs/learning-hub/copilot-workshops/app/6-mcp-playwright.md index 34ce935cc..94d46a973 100644 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/5-mcp-playwright.md +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/6-mcp-playwright.md @@ -1,17 +1,17 @@ --- -title: "Lesson 5 - Testing with the Playwright MCP server" -description: "Add the Playwright MCP server to the GitHub Copilot app and ask the agent to manually test your filtering feature in a real browser." +title: "Lesson 6 - Validate functionality with Playwright MCP" +description: "Configure Playwright MCP through Customize and observe filtering in a browser in the existing feature worktree." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -In the previous lesson you created and verified the filtering feature with the project's automated test suite. Tests automate validation of code, but allowing the agent to confirm behavior is powerful. It allows an agent to respond to issues it sees in the actual UI it's creating. Let's explore how MCP allows access to external capabilities to AI agents, and add the Playwright MCP server to allow Copilot to interact with the site you're building directly. +As we've already highlighted, there's more to writing code than just writing code. We need to work with data, external services, and even allow for additional automations to be available to Copilot. This is where MCP servers come into play. MCP servers allow Copilot to go beyond what's built into the app, providing it even more tools and services. In this lesson, you will: - understand what Model Context Protocol (MCP) is and how the GitHub Copilot app uses it. -- add the Playwright MCP server from the app settings. +- add the Playwright MCP server. - ask the agent to drive a browser and explore your filtering feature. ## Scenario @@ -36,43 +36,42 @@ There are many other MCP servers available that provide access to different tool ## Add the Playwright MCP server -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. +You manage MCP servers through **Customize** in the sidebar. Servers configured for your repositories or Copilot CLI may already be available in the app, so check before adding a duplicate. The [app customization documentation][customize-app] covers the available options. -1. Select Ctrl+, 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**. -5. Select **Add server** to add it to the list of available MCP servers. -6. Select Esc to close the settings dialog. +1. Select **Customize** in the sidebar. +2. Select **MCP**, then check **Installed** for an existing Playwright server. +3. If needed, find **Playwright** among the available servers, or use the custom-server flow documented by the publisher. +4. Review the publisher, configuration, and any installation prompts before approving them. Follow the prompts to add the server; organization policy or missing prerequisites can block setup. +5. Return to the filtering session in **Interactive** mode and confirm the Playwright MCP tools are available. -You've now added the Playwright MCP server! +If setup fails, resolve the configuration or permission issue before continuing. ## Ask Copilot to explore the feature via Playwright -Let's ask Copilot to test the feature manually by using the Playwright MCP server. +The issue and your planning decisions are already in context. Stop any dev server you started earlier before asking Copilot to start one. 1. Use the following prompt to ask Copilot to validate the new functionality: - ```plaintext - Start the dev server then use the Playwright MCP server to validate the functionality you just added exists. Use the details in the issue to ensure the newly added behavior matches the specs. - ``` + ```plaintext + Start the app and use Playwright MCP to check filtering against the issue and our plan. Tell me what works and what doesn't, without making changes. Stop the server you started when you're done. + ``` -Copilot will launch a browser through the Playwright MCP server, walk through each step, and report back what it found. You'll actually see it open a browser on your system to perform the tasks! +> [!NOTE] +> You're not required to tell Copilot to use a specific MCP server; it will normally find the right one to use based on the current context. However, it's never a bad idea to tell Copilot something you know you think is important. -2. Read its summary against the acceptance criteria in the issue. If something looks off, ask follow-up questions or send it back to fix the code before you open a pull request. -3. Leave this session open as we're going to close it out in the next lesson! +2. Sit back and watch! -Copilot has now also validated the functionality in the browser by exploring the feature like a user would. +Copilot will start the server, open a browser, and interact with the website! Once it's done, it'll stop the server and give you a report. ## Summary and next steps Congratulations, you used the Playwright MCP server to explore your feature in a real browser from the GitHub Copilot app! To recap, you: -- learned what Model Context Protocol (MCP) is and how the app makes MCP tools available. -- added the Playwright MCP server from the app settings. +- learned what Model Context Protocol (MCP) is and how the GitHub Copilot app uses it. +- added the Playwright MCP server. - asked the agent to drive a browser and explore your filtering feature. -Your feature is built, verified, and seen working. Now it's time to ship it — using **Agent Merge** to open and merge the pull request for you. Continue to [Lesson 6 - Merging with Agent Merge][next-lesson]. +Next, you'll [create a QA custom agent][next-lesson] that brings the skill and browser tools together in a specialist role. ## Resources @@ -80,7 +79,7 @@ Your feature is built, verified, and seen working. Now it's time to ship it — - [Microsoft Playwright MCP Server][playwright-mcp-server] - [Configuring MCP servers in the GitHub Copilot app][customize-app] -[next-lesson]: /learning-hub/copilot-workshops/app/6-agent-merge/ +[next-lesson]: /learning-hub/copilot-workshops/app/7-qa-agent/ [mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ [playwright-mcp-server]: https://github.com/microsoft/playwright-mcp [customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/7-canvases.md b/website/src/content/docs/learning-hub/copilot-workshops/app/7-canvases.md deleted file mode 100644 index 89da89519..000000000 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/7-canvases.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: "Lesson 7 - Planning with canvases" -description: "Create a shared, agent-driven canvas in the GitHub Copilot app to plan and track your work alongside the agent." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -So far you've directed agents through chat. But a lot of work doesn't live in a conversation — it lives on a board, in a document, or on a checklist. **Canvases** give you and the agent a shared surface for exactly that kind of work, right inside the app. In this lesson you'll create a simple canvas to plan and track the backlog you've been working through. - -In this lesson, you will: - -- understand what a canvas is and when to use one. -- create a shared Kanban board canvas to triage your backlog. -- save the canvas to your repository and merge it for the team. -- open the canvas in a new session and start work from it. - -## Scenario - -Looking at a list of issues can be rather daunting, even in the best of times. Tailspin Toys' developers have been looking for a tool that would allow them to quickly triage issues, and begin work on them in Copilot app. - -## What is a canvas? - -A [canvas][canvas-docs] is a shared, interactive surface for a work artifact — a plan, a triage board, a release checklist, a dashboard, or a document. While chat is great for describing intent and reasoning through ambiguity, most work happens on a *surface*. Canvases let you collaborate with the agent directly on that surface. - -Canvases are **bidirectional**: the agent can update the canvas while it works, and you can edit the same surface yourself. When you create a canvas, the agent builds it based on your prompt and workflow, and you can ask it to add, remove, or revise capabilities as you go. Once created, a canvas opens in the app's right side panel. - -Some common examples include: - -- **Markdown canvases** for planning your day and prioritizing issues and pull requests. -- **Agentic kanban boards** where people and agents add cards and move work across columns. -- **Issue triage boards** that summarize top issues and recurring themes for a repository. - -## Why use a canvas? - -Reach for a canvas when a task needs structure, iteration, and verification, and a chat alone isn't enough. A canvas lets you: - -- ground the agent's work in an actual artifact that fits your workflow. -- steer or correct work directly on the shared surface, then let the agent continue from your changes. -- inspect progress as visible changes to an artifact, not just chat responses. - -## Create a canvas to track your work - -You've shipped a lot: the star rating, the documentation standard, and the filtering feature are all merged. But there's still items on the backlog. Let's create the canvas to help quickly triage the work. - -1. Return to (or open) the GitHub Copilot app. -2. Select the **Home screen**. -3. Ensure `tailspin-toys` is selected for the repo. -4. In the prompt box, use the following prompt to create our canvas that meets our needs: - - ```plaintext - Create a basic Kanban board canvas that allows me to quickly triage work. Highlight the three issues which are most likely to need attention right now, with the remainder in a second section down below. The top three cards should include a description of the issue's content and a justification of why they're at the top of the list. Each issue should have a button that allows me to add it to the current context for the current session so I can get to work on it straightaway. - ``` - -Copilot will get to work on creating the canvas! - -> [!NOTE] -> This will take a few minutes for it to do so. Because this is a complicated task, you might not be satisfied with the first version. You can continue to prompt to build the tool of your dreams! - -## Save the canvas and merge it to the repository - -Canvases can become assets in the repository, just like instructions files and skills. Let's ask Copilot to add it to our repository and merge it so the whole team can use it. - -1. In the same session, ask Copilot to save the canvas to the repository by using the following prompt: - - ```plaintext - Let's save this canvas definition to the repository so I can share it with my development team - ``` - -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/learning-hub/copilot-workshops/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. - -Copilot app begins the process of creating and managing the PR. It starts by exploring the project to determine how best to create a PR, then creates it. - -After a few moments, you'll notice Copilot starts work again, looking at the PR conditions — the CI process of running all the tests on your repository. It will report back status on any reviews left by other team members, any checks that need to run (the CI process), and if the PR is mergeable. - -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/learning-hub/copilot-workshops/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! - -You've now created a new shared canvas for your team! - -## Work in the canvas - -With the canvas created, let's start a new session and put it to work! - -1. Inside the Copilot app, start a new session by selecting **New session** next to **tailspin-toys**. -2. Ask Copilot to open the triage canvas by using the following prompt: - - ```plaintext - Open the triage issues canvas - ``` - -3. You should notice the canvas you built is now open in this new session! -4. Select **Add to current context** on one of the issues that's of most interest to you. -5. Copilot gets to work on the issue! - -You've now used a canvas you created to streamline the development process. - -## Summary and next steps - -You created a shared surface where you and the agent can collaborate! You: - -- learned what canvases are and when to use them. -- created a shared Kanban triage board canvas with the agent. -- saved and merged the canvas to your repository with Agent Merge. -- opened the canvas in a new session and used it to start work. - -With your backlog tracked, take a step back to review everything you've built and where to go next. Continue to [Lesson 8 - Review and next steps][next-lesson]. - -## Resources - -- [Working with canvas extensions in the GitHub Copilot app][canvas-docs] -- [Canvases on Awesome Copilot][awesome-copilot-canvases] -- [About the GitHub Copilot app][about-copilot-app] - -[next-lesson]: /learning-hub/copilot-workshops/app/8-review/ -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/7-qa-agent.md b/website/src/content/docs/learning-hub/copilot-workshops/app/7-qa-agent.md new file mode 100644 index 000000000..4d6f41866 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/7-qa-agent.md @@ -0,0 +1,80 @@ +--- +title: "Lesson 7 - Create and use a QA agent" +description: "Create a requirements-first QA profile that combines test coverage, the quality-checks skill, and direct browser evidence." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You've used the `quality-checks` skill to run automated checks and Playwright MCP to observe the filtering experience in a browser. Now you'll bring those capabilities together in a custom agent with a clearly defined QA process. + +In this lesson, you will: + +- explore how a custom agent works with instructions, skills, and MCP tools. +- create and inspect a reusable quality assurance (QA) profile. +- select the QA agent and review its findings against the filtering issue. + +## Scenario + +Tailspin Toys wants a consistent review of requirements, code quality, automated checks, test coverage, and browser behavior before opening a pull request (PR). A custom agent can coordinate that QA process and provide a reusable report. + +## What is a custom agent? + +A custom agent is a specialized version of Copilot defined in a Markdown profile. The profile describes the agent's purpose, instructions, and available tools. For this workshop, you'll define a QA role in `.github/agents/qa.agent.md` and select it in the app. + +The customizations you've used have different jobs. Repository instructions describe the team's standards. The `quality-checks` skill packages repeatable checks. Playwright MCP supplies browser tools. The QA profile tells Copilot how to use those capabilities to assess requirements and report findings. It doesn't replace them or require another session. + +## Create the QA profile + +Before opening the feature PR, you'll ask Copilot to create a reusable QA profile. The profile will define both the checks QA performs and the boundaries it must follow. + +1. Confirm the session is in **Interactive** mode. +2. Send the following prompt to Copilot to create the new custom agent: + + ```plaintext + Create a custom agent named QA in .github/agents/qa.agent.md. It should check features against their issues and agreed requirements, follow the repository instructions, run the quality-checks skill, use Playwright MCP to verify behavior, and add tests when coverage is missing. + + Have it report each requirement as pass, fail, or blocked with supporting evidence. It must ask before changing implementation code, and it must not commit changes or open pull requests. Use the current model and available tools. Just create the profile for now so I can review it. + ``` + +## Inspect the profile + +Before using the new agent, review its profile to confirm Copilot captured the intended QA workflow and authority boundaries. This prevents an incomplete or overly broad agent from changing the feature when you only want it verified. + +1. Open **Changes** and select `.github/agents/qa.agent.md`. +2. Read the frontmatter. The `description` is required; `name` is optional, but including it gives the agent a clear display name. +3. Read the profile instructions and confirm that QA starts from requirements, follows repository instructions, runs the `quality-checks` skill, and uses Playwright MCP. +4. Confirm that QA reports supporting evidence, asks before changing implementation code, and does not commit changes or open pull requests. +5. If the generated profile misses any of these responsibilities or boundaries, ask the general Copilot agent to revise it before continuing. + +## Run QA against the issue + +With the profile reviewed, select QA in the current session so it can use the filtering issue and planning decisions already in context. Confirm the active agent before asking it to begin the review. + +1. In the current session, open the agent picker in the prompt box. +2. Select **QA** and verify that the app visibly identifies **QA** as the active agent before sending the run prompt. +3. Send the following prompt to ask QA to review the feature: + + ```plaintext + Review the filtering feature against the issue and the decisions in our plan. Is it ready for a PR? + ``` + +4. Confirm QA uses the correct issue and planning decisions. Provide the issue URL or any missing context if it asks. +5. Read through the report it provides once it's done doing its work! + +## Summary and next steps + +You've added a reusable specialist role to the workflow and reviewed its work. In this lesson, you: + +- explored how a custom agent works with instructions, skills, and MCP tools. +- created and inspected a reusable QA profile that starts from requirements. +- selected the QA agent and reviewed its findings against the filtering issue. + +You now have the implementation, skill update, QA profile, tests, and verification report ready for review. Next, you'll [bring them together in a feature PR and use Agent Merge][next-lesson]. + +## Resources + +- [Customizing the GitHub Copilot app, including selecting custom agents][customize-app] + +[next-lesson]: /learning-hub/copilot-workshops/app/8-create-pull-request/ +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/8-create-pull-request.md b/website/src/content/docs/learning-hub/copilot-workshops/app/8-create-pull-request.md new file mode 100644 index 000000000..37550cd34 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/8-create-pull-request.md @@ -0,0 +1,74 @@ +--- +title: "Lesson 8 - Create and merge the feature PR" +description: "Review filtering, instructions, the skill update, QA profile, and tests together, then create a PR and use Agent Merge." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Your filtering implementation, instruction updates, skill update, quality assurance (QA) profile, and tests are saved on one branch. It's time to review them together and open a pull request. You merged the star-rating pull request (PR) yourself; this time you'll allow **Agent Merge** to manage the process. + +> [!NOTE] +> Normally, we'd split the feature, instruction updates, skill update, and QA agent into a few separate PRs. To streamline the workshop, you've kept the full filtering and quality workflow in one session and branch, with all that work going into this PR. + +In this lesson, you will: + +- learn what Agent Merge is and how it automates the merge lifecycle. +- inspect the full feature PR and verification evidence. +- authorize Agent Merge only after review, and confirm the PR is merged. + +## Scenario + +Throughout the filtering workflow, you've used Copilot to plan, implement, and verify a feature. Tailspin Toys now wants to automate the remaining PR work while keeping merge authorization under the developer's control. + +## Introducing Agent Merge + +**Agent Merge** automates the remaining work needed to land a pull request in the GitHub Copilot app. When you enable it, the app's session reads your pull request, addresses what's blocking it — fixing failing continuous integration (CI) checks, responding to review comments, rebasing when needed — and merges it as soon as GitHub allows. It runs in the background, survives app restarts, and turns itself off once your pull request is merged. + +Up to this point you've selected **Merge pull request** yourself. Agent Merge can take on that responsibility, but its ability to edit code and merge still needs your explicit authorization. Review its allowed actions and the work before granting merge permission. + +## Use Agent Merge to manage the PR + +With all of your code created and reviewed, let's allow agent merge to manage the PR process. + +1. Use the agent picker to select **Default agent**. +2. Select the dropdown next to **Create PR**. +3. Select **Agent merge**. The button changes to **Agent merge**. +4. Select **Agent merge** to start the agent merge process. + +The agent merge process kicks off. It will: + +- Create the pull request with a title and description. +- If you started the session with an issue, reference the related issue in the description's body. +- Rebase or handle any potential merge conflicts with the target branch. +- Monitor the CI process to ensure all checks pass. +- Monitor the PR for any feedback from other developers or Copilot code review. It will make updates to resolve those comments. +- Optionally it can automatically merge the PR once everything has succeeded. + +Let's let agent merge also merge the PR once everything passes! + +5. Select the dropdown next to **Agent merge**. +6. Ensure there's a check next to **Merge pull request**. + + +> [!IMPORTANT] +> Agent Merge does not bypass repository protections or missing permissions. Resolve those blockers before continuing. + +## Summary and next steps + +You've automated several parts of the development process, including generating code, testing and validating code, and now the pull request process. You: + +- learned what Agent Merge is and how it automates the merge lifecycle. +- inspected the full feature PR and verification evidence. +- authorized Agent Merge only after review and confirmed the PR was merged. + +Next, you'll [use an existing canvas and create a triage canvas][next-lesson] to explore a richer way to inspect, plan, and visualize work with the agent. + +## Resources + +- [Managing issues and pull requests with the GitHub Copilot app][managing-issues-prs] +- [About the GitHub Copilot app][about-copilot-app] + +[next-lesson]: /learning-hub/copilot-workshops/app/9-canvases/ +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md new file mode 100644 index 000000000..93cc664e4 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md @@ -0,0 +1,151 @@ +--- +title: "Prepare project and model" +description: "Export the Tailspin catalog, create a Foundry project and model deployment, and validate them in Canvas." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /learning-hub/copilot-workshops/app/8-foundry-canvas/ + label: "Optional: Incorporate Foundry" +next: + link: /learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: Build and deploy the agent +--- + +This first module establishes the data and Azure resources for the Backer Concierge. No agent code or hosted deployment is needed yet. + +By the end, you will have: + +- A catalog export with explicit grounding limits. +- A Foundry project and a model deployment chosen for the feature requirements. +- A Canvas-validated deployment and a simple catalog-bounded model smoke check. + +## Scenario + +Tailspin Toys backers can filter games by category and publisher, but questions such as *Which games would suit someone who loves Git puns?* don't have dropdown answers. A Backer Concierge should recommend only games in the Tailspin catalog and never invent games, publishers, ratings, funding totals, backer counts, prices, player counts, play times, or release dates. A reliable catalog and a suitable model are the foundation for those answers. + +## Prepare your tools and issue session + +The setup connects the GitHub Copilot app to Azure while keeping all feature work together. + +1. Confirm that you have an Azure subscription. If you need one, the available options include a [free Azure subscription with $200 credit][azure-free] or [Azure for Students with $100 credit][azure-students]. +2. Install the [Azure CLI][install-azure-cli] for your OS, then verify the installation using `az version`. +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/learning-hub/copilot-workshops/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. Select **Issues** in the sidebar, then 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. +7. Type `/microsoft-foundry`, then `/azure` to confirm both skills are installed and available; don't send any prompts yet. If a plugin does not appear immediately, restart the app, return to this same issue session, and check again. + +## Generate the catalog export + +The sample repository includes an export script that gives the agent a file it can read. + +8. In this issue-linked worktree session, replace the default `/fix-issue` prompt in the prompt box with: + + ```plaintext + Install the project dependencies, seed the database, then run the existing db:export script. Show me the command output and summarize the shape and grounding limits of db/catalog.json. + ``` + +9. Review the command output. Copilot should run the equivalent of: + + ```bash + npm install + npm run db:setup + npm run db:export + ``` + + ![Generate catalog export](/images/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/app-8-view-catalog.png) + +## Set up a Foundry project and model + +Creating the project and deployment in chat first means Canvas connects only to resources that already exist. + +11. Select **+**, select **Terminal**, and sign in to Azure: + + ```bash + az login + ``` + +12. Check the selected subscription and list its resource groups: + + ```bash + az account show --output table + az group list --output table + ``` + + If the subscription is incorrect, run `az account set --subscription `, then repeat both commands. + + If `rg-tailspin-toys` appears, inspect its resources: + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + If the group contains unrelated or shared resources, stop and choose a dedicated name before using the following prompt. Replace the example names in every later prompt and command with the names you approve. +13. In the same issue session, enter: + + ```plaintext + 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/learning-hub/copilot-workshops/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: + + ```plaintext + Use the Microsoft Foundry skill to recommend two or three current chat models in the tailspin-toys project that meet this issue's acceptance criteria. Explain the tradeoffs and wait for me to choose. + ``` + +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/learning-hub/copilot-workshops/app-8-select-model.png) + +16. Ask Copilot to deploy your selection, reviewing the target project and cost before approval: + + ```plaintext + Deploy the model I selected to the tailspin-toys Foundry project, using the model name as the deployment name. + ``` + +> [!TIP] +> Model availability changes over time. The model Copilot confirms is available in your project is the appropriate choice, rather than a hardcoded model from this module. + +## Validate and smoke-test the model in Canvas + +This check verifies the project and model before any agent code exists. A model smoke check is not a substitute for the hosted agent's grounding tests in module 2. + +17. Select **+**, then **Canvas**, then **Microsoft Foundry (Preview)**. +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/learning-hub/copilot-workshops/app-8-validate-project-model.png) + +20. In the same session, enter: + + ```plaintext + 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 such as tokens used and response time, only if available. Use my existing Azure sign-in. Do not display credentials, change files, or create resources. + ``` + +21. Review the response. It should recommend only a real game from `db/catalog.json`, use the correct title, publisher, and rating, and explain that funding information is unavailable. If the model invents a game, catalog details, or a funding total, compare another recommended model before continuing. + +> [!NOTE] +> Canvas remembers the selected project when reopened. Its stages are **Create new hosted agents** for scaffolding, **Build current hosted agent** for connecting models, toolboxes, skills, and guardrails, and **Deploy and test** for local runs and deployment to Microsoft Foundry. + +## Checkpoint and next steps + +You prepared the Azure tools, exported the catalog, and tested a deployed model against the Backer Concierge grounding rules. The checkpoint for this module is a model that recommends real catalog games without inventing missing information. + +Next, you'll use the same Tailspin Toys repository, worktree branch, issue-linked session, Foundry project, and selected model deployment to [build and deploy the agent][next-module]. If you're stopping here, [clean up your Azure resources][cleanup] to avoid ongoing costs. + +[azure-free]: https://azure.microsoft.com/pricing/purchase-options/azure-account +[azure-students]: https://azure.microsoft.com/free/students +[install-azure-cli]: https://learn.microsoft.com/cli/azure/install-azure-cli +[install-azd]: https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd +[next-module]: /learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[cleanup]: /learning-hub/copilot-workshops/app/8-foundry-canvas/#clean-up-your-resources diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md new file mode 100644 index 000000000..f5018a73b --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md @@ -0,0 +1,161 @@ +--- +title: "Build and deploy the agent" +description: "Scaffold the Backer Concierge in Canvas, inspect it locally, and deploy and retest it in Foundry." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: Prepare project and model +next: + link: /learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + label: Connect the agent to the site +--- + +This module turns the project, model deployment, and catalog from [Prepare project and model][previous-module] into a hosted Backer Concierge through Microsoft Foundry Canvas. + +By the end, you will have: + +- A scaffolded agent with packaged catalog data and focused tests. +- Local evidence for each catalog and conversation acceptance criterion. +- A deployed agent version retested in Foundry. + +## Scenario + +Tailspin Toys needs a concierge that can answer real catalog questions, admit when information is missing, and remember the games discussed in a conversation. The service must earn that trust before it becomes part of the storefront. + +## Prepare deployment tools + +Hosted-agent inspection and deployment use Azure Developer CLI through Canvas; the existing Foundry project and model are reused. + +1. Resume the same session linked to the **Add a Backer Concierge assistant for catalog questions** issue from module 1. Confirm `db/catalog.json` is intact, you're connected to the correct subscription and Foundry project, and your model deployment is still in place. If resources were cleaned up, repeat the relevant [project-and-model setup][previous-module] first. + +2. Select **+**, select **Terminal**, and sign in to Azure Developer CLI, completing authentication in the browser when prompted: + + ```bash + azd auth login + ``` + +3. Run `azd config show` to verify your Azure subscription. If it is empty or incorrect, update it with `azd config set defaults.subscription `, and rerun `azd config show` to confirm the change. + +## Scaffold the Backer Concierge + +Canvas scaffolds the code, folder structure, and root `azure.yaml` that connect the Backer Concierge to your existing model deployment. + +4. In **Create new hosted agents** preview, enter: + + ```plaintext + Scaffold a hosted agent named Backer Concierge in agent/backer-concierge, connected to the tailspin-toys project and the model deployment I just confirmed. Use Microsoft Agent Framework with the Responses API. Ground it in db/catalog.json and ensure it meets the acceptance criteria in this issue. Keep a single azure.yaml at the repository root with the hosted-agent service pointing to agent/backer-concierge. Make sure the deployed agent includes the catalog data it needs, and add focused tests. + ``` + + 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/learning-hub/copilot-workshops/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: + + - The agent lives in `agent/backer-concierge`. + - A single `azure.yaml` at the repository root contains a service with `host: azure.ai.agent`. + - The deployable agent includes its own generated copy of the catalog. + - Focused tests cover catalog grounding requirements. + - No credentials or local environment files are included. + + ```text + tailspin-toys/ + ├── azure.yaml + ├── agent/ + │ └── backer-concierge/ + │ └── requirements.txt + ├── db/ + │ └── catalog.json + └── src/ + ``` + +6. Ask Copilot to run the focused tests and fix any failures before continuing to **Deploy and test**. + +## Inspect the agent locally + +**Inspect Locally** runs `azd ai agent run` in the Copilot integrated terminal, waits for the hosted agent to start, and opens the embedded Agent Inspector. + +7. In **Deploy and test**, select **Inspect Locally** and wait for Agent Inspector to open. + +> [!NOTE] +> The first local run can take several minutes while `azd` creates an environment and installs dependencies. + +8. If the inspector cannot connect, confirm that no other process is using the required port, send the error to Copilot, and retry after the issue is fixed. +9. Test a **grounded recommendation** in Agent Inspector: + + ```text + I love puzzle games about tracking down bugs. What should I back? + ``` + + Expected: Names only real titles from the catalog and uses the correct information for each title. + + ![Grounded recommendation in Agent Inspector](/images/learning-hub/copilot-workshops/app-8-grounded-recommendation.png) + +10. Test a **hallucination trap**: + + ```text + How much has Pipeline Conquest raised so far, and how many backers does it have? + ``` + + Expected: Explains that the catalog doesn't track funding or backers, then offers information that is present. + +11. Test **out-of-catalog pressure**: + + ```text + Do you have Wingspan? If not, what's the closest thing you've got? + ``` + + Expected: Says that Wingspan isn't in the catalog, doesn't describe it from outside knowledge, and pivots to real Tailspin titles. + +12. Test a **vague request**: + + ```text + Recommend me something good. + ``` + + Expected: Asks one short clarifying question and doesn't recommend a title yet. + +13. Test **ranking accuracy**: + + ```text + What are your three highest rated games? + ``` + + Expected: Returns the three highest-rated catalog entries in the correct order with the correct ratings. + +14. Test **conversation continuity** by sending these prompts in the same conversation: + + ```text + Show me two highly rated strategy games. + ``` + + ```text + Which of those has the higher rating? + ``` + + Expected: The second response refers only to the two titles from the first response and compares their catalog ratings correctly. + +15. Compare every response with `db/catalog.json` and the issue's acceptance criteria. Confirm the agent never invents games, publishers, ratings, funding totals, backer counts, prices, player counts, play times, or release dates. If Agent Inspector reports an error or a response crosses the grounding boundary, copy the result into the Canvas prompt area and ask Copilot to fix it. Restart local inspection and rerun the failed test after every change, then confirm all six checks pass before deploying. + +## Deploy and retest the hosted agent + +Canvas uses `azd` to deploy the tested agent. Foundry packages the service source, resolves dependencies, builds it remotely, and publishes it to Microsoft Foundry. + +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/learning-hub/copilot-workshops/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. + +## Checkpoint and next steps + +You scaffolded the Backer Concierge, tested its catalog grounding and conversation behavior locally, deployed it to Microsoft Foundry, and retested the hosted version. The checkpoint for this module is a hosted agent that passes all six acceptance checks without inventing missing information. + +Next, you'll use the same Tailspin Toys repository, worktree branch, issue-linked session, Foundry project, selected model deployment, and hosted agent to [connect the agent to the site][next-module]. If you're stopping here, [clean up your Azure resources][cleanup] to avoid ongoing costs. + +[previous-module]: /learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[next-module]: /learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[cleanup]: /learning-hub/copilot-workshops/app/8-foundry-canvas/#clean-up-your-resources diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md new file mode 100644 index 000000000..0d273b34e --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md @@ -0,0 +1,90 @@ +--- +title: "Connect the agent to the site" +description: "Integrate the hosted Backer Concierge through a local credential-safe proxy and test the widget end to end." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: Build and deploy the agent +next: { link: /learning-hub/copilot-workshops/app/10-review/, label: Review and next steps } +--- + +This final module connects the tested hosted agent from [Build and deploy the agent][previous-module] to the locally running Tailspin Toys website. + +By the end, you will have: + +- A local Azure Functions proxy that protects Foundry credentials and conversation identifiers. +- An accessible chat widget with verified end-to-end behavior. +- A locally verified integration and a resource cleanup checkpoint. + +## Scenario + +Tailspin Toys backers need catalog advice where they browse games. The Backer Concierge should preserve the conversation, work with keyboard navigation, and handle unavailable information and errors clearly. That convenience must not expose service credentials or internal conversation details to the browser. + +## Resume the hosted-agent checkpoint + +The integration uses the existing hosted agent rather than creating new Foundry resources. + +1. Resume the same Tailspin Toys repository, worktree branch, and **Add a Backer Concierge assistant for catalog questions** issue session from the earlier modules. Confirm the root `azure.yaml`, agent source, and catalog are present, and check the recorded subscription, dedicated resource group, Foundry project, model deployment, and tested hosted-agent version. +2. If resources were cleaned up, restore the relevant [project and model][project-module] and [tested hosted deployment][previous-module] before integration. + +## Build the server-side proxy + +Tailspin Toys is fully pre-rendered. Browser code must never call the hosted agent directly or receive Foundry credentials. A local Azure Functions **server-side credential boundary** authenticates to Foundry and returns only the agent response to the browser. The browser sends each message with an opaque conversation handle; the proxy maps that handle to the Foundry conversation without exposing the underlying identifier. + +The proxy is the only piece of code allowed to access your Azure credentials. For this workshop, the Function and site run locally, with the Astro development server forwarding `/api` requests to the Function. + +> [!IMPORTANT] +> This workshop proxy is for local development only. It must not be deployed as an anonymous public endpoint. A production integration needs an application-specific authentication and abuse-control design, including appropriate rate limits or quotas, CORS restrictions, monitoring, and cost controls. + +3. In the same Copilot session, enter: + + ```plaintext + Add a local Azure Functions proxy in api for the static Astro site to call my deployed Backer Concierge during development. Use my existing local Azure sign-in, keep credentials and Foundry conversation identifiers out of the browser, return an opaque conversation handle, validate requests, sanitize errors, and add focused tests. Configure the Astro development server so /api requests reach the local Function. Don't create public deployment infrastructure. + ``` + +4. Review the generated proxy and focused tests for request validation, sanitized errors, opaque conversation handles, and the server-only credential boundary. Ask Copilot to run the focused tests and fix any failures. +5. Open another terminal, start the local Function using the command provided by Copilot, and leave it running. +6. Return to chat and ask Copilot to test the local proxy: + + ```plaintext + Test the local /api/concierge endpoint by asking "Which games are under $30?" Show me the sanitized response and confirm that no credentials or internal conversation identifiers are returned. + ``` + +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/learning-hub/copilot-workshops/app-8-local-proxy-test.png) + +## Build and test the chat widget + +With the proxy running, the widget provides the visible conversation on the site without exposing Foundry details. + +8. Ask Copilot to create the site integration: + + ```plaintext + 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, keep Foundry details out of the browser, and add end-to-end tests covering the chat flow, conversation continuity, accessibility, error handling, and grounding boundaries. + ``` + +9. Start the Astro development server in another terminal using the command provided by Copilot. Keep both the site and the local Function running. +10. Ask Copilot to run the end-to-end tests: + + ```plaintext + Run the end-to-end tests for the Backer Concierge widget in the 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. + ``` + +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/learning-hub/copilot-workshops/app-8-e2e-test-results.png) + +## Checkpoint and next steps + +You built a local credential-safe proxy, connected an accessible chat widget, and verified the full conversation flow against the hosted Backer Concierge. The checkpoint for this module is a locally tested website integration that preserves the catalog boundary and keeps credentials and internal Foundry identifiers out of the browser. It is not a production deployment of the proxy or site. + +When you're finished experimenting, stop both local services and [clean up your Azure resources][cleanup]. Then continue to [Review and next steps][core-review] on the core workshop route. + +[previous-module]: /learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[project-module]: /learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[agent-checks]: /learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/#inspect-the-agent-locally +[cleanup]: /learning-hub/copilot-workshops/app/8-foundry-canvas/#clean-up-your-resources +[core-review]: /learning-hub/copilot-workshops/app/10-review/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md new file mode 100644 index 000000000..e8d507dd0 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md @@ -0,0 +1,89 @@ +--- +title: "Optional: Incorporate Foundry" +description: "Build a catalog-grounded Backer Concierge with Microsoft Foundry Canvas, with safe stopping points along the way." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: { link: /learning-hub/copilot-workshops/app/10-review/, label: Review and next steps } +next: + link: /learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: Prepare project and model +tags: + - workshop +--- + +This optional journey adds a **Backer Concierge** to Tailspin Toys using Microsoft Foundry Canvas in the GitHub Copilot app. It moves from a catalog-grounded model experiment to a hosted agent and then a local website integration. + +## The journey + +Each module ends with a checkpoint and a safe stopping point. The same Tailspin Toys repository, worktree branch, issue-linked session, Foundry project, and model deployment carry through the journey. + +- [Prepare project and model][module-1] establishes the catalog boundary, creates the project and model deployment, and checks them in Canvas. +- [Build and deploy the agent][module-2] scaffolds the Backer Concierge, tests it locally, and deploys and retests the hosted agent. +- [Connect the agent to the site][module-3] adds a local credential-safe proxy, an accessible chat widget, and end-to-end tests. + +> [!IMPORTANT] +> Microsoft Foundry Canvas and hosted agents are in public preview. +> +> This journey creates billable Azure resources, including a model deployment and, from module 2, a hosted agent. Subscription, region, quota, and estimated cost need approval before resource creation. Cleanup applies even when stopping after only the project and model. + +1. Begin with [Prepare project and model][module-1], keeping the work in your Tailspin Toys repository rather than this workshop content repository. +2. If you'd rather finish the core workshop, continue to [Review and next steps][core-review]. + +## Clean up your resources + +When you're done experimenting at any checkpoint, remove the Azure resources to avoid unwanted costs. Cleanup removes resources needed by later modules, so continuing afterward requires recreating them. + +> [!WARNING] +> Only delete `rg-tailspin-toys` if it is dedicated to this exercise and contains no resources you need to keep. Deleting a shared resource group would remove unrelated resources too. +> +> If you approved a different resource-group name in module 1, substitute it for `rg-tailspin-toys` in every command below. + +1. Stop any local Agent Inspector, Azure Function, or Astro development server you started in its terminal. +2. If you deployed the hosted agent in module 2 or 3, open a terminal in the same Tailspin Toys worktree and use the same `azd` environment, then run: + + ```bash + azd down --purge + ``` + +3. Check the selected subscription and whether the workshop resource group still exists: + + ```bash + az account show --output table + az group exists --name rg-tailspin-toys + ``` + + If the command returns `false`, cleanup is complete. If it returns `true`, inspect the resources in the group: + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + Verify that all remaining resources belong to this exercise. If you stopped after module 1, the Foundry project and model still need cleanup even though you did not deploy an `azd` service. +4. If the dedicated workshop resource group still exists and contains only resources you intend to remove, run: + + ```bash + az group delete --name rg-tailspin-toys --yes --no-wait + ``` + +5. Because `--no-wait` returns before deletion completes, rerun the following command until it returns `false`: + + ```bash + az group exists --name rg-tailspin-toys + ``` + +## Resources + +The Microsoft documentation describes Canvas, hosted deployments, and their permissions. + +- [What is Microsoft Foundry Canvas?][foundry-canvas] +- [Deploy your first hosted agent with Foundry Canvas][hosted-agent-quickstart] +- [Hosted agent permissions][hosted-agent-permissions] + +[module-1]: /learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[module-2]: /learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[module-3]: /learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[core-review]: /learning-hub/copilot-workshops/app/10-review/ +[foundry-canvas]: https://learn.microsoft.com/azure/foundry/agents/concepts/foundry-canvas +[hosted-agent-quickstart]: https://learn.microsoft.com/azure/foundry/agents/quickstarts/quickstart-hosted-agent?pivots=canvas +[hosted-agent-permissions]: https://learn.microsoft.com/azure/foundry/agents/concepts/hosted-agent-permissions diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/8-review.md b/website/src/content/docs/learning-hub/copilot-workshops/app/8-review.md deleted file mode 100644 index 0bcd88bf5..000000000 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/8-review.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: "Lesson 8 - Review and next steps" -description: "Recap the GitHub Copilot app harness, automate recurring work, and explore where to go next." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Over the last several lessons, you took a feature from idea to merge with the GitHub Copilot app, including: - -- connecting a repository and orienting to the app's workspace and your seeded backlog. -- starting sessions from a direct task and from issues, and using Plan and Autopilot modes to control how the agent works. -- guiding the agent with custom instructions and a reusable skill. -- testing your work with the Playwright MCP server in a real browser. -- collaborating with the agent on a shared canvas. -- shipping changes up a ladder of merge automation — from merging on github.com yourself to letting **Agent Merge** land a pull request. - -Let's automate some recurring work, talk through best practices, and look at where to go next. - -## Automate recurring work - -The app can run agents for you on a schedule or on demand through **automations** — great for routine tasks like triaging new issues or recapping recent activity. Let's create a simple, non-destructive one. - -1. Select **Automations** in the sidebar, then select **New automation**. -2. Give it a name, such as `Recap my recent work`. -3. Choose a trigger. **Manual** lets you run it on demand; **On a schedule** runs it automatically; **When an issue is created** reacts to new issues. Choose **Manual** for this lesson. -4. Enter a read-only prompt so the automation can't change anything, for example: - - ```plaintext - Summarize the pull requests merged in this repository over the last week, and list any issues still open in the backlog. - ``` - -5. Pick the project (your Tailspin Toys repository) and create the automation. -6. Run it on demand to see the result. - -> [!TIP] -> Automations can run locally or in the cloud. Enable **Run in the cloud** and pick the **Tools** an automation may use when you want it to run unattended on a schedule. Keep scheduled automations scoped and non-destructive until you trust their output. - -## Best practices - -When using any AI tool, the infrastructure around it drives the quality of what you get out. Instructions files, skills, and custom agents all played a part in this workshop — invest in them and reuse them across sessions. - -Match the **mode and model** to the task. Use **Plan** to think through an approach before building, **Interactive** to stay in the loop on focused changes, and **Autopilot** only for well-scoped, isolated tasks. Choose a faster model for routine edits and a more capable model with higher reasoning effort for complex work. - -Context still matters as much as infrastructure. Clearly describing *what* you want built, *why*, and *how* meaningfully changes the output. Quick chats are a great place to scope an idea before you commit it to a full session. - -## More to explore - -You've covered the core workflow. A few more features worth a look: - -- **Quick chats** for fast, throwaway questions that don't need a full session. -- **Rubber duck** to talk through a problem and get high-signal feedback before you build. -- [**Custom agents**][custom-agents] to package a role, its tools, and its instructions for repeatable, specialized work. -- [`/chronicle`][chronicle] to generate a narrative of what happened in a session. -- [Bring your own key (BYOK)][byok] to use models from your own provider, including local models via Ollama, Foundry Local, or LM Studio. -- [Cloud sandboxes][sandboxes] to run sessions in a GitHub-hosted isolated environment. -- [Deep links][deep-links] to open the app straight into a repository, session, or prompt. - -## Next steps - -The best way to improve with any tool is to keep using it! Use it for production code, for hobby code, for the little app you've had in mind for years but never got around to building. Share your learnings with your team, and learn from theirs. And, as always, explore the documentation. - -If you'd like to explore more of the GitHub Copilot ecosystem, check out the [VS Code harness](/learning-hub/copilot-workshops/vscode/), the [Copilot CLI harness](/learning-hub/copilot-workshops/cli/), or the [Cloud agent harness](/learning-hub/copilot-workshops/cloud/). - -## Resources - -- [About the GitHub Copilot app][about-copilot-app] -- [Getting started with the GitHub Copilot app][getting-started] -- [Customize the GitHub Copilot app][customize] -- [Using automations][using-automations] -- [Working with canvas extensions][canvas-docs] -- [About cloud and local sandboxes][sandboxes] - -[about-copilot-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 -[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle -[custom-agents]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents -[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models -[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/9-canvases.md b/website/src/content/docs/learning-hub/copilot-workshops/app/9-canvases.md new file mode 100644 index 000000000..53fad3843 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/9-canvases.md @@ -0,0 +1,117 @@ +--- +title: "Lesson 9 - Explore and create canvases" +description: "Use the existing Database Explorer canvas, then create and review a repository-backed triage canvas." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +So far you've directed agents through chat. But a lot of work doesn't live in a conversation — it lives on a board, in a document, or on a checklist. **Canvases** give you and the agent a shared surface for exactly that kind of work, right inside the app. In this lesson you'll first use a canvas included with Tailspin Toys, then create one for the backlog you've been working through. + +In this lesson, you will: + +- understand what a canvas is and when to use one. +- use the existing Database Explorer canvas to inspect project data. +- create a shared Kanban board canvas to triage your backlog. +- inspect and exercise the new canvas without implementing another feature. + +## Scenario + +Tailspin Toys already includes a canvas for exploring its database. After using it to understand how a canvas turns project data into an interactive surface, you'll create a reusable board for choosing what to work on next without starting another feature. + +## What is a canvas? + +A [canvas][canvas-docs] is a shared, interactive surface for a work artifact — a plan, a triage board, a release checklist, a dashboard, or a document. While chat is useful for describing intent and reasoning through ambiguity, most work happens on a *surface*. Canvases let you collaborate with the agent directly on that surface. + +Canvases are **bidirectional**: the agent can update the canvas while it works, and you can edit the same surface yourself. When you create a canvas, the agent builds it based on your prompt and workflow, and you can ask it to add, remove, or revise capabilities as you go. Once created, a canvas opens in the app's right side panel. + +Some common examples include: + +- **Markdown canvases** for planning your day and prioritizing issues and pull requests. +- **Agentic Kanban boards** where people and agents add cards and move work across columns. +- **Issue triage boards** that summarize top issues and recurring themes for a repository. + +## Why use a canvas? + +Reach for a canvas when a task needs structure, iteration, and verification, and a chat alone isn't enough. A canvas lets you: + +- ground the agent's work in an actual artifact that fits your workflow. +- steer or correct work directly on the shared surface, then let the agent continue from your changes. +- inspect progress as visible changes to an artifact, not just chat responses. + +## Use the Database Explorer canvas + +Start with the project's existing Database Explorer canvas. Using a working example lets you see how a repository-scoped canvas behaves before you create one yourself. + +1. Confirm the filtering pull request (PR) is merged and update your local `main`. +2. Return to the GitHub Copilot app and select the **Home screen**. +3. Confirm `tailspin-toys` is the selected repository. +4. Create a session in a **new working tree** based on the updated `main`, then select **Interactive** mode. +5. Ask Copilot to prepare the local database if needed and open the existing canvas without changing it: + + ```plaintext + Set up the local database if needed, then open the repository's Database Explorer canvas. Do not change any files. + ``` + +6. In the Database Explorer, browse the available tables and select `games`. +7. Run a read-only query that shows five highly rated games: + + ```sql + SELECT title, star_rating + FROM games + ORDER BY star_rating DESC + LIMIT 5; + ``` + +8. Confirm the results contain no more than five games in descending rating order. +9. Open **Files** and inspect `.github/extensions/database-explorer/extension.mjs`. Note how the canvas is stored with the project and restricts queries to read-only `SELECT` and `WITH` statements. +10. Confirm the session has no file changes. + +## Create a canvas to triage issues + +Now create a different kind of shared surface. Saving the triage canvas at project scope makes it a repository asset that the team can review and reuse. + +1. In the same session, enter `/create-canvas`, then describe the canvas you want to create: + + ```plaintext + Create a Kanban triage canvas for this repo's open issues and save it under .github/extensions/. Highlight the three issues you'd prioritize and explain why, with the rest below. Include summaries and links. + + Give each card an "Add to current context" action that adds the issue details without starting work or changing the issue. Make it keyboard-accessible and open it so I can try it. + ``` + +Copilot creates the canvas extension under `.github/extensions` and opens the shared surface in the app's right side panel. The generated extension is executable repository content, not just a visual artifact, so you'll inspect its files and behavior next. + +## Inspect and exercise the canvas + +Before sharing the canvas, compare it with the repository's actual issues and exercise its controls. This confirms that its content is accurate, its interaction is accessible, and its issue action adds context without starting work. + +1. Open **Changes** and confirm the canvas definition is repository-backed under `.github/extensions/`, not saved only for your user or session. Check that existing extensions and application files are unchanged. +2. Compare the board with the actual open issues and assess the ranking explanations. +3. Check that cards and controls are readable and usable with a keyboard. +4. Select **Add to current context** for an issue and confirm only its details enter the conversation. No implementation or issue-state change should start. +5. Review any corrections and ask Copilot to run the applicable existing validation for the files changed. Record results and blockers, rather than assuming an interactive surface is correct because it opened. +6. If the canvas needs changes, request focused improvements within the triage scope, then repeat the affected checks. Do not implement one of the backlog issues as part of this canvas work. + +The workshop stops before creating another PR because you've already practiced both manual merging and Agent Merge. In production, review and merge the canvas through your team's normal process before others rely on it. + +## Summary and next steps + +You created and reused a shared surface where you and the agent can collaborate. In this lesson, you: + +- understood what a canvas is and when to use one. +- used the existing Database Explorer canvas to inspect project data. +- created a shared Kanban board canvas to triage your backlog. +- inspected and exercised the new canvas without implementing another feature. + +With your backlog tracked, you'll [review everything you've built and explore where to go next][next-lesson]. + +## Resources + +- [Working with canvas extensions in the GitHub Copilot app][canvas-docs] +- [Canvases on Awesome Copilot][awesome-copilot-canvases] +- [About the GitHub Copilot app][about-copilot-app] + +[next-lesson]: /learning-hub/copilot-workshops/app/10-review/ +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app diff --git a/website/src/content/docs/learning-hub/copilot-workshops/app/index.md b/website/src/content/docs/learning-hub/copilot-workshops/app/index.md index 4ba528d66..08a5bef79 100644 --- a/website/src/content/docs/learning-hub/copilot-workshops/app/index.md +++ b/website/src/content/docs/learning-hub/copilot-workshops/app/index.md @@ -2,12 +2,27 @@ title: "GitHub Copilot app" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +description: "Practice agent-driven development with the GitHub Copilot app and the Tailspin Toys workshop." +tags: + - workshop --- -The **[GitHub Copilot app](https://docs.github.com/copilot/concepts/agents/github-copilot-app)** is a desktop application built on Copilot CLI that brings agent-driven development into a single, focused workspace. It adds parallel agent sessions, switchable session modes, shared canvases, and native GitHub issue and pull request management — including **Agent Merge**, which shepherds a pull request through rebases, review feedback, CI fixes, and merge. +The **[GitHub Copilot app](https://docs.github.com/copilot/concepts/agents/github-copilot-app)** is a desktop application built on Copilot CLI that brings agent-driven development into a single, focused workspace. It adds parallel agent sessions, switchable session modes, shared canvases, and native GitHub issue and pull request management — including **Agent Merge**, which shepherds a pull request through rebases, review feedback, continuous integration (CI) fixes, and merge. -Across these lessons you'll install the app and set up your project, then get oriented in the app's workspace and the backlog the template seeded for you. You'll start with a small change — adding a star rating — then add a custom instructions standard from an issue, build a filtering feature in an isolated agent session, and verify it with a reusable skill. You'll add the Playwright MCP server to explore the feature in a real browser, then climb a ladder of merge automation that ends with **Agent Merge** landing your pull request. Finally you'll collaborate on a shared canvas and automate recurring work — a complete loop from idea to merged feature. +The workshop follows one continuous Tailspin Toys workflow: + +1. Prepare the project, install the app, connect your repository, and explore its workspace and seeded backlog. +2. Make a focused star-rating change, review it in the browser, and manually merge your first pull request (PR). +3. Start from the filtering issue, define the approach in **Plan** mode, build it in **Autopilot** mode, then review it in **Interactive** mode. +4. Update the repository instructions and apply them to the filtering work. +5. Customize the existing `quality-checks` skill and use it to run the project checks. +6. Add the Playwright Model Context Protocol (MCP) server and use it to explore filtering in a browser. +7. Create a quality assurance (QA) custom agent and use it to review requirements, coverage, and verification evidence. +8. Review the complete filtering change and use Agent Merge for the second PR. +9. Use the existing Database Explorer canvas, then create and test a repository-backed triage canvas. + +To keep the workshop focused, you'll create two PRs: star ratings, then filtering with the instruction updates, skill update, QA profile, and tests. Start each from updated `main`. The filtering and quality workflow shares one session, worktree, and branch so you can build on your work as you explore each tool. The final canvas exercise stays in its session so you can focus on creating and testing the shared surface rather than repeating the PR workflow. ## Lessons @@ -15,13 +30,15 @@ Across these lessons you'll install the app and set up your project, then get or |--------|-------|-------------| | [0. Prerequisites][ex0] | Setup | Install Node.js and create your copy of the Tailspin Toys project | | [1. Install the Copilot app][ex1] | Setup | Install the app, connect your project, and get oriented in the workspace | -| [2. Running your first agent session][ex2] | First change | Start a session and ship a small change as your first pull request | -| [3. Guiding Copilot with custom instructions][ex3] | Context | Add a documentation standard from an issue and merge it | -| [4. Building a feature with Autopilot][ex4] | Core Feature | Use Plan and Autopilot to build filtering, then verify it with a skill | -| [5. Testing with Playwright MCP][ex5] | External Tools | Add the Playwright MCP server and explore your feature in a browser | -| [6. Merging with Agent Merge][ex6] | Merge | Let Agent Merge fix and land your filtering pull request | -| [7. Planning with canvases][ex7] | Collaboration | Create a shared canvas to plan and track your work | -| [8. Review and next steps][ex8] | Summary | Automate recurring tasks and explore what's next | +| [2. Add star ratings: a quick win][ex2] | First change | Display existing ratings and the null fallback, then merge PR 1 | +| [3. Agent modes: Plan and Autopilot][ex3] | Agent modes | Plan the feature from its issue, build with Autopilot, then review in Interactive mode | +| [4. Guide Copilot with custom instructions][ex4] | Context | Explore and update instructions, then apply them to filtering | +| [5. Customize and use a quality-checks skill][ex5] | Repeatable checks | Explore the existing skill, change its report format, and run it | +| [6. Validate functionality with Playwright MCP][ex6] | Browser observation | Configure MCP through Customize and inspect filtering behavior | +| [7. Create and use a QA agent][ex7] | Requirements and coverage | Create and select a specialist profile, then gather final verification evidence | +| [8. Create and merge the feature PR][ex8] | Review and merge | Review filtering, instructions, the skill, QA profile, and tests, then use Agent Merge for the second PR | +| [9. Explore and create canvases][ex9] | Collaboration | Use Database Explorer, then create and test a repository-backed triage canvas | +| [10. Wrap-up and next steps][ex10] | Summary | Review the workflow, artifacts, and further resources | ## Prerequisites @@ -35,23 +52,25 @@ Before attending this workshop, please ensure you have: > No paid plan? Verified students can get GitHub Copilot for free through [GitHub Education][callout-student-plan-education]. The **Copilot Student** plan includes the agent, MCP, code review, and Copilot CLI features this workshop uses — so you can complete every harness with it. > [!NOTE] -> Because the Copilot app runs on your own machine rather than in a codespace, [Lesson 0][ex0] walks you through installing Node.js and creating your copy of the project before you install the app. +> Because the Copilot app runs on your own machine rather than in a codespace, [the prerequisites exercise][ex0] walks you through installing Node.js and creating your copy of the project before you install the app. > [!NOTE] > If you are using Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before you can use the app. ## Get Started -**[Start with Lesson 0: Prerequisites →][ex0]** +**[Start with the prerequisites →][ex0]** [ex0]: /learning-hub/copilot-workshops/app/0-prerequisites/ [ex1]: /learning-hub/copilot-workshops/app/1-install-copilot-app/ [ex2]: /learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /learning-hub/copilot-workshops/app/3-custom-instructions/ -[ex4]: /learning-hub/copilot-workshops/app/4-build-filtering/ -[ex5]: /learning-hub/copilot-workshops/app/5-mcp-playwright/ -[ex6]: /learning-hub/copilot-workshops/app/6-agent-merge/ -[ex7]: /learning-hub/copilot-workshops/app/7-canvases/ -[ex8]: /learning-hub/copilot-workshops/app/8-review/ +[ex3]: /learning-hub/copilot-workshops/app/3-agent-modes/ +[ex4]: /learning-hub/copilot-workshops/app/4-custom-instructions/ +[ex5]: /learning-hub/copilot-workshops/app/5-agent-skills/ +[ex6]: /learning-hub/copilot-workshops/app/6-mcp-playwright/ +[ex7]: /learning-hub/copilot-workshops/app/7-qa-agent/ +[ex8]: /learning-hub/copilot-workshops/app/8-create-pull-request/ +[ex9]: /learning-hub/copilot-workshops/app/9-canvases/ +[ex10]: /learning-hub/copilot-workshops/app/10-review/ [install-git]: https://github.com/git-guides/install-git [callout-student-plan-education]: https://github.com/education/students diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/LICENSE b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/LICENSE new file mode 100644 index 000000000..4f2d8119b --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/LICENSE @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2023 GitHub +Copyright (c) 2026 James Montemagno + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 000000000..5d02c59f4 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "Lesson 0 - Prerequisites and setup" +description: "Verify the workshop prerequisites, install the GitHub Copilot app, and get familiar with its workspace." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Before you build the Space Quiz, confirm that you have what you need, install the GitHub Copilot app, and get familiar with its workspace. + +In this lesson, you will: + +- verify the workshop prerequisites. +- install and sign in to the GitHub Copilot app. +- choose a model for your sessions. +- identify the app's primary work areas. +- try a quick chat. + +## Prerequisites + +You need: + +- a GitHub account. [Create a GitHub account][github-signup], or use your existing account. +- an active Copilot plan. [Activate Copilot Free or a paid Copilot plan][copilot-plans]. If your organization already provides Copilot access, use that account. +- a computer running macOS, Windows, or Linux. + +The app ships with Git, so there is nothing else to install. + +> [!NOTE] +> If you use Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before agent sessions will work. + +## Install and configure the app + +1. Download and install the [GitHub Copilot app][download-app] for your operating system. +2. Open the app. +3. Select **Sign in to GitHub** and authenticate. +4. Choose a theme, then select **Finish**. + +## Choose a model + +Use the following preference order when you choose a model, and select the first option available to you: + +1. **GPT-6-Luna** (recommended). +2. **Auto**, as a balanced backup. +3. Any model from the [list of active models][active-models]. + +Model availability depends on your plan, organization policy, and product version. + +## Find your way around + +The app brings the development workflow into one place: + +- **New**: Start a session on a project, or choose **Chat** for a quick question. +- **Pull requests**: Review and track your pull requests across every repository. +- **Issues**: Find issues assigned to you, created by you, or mentioning you. +- **Automations**: Schedule recurring agent work on a repository. +- **Customize**: Change themes and models, and manage Canvas extensions. +- **Projects**: Open your repositories, with each one's sessions listed underneath. + +## Try a quick chat + +Not every question needs a workspace. From **New**, choose **Chat** instead of a project. A chat has no repository attached and cannot edit files, so it is the fastest way to ask a question, get an explanation, or think through an approach before you start a real session. + +Send the following prompt in a chat: + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +## Summary and next steps + +You verified the prerequisites, installed the app, chose a model, and explored its main work areas. Continue to [Lesson 1: Create the Space Quiz workspace][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[download-app]: https://gh.io/app +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 000000000..da8c75ca2 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "Lesson 1 - Create the Space Quiz workspace" +description: "Start a local Interactive session for the Space Quiz in an empty folder." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +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: + +- open an empty local folder. +- start an Interactive agent session. +- confirm the folder, mode, and model before the first prompt. + +## Create the workspace + +1. Open the GitHub Copilot app and confirm that you are signed in. +2. Select **New**, then **Open folder**, and choose an empty folder named `space-quiz`. Create the folder first if it does not exist. +3. Set the session mode to **Interactive**. +4. Choose your preferred model using the [preference order from Lesson 0][model-order]. +5. Select **Create**. The session opens empty and waits for your first prompt. + +![Illustration of the Copilot app New screen with a prompt box, the Interactive mode, Auto model, and Default agent pickers, and the space-quiz folder on the Local main branch.](/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg) + +The **New** screen is where you set the folder, the mode, and the agent before you type the first prompt. 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]. + +[model-order]: /learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/#choose-a-model +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md new file mode 100644 index 000000000..ca2d68bdb --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "Lesson 10 - Continue a session remotely (optional)" +description: "Use /remote to follow an in-progress app session on the web or in the GitHub Copilot mobile app while it keeps running on your machine." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +This lesson is optional, and worth saving until the local loop feels natural. The `/remote` command keeps the session running locally while making it available on the web and in the GitHub Copilot mobile app. Your machine needs to stay on while you follow the session from another device. + +In this lesson, you will: + +- make an in-progress session available remotely. +- follow the session from your browser or the GitHub Copilot mobile app. +- review the resulting changes like any other pull request. + +## Continue a session remotely + +1. Open a session that has work in progress. +2. Run `/remote` to make that session available remotely. +3. Open the link it returns in your browser, or access the session in the GitHub Copilot mobile app. +4. Follow its progress from there, then review the changes exactly as you would any other pull request. + +> [!NOTE] +> **This is not delegation** +> +> The session still runs on your machine. You are not handing the task to a different agent or moving it to the cloud. + +## Summary and next steps + +You made a local session available from another device. Continue to [Lesson 11: Explore a Canvas][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md new file mode 100644 index 000000000..07c0e49d1 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "Lesson 11 - Explore a Canvas" +description: "Install a Repository Issues Kanban Canvas and start a session from an issue card." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +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. + +![Illustration of the Repository Issues Kanban Canvas with Backlog, Plan, Ready, and Implement lanes. Issue 13, Review screen, is being dragged from Backlog into the Plan lane, while issue 12, Per-question timer, remains in Backlog.](/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg) + +When you drop a card into a lane, the Canvas hands that issue to a new session with the issue already loaded. + +> [!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 from **Issues**, 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 12: 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]: /learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md new file mode 100644 index 000000000..7a6bfdd8f --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "Lesson 12 - Review and next steps" +description: "Review the GitHub Copilot app workflow and find resources for continued learning." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You directed an agent through a complete development workflow, from an empty folder to planned work, an isolated implementation, code review, automation, remote access to a session, and a visual Canvas. + +## What you completed + +You: + +- created a local project in Interactive mode. +- built and refined a quiz with live browser feedback. +- inspected the session details and ran a browser-level smoke test. +- captured project rules with `/init`. +- published the project as a GitHub repository. +- created a focused backlog. +- implemented an issue in an isolated worktree and reviewed the diff. +- planned a second issue before any code changed. +- shipped an issue through pull request review and Agent Merge. +- automated weekly issue triage. +- followed a local session remotely. +- 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]. +- [Follow best practices for writing prompts that hold up on real code][best-practices]. +- [Compare Copilot plans][copilot-plans]. + +Run the same Space Quiz through a different way of working with the [Copilot CLI first steps workshop][first-steps-cli] or the [Visual Studio Code first steps workshop][first-steps-vscode]. 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 +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-cli]: /learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-app]: /learning-hub/copilot-workshops/app/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 000000000..ae1fbd9f1 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/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: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +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, inspected, and refined the Space Quiz. Continue to [Lesson 3: Inspect the session and test the quiz][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 000000000..d17714476 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "Lesson 3 - Inspect the session and test the quiz" +description: "Read the session details to confirm what the agent is working on, then run a browser-level smoke test before Git writes anything." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Now that your session has done real work, there is something to inspect. Confirm what the agent is pointed at, then let it drive the quiz in the integrated browser and report what actually happened rather than what it intended. + +In this lesson, you will: + +- read the session details panel. +- check the session's project, path, branch, changes, and context usage. +- run a browser-level smoke test and fix any failures. + +## Read the session details + +The session details tell you exactly what the agent is working on. You do not need to watch this panel constantly, but everything in it matters when a result surprises you. + +![Illustration of the Copilot app session details panel for the Space Quiz build session. It shows the main branch from origin/main, the path, project, session name, session ID, and agent, one file changed, token counts, context usage at 27 percent, session spend, and options to enable remote control, rename, view insights, share as a secret gist, or archive the session.](/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg) + +The panel shows where the work is happening, what has changed, and how full the context window is. There is no model row, because you choose the model for each request in the composer. + +1. Confirm that the **project**, **path**, and **branch** are the ones you think you are editing. +2. Read **Changes** to see whether this session has touched anything yet. +3. Check **context usage**. As it climbs, the agent has less room for your actual task, and that is your cue to start a fresh session. + +> [!TIP] +> **Most bad results are context problems** +> +> A wrong branch, a wrong folder, or a nearly full context window explains far more surprises than a bad prompt does. + +## Test before Git writes anything + +The integrated browser is a real browser, so the agent can drive the quiz and verify its behavior. Send the following prompt: + +```plaintext +Run a browser-level smoke test for the quiz in the integrated browser. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Watch the integrated browser as the agent runs through the questions. +2. If anything fails, let the agent fix it and rerun the test until everything passes. +3. Move on only when the build and test are green. + +Nothing has been written to Git yet. The next step is `/init`, which reads the project as it stands, so it is worth making sure the project works first. + +## Summary and next steps + +You confirmed what the session is working on and verified the quiz with a browser-level smoke test. Continue to [Lesson 4: Capture project instructions][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 000000000..da30b7840 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lesson 4 - Capture project instructions" +description: "Run /init to generate agent instructions that describe the finished Space Quiz, then tailor them to how you work." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Now that the quiz is built, polished, and tested, capture how future sessions should treat this project. Agent instructions are read by every session before it starts work, so they save you from repeating the same guidance in every prompt. + +In this lesson, you will: + +- generate agent instructions with `/init`. +- review the generated file before accepting it. +- trim and personalize the instructions. + +## Capture the rules with `/init` + +1. Run `/init` in the app session. +2. Review the generated agent instructions file before accepting it. +3. Trim it to guidance that reflects this project: a single file, no dependencies, accessible, and browser-tested. + +> [!IMPORTANT] +> **Why after polishing?** +> +> `/init` reads the project as it exists right now. Running it after the quiz is built and tested produces instructions that describe real code instead of an empty folder. + +## Make it yours + +The instructions file is not only for facts about the project. Add the specifics you would otherwise repeat in every prompt, such as how you like code written, naming conventions, which libraries to avoid, and how much commenting you want. Every future session reads this file before it reads your prompt. + +## Summary and next steps + +Your project now has agent instructions grounded in real code. Continue to [Lesson 5: Publish the project][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md new file mode 100644 index 000000000..e4b4db990 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "Lesson 5 - Publish the project" +description: "Turn the local Space Quiz experiment into a public GitHub repository." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +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 6: Work with issues and sessions][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 000000000..a07c6ed00 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "Lesson 6 - Work with issues and sessions" +description: "Create a focused backlog, select an issue, implement it in an isolated worktree, and review the diff yourself." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +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. +- browse your backlog in **Issues**. +- start a session from an issue in a new worktree. +- review the diff in the **Changes** tab and verify the feature. + +## Build a backlog in Issues + +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 **Issues**, review the three issues, and choose one that has clear value and a manageable scope. + +![Illustration of the Copilot app Issues view. The sidebar lists New, Pull requests, Issues, Automations, Customize, More, and the space-quiz project. The main area has Assigned to me, Created by me, Mentioning me, and Done tabs, a search box, State and Assignee filters, and a list of three open issues in the space-quiz repository.](/images/learning-hub/copilot-workshops/first-steps-app-issues.svg) + +**Issues** pulls your GitHub issues from every repository into the app, filtered by **Assigned to me**, **Created by me**, **Mentioning me**, and **Done**. + +## Implement an issue + +1. Open the selected issue from **Issues**. +2. Select **New session**. +3. Choose a **new worktree** when prompted. +4. Use **Interactive** mode and your preferred model. +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. + ``` + +The new worktree keeps this feature isolated from your default branch until you are ready to review and merge it. + +## Review the diff yourself + +When the agent reports back, do not take its word for it. + +1. Open the right-side flyout and select the **Changes** tab. +2. Read the diff for every file the session touched. +3. Test the feature in the integrated browser and confirm that it meets the issue's acceptance criteria. + +![Illustration of the Copilot app session with the Changes tab open in the right-side flyout. It shows one file changed, index.html, with 142 lines added and 8 removed, and inline diff lines beside the session conversation.](/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg) + +The **Changes** tab lists every file the session touched, with the diff inline. + +## Summary and next steps + +You created a backlog, implemented one issue in an isolated session, and reviewed the diff. Continue to [Lesson 7: Plan before you edit][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 000000000..05778f5c0 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "Lesson 7 - Plan before you edit" +description: "Use Plan mode on a second issue so the agent researches the project and proposes an approach before it changes any files." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Not every issue should start with edits. Plan mode researches the project, proposes an approach, and waits for your approval before any code changes. + +In this lesson, you will: + +- start a session for a second issue in Plan mode. +- review and refine the agent's proposed plan. +- approve the plan and choose how the session continues. + +## Agree on the approach before any code changes + +1. Open a **second issue** from **Issues** and select **New session**. +2. In the session configuration, choose **Plan** instead of **Interactive** or **Autopilot**. +3. Send the following prompt and let the agent investigate without changing files: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Read the proposed plan and request changes if something is missing. +5. Approve the plan. +6. When prompted, choose whether the session continues in **Interactive** or **Autopilot** mode. + +> [!TIP] +> **When Plan mode pays off** +> +> Use Plan mode for anything ambiguous, cross-cutting, or expensive to undo. The cheapest place to fix a bad approach is before the first edit. + +## Summary and next steps + +You agreed on an approach with the agent before it wrote any code. Continue to [Lesson 8: Complete the Copilot review loop][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 000000000..3d2257c2d --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "Lesson 8 - Complete the Copilot review loop" +description: "Create a pull request, request a Copilot review, address actionable feedback, and let Agent Merge keep the pull request healthy." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Turn the implemented issue into a pull request, request a review from Copilot, and address the feedback before merging. + +In this lesson, you will: + +- inspect the session's changes one last time. +- create a pull request from the agent session. +- request a Copilot code review. +- review and apply actionable feedback. +- turn on Agent Merge to keep the pull request healthy until it merges. + +## Create and review the pull request + +1. Open the right-side flyout and select the **Changes** tab to inspect the files changed in the session. +2. Select **Create PR** in the session toolbar. +3. Review the generated title and description, then create the pull request. +4. Open the pull request on GitHub. +5. From the **Reviewers** menu, request a review from **Copilot**. +6. Open the **Files changed** tab and read every review comment. +7. For each actionable comment, use the Copilot **Fix** action in the app or make the change yourself. +8. Review each change and retest the feature. +9. 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 with Agent Merge + +Turn on **Agent Merge** for the pull request to let the agent keep it healthy. The agent addresses review comments, fixes failing checks, and resolves conflicts as they appear, then merges once everything is green. + +If you prefer to merge yourself, review the final diff, verify the feature, and merge the pull request after every check passes. + +## Summary and next steps + +You completed the development loop from issue to reviewed and merged pull request. Continue to [Lesson 9: Automate issue triage][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md new file mode 100644 index 000000000..ba6d401fc --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "Lesson 9 - Automate issue triage" +description: "Create and run a weekly automation that summarizes recent open issues." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +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 + +![Illustration of the Copilot app Automations view with All, Local, and Cloud filters, a search box, Templates and New automation buttons, and two weekly automation cards for the space-quiz project: Issue triage and Accessibility audit.](/images/learning-hub/copilot-workshops/first-steps-app-automations.svg) + +Automations run the same prompt on a schedule, each in its own session, so an automation never disturbs your work. You can filter by **All**, **Local**, or **Cloud**, and run any automation on demand. + +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 10: Continue a session remotely][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/index.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/index.md new file mode 100644 index 000000000..25b4906ae --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-app/index.md @@ -0,0 +1,55 @@ +--- +title: "GitHub Copilot app tour" +description: "Take a guided tour of the GitHub Copilot app by building and shipping a Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +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 60 to 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 [First Steps with GitHub Copilot][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, choose a model, 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. Inspect and test][lesson-3] | Context and test | Read the session details and run a browser-level smoke test | +| [4. Capture project instructions][lesson-4] | Instructions | Generate and tailor agent instructions with `/init` | +| [5. Publish the project][lesson-5] | Publish | Create a public GitHub repository from the local project | +| [6. Work with issues and sessions][lesson-6] | Implement | Create a backlog, implement one issue in an isolated worktree, and review the diff | +| [7. Plan before you edit][lesson-7] | Plan | Use Plan mode to agree on an approach for a second issue | +| [8. Complete the review loop][lesson-8] | Review | Open a pull request, address Copilot review feedback, and use Agent Merge | +| [9. Automate issue triage][lesson-9] | Automate | Schedule and run a weekly issue-triage automation | +| [10. Continue a session remotely][lesson-10] | Remote (optional) | Follow an in-progress local session from the web or mobile with `/remote` | +| [11. Explore a Canvas][lesson-11] | Canvas | Start work from a Repository Issues Kanban Canvas | +| [12. Review and next steps][lesson-12] | 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/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/ +[lesson-1]: /learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ +[lesson-2]: /learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ +[lesson-3]: /learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ +[lesson-4]: /learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ +[lesson-5]: /learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ +[lesson-6]: /learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ +[lesson-7]: /learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ +[lesson-8]: /learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ +[lesson-9]: /learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ +[lesson-10]: /learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ +[lesson-11]: /learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ +[lesson-12]: /learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 000000000..0640fd6eb --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "Lesson 0 - Prerequisites and setup" +description: "Verify the workshop prerequisites, install GitHub Copilot CLI, sign in, and choose a model from an empty project folder." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Put an agent in your terminal. Confirm that you have what you need, install GitHub Copilot CLI, sign in, and get ready to make your first request from an empty folder. + +In this lesson, you will: + +- verify the workshop prerequisites. +- install GitHub Copilot CLI and sign in. +- create and trust the project folder. +- choose a model for your session. + +## Prerequisites + +You need: + +- a GitHub account. [Create a GitHub account][github-signup], or use your existing account. +- an active Copilot plan. [Activate Copilot Free or a paid Copilot plan][copilot-plans]. If your organization already provides Copilot access, use that account. +- [Git][git] installed. Run `git --version` to verify it. +- a computer running macOS, Windows, or Linux. + +The [GitHub CLI][gh-cli] (`gh`) is optional but recommended, because it lets the agent create repositories and pull requests for you. + +> [!NOTE] +> If you use Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before agent sessions will work. + +## Set up the CLI + +1. Install [GitHub Copilot CLI][install-cli] for your platform. +2. Create and enter the project folder: + + ```bash + mkdir space-quiz && cd space-quiz + ``` + +3. Run `copilot`, sign in, and trust the folder when prompted. +4. Run `/model` and choose a model using the preference order in the next section. +5. Optionally, install the [GitHub CLI][gh-cli] if you have not already. + +![Illustration of Copilot CLI in a terminal window titled space-quiz. It asks whether to trust the files in this folder, with Yes, proceed selected, and suggests the /model command to choose the model for this session and /help to list every slash command. The prompt line reads Create a space exploration quiz.](/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg) + +The CLI opens with a trust prompt and a few starting commands, including `/model`. + +> [!TIP] +> Type `/` at any time to browse every available command, or run `/help` for the full reference. + +## Choose a model + +Use the following preference order when you run `/model`, and select the first option available to you: + +1. **GPT-6-Luna** (recommended). +2. **Auto**, as a balanced backup. +3. Any model from the [list of active models][active-models]. + +Model availability depends on your plan, organization policy, and product version. + +## Summary and next steps + +Copilot CLI is installed, signed in, and running in an empty `space-quiz` folder. Continue to [Lesson 1: Build the quiz from the terminal][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[git]: https://git-scm.com/downloads +[gh-cli]: https://cli.github.com/ +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md new file mode 100644 index 000000000..2417ccbc8 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "Lesson 1 - Build the quiz from the terminal" +description: "Ask Copilot CLI for the whole Space Quiz in one detailed request, then make one focused refinement." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Ask for the whole project in one detailed request, review what the agent proposes before you approve it, then make one small, scoped change. + +In this lesson, you will: + +- build a dependency-free quiz in `index.html`. +- open the quiz in a browser from the session. +- make one focused change and verify it. + +## Build the quiz + +Send the following prompt in your Copilot CLI 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 an emoji reaction at the end. Single index.html, no server or dependencies. Accessible, keyboard-navigable, and respects prefers-color-scheme. +``` + +1. Read the proposed plan and approve the file changes. +2. Open `index.html` in a browser and play a few questions. To launch it from the session, run `!open index.html` on macOS, `!start index.html` on Windows, or `!xdg-open index.html` on Linux. + +## Make a small change, then check it + +Ask for one focused refinement so you can see how a scoped request behaves: + +```plaintext +The results screen feels flat. Give it a stronger sense of arrival: animate the score counting up and make the emoji reaction larger. Change nothing else. +``` + +1. Reload the page in your browser and play through to the end. +2. Notice that nothing is in Git yet, so there is nothing to diff against. That changes after you publish the project. + +## Summary and next steps + +You built the quiz and refined it with a scoped request. Continue to [Lesson 2: Capture project instructions][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md new file mode 100644 index 000000000..99b32014f --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "Lesson 10 - Review and next steps" +description: "Review the Copilot CLI workflow and find resources for continued learning." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You completed the terminal-first loop: you built the quiz, reviewed diffs, published, ran sessions in parallel, planned before editing, resumed sessions, merged a pull request, and delegated new work without leaving the terminal. + +## What you completed + +You: + +- installed Copilot CLI and chose a model with `/model`. +- built and refined a quiz from a single prompt. +- captured project rules with `/init`. +- published the project by prompt or by hand. +- added an issue to the chat from the side panel and reviewed the change with `/diff`. +- ran a second session in its own worktree with `/worktree`. +- planned the second issue with `/plan` before any code changed. +- inspected and managed context with `/context` and `/clear`. +- resumed sessions with `copilot --resume` and `/resume`. +- created and merged a pull request with `/pr create` and `/pr agentmerge`. +- delegated a new feature with `/delegate`. + +## Keep exploring + +- [Install Copilot CLI on macOS, Windows, and Linux][install-cli]. +- [Learn about Copilot CLI and its slash commands and flags][about-cli]. +- [Use the GitHub CLI for repositories and pull requests][gh-cli]. +- [Install Git][git]. +- [Follow best practices for writing prompts that hold up on real code][best-practices]. +- [Compare Copilot plans][copilot-plans]. + +Run the same Space Quiz through a different way of working with the [GitHub Copilot app first steps workshop][first-steps-app] or the [Visual Studio Code first steps workshop][first-steps-vscode]. If you are ready for a deeper scenario using a complete application and team backlog, continue with the [real-world Copilot CLI workshop][real-world-cli]. + +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[about-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[gh-cli]: https://cli.github.com/ +[git]: https://git-scm.com/downloads +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-vscode]: /learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-cli]: /learning-hub/copilot-workshops/cli/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 000000000..9f87c6e02 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lesson 2 - Capture project instructions" +description: "Run /init to generate agent instructions that describe the finished Space Quiz, then tailor them to how you work." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +With a working quiz on disk, generate agent instructions that describe the real project. Every future session reads these instructions before it starts work, so they save you from repeating the same guidance in every prompt. + +In this lesson, you will: + +- generate agent instructions with `/init`. +- review the generated file before accepting it. +- trim and personalize the instructions. + +## Capture the rules with `/init` + +1. Run `/init` in the session. +2. Review the generated instructions file before accepting it. +3. Keep only guidance that matches this project: a single file, no dependencies, accessible, and browser-tested. + +> [!IMPORTANT] +> **Order matters** +> +> `/init` reads the project as it exists right now. Running it after the quiz is built and polished produces instructions grounded in real code. + +## Make it yours + +The instructions file is not only for facts about the project. Add the specifics you would otherwise repeat in every prompt, such as how you like code written, naming conventions, which libraries to avoid, and how much commenting you want. Every future session reads this file before it reads your prompt. + +## Summary and next steps + +Your project now has agent instructions grounded in real code. Continue to [Lesson 3: Publish the project][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md new file mode 100644 index 000000000..c77e5fd43 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "Lesson 3 - Publish the project" +description: "Initialize, commit, and publish the Space Quiz to GitHub, either by prompt or by running the commands yourself." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Turn the experiment into a public GitHub repository. You can ask for this in one prompt, or run the commands yourself. Try both ways once, and you will know exactly what the agent does on your behalf. + +In this lesson, you will: + +- initialize a Git repository and create the first commit. +- create and push a public GitHub repository. +- confirm that the commit and file landed. + +## Option A: Ask for it + +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. +``` + +Approve each Git and GitHub action as the agent requests it. + +## Option B: Run it yourself + +Prefix each command with `!` to run it from inside the session, or run the commands without the prefix in your own terminal: + +```plaintext +!git init -b main +!git add . +!git commit -m "Add space quiz" +!gh repo create space-quiz --public --source=. --push +``` + +The last command uses the [GitHub CLI][gh-cli]. If you do not have it, create the repository on GitHub, then run `!git remote add origin ` and `!git push -u origin main`. + +## Confirm the result + +1. Run `!git log --oneline` to confirm that the commit landed. +2. Open the repository on GitHub and confirm that `index.html` is present. + +## Summary and next steps + +Your project is now a GitHub repository with a known-good version to compare against. Continue to [Lesson 4: Work on issues in parallel][next-lesson]. + +[gh-cli]: https://cli.github.com/ +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 000000000..063a33ec3 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "Lesson 4 - Work on issues in parallel" +description: "Create a backlog, add an issue to the chat from the side panel, review changes with /diff, and start a second session in its own worktree." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Keep the backlog and the implementation loop in the terminal, and open separate sessions for independent work. + +In this lesson, you will: + +- create three focused GitHub issues. +- add an issue to the chat from the side panel and implement it. +- review the change with `/diff`. +- start a second session in an isolated worktree. + +## Create a backlog + +Send the following prompt: + +```plaintext +Review the space quiz and create three focused GitHub issues with clear titles, user-focused descriptions, and acceptance criteria. Do not implement them yet. +``` + +## Work the first issue in this session + +1. Press the Left arrow key to open the side panel, then press Tab to move across to the **Issues** tab. +2. Highlight the first issue and press c to add it to the chat as context. To read the full issue first, press Enter instead. +3. Ask the agent to implement the issue. + +![Illustration of the Copilot CLI side panel in a terminal. The Issues tab is selected among the Current, Sessions, Issues, Pull requests, and Gists tabs. A search filter for open issues in the space-quiz repository shows one issue, Add a score screen at the end of the quiz. Hints explain that the Left arrow key opens the panel and Tab moves between tabs, and the bottom row lists keys: slash to search, Enter for details, o to open, w for worktree, c for chat, and a for all.](/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg) + +The side panel lists every tab across the top, and the hints along the bottom are the keys that act on whatever is highlighted. + +## Review the change with `/diff` + +The project is published, so there is a known-good version to compare against. `/diff` shows precisely what this issue changed on top of it, which is exactly what you are about to ask someone to review. + +1. Run `/diff` and read every changed file. +2. Ask for a fix for anything that looks wrong, then run `/diff` again. +3. Run `!git status` or `!git diff` whenever you want to inspect Git directly. + +## Work the second issue in parallel + +1. Open the side panel again and switch to the **Sessions** tab. +2. Start another session for the second issue without losing the first one. +3. In the new session, run `/worktree` so it gets an isolated worktree instead of branching in place. Both sessions can now run at once without interfering with each other. +4. Add the second issue to that session with c. +5. Leave the session there for now. The next lesson plans this issue before any code is written. + +![Illustration of Copilot CLI output after running /worktree. It reports that it created the worktree ../space-quiz-13 on the branch issue-13-review-screen, and that this session now works there while main is untouched.](/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg) + +`/worktree` moves the session into its own checkout on its own branch, so the first session keeps working undisturbed. + +## Summary and next steps + +You implemented the first issue, reviewed it with `/diff`, and started a second session in its own worktree. Continue to [Lesson 5: Plan before you edit][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 000000000..3e3a07f10 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "Lesson 5 - Plan before you edit" +description: "Switch the second session into plan mode with /plan so the agent proposes an approach before it edits any files." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You already have a second session running in its own worktree. Do not start with code there. Plan mode researches the project and proposes an approach while leaving your files untouched. + +In this lesson, you will: + +- switch the second session into plan mode. +- review and refine the agent's proposed plan. +- approve the plan and let the session implement it. + +## Agree on the approach before any edits + +1. Switch to the **second session** you opened in the previous lesson. +2. Run `/plan` to switch that session into plan mode. +3. Send the following prompt and let the agent investigate without editing anything: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Read the plan, push back on anything missing, then approve it. +5. The session continues into implementation with the approved plan as its brief. + +> [!TIP] +> **When plan mode pays off** +> +> Use plan mode for anything ambiguous, cross-cutting, or expensive to undo. The cheapest place to fix a bad approach is before the first edit. + +## Summary and next steps + +You agreed on an approach with the agent before it wrote any code. Continue to [Lesson 6: Know what the agent can see][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md new file mode 100644 index 000000000..96111bd24 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "Lesson 6 - Know what the agent can see" +description: "Use /context to inspect what fills the context window, and /clear to start fresh when a conversation drifts." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Terminal commands make context visible and intentional. Knowing what the agent can see helps you understand its results and decide when to start fresh. + +In this lesson, you will: + +- inspect the context window with `/context`. +- see how much of the window each part consumes. +- reset a drifting conversation with `/clear`. + +## Inspect the context + +1. Run `/context` to inspect files, instructions, and conversation history. +2. Check how much of the window each part is consuming. +3. Run `/clear` to start fresh when the conversation has drifted. +4. Add the right file back before you ask for another change. + +![Illustration of Copilot CLI output after running /context. A context window meter shows 61 percent used, split between conversation, files read, and instructions. A note suggests using /compact to summarize, or starting a fresh session, when running low.](/images/learning-hub/copilot-workshops/first-steps-cli-context.svg) + +`/context` shows exactly what is filling the context window and how much room is left. When you are running low, use `/compact` to summarize the conversation, or start a fresh session. + +## Summary and next steps + +You can now see and manage what the agent knows. Continue to [Lesson 7: Resume and go remote][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 000000000..2c04390f7 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "Lesson 7 - Resume and go remote" +description: "Leave a Copilot CLI session and come back to it later with copilot --resume or /resume, and optionally follow it from another device with /remote." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Sessions can be paused without losing their conversation or workspace context. Leave a session, return to it later, and optionally make it available from another device. + +In this lesson, you will: + +- exit a session and resume it from the terminal. +- switch between sessions without leaving the CLI. +- optionally make a session available remotely. + +## Leave a session and come back later + +1. Exit the current Copilot CLI session when you are ready to switch tasks. +2. From a terminal, run `copilot --resume` to pick a previous session. +3. Inside Copilot CLI, use `/resume` to switch between sessions without leaving the CLI. +4. Confirm that the restored session still has the expected files, issue context, and model. + +## Optional: Continue a session remotely + +Run `/remote` to keep *that same session* running locally while making it available on the web and in the GitHub Copilot mobile app. Your machine needs to stay on. Open the link it returns in your browser, or access the session in the GitHub Copilot mobile app. + +> [!NOTE] +> `/remote` is not delegation and does not move execution to the cloud. It is not required for this workshop, so try it once the local loop feels natural. + +## Summary and next steps + +You can pause and resume sessions, and follow a local session from another device. Continue to [Lesson 8: Create, review, and merge from the CLI][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 000000000..8b155beaa --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "Lesson 8 - Create, review, and merge from the CLI" +description: "Inspect the final diff, create a pull request with /pr create, address feedback, and merge with /pr agentmerge." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Finish the development loop without switching to a desktop UI. + +In this lesson, you will: + +- inspect the changed files one last time. +- create a pull request from the current branch. +- review the pull request and address feedback. +- validate and merge the pull request with `/pr agentmerge`. + +## Create, review, and merge + +1. Run `/diff` to inspect the changed files one last time. +2. Ask Copilot to create a pull request from the current branch, or run `/pr create`. +3. Open the side panel's **Pull requests** tab to check the title, description, files, and status checks. +4. Fix actionable feedback, check the result in the browser, and reply with what changed. +5. When the pull request is ready, run `/pr agentmerge` to validate it and merge it after the required confirmations and checks pass. + +## Summary and next steps + +You created, reviewed, and merged a pull request without leaving the terminal. Continue to [Lesson 9: Delegate work once you trust the loop][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 000000000..2e4925c56 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "Lesson 9 - Delegate work once you trust the loop" +description: "Hand a new Space Quiz feature to /delegate, keep working while it runs, and follow a cloud session from the CLI." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You have shipped a feature. Now that you know what good output looks like, a whole new idea is worth running beside you rather than in front of you. In this lesson, you delegate a **shareable mission report** that turns a finished run into a card the player can post. + +In this lesson, you will: + +- delegate a new feature with `/delegate`. +- keep working in your primary session while the delegated work runs. +- compare the delegated result before accepting it. + +> [!NOTE] +> `/delegate` and cloud sessions require an eligible paid Copilot plan. Business and Enterprise access may also need to be enabled by an administrator. + +## Delegate a new feature + +Run `/delegate` and hand over the following task: + +```plaintext +Delegate this: add a shareable mission report to the space quiz. At the end of a run, generate a compact summary card with the score, a rank title based on the percentage, and the slowest question. Add a Copy result button that puts a short plain-text version on the clipboard. Keep it in the single index.html with no dependencies, keep it keyboard accessible, and report back with what changed. +``` + +1. Keep working in the primary session while the delegated task runs. +2. Compare the delegated result against your session before you accept it. +3. For a larger, well-specified issue, start a **cloud session** and follow its progress from the CLI. + +## Summary and next steps + +You delegated a complete feature and reviewed the result. Continue to [Lesson 10: Review and next steps][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md new file mode 100644 index 000000000..f71f43930 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md @@ -0,0 +1,52 @@ +--- +title: "GitHub Copilot CLI first steps" +description: "Take a guided, terminal-first tour of GitHub Copilot CLI by building and shipping a Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop + - cli +--- + +Take a beginner-friendly, hands-on tour of GitHub Copilot CLI. You will build a colorful Space Quiz from an empty folder and learn the terminal-first loop: build and review diffs before Git writes anything, run sessions side by side, plan before you edit, then create and merge the pull request without leaving your shell. + +The workshop takes approximately 60 to 90 minutes. Your project uses a single HTML file with no runtime dependencies, so you can focus on learning the CLI and its agentic workflows. + +> [!NOTE] +> This workshop was created by [James Montemagno][james] and adapted from [First Steps with GitHub Copilot][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 Copilot CLI, sign in, and choose a model | +| [1. Build the quiz][lesson-1] | Build | Build the quiz from the terminal and make one focused change | +| [2. Capture project instructions][lesson-2] | Instructions | Generate and tailor agent instructions with `/init` | +| [3. Publish the project][lesson-3] | Publish | Initialize, commit, and publish by prompt or by hand | +| [4. Work on issues in parallel][lesson-4] | Implement | Create a backlog, add an issue to chat, review with `/diff`, and start a second session in a worktree | +| [5. Plan before you edit][lesson-5] | Plan | Use `/plan` to agree on an approach for the second issue | +| [6. Know what the agent can see][lesson-6] | Context | Inspect and reset context with `/context` and `/clear` | +| [7. Resume and go remote][lesson-7] | Resume | Leave and return to sessions with `/resume`, and optionally follow a local session from another device with `/remote` | +| [8. Create, review, and merge][lesson-8] | Review | Create and merge a pull request with `/pr create` and `/pr agentmerge` | +| [9. Delegate work][lesson-9] | Delegate | Hand a new feature to `/delegate` and follow a cloud session | +| [10. Review and next steps][lesson-10] | 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/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites/ +[lesson-1]: /learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ +[lesson-2]: /learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ +[lesson-3]: /learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ +[lesson-4]: /learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ +[lesson-5]: /learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ +[lesson-6]: /learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ +[lesson-7]: /learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ +[lesson-8]: /learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ +[lesson-9]: /learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ +[lesson-10]: /learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/index.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/index.md new file mode 100644 index 000000000..0c5006524 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/index.md @@ -0,0 +1,37 @@ +--- +title: "First steps" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +description: "Build and ship a Space Quiz from an empty folder with guided First Steps workshops for Copilot app, Copilot CLI, and Visual Studio Code." +tags: + - workshop +--- + +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. + +Every workshop builds the same Space Quiz from an empty folder, so you can pick the tool you want to learn, or complete more than one to compare how each one works. + +> [!NOTE] +> These workshops were created by [James Montemagno][james] and adapted from [First Steps with GitHub Copilot][source-lab], which is available under the [MIT License][source-license]. + +## 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, test, capture project instructions, publish, plan work, implement issues, review and merge a pull request, automate recurring work, and explore a Canvas extension. + +### [GitHub Copilot CLI first steps][copilot-cli] + +Learn the terminal-first loop: build and review diffs before Git writes anything, run sessions side by side in worktrees, plan before you edit, manage context, then create, merge, and delegate work without leaving your shell. + +### [Visual Studio Code first steps][vscode] + +Use the editor loop: build in a workspace, polish elements from the integrated browser, inspect context, test before Git writes, plan before you edit, and let GitHub tools handle issues, pull requests, and cloud sessions without leaving VS Code. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[copilot-app]: /learning-hub/copilot-workshops/first-steps/copilot-app/ +[copilot-cli]: /learning-hub/copilot-workshops/first-steps/copilot-cli/ +[vscode]: /learning-hub/copilot-workshops/first-steps/vscode/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md new file mode 100644 index 000000000..6c37e1b49 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "Lesson 0 - Prerequisites and setup" +description: "Verify the workshop prerequisites, confirm Copilot Chat in VS Code, add the GitHub Pull Requests and Issues extension, and choose a model." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Bring Copilot into the editor. Copilot ships with VS Code, so there is nothing to install for chat. Add the GitHub extension, then open an empty folder. + +In this lesson, you will: + +- verify the workshop prerequisites. +- confirm that Copilot Chat responds in VS Code. +- install the GitHub Pull Requests and Issues extension. +- open an empty project folder and choose a model. + +## Prerequisites + +You need: + +- a GitHub account. [Create a GitHub account][github-signup], or use your existing account. +- an active Copilot plan. [Activate Copilot Free or a paid Copilot plan][copilot-plans]. If your organization already provides Copilot access, use that account. +- [Visual Studio Code][vscode]. +- [Git][git] installed. Run `git --version` in a terminal to verify it. + +## Set up VS Code + +1. Install [VS Code][vscode] and sign in to GitHub. Copilot and Copilot Chat are built in, so open the **Chat** view from the title bar and confirm that it responds. +2. Open the **Extensions** view and install the official [GitHub Pull Requests and Issues][pr-extension] extension so issues and pull requests appear in the sidebar. +3. Create an empty folder named `space-quiz`, then select **File** > **Open Folder** and open it. +4. Choose a model with the model picker in the **Chat** view, using the preference order in the next section. + +## Choose a model + +Select the first option available to you: + +1. **GPT-6-Luna** (recommended). +2. **Auto**, as a balanced backup. +3. Any model from the [list of active models][active-models]. + +Model availability depends on your plan, organization policy, and product version. + +## Summary and next steps + +VS Code is ready with Copilot Chat, the GitHub extension, and an empty `space-quiz` folder. Continue to [Lesson 1: Build in the workspace][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[vscode]: https://code.visualstudio.com/ +[git]: https://git-scm.com/downloads +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 000000000..65b70878e --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "Lesson 1 - Build in the workspace" +description: "Build the Space Quiz in VS Code, preview it in the integrated browser, and polish a picked element." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Keep the editor, chat, files, and preview together. You will build the quiz, play it in the integrated browser, then hand a specific element straight to chat for a focused change. + +In this lesson, you will: + +- build the quiz in a single `index.html`. +- preview the quiz in the integrated browser. +- select an element in the browser and polish it. + +## Build the quiz + +Send the following prompt in Copilot Chat: + +```plaintext +Create a colorful, accessible space exploration quiz with 10 questions in a single index.html. Add a progress bar, score counter, animated correct and incorrect feedback, and a results screen. Use no server or dependencies. Open it in the VS Code integrated browser. +``` + +1. Review the generated file in the editor. +2. Open the integrated browser and play several questions. +3. Open **Source Control** at any point to see the changed files and diff. + +## Pick an element and polish it + +The integrated browser can hand a specific element straight to chat, so you never have to describe which button you mean. + +1. With the quiz open in the integrated browser, start an element selection from the browser toolbar. +2. Select the answer buttons to attach that element to your next chat message. +3. Send the following prompt and watch the preview reload: + + ```plaintext + Using the selected element, make the answer buttons feel more tactile: add a subtle press state, a clearer focus ring for keyboard users, and a smoother transition into the correct and incorrect colors. Change nothing else. + ``` + +4. Read the diff in **Source Control** before you keep it. +5. Press Tab to move through the answers and confirm that the focus ring is visible. + +## Summary and next steps + +You built, previewed, and polished the quiz without leaving the editor. Continue to [Lesson 2: Capture project instructions][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/10-review.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/10-review.md new file mode 100644 index 000000000..d8ef63205 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "Lesson 10 - Review and next steps" +description: "Review the VS Code workflow and find resources for continued learning." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You completed the editor loop: you built in the editor, captured instructions, tested in the integrated browser, planned before editing, merged with GitHub tools, and delegated the next idea to a cloud session. + +## What you completed + +You: + +- confirmed Copilot Chat and added the GitHub Pull Requests and Issues extension. +- built the quiz and polished a picked element in the integrated browser. +- generated `.github/copilot-instructions.md` with `/init`. +- inspected chat context and smoke-tested before Git wrote anything. +- published with **Source Control** and a Copilot-drafted commit message. +- planned a feature in Plan mode before any edits. +- enabled GitHub MCP and created issues from chat. +- created, reviewed, and merged a pull request from VS Code. +- delegated a feature to a cloud session. + +## Keep exploring + +- [Learn about Copilot in VS Code, including chat, agent mode, and editor features][copilot-vscode]. +- [Manage issues and pull requests in the sidebar with the GitHub Pull Requests extension][pr-extension]. +- [Add tools your agent can call with MCP servers in VS Code][mcp-servers]. +- [Teach Copilot your project rules with custom instructions][custom-instructions]. +- [Install Git][git]. +- [Compare Copilot plans][copilot-plans]. + +Run the same Space Quiz through a different way of working with the [GitHub Copilot app first steps workshop][first-steps-app] or the [GitHub Copilot CLI first steps workshop][first-steps-cli]. If you are ready for a deeper scenario using a complete application and team backlog, continue with the [real-world VS Code workshop][real-world-vscode]. + +[copilot-vscode]: https://code.visualstudio.com/docs/copilot/overview +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[custom-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[git]: https://git-scm.com/downloads +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /learning-hub/copilot-workshops/first-steps/copilot-cli/ +[real-world-vscode]: /learning-hub/copilot-workshops/vscode/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md new file mode 100644 index 000000000..b1824f427 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "Lesson 2 - Capture project instructions" +description: "Run /init in Copilot Chat to generate .github/copilot-instructions.md for the Space Quiz, then tailor it." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +With a working quiz in the workspace, generate repository custom instructions that describe the real project. Copilot reads these instructions with every chat request. + +In this lesson, you will: + +- generate repository custom instructions with `/init`. +- review `.github/copilot-instructions.md` before saving it. +- trim and personalize the instructions. + +## Capture the rules with `/init` + +1. Run `/init` in Copilot Chat. +2. Review the generated `.github/copilot-instructions.md` file before saving it. +3. Keep only guidance that matches this project: a single file, no dependencies, accessible, and browser-tested. + +![Illustration of VS Code with .github/copilot-instructions.md open in the editor and selected in the Explorer, next to index.html. The file is titled Space Quiz and lists rules: a single index.html with no dependencies and no build step, every answer reachable by keyboard, and respect for prefers-color-scheme in both themes. A section titled How I like code written asks for small functions, early returns, no clever one-liners, and comments only for what is genuinely surprising.](/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg) + +Repository custom instructions live in `.github/copilot-instructions.md` and apply to every chat request. + +> [!IMPORTANT] +> **Order matters** +> +> `/init` reads the workspace as it exists right now. Running it after the quiz is built produces instructions grounded in real code. + +## Make it yours + +The instructions file is not only for facts about the project. Add the specifics you would otherwise repeat in every prompt, such as how you like code written, naming conventions, which libraries to avoid, and how much commenting you want. Every future session reads this file before it reads your prompt. + +## Summary and next steps + +Your workspace now has custom instructions grounded in real code. Continue to [Lesson 3: Inspect context and test][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 000000000..0bc374370 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "Lesson 3 - Inspect context and test" +description: "Inspect the context attached to a Copilot Chat request, then run a browser-level smoke test before Git writes anything." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Before you publish anything, check what Copilot can see and prove that the quiz works. + +In this lesson, you will: + +- inspect the context included in a chat request. +- run a browser-level smoke test. +- fix failures before you move on to Git. + +## Inspect context from the bottom-right + +VS Code shows the active context at the bottom-right of the Copilot Chat input. + +1. Open the context indicator in the **bottom-right** of the chat input. +2. Inspect the files, custom instructions, and symbols included in the request. +3. Remove irrelevant context, or attach the quiz file, before you continue. + +## Build and test before Git writes + +Use the integrated browser and a smoke-test prompt before you initialize a repository or commit anything: + +```plaintext +Run a browser-level smoke test for the quiz. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Run the smoke test and check the integrated browser. +2. Fix any failures and rerun the test until everything passes. +3. Only after the build and test pass, move on to Git. + +## Summary and next steps + +You confirmed what Copilot can see and tested the quiz before publishing. Continue to [Lesson 4: Publish the project][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/4-publish/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md new file mode 100644 index 000000000..ca485bc12 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "Lesson 4 - Publish the project" +description: "Initialize, commit, and publish the Space Quiz entirely through the built-in Source Control integration in VS Code." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Publish the tested quiz to GitHub entirely through the built-in Git integration, and let Copilot draft the commit message from what actually changed. + +In this lesson, you will: + +- initialize a repository from **Source Control**. +- generate a commit message from the staged diff. +- publish the branch to a new public GitHub repository. + +## Initialize, commit, and publish + +1. Open **Source Control** and select **Initialize Repository**. +2. Stage the files. +3. Select the **sparkle pencil** icon in the commit message box to have Copilot write the message from the staged diff. Read the message, edit anything that is wrong, then commit. +4. Select **Publish Branch** and create a public `space-quiz` repository on GitHub. +5. Confirm that the tested file is present on GitHub. + +![Illustration of the VS Code Source Control view. The Changes list shows index.html and .github/copilot-instructions.md. A callout on the sparkle button in the commit message box reads Copilot wrote your message, and the message reads Add per-question timer to the quiz. Below the Commit button, a Create Pull Request button is highlighted with the note Commit first, then this button appears right inside Source Control.](/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg) + +The sparkle button drafts a commit message from the staged diff. Once you commit, **Source Control** offers to create the pull request too. + +## Summary and next steps + +Your tested quiz is now published on GitHub. Continue to [Lesson 5: Plan before you edit][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md new file mode 100644 index 000000000..b7e2e17bf --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "Lesson 5 - Plan before you edit" +description: "Switch Copilot Chat to Plan mode so it researches the workspace and proposes an approach before editing any files." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Plan mode researches the workspace and writes an implementation plan without touching your files. + +In this lesson, you will: + +- switch Copilot Chat from Agent to Plan. +- review and refine a proposed plan. +- switch back to Agent to implement the plan. + +## Agree on the approach before any edits + +1. Open Copilot Chat and use the **mode dropdown** above the input. +2. Switch from **Agent** to **Plan**. +3. Describe the next feature with the following prompt and let Copilot investigate the workspace: + + ```plaintext + Plan how to add a review screen that shows every question with the answer I chose. Investigate the existing quiz, list the changes you would make, call out accessibility and single-file risks, and stop before editing. + ``` + +4. Read the plan and request changes, then switch back to **Agent** to implement it. + +> [!TIP] +> **When plan mode pays off** +> +> Use Plan mode for anything ambiguous, cross-cutting, or expensive to undo. The cheapest place to fix a bad approach is before the first edit. + +## Summary and next steps + +You agreed on an approach with Copilot before it wrote any code. Continue to [Lesson 6: Give Copilot GitHub-aware tools][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md new file mode 100644 index 000000000..5b89dbefc --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "Lesson 6 - Give Copilot GitHub-aware tools" +description: "Enable and review the GitHub MCP server in VS Code before asking Copilot to work with issues and pull requests." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Enable the GitHub MCP server *before* you ask Copilot to create issues or work with pull requests. With these tools, Copilot can read and write GitHub data directly from chat. + +In this lesson, you will: + +- enable the GitHub MCP server. +- review the tools and permissions the server requests. +- confirm that the GitHub tools are available in chat. + +## Enable GitHub MCP + +1. Open VS Code **Settings** and enable the built-in **GitHub MCP** server, if your version includes it. +2. Otherwise, install a trusted GitHub MCP server through the [MCP server configuration flow][mcp-servers]. +3. Review the tools and permissions the server requests before you approve it. +4. Confirm that the GitHub tools appear in the Copilot Chat tools picker. + +## Summary and next steps + +Copilot now has GitHub-aware tools. Continue to [Lesson 7: Plan and implement issues][next-lesson]. + +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 000000000..c4f4fb131 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "Lesson 7 - Plan and implement issues" +description: "Use GitHub tools to create issues from Copilot Chat, then implement one in a new chat session." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +With GitHub MCP enabled, Copilot can create and read issues directly from chat. + +In this lesson, you will: + +- create three focused GitHub issues from Copilot Chat. +- start a new chat session for one issue. +- implement and verify the issue. + +## Create issues + +Send the following prompt: + +```plaintext +Review the space quiz and suggest three focused feature ideas. Use the GitHub tools to create a separate issue for each with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +## Implement one issue + +1. Open the **GitHub** view in the Activity Bar and inspect the new issues. +2. Choose one issue, then select the **+** button in Copilot Chat to start a new session for it. +3. Use Agent mode to implement the issue while the original session stays available for comparison. +4. Run the integrated-browser smoke test from [Lesson 3][lesson-3] before you create a pull request. + +## Summary and next steps + +You created issues and implemented one in its own session. Continue to [Lesson 8: Review and merge][next-lesson]. + +[lesson-3]: /learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 000000000..20aa8ebe7 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "Lesson 8 - Review and merge" +description: "Create a pull request from Source Control, request a Copilot code review, address feedback with GitHub tools, and merge." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Inspect, review, and merge the new work with GitHub tools in VS Code. + +In this lesson, you will: + +- commit the new work and create a pull request from **Source Control**. +- request a Copilot code review. +- address feedback and failing checks with GitHub MCP. +- merge the pull request. + +## Inspect, review, and merge + +1. Open **Source Control** to inspect the changed files and diff before you create anything. +2. Commit the new work, using the **sparkle** button to write the message again. +3. Select the **Create Pull Request** button that appears in **Source Control**. Copilot drafts the title and description from your commits, so you get a better pull request than asking for one from scratch. +4. Request a **Copilot code review** while you create the pull request, from the **GitHub** view in VS Code, or on GitHub. +5. Ask Copilot, with GitHub MCP, to inspect the pull request, resolve merge conflicts, address review comments, and investigate failing CI checks. +6. Retest in the integrated browser, review every proposed change, and update the branch. +7. When checks and review are complete, ask the agent to merge, or merge from the GitHub integration. + +> [!NOTE] +> You can always ask Copilot to do this in chat instead. The **Source Control** path is worth learning first because it writes the commit and pull request text for you from what actually changed. + +## Summary and next steps + +You reviewed and merged a pull request without leaving VS Code. Continue to [Lesson 9: Hand the next idea to a cloud session][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md new file mode 100644 index 000000000..26c2bed95 --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "Lesson 9 - Hand the next idea to a cloud session" +description: "Switch the Copilot Chat harness from Local to Cloud and delegate a self-contained feature that arrives as a pull request." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +You have done the whole loop locally, so you now know what good output looks like. That is the right moment to let something run without you. Copilot Chat can switch the harness it runs on from your machine to GitHub. + +In this lesson, you will: + +- switch the Copilot Chat harness from **Local** to **Cloud**. +- delegate a self-contained feature with clear acceptance criteria. +- review the resulting pull request. + +> [!NOTE] +> Cloud sessions require an eligible paid Copilot plan. Business and Enterprise access may also need to be enabled by an administrator. + +## Delegate to the cloud + +![Illustration of Copilot Chat in VS Code with the Harness picker open. Under Copilot, Cloud is selected instead of Local, and other harnesses such as Claude and Codex are listed. Above, a request to add three new color themes shows Working in the cloud with a link to follow the session on GitHub.](/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg) + +The **Harness** picker lists Copilot running **Local** or **Cloud**, alongside other harnesses. Switch to **Cloud** and the next request runs on GitHub instead of your machine. + +1. In Copilot Chat, open the **Harness** picker and switch Copilot from **Local** to **Cloud**. +2. Start a new session and give it a self-contained feature with clear acceptance criteria: + + ```plaintext + Add a theme picker to the space quiz with three named themes: Deep Space, Launch Pad, and Lunar. Persist the choice in localStorage, keep everything in the single index.html with no dependencies, keep contrast accessible in every theme, and open a pull request when the tests pass. + ``` + +3. Close your laptop. The work continues on GitHub and arrives as a pull request. +4. Review that pull request exactly as carefully as the one you wrote yourself. + +> [!TIP] +> **Delegate what you can describe** +> +> Cloud sessions reward a precise brief. If you cannot write the acceptance criteria, the task is not ready to leave your machine yet. + +## Summary and next steps + +You delegated a feature to a cloud session and reviewed the result. Continue to [Lesson 10: Review and next steps][next-lesson]. + +[next-lesson]: /learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/index.md b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/index.md new file mode 100644 index 000000000..bc71e27bc --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/first-steps/vscode/index.md @@ -0,0 +1,51 @@ +--- +title: "Visual Studio Code first steps" +description: "Take a guided tour of GitHub Copilot in Visual Studio Code by building, testing, and shipping a Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +Take a beginner-friendly, hands-on tour of GitHub Copilot in Visual Studio Code. You will build a colorful Space Quiz from an empty folder and learn the editor loop: build in a workspace, inspect context, test before Git writes anything, plan before you edit, and let GitHub tools handle issues and pull requests without leaving VS Code. + +The workshop takes approximately 60 to 90 minutes. Your project uses a single HTML file with no runtime dependencies, so you can focus on learning Copilot in the editor. + +> [!NOTE] +> This workshop was created by [James Montemagno][james] and adapted from [First Steps with GitHub Copilot][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, add the GitHub extension, open a folder, and choose a model | +| [1. Build in the workspace][lesson-1] | Build | Build the quiz, preview it in the integrated browser, and polish an element you pick | +| [2. Capture project instructions][lesson-2] | Instructions | Generate and tailor `.github/copilot-instructions.md` with `/init` | +| [3. Inspect context and test][lesson-3] | Test | Inspect chat context and run a smoke test before Git writes anything | +| [4. Publish the project][lesson-4] | Publish | Initialize, commit, and publish with Source Control | +| [5. Plan before you edit][lesson-5] | Plan | Use Plan mode to agree on an approach for the next feature | +| [6. Give Copilot GitHub-aware tools][lesson-6] | Tools | Enable and review the GitHub MCP server | +| [7. Plan and implement issues][lesson-7] | Implement | Create issues with GitHub tools and implement one in a new session | +| [8. Review and merge][lesson-8] | Review | Create a pull request from Source Control, request a review, and merge | +| [9. Hand off to a cloud session][lesson-9] | Delegate | Switch the harness to Cloud and delegate a new feature | +| [10. Review and next steps][lesson-10] | 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/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites/ +[lesson-1]: /learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ +[lesson-2]: /learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ +[lesson-3]: /learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[lesson-4]: /learning-hub/copilot-workshops/first-steps/vscode/4-publish/ +[lesson-5]: /learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ +[lesson-6]: /learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ +[lesson-7]: /learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ +[lesson-8]: /learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ +[lesson-9]: /learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ +[lesson-10]: /learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/index.md b/website/src/content/docs/learning-hub/copilot-workshops/index.md index 4283fa899..4a5a560ab 100644 --- a/website/src/content/docs/learning-hub/copilot-workshops/index.md +++ b/website/src/content/docs/learning-hub/copilot-workshops/index.md @@ -1,44 +1,45 @@ --- -title: "Hands-on with GitHub Copilot's agents" -description: "A hands-on workshop with four harnesses (VS Code, Copilot CLI, Copilot app, and cloud agent) built around a shared Tailspin Toys backlog." +title: "GitHub Copilot workshops" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +description: "Guided First Steps workshops and real-world development workshops for GitHub Copilot in VS Code, the terminal, the desktop app, and the cloud." tags: - workshop --- -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. + +## First steps + +Start with a focused, guided experience that introduces the key capabilities of a GitHub Copilot product without requiring an existing codebase. + +### [GitHub Copilot app tour][first-steps-app] + +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. + +### [GitHub Copilot CLI first steps][first-steps-cli] + +Build the same Space Quiz from your terminal, review diffs, run parallel sessions in worktrees, plan before editing, and create, merge, and delegate pull requests without leaving the shell. + +### [Visual Studio Code first steps][first-steps-vscode] + +Build the Space Quiz in VS Code, test it in the integrated browser, publish with Source Control, work with issues and pull requests through GitHub tools, and hand off to a cloud session. + +## Real-world development + +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. + +### [Browse the real-world development workshops][real-world-development] + +Choose from GitHub Copilot CLI, the GitHub Copilot app, the GitHub Copilot cloud agent, or Visual Studio Code. > [!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. +> 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 isn't running correctly, please ask a mentor! +> If something appears broken or does not run correctly during an instructor-led workshop, 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](/learning-hub/copilot-workshops/vscode/) - -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. - -### 💻 [Copilot CLI](/learning-hub/copilot-workshops/cli/) - -**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. - -### 🤖 [Copilot App](/learning-hub/copilot-workshops/app/) - -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. - -### ☁️ [Copilot Cloud Agent](/learning-hub/copilot-workshops/cloud/) - -**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. - -## 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 - -Choose your harness above to begin — each one opens with the setup it needs to get you building. +[first-steps-app]: /learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-development]: /learning-hub/copilot-workshops/real-world-development/ diff --git a/website/src/content/docs/learning-hub/copilot-workshops/real-world-development/index.md b/website/src/content/docs/learning-hub/copilot-workshops/real-world-development/index.md new file mode 100644 index 000000000..fba46ad4b --- /dev/null +++ b/website/src/content/docs/learning-hub/copilot-workshops/real-world-development/index.md @@ -0,0 +1,40 @@ +--- +title: "Real-world development" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +description: "Practice GitHub Copilot across the software development lifecycle with four environments and a shared Tailspin Toys backlog." +tags: + - workshop +--- + +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. + +### [GitHub Copilot CLI][cli] + +Use the agentic assistant in your terminal. Work with Plan and Autopilot modes, instructions, skills, custom agents, Playwright MCP, Agent Merge, and practical 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. + +### [GitHub Copilot cloud agent][cloud] + +Assign GitHub issues to an asynchronous agent, guide its work, monitor progress, and review the pull requests it opens. + +### [Visual Studio 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. + +[cli]: /learning-hub/copilot-workshops/cli/ +[app]: /learning-hub/copilot-workshops/app/ +[cloud]: /learning-hub/copilot-workshops/cloud/ +[vscode]: /learning-hub/copilot-workshops/vscode/ diff --git a/website/src/content/docs/learning-hub/index.md b/website/src/content/docs/learning-hub/index.md index 736a5125d..c6f55e2d1 100644 --- a/website/src/content/docs/learning-hub/index.md +++ b/website/src/content/docs/learning-hub/index.md @@ -16,7 +16,7 @@ New to GitHub Copilot? Start here to understand the tools available to you. **Terminal**: Looking for a guided path into GitHub Copilot from the terminal? Explore the [Copilot CLI for Beginners](cli-for-beginners/) with a text-based experience or the [YouTube video series](https://www.youtube.com/watch?v=BDxRhhs36ns&list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl). Ready to go further? The [Advanced GitHub Copilot CLI](advanced-copilot-cli/) course takes you into real-world brownfield work — building reusable AI infrastructure, hooks, LSP and MCP integrations, and plugins on top of a legacy multi-stack app. -**Workshop**: Prefer to learn by building? Work through [Hands-on with GitHub Copilot's agents](copilot-workshops/) — a hands-on workshop with four harnesses (VS Code, Copilot CLI, Copilot app, and cloud agent) built around a shared Tailspin Toys backlog. +**Workshops**: Prefer to learn by building? Start with [First Steps](copilot-workshops/first-steps/) to build and ship a Space Quiz in VS Code, Copilot CLI, or the Copilot app. Then explore [real-world development workshops](copilot-workshops/real-world-development/) with a shared Tailspin Toys backlog across VS Code, Copilot CLI, the Copilot app, and cloud agent. ## Fundamentals diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/0-prerequisites.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/0-prerequisites.md index f139066be..4eb71b0a9 100644 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/0-prerequisites.md +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/0-prerequisites.md @@ -3,7 +3,7 @@ title: "Lição 0 - Pré-requisitos" description: "Prepare-se para as lições do aplicativo GitHub Copilot: instale o Node.js para o projeto Tailspin Toys e crie sua própria cópia do repositório a partir do modelo." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- O aplicativo GitHub Copilot é um aplicativo para desktop que funciona como ponto central tanto para o Copilot quanto para o GitHub. Ele oferece acesso rápido a issues e pull requests e, naturalmente, permite que você desenvolva usando o GitHub Copilot. Durante este workshop, você trabalhará localmente com o aplicativo Tailspin Toys, criado com Astro, e com o aplicativo GitHub Copilot. Antes de começar, vamos verificar se o Node.js está instalado localmente e depois instalar o aplicativo Copilot. @@ -15,18 +15,18 @@ Nesta lição, você vai: ## Instalar o Node.js -Em várias lições, você pedirá a um agente que crie recursos e execute localmente o conjunto de testes do Tailspin Toys. Para isso, é necessário o [**Node.js**][nodejs], o único ambiente de execução exigido pelo projeto. Instale a versão **22 ou posterior**; a versão **LTS** atual é uma escolha segura. +Em várias lições, você pedirá a um agente que crie recursos e execute localmente o conjunto de testes do Tailspin Toys. Para isso, é necessário o [**Node.js**][nodejs], o único ambiente de execução exigido pelo projeto. Instale a versão **LTS** atual. A opção mais simples em todas as plataformas é o instalador oficial: 1. No sistema operacional, abra uma janela de terminal usando o Windows Terminal, o Terminal do macOS ou o aplicativo que você costuma usar. -2. Execute o comando a seguir para confirmar que você tem o Node.js 22 ou posterior instalado: +2. Execute o comando a seguir para verificar a versão do Node.js instalada: ```shell node --version ``` -3. Se você vir `v22` ou um número maior, pule para a próxima seção. +3. Se ela atender aos requisitos do README e do `package.json` do projeto, pule para a próxima seção. > [!TIP] > Você só precisa concluir estas etapas se não tiver o Node instalado ou se precisar atualizá-lo. @@ -41,10 +41,10 @@ A opção mais simples em todas as plataformas é o instalador oficial: node --version ``` -9. Você deve ver `v22.x.x` ou posterior. +9. Você deve ver a versão que instalou. -> [!TIP] -> Prefere contêineres? Se você tem o [**Docker**][docker], pode usar o [contêiner de desenvolvimento][dev-containers] do repositório em vez de instalar o Node.js localmente. Ele já inclui o Node. Você não precisa dos dois. +> [!IMPORTANT] +> Cada worktree também precisa das dependências do projeto e do Chromium do Playwright para verificações E2E. Siga o README do repositório Tailspin Toys ao preparar uma worktree e revise qualquer solicitação de instalação antes de aprová-la. ## Configurar o repositório do laboratório @@ -64,11 +64,16 @@ Você trabalhará na sua própria cópia do projeto Tailspin Toys. Crie-a agora > [!NOTE] > Quando você cria o repositório a partir do modelo, um backlog de issues do GitHub é criado automaticamente. Você trabalhará com essas issues durante todo o workshop e não precisará criar nenhuma. +Use uma cópia nova do modelo do workshop. Ele inclui instruções do repositório, código da aplicação, testes, uma skill quality-checks e uma extensão de canvas existente. Você personalizará a skill e criará um agente de QA durante o workshop. Se usar uma cópia mais antiga, confirme com a pessoa que conduz o workshop se ela contém os arquivos necessários. + ## Resumo e próximos passos -Tudo pronto! Você instalou o Node.js para criar e testar o projeto no seu computador e criou sua própria cópia do repositório Tailspin Toys a partir do modelo. +Tudo pronto! Nesta lição, você: -Em seguida, você instalará o aplicativo GitHub Copilot, conectará o repositório que acabou de criar e conhecerá o espaço de trabalho. Continue para a [Lição 1 - Instalar o aplicativo GitHub Copilot][next-lesson]. +- instalou o Node.js para que o projeto possa ser criado e testado no seu computador. +- criou sua própria cópia do repositório Tailspin Toys a partir do modelo. + +Em seguida, você [instalará o aplicativo GitHub Copilot][next-lesson], conectará o repositório que acabou de criar e conhecerá o espaço de trabalho. ## Recursos @@ -79,7 +84,5 @@ Em seguida, você instalará o aplicativo GitHub Copilot, conectará o repositó [next-lesson]: /pt-br/learning-hub/copilot-workshops/app/1-install-copilot-app/ [nodejs]: https://nodejs.org/ [node-download]: https://nodejs.org/en/download -[docker]: https://www.docker.com/products/docker-desktop/ -[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers [template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/1-install-copilot-app.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/1-install-copilot-app.md index bf9c993cc..41226b12c 100644 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/1-install-copilot-app.md +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/1-install-copilot-app.md @@ -3,7 +3,7 @@ title: "Lição 1 - Instalar o aplicativo GitHub Copilot" description: "Instale o aplicativo GitHub Copilot, conecte o repositório criado a partir do modelo, conheça o espaço de trabalho e experimente um chat rápido." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- O [**aplicativo GitHub Copilot**][about-copilot-app] é um aplicativo para desktop voltado ao desenvolvimento orientado por agentes. Ele foi criado com base no GitHub Copilot CLI e tem integração nativa com o GitHub, portanto seus repositórios, branches e pipelines de CI funcionam sem configuração adicional. Ele foi projetado para fluxos de trabalho nos quais você orienta vários agentes em paralelo, cada um em seu espaço de trabalho isolado, em vez de fazer todo o trabalho por conta própria, além de automatizar tarefas repetitivas. Com o Node.js instalado e sua cópia do projeto pronta, a próxima etapa é instalar o aplicativo e conectar esse repositório. @@ -41,32 +41,39 @@ Como você pode imaginar, a primeira etapa para usar o aplicativo GitHub Copilot Com o projeto conectado, reserve um momento para conhecer o espaço de trabalho. O aplicativo organiza tudo em algumas áreas na barra lateral: -- **Sessions**: onde os agentes trabalham. Cada sessão é executada em seu próprio espaço de trabalho isolado, permitindo executar várias sessões ao mesmo tempo sem que as alterações entrem em conflito. Você iniciará sua primeira sessão na próxima lição. -- **Quick chats**: conversas leves para perguntas e brainstorming que não precisam de branch ou espaço de trabalho próprios. Você experimentará uma ao final desta lição. -- **My work**: suas issues e pull requests, exibidos por meio da **integração nativa com o GitHub**. Nessa área, você pode procurar e filtrar issues e pull requests, verificar o status da CI, iniciar uma sessão a partir de uma issue e revisar pull requests sem sair do aplicativo. -- **Automations**: tarefas de agente salvas que são executadas em uma agenda ou sob demanda. Você criará uma perto do fim deste percurso. +- **New**: como você pode imaginar, aqui você pode iniciar uma nova sessão de chat com o Copilot! +- **Pull requests**: seus pull requests, exibidos por meio da integração nativa com o GitHub. Nessa área, você pode procurar e filtrar pull requests, verificar o status da CI e revisar pull requests sem sair do aplicativo. +- **Issues**: suas issues, exibidas da mesma forma. Nessa área, você pode procurar e filtrar issues e iniciar uma sessão a partir de uma issue. +- **Automations**: tarefas de agente salvas que são executadas em uma agenda ou sob demanda. São ótimas para gerenciar listas de tarefas, a manutenção regular do projeto ou outras atividades repetitivas que você queira delegar. O encerramento traz links para elas como próximo passo, não como outro exercício do workshop. +- **Customize**: adicione recursos e funções ao aplicativo Copilot na forma de servidores MCP, plugins, skills e outros componentes. Você usará essa área para configurar o MCP do Playwright. +- **Chats**: conversas leves para perguntas e brainstorming que não precisam de branch ou espaço de trabalho próprios. Você experimentará uma ao final desta lição. +- **Sessions**: onde os agentes trabalham. Cada sessão é executada em seu próprio espaço de trabalho isolado, permitindo executar várias sessões ao mesmo tempo sem que as alterações entrem em conflito. Você iniciará sua primeira sessão ao adicionar avaliações por estrelas. + +Ao longo do workshop, você explorará o espaço de trabalho! + +> [!TIP] +> Na dúvida, pergunte ao Copilot! Se não souber como fazer algo ou se algo é possível, pergunte ao Copilot. Ele ajudará a orientar você. ### Localizar o backlog criado pelo modelo -Como o aplicativo tem integração nativa com o GitHub, o trabalho pendente no repositório aparece dentro dele. Quando você criou o repositório a partir do modelo, um backlog de issues foi criado. Vamos confirmar que ele está disponível. +Provavelmente não existe projeto sem backlog, e o Tailspin Toys não é diferente. Vamos explorar o backlog existente, gerado quando você criou sua cópia a partir do modelo. -1. Selecione **My work** na barra lateral. -2. O modelo criou oito issues no seu backlog. Este módulo foca nas três a seguir — confirme que você consegue vê-las: +1. Selecione **Issues** na barra lateral. +2. Encontre estas issues pelo título em vez de presumir seus números: - Allow users to filter games by category and publisher - Update our repository coding standards - - Implement pagination on the game list page -3. Selecione uma issue para ler os detalhes. Cada issue também serve como ponto de partida para uma sessão de agente. Você começará a trabalhar com elas mais adiante neste percurso. +3. Selecione uma issue para ler os detalhes. Cada issue também serve como ponto de partida para uma sessão de agente. Você começará pela issue de filtragem depois de concluir uma primeira alteração rápida. > [!NOTE] -> A lista de itens em My work é filtrada automaticamente para exibir somente itens dos repositórios adicionados ao aplicativo Copilot. Quer ver itens de trabalho de outros repositórios? Adicione-os ao aplicativo. +> As listas de itens em **Issues** e **Pull requests** são filtradas automaticamente para exibir somente itens dos repositórios adicionados ao aplicativo Copilot. Quer ver itens de trabalho de outros repositórios? Adicione-os ao aplicativo. ## Experimentar um chat rápido Uma ótima maneira de se familiarizar com o aplicativo é usá-lo para saber mais sobre o *próprio aplicativo*, e um **chat rápido** é a ferramenta ideal. Os chats rápidos permitem fazer perguntas ou brainstorming sem criar uma branch ou worktree. Por isso, são perfeitos para perguntas rápidas e descartáveis, sem exigir uma sessão. -1. Na barra lateral, selecione **+** ao lado de **Quick chats** para abrir um novo chat. +1. Na barra lateral, selecione **+** ao lado de **Chats** para abrir um novo chat. 2. Pergunte ao aplicativo como funcionam as próprias sessões: ```plaintext @@ -81,10 +88,10 @@ Parabéns! Você instalou o aplicativo GitHub Copilot, conectou o projeto e expl - instalar o aplicativo e entrar no GitHub. - adicionar um projeto por meio do repositório do GitHub. -- conhecer o espaço de trabalho e localizar o backlog criado em **My work**. +- conhecer o espaço de trabalho e localizar o backlog criado em **Issues**. - usar um chat rápido para fazer uma pergunta rápida e descartável. -Em seguida, você iniciará sua primeira sessão de agente e fará a primeira alteração no projeto: exibir uma avaliação por estrelas nos cards dos jogos. Continue para a [Lição 2 - Executar sua primeira sessão de agente][next-lesson]. +Em seguida, você [iniciará sua primeira sessão de agente][next-lesson] e a usará para exibir uma avaliação por estrelas nos cards dos jogos. ## Recursos @@ -92,7 +99,6 @@ Em seguida, você iniciará sua primeira sessão de agente e fará a primeira al - [Introdução ao aplicativo GitHub Copilot][getting-started] - [Trabalhar com sessões de agente no aplicativo GitHub Copilot][agent-sessions] -[ex0]: /pt-br/learning-hub/copilot-workshops/app/0-prerequisites/ [next-lesson]: /pt-br/learning-hub/copilot-workshops/app/2-add-star-rating/ [about-copilot-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 diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/10-review.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/10-review.md new file mode 100644 index 000000000..0125aa9da --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/10-review.md @@ -0,0 +1,77 @@ +--- +title: "Lição 10 - Encerramento e próximos passos" +description: "Recapitule o fluxo do aplicativo, os dois marcos de PR, os exercícios de canvas e as práticas reutilizáveis de qualidade e explore outros recursos." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você usou o aplicativo GitHub Copilot em um fluxo contínuo da Tailspin Toys. Você: + +- conectou um repositório, explorou o espaço de trabalho do aplicativo e o backlog predefinido e experimentou um chat rápido. +- iniciou uma sessão específica de avaliação por estrelas, revisou o resultado em um canvas de navegador e fez manualmente o merge do primeiro pull request (PR). +- começou pela issue de filtragem, definiu a abordagem no modo **Plan**, desenvolveu-a no modo **Autopilot** e a revisou no modo **Interactive**. +- orientou o agente com instruções personalizadas e depois personalizou a skill `quality-checks` existente e a usou para executar testes de unidade, lint e verificações de tipos. +- adicionou o servidor do Model Context Protocol (MCP) do Playwright e o usou para explorar a filtragem em um navegador real. +- criou e selecionou um agente personalizado QA para avaliar requisitos, cobertura, resultados dos scripts da skill e evidências do navegador. +- revisou toda a alteração de filtragem e autorizou o **Agent Merge** no segundo PR. +- usou o canvas Database Explorer existente e depois criou e testou um canvas de triagem vinculado ao repositório. + +## O que você entregou + +O workshop tem dois marcos de PR, cada um em sua própria branch a partir de `main` atualizado: + +1. **Avaliações por estrelas:** exibir o `starRating` existente e um estado explícito sem avaliação nos cards dos jogos. +2. **Filtragem e fluxo de qualidade:** implementar a filtragem, atualizar as instruções e aplicá-las ao recurso, personalizar o relatório de `quality-checks`, criar um perfil de QA e incluir os testes associados. + +Desde o planejamento da filtragem até a abertura do PR, você usou a mesma sessão, worktree e branch. Combinamos esse trabalho em um único PR para simplificar o workshop. Depois, você usou o Database Explorer existente e criou um canvas de triagem vinculado ao repositório sem repetir o fluxo de PR. + +## Diferentes tipos de verificação + +Você verificou o código de várias formas: testes automatizados, sua própria inspeção no navegador e a exploração do navegador pelo Copilot via MCP. A skill `quality-checks` executou testes de unidade, lint e verificações de tipos e apresentou os resultados no novo formato. O QA reuniu esses resultados com uma revisão dos requisitos e da cobertura de testes antes do PR. + +Os testes adicionados devem cobrir lacunas reais; uma execução de QA que não precisa de testes novos pode estar correta. Ferramentas ausentes, verificações ignoradas e falhas são bloqueios visíveis, não aprovações. Revise código e evidências antes de autorizar o merge e atualize as evidências afetadas após alterações. + +## Boas práticas + +O contexto e as ferramentas que você fornece ao Copilot orientam seu trabalho. Neste workshop, você atualizou instruções, personalizou uma skill, criou um perfil de QA, configurou um servidor MCP e criou um canvas. Reutilize essas personalizações entre sessões e ajuste-as conforme as necessidades da equipe mudarem. As instruções definem padrões, as skills descrevem tarefas repetíveis, os agentes personalizados definem papéis especializados, os servidores MCP conectam ferramentas externas e os canvases fornecem superfícies interativas compartilhadas. Revise as alterações reais e os resultados das ferramentas, não apenas o resumo do agente. + +Associe o **modo e o modelo** à tarefa. Use **Plan** para analisar uma abordagem antes de desenvolver, **Interactive** para acompanhar alterações específicas e **Autopilot** somente para tarefas isoladas e com escopo bem definido. Escolha um modelo mais rápido para edições rotineiras e um modelo mais avançado, com maior esforço de raciocínio, para trabalhos complexos. + +O contexto continua tão importante quanto a infraestrutura. Descrever claramente *o que* você quer criar, *por que* e *como* muda significativamente o resultado. Os chats rápidos são ótimos para definir o escopo de uma ideia antes de transformá-la em uma sessão completa. + +## Mais recursos para explorar + +Você percorreu o fluxo de trabalho principal. Veja outros recursos que valem a pena conhecer: + +- [**Automações**][using-automations] para tarefas recorrentes ou sob demanda, como resumir trabalhos recentes. Revise a agenda, as permissões e o escopo antes de adotar uma; criar uma automação é um próximo passo, não parte deste workshop. +- **Rubber duck** para analisar um problema e receber feedback relevante antes de começar a desenvolver. +- [`/chronicle`][chronicle] para gerar uma narrativa do que aconteceu em uma sessão. +- [Bring your own key (BYOK)][byok] para usar modelos do seu próprio provedor, incluindo modelos locais por meio de Ollama, Foundry Local ou LM Studio. +- [Deep links][deep-links] para abrir o aplicativo diretamente em um repositório, uma sessão ou um prompt. + +## Próximos passos + +A melhor maneira de melhorar com qualquer ferramenta é continuar usando-a. Use-a em código de produção, em projetos pessoais ou naquele pequeno aplicativo que você planeja criar há anos. Compartilhe o que aprendeu com sua equipe e aprenda com as experiências dela. E, como sempre, explore a documentação. + +Para conhecer melhor o ecossistema do GitHub Copilot, confira o [percurso do VS Code][vscode-harness], o [percurso do Copilot CLI][cli-harness] ou o [percurso do agente de nuvem][cloud-harness]. + +## Recursos + +- [Sobre o aplicativo GitHub Copilot][about-copilot-app] +- [Introdução ao aplicativo GitHub Copilot][getting-started] +- [Personalizar o aplicativo GitHub Copilot][customize] +- [Usar automações][using-automations] +- [Trabalhar com extensões de canvas][canvas-docs] + +[vscode-harness]: /pt-br/learning-hub/copilot-workshops/vscode/ +[cli-harness]: /pt-br/learning-hub/copilot-workshops/cli/ +[cloud-harness]: /pt-br/learning-hub/copilot-workshops/cloud/ +[about-copilot-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 +[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle +[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models +[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/2-add-star-rating.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/2-add-star-rating.md index 7521faf18..93058c575 100644 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/2-add-star-rating.md +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/2-add-star-rating.md @@ -1,9 +1,9 @@ --- -title: "Lição 2 - Executar sua primeira sessão de agente" +title: "Lição 2 - Adicionar avaliações por estrelas: uma melhoria rápida" description: "Inicie sua primeira sessão de agente no aplicativo GitHub Copilot, faça uma pequena alteração nos cards dos jogos e integre-a como seu primeiro pull request." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- Na lição anterior, você conheceu o espaço de trabalho e usou um chat rápido. Agora é hora de iniciar uma **sessão de agente** e fazer sua primeira alteração no projeto. A mudança será pequena: os dados dos jogos já têm uma avaliação por estrelas, mas os cards dos jogos na página inicial ainda não a exibem. Você pedirá ao agente que mostre essa avaliação, revisará a alteração e fará o merge dela como seu primeiro pull request. @@ -31,21 +31,15 @@ Em uma sessão, você verá três elementos: a **conversa** com o agente, a **at Vamos iniciar uma nova sessão para começar a explorar o projeto e implementar o recurso. Em uma [lição anterior][prior-lesson], você adicionou o projeto por meio do repositório do GitHub. Criaremos uma nova sessão para esse repositório e solicitaremos a alteração. 1. Volte ao aplicativo GitHub Copilot ou abra-o. -2. Selecione **Home screen**. -3. Verifique se `tailspin-toys` está selecionado como repositório. +2. Selecione **+** ao lado de **Projects**. +3. Selecione `tailspin-toys` como repositório. +4. Escolha **new working tree** e o modo **Interactive** abaixo da caixa de prompt. Use o prompt a seguir para solicitar a alteração: - ![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/learning-hub/copilot-workshops/app-2-start-session.png) + ```plaintext + Show each game's starRating out of 5 in the game cards on the list page. If the rating is null, show "No rating yet". Keep the card layout as it is, add tests, and run the relevant checks. + ``` -4. Use o prompt a seguir para solicitar a alteração: - - ```plaintext - On the game cards, show each game's star rating. The Game type already includes a starRating field — it's a number out of 5, or null when a game hasn't been rated yet. Display it on each card in src/components/GameCard.astro, and when starRating is null show "No rating yet" instead. Keep the change small and don't restructure the card layout. - ``` - -> [!NOTE] -> Observe que o prompt contém o nome do arquivo que o Copilot deve atualizar. Embora não seja obrigatório especificar os arquivos que o Copilot deve incluir no trabalho, indicar a direção certa ajuda o Copilot a gerar código mais rapidamente e reduz o uso de tokens. - -5. Selecione Enter para enviar o prompt ao Copilot. +5. Pressione Enter para enviar o prompt ao Copilot. O aplicativo Copilot começa criando um novo worktree, uma cópia isolada do projeto. Em seguida, ele explora o projeto, localiza os arquivos que precisam ser atualizados e cria o código necessário para adicionar o novo recurso. Você acabou de adicionar um recurso com o aplicativo Copilot. @@ -55,7 +49,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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/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`: @@ -76,40 +70,38 @@ Todas as alterações geradas por IA devem ser revisadas antes do merge, mesmo a ## Verificar as alterações -Não devemos apenas ler o código e presumir que ele funciona. Também precisamos testar tudo visualmente. Para isso, iniciaremos o aplicativo no terminal e confirmaremos o funcionamento. O aplicativo Copilot inclui um terminal. +Revise os resultados das verificações automatizadas do agente antes de abrir um navegador. Confirme que os testes cobrem um `starRating` numérico e a alternativa para `null`. Um pré-requisito ausente ou uma verificação ignorada não conta como aprovação; revise qualquer solicitação de instalação antes de aprová-la. -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**. +É claro que não devemos apenas ler o código e presumir que funciona. Vamos pedir ao Copilot que abra o site para examinarmos a interface atualizada. Para isso, podemos pedir que ele inicie o site e o abra em um canvas de navegador. - ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](/images/learning-hub/copilot-workshops/app-terminal-screenshot.png) +> [!TIP] +> Um canvas é um widget interativo disponível dentro do próprio aplicativo Copilot. Você explorará opções personalizadas e até criará seu próprio canvas mais adiante, mas, por enquanto, usaremos o canvas de navegador integrado. -2. Digite o comando a seguir na janela do terminal para iniciar o servidor de desenvolvimento do aplicativo Web: +1. Use o prompt a seguir para pedir ao Copilot que inicie o aplicativo e abra a página no canvas de navegador: - ```shell - npm run dev - ``` + ```plaintext + Start the app and open it in the browser canvas. + ``` -3. Quando o servidor iniciar, o que levará apenas alguns instantes, abra uma janela do navegador. -4. Acesse http://localhost:4321. -5. Agora você deve ver avaliações por estrelas em todos os jogos da página inicial. -6. Volte à janela do terminal. -7. Selecione Ctrl+C para interromper o servidor de desenvolvimento. +2. Em alguns instantes, o aplicativo será iniciado e uma janela do navegador será aberta dentro do aplicativo Copilot. +3. Confirme se os cards de jogos avaliados exibem a nota de um total de cinco. +4. Quando terminar, use o prompt a seguir para pedir ao Copilot que interrompa o servidor de desenvolvimento iniciado para esta sessão: + + ```plaintext + Stop the dev server and close the browser canvas. + ``` ## Abrir e fazer merge do primeiro pull request -A alteração está correta. Agora é hora de entregá-la. Você pedirá ao agente que abra um pull request e depois fará a revisão e o merge no github.com. Por enquanto, gerenciaremos esse processo manualmente. Em uma próxima lição, veremos como o Copilot pode automatizar parte desse trabalho. +Você criou o recurso! Agora é hora de criar um pull request (PR) para fazer o merge do novo código na base de código existente. -1. No canto superior direito, selecione **Create PR**. +1. Selecione **Create PR** no canto superior direito. 2. Se solicitado, selecione **Sign in with your browser** e siga as instruções para se autenticar. 3. O Copilot começará a criar o PR. - -Após a criação do PR, o Copilot monitorará os fluxos de trabalho do repositório que precisam ser executados. Depois de alguns instantes, o botão no canto superior direito mudará para **Ready to merge**, indicando que o PR está pronto para o merge. - 4. Selecione o indicador **PR** logo acima do chat para abrir o PR no painel de revisão e visualizá-lo. Faça as revisões necessárias nesse painel. 5. Quando estiver tudo pronto, selecione **Ready to merge**. 6. Na nova caixa de diálogo, selecione **Merge pull request** para fazer o merge do pull request. -Você acaba de enviar um novo recurso para o site. - ## Resumo e próximos passos Você iniciou sua primeira sessão de agente e entregou sua primeira alteração. Especificamente, você: @@ -118,9 +110,9 @@ Você iniciou sua primeira sessão de agente e entregou sua primeira alteração - orientou o agente a fazer uma alteração pequena e específica nos cards dos jogos. - revisou a alteração na visualização de diff do espaço de trabalho. - executou o aplicativo localmente para confirmar a avaliação por estrelas no navegador. -- abriu um pull request e fez o merge por conta própria no github.com. +- abriu o PR 1, revisou as verificações e fez o merge explicitamente. -Em seguida, você usará o aplicativo para adicionar um padrão de instruções personalizadas ao repositório, começando por uma das issues do backlog. Continue para a [Lição 3 - Orientar o Copilot com instruções personalizadas][next-lesson]. +Em seguida, você [começará pela issue de filtragem e usará os modos Plan e Autopilot][next-lesson] para criar um recurso maior. ## Recursos @@ -129,7 +121,7 @@ Em seguida, você usará o aplicativo para adicionar um padrão de instruções - [Gerenciar issues e pull requests com o aplicativo GitHub Copilot][managing-issues-prs] [prior-lesson]: /pt-br/learning-hub/copilot-workshops/app/1-install-copilot-app/#instalar-e-configurar-o-aplicativo-github-copilot -[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/3-custom-instructions/ +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/3-agent-modes/ [agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app [managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/3-agent-modes.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/3-agent-modes.md new file mode 100644 index 000000000..23b5377f2 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/3-agent-modes.md @@ -0,0 +1,131 @@ +--- +title: "Lição 3 - Modos de agente: Plan e Autopilot" +description: "Explore os modos de agente: use Plan para definir uma abordagem, Autopilot para criar a filtragem a partir de uma issue e Interactive para revisar e verificar o resultado." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Começamos adicionando um pequeno recurso ao projeto. No entanto, alterações maiores exigem um processo mais robusto. Felizmente, o aplicativo GitHub Copilot foi desenvolvido para trabalhar com o fluxo existente de uma organização, garantindo que as soluções certas sejam criadas da maneira correta. Esta é a primeira de várias lições nas quais você seguirá um processo típico de desenvolvimento orientado por agentes: começará usando uma issue para gerar um novo recurso, garantirá que o código seja válido e que o recurso se comporte como esperado e, por fim, fará o merge dele no projeto. + +> [!NOTE] +> Você usará a mesma sessão ao longo do fluxo do recurso. Normalmente, você teria sessões ou PRs diferentes para os vários tipos de arquivo com os quais trabalharia, mas vamos simplificar para manter o foco nos conceitos principais. + +Para começar, nesta lição, você vai: + +- iniciar uma nova sessão de agente a partir de uma issue do GitHub. +- definir os requisitos no modo **Plan**. +- implementar o novo recurso usando o modo **Autopilot**. +- revisar o código. +- validar manualmente o recurso em um canvas de navegador. + +Ao continuar o desenvolvimento desse recurso, você atualizará as instruções do repositório, personalizará a skill quality-checks existente, adicionará a validação com MCP, criará um agente de QA e abrirá o PR do recurso. + +## Cenário + +O catálogo da Tailspin Toys está crescendo, e os visitantes precisam filtrar os jogos por categoria e editora. A issue do backlog descreve o recurso, mas detalhes como a combinação de categorias precisam ser definidos antes da codificação. Você usará o modo Plan para resolver essas decisões e, em seguida, autorizará uma implementação com escopo definido usando o Autopilot. + +## Contexto + +Adicionar agentes de codificação de IA ao fluxo de desenvolvimento não muda os fundamentos. Na verdade, eles se tornam ainda mais importantes! A maioria das pessoas desenvolvedoras segue um fluxo semelhante a este: + +1. Abrir uma issue registrada com detalhes sobre o que precisa ser feito. +2. Criar um plano do que precisa ser desenvolvido. +3. Desenvolver e revisar o código. +4. Executar os testes para validar o código. +5. Validar manualmente a nova funcionalidade. +6. Criar um pull request (PR). +7. Depois que o código for revisado e o processo de integração contínua for concluído com sucesso, fazer o merge do código. + +> [!NOTE] +> Os detalhes exatos variam de acordo com a equipe e a organização. No entanto, a maioria dos fluxos é uma variação do processo listado acima. + +Ao seguir essa abordagem padrão, você garante que o código gerado pela IA atenda aos requisitos definidos e passe pelo mesmo processo de avaliação que o código escrito manualmente. + +## Modos de sessão + +O **modo de sessão** controla o nível de autonomia do agente. Você pode defini-lo no menu suspenso abaixo do campo do prompt e alterá-lo a qualquer momento: + +- **Interactive**: você e o agente trabalham em conjunto. O agente sugere alterações e aguarda sua confirmação antes de continuar. +- **Plan**: o agente cria um plano primeiro. Você revisa e aprova o plano antes que o agente o execute. +- **Autopilot**: o agente trabalha com total autonomia, escrevendo código, executando testes e iterando sem aguardar sua confirmação. + +Comece no modo Plan, revise o plano e use o Autopilot para implementá-lo. + +## Iniciar uma sessão a partir da issue + +Confirme que o PR das avaliações por estrelas foi integrado e que a branch `main` local está atualizada antes de começar. + +1. Selecione **Issues** e abra **Allow users to filter games by category and publisher**. +2. Selecione **New session** e escolha uma **new working tree** baseada na `main` atualizada. + + ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) + +3. Confirme que a issue está anexada à sessão e selecione **Plan** no seletor de modo. + +## Planejar o recurso de filtragem + +O planejamento permite revisar a abordagem antes que o Copilot escreva o código. Como você começou pela issue, o Copilot já tem a solicitação do recurso como contexto. Envie: + +```plaintext +Build this feature. +``` + +Responda às perguntas do Copilot e compare o plano com os critérios de aceitação da issue. Verifique se ele abrange a filtragem por categoria e editora, controles acessíveis, alterações no acesso a dados e testes. Discuta qualquer comportamento que não esteja claro, como a forma de combinar várias categorias ou o que acontece quando nenhum jogo corresponde aos filtros. + +O plano deve incluir lint, testes de unidade, testes E2E e verificação de tipos usando as ferramentas existentes do projeto. Mantenha o foco na implementação e nos testes da filtragem; você criará o PR depois de concluir o fluxo de qualidade. Solicite alterações no plano antes de aprová-lo e mantenha à mão a URL da issue e os esclarecimentos definidos para a validação posterior. + +## Aprovar explicitamente o Autopilot + +Quando estiver satisfeito com o plano, selecione **Approve and implement with autopilot** ou a opção equivalente na sua versão. Confirme que o indicador de modo mostra **Autopilot**. + +O Copilot começará a trabalhar na implementação! Você perceberá que ele passará pelo processo de forma iterativa, seguindo o plano estabelecido, gerando código e até executando testes. + +> [!NOTE] +> A aprovação pode iniciar a implementação imediatamente, portanto, revise o plano primeiro. Se o Copilot informar dependências ausentes ou um conflito de porta, resolva o problema de configuração antes de considerar as verificações concluídas. Interrompa apenas os servidores que você iniciou. + +## Revisar e verificar a implementação + +Depois que o código for gerado, ele precisará ser revisado antes do merge, assim como qualquer outro código. Vamos revisar o código e executar o site para garantir que tudo esteja correto. + +1. Abra **Changes** e examine a implementação da filtragem e os testes. +2. Compare o resultado com a issue e os esclarecimentos aprovados, incluindo combinações de várias categorias e editoras. Verifique se as alterações seguem as instruções existentes do repositório. +3. Examine a saída de lint, testes de unidade, testes E2E e verificação de tipos. Uma verificação ignorada não conta como aprovação. +4. Resolva as falhas e execute novamente as verificações afetadas antes de aceitar a implementação. A configuração E2E do Playwright cria e serve uma versão de pré-visualização e pode reutilizar um servidor local; confirme que o servidor testado pertence a esta worktree, e não a uma lição anterior. + +## Explorar a nova funcionalidade + +O código parece correto, mas será que funciona? Vamos iniciar o aplicativo como fizemos antes e abrir o site em um canvas de navegador. + +1. Use o prompt a seguir para pedir ao Copilot que inicie o aplicativo e abra a página no canvas de navegador: + + ```plaintext + Start the app and open it in the browser canvas. + ``` + +2. Em alguns instantes, o aplicativo será iniciado e uma janela do navegador será aberta dentro do aplicativo Copilot. +3. Confirme se os cards de jogos avaliados exibem a nota de um total de cinco. +4. Quando terminar, use o prompt a seguir para pedir ao Copilot que interrompa o servidor de desenvolvimento iniciado para esta sessão: + + ```plaintext + Stop the dev server and close the browser canvas. + ``` + +## Resumo e próximos passos + +Você usou diferentes modos de agente para criar e revisar um recurso. Nesta lição, você: + +- iniciou uma nova sessão de agente a partir de uma issue do GitHub. +- definiu os requisitos no modo **Plan**. +- implementou o novo recurso usando o modo **Autopilot**. +- revisou o código. +- validou manualmente o recurso em um canvas de navegador. + +Agora, vamos explorar com mais detalhes como o código é gerado e garantir que ele siga as práticas documentadas [usando instruções personalizadas][next-lesson]. + +## Recursos + +- [Trabalhar com sessões de agente no aplicativo GitHub Copilot][agent-sessions] + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/4-custom-instructions/ +[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/3-custom-instructions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/3-custom-instructions.md deleted file mode 100644 index 59b65d0f4..000000000 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/3-custom-instructions.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "Lição 3 - Orientar o Copilot com instruções personalizadas" -description: "Use o aplicativo GitHub Copilot para adicionar ao repositório um padrão de instruções personalizadas, começando por uma issue do backlog e fazendo o merge da alteração como um pull request." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -O contexto é fundamental ao trabalhar com IA generativa. Se uma tarefa precisa ser realizada de determinada maneira ou se há informações de apoio que o Copilot deve conhecer, esse contexto precisa estar disponível. Uma das ferramentas mais eficientes para isso são os [arquivos de instruções][instruction-files], que descrevem não apenas *qual* código você deseja, mas *como* ele deve ser estruturado. Nesta lição, você adicionará um padrão de documentação ao repositório. Você fará isso da mesma forma que realizará a maior parte do trabalho daqui em diante: começando por uma issue do backlog e permitindo que o agente faça a alteração. - -Nesta lição, você vai: - -- explorar como as instruções do repositório e os arquivos de instruções com escopo de caminho chegam ao agente. -- iniciar uma sessão a partir da issue de instruções no backlog. -- pedir ao agente que adicione um padrão de documentação a `.github/copilot-instructions.md`. -- revisar a alteração e fazer o merge dela como um pull request. - -## Cenário - -Como toda boa equipe de desenvolvimento, a Tailspin Toys tem diretrizes e requisitos para as práticas de desenvolvimento. Entre eles estão: - -- A documentação deve ser adicionada ao código na forma de comentários de documentação TSDoc. -- A formatação deve ser documentada e aplicada por meio de linting. - -Com os arquivos de instruções, você garantirá que o Copilot tenha as informações certas para executar as tarefas de acordo com as práticas destacadas. - -## Arquivos de instruções - -As instruções personalizadas permitem fornecer contexto e preferências ao Copilot para que ele compreenda melhor seu estilo de programação e seus requisitos. Esse recurso ajuda a orientar o Copilot para obter sugestões e trechos de código mais relevantes. Você pode especificar convenções de código, bibliotecas e até os tipos de comentários que deseja incluir no código. É possível criar instruções para todo o repositório ou para tipos de arquivo específicos, fornecendo contexto no nível da tarefa. - -Há dois tipos de arquivos de instruções: - -- `.github/copilot-instructions.md`, um único arquivo de instruções enviado ao Copilot em **todas** as solicitações do repositório. Esse arquivo deve conter informações no nível do projeto, ou seja, contexto relevante para a maioria das solicitações enviadas ao Copilot pelo chat ou pela CLI. Isso pode incluir a pilha de tecnologias usada, uma visão geral do que está sendo criado, boas práticas e outras orientações globais. -- Os arquivos `.github/instructions/*.instructions.md` podem ser criados para tarefas ou tipos de arquivo específicos. Você pode usá-los para fornecer diretrizes para determinadas linguagens, como TypeScript ou Astro, ou para tarefas como criar um componente de interface ou um novo conjunto de testes de unidade. - -> [!NOTE] -> O Copilot também oferece suporte a outros padrões para incorporar orientações por meio de AGENTS.md, CLAUDE.md e GEMINI.md, garantindo que ele sempre tenha o contexto correto. - -### Boas práticas para gerenciar arquivos de instruções - -Uma discussão completa sobre a criação de arquivos de instruções está fora do escopo do workshop. No entanto, os exemplos fornecidos no projeto de amostra demonstram uma abordagem representativa. Em termos gerais: - -- Mantenha as instruções em `copilot-instructions.md` concentradas em orientações no nível do projeto, como uma descrição do que está sendo criado, a estrutura do projeto e os padrões globais de código. -- Use arquivos `*.instructions.md` para fornecer instruções específicas para tipos de arquivo, como testes de unidade, componentes Astro e a camada de dados, ou para tarefas específicas. -- Use linguagem natural. Mantenha as orientações claras. Forneça exemplos de como o código deve e não deve ser. - -Não existe uma única maneira correta de criar arquivos de instruções, assim como não existe uma única maneira correta de usar IA. Com a experimentação, você descobrirá o que funciona melhor para seu projeto. - -> [!TIP] -> Todo projeto que usa o GitHub Copilot deve ter uma coleção robusta de arquivos de instruções. Ao explorar os arquivos deste projeto, você perceberá que há instruções para vários tipos de arquivos de código. -> -> Procura modelos ou um ponto de partida? Explore o [awesome-copilot][awesome-copilot], um repositório repleto de arquivos de instruções, agentes personalizados e outros recursos. - -## Explorar os arquivos de instruções personalizadas deste projeto - -Reserve um momento para ler os arquivos de instruções incluídos no repositório. Há um arquivo principal `copilot-instructions.md` e uma coleção de arquivos `*.instructions.md` para várias tarefas. Abra-os no editor ou na interface Web do GitHub. - -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/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. Selecione **+** para adicionar um novo item ao painel de revisão. -3. Selecione **File**. -4. Pesquise `copilot-instructions.md`. -5. Selecione `copilot-instructions.md` na lista de arquivos para abri-lo. -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/learning-hub/copilot-workshops/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. -10. Observe as instruções específicas para criar testes de unidade neste projeto. -11. Por fim, abra `.github/instructions/drizzle.instructions.md` e role até o final. Observe os links para outros arquivos de instruções, como `unit-tests.instructions.md`, e para arquivos existentes no projeto. Isso permite dividir conjuntos maiores de instruções em arquivos menores e reutilizáveis e indicar ao Copilot exemplos a serem seguidos ao gerar código. Os caminhos ali são relativos ao arquivo de instruções, e não à raiz do repositório. - -> [!NOTE] -> A seção **Code formatting requirements** em `copilot-instructions.md` documenta os padrões de código do projeto, mas ainda não exige documentação no código. Nas próximas etapas, você adicionará regras para comentários de documentação TSDoc e cabeçalhos de comentários nos arquivos. - -## Começar pela issue de instruções - -Na lição anterior, você iniciou uma sessão com um prompt direto. No entanto, a maior parte do trabalho começa com uma issue. Vamos criar uma nova sessão com base em uma issue criada para atualizar os arquivos de instruções e depois solicitar a atualização. - -> [!NOTE] -> Como os arquivos de instruções têm grande impacto no código gerado pelo Copilot, é preciso garantir que eles orientem o Copilot com clareza. Permitir que o Copilot crie uma primeira versão, como você fará nesta lição, é uma ótima abordagem. Depois, revise o resultado para confirmar que as atualizações atendem aos requisitos. - -1. Selecione **My work** na barra lateral. -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/learning-hub/copilot-workshops/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: - - ```plaintext - Following this issue, make the updates to the instructions files in this project to meet the requirements documented. Don't create the PR quite yet! - ``` - -O Copilot fará as atualizações. - -## Revisar a alteração - -Vamos ler as atualizações feitas pelo Copilot e também pedir um exemplo do código que ele passará a gerar com base nas instruções atualizadas. - -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/learning-hub/copilot-workshops/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. - -> [!NOTE] -> Como a IA é probabilística, e não determinística, o texto exato pode variar. - -3. Use o prompt a seguir para pedir ao Copilot que crie um exemplo do código que passará a gerar: - - ```plaintext - Do not make any updates, but show me what the code would look like. Based on the new instructions, if I asked Copilot to create a new library component to return all Publishers what would that code look like? - ``` - -4. Revise o código proposto pelo Copilot. Observe os comentários de documentação TSDoc e o comentário de cabeçalho do arquivo, exatamente como solicitado pelas instruções atualizadas. - -Você atualizou os arquivos de instruções do projeto e viu o impacto que eles terão. - -## Abrir e fazer merge do pull request - -Os arquivos de instruções se tornam ativos do repositório, portanto são compartilhados com o restante da equipe. Vamos criar um PR com esse trabalho, como faríamos com qualquer outro ativo. - -1. No canto superior direito, selecione **Create PR**. -2. Se solicitado, selecione **Sign in with your browser** e siga as instruções para se autenticar. -3. O Copilot começará a criar o PR. - -Após a criação do PR, o Copilot monitorará os fluxos de trabalho do repositório que precisam ser executados. Depois de alguns instantes, o botão no canto superior direito mudará para **Ready to merge**, indicando que o PR está pronto para o merge. - -4. Selecione **Ready to merge**. -5. Na nova caixa de diálogo, selecione **Merge pull request** para fazer o merge do pull request. - -> [!NOTE] -> Depois que o padrão for integrado à branch padrão, ele fará parte do projeto para toda a equipe e para cada nova sessão. Quando você iniciar a sessão de filtragem na próxima lição a partir de uma branch padrão atualizada, o agente seguirá esse padrão automaticamente. O código TypeScript gerado incluirá comentários de documentação TSDoc sem que você precise solicitá-los, uma demonstração pequena, mas concreta, de como as instruções moldam o código gerado. - -## Resumo e próximos passos - -Você explorou como o aplicativo obtém contexto dos arquivos de instruções e usou uma sessão para adicionar e integrar um padrão para todo o repositório. Especificamente, você: - -- explorou o arquivo `copilot-instructions.md` do repositório e os arquivos `*.instructions.md` com escopo de caminho. -- iniciou uma sessão a partir da issue de instruções no backlog. -- pediu ao agente que adicionasse um padrão de documentação a `.github/copilot-instructions.md`. -- revisou a alteração e fez o merge dela como um pull request. - -Em seguida, você criará o recurso de filtragem em uma nova sessão e verá como ele adota o padrão que acabou de integrar. Continue para a [Lição 4 - Criar um recurso com o Autopilot][next-lesson]. - -## Recursos - -- [Arquivos de instruções para personalização do GitHub Copilot][instruction-files] -- [Personalizar o aplicativo GitHub Copilot][customize-app] -- [Boas práticas para criar instruções personalizadas][instructions-best-practices] -- [Awesome Copilot — uma coleção de arquivos de instruções e outros recursos][awesome-copilot] - -[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/4-build-filtering/ -[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository -[awesome-copilot]: https://awesome-copilot.github.com/ -[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support -[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md -[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/4-build-filtering.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/4-build-filtering.md deleted file mode 100644 index 0e310b209..000000000 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/4-build-filtering.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: "Lição 4 - Criar um recurso com o Autopilot" -description: "Use os modos Plan e Autopilot no aplicativo GitHub Copilot para criar um recurso estático de filtragem no lado do cliente, observar como ele herda seu padrão de documentação e verificá-lo com uma skill de agente." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Até agora, fizemos algumas pequenas atualizações no projeto. No entanto, alterações mais robustas exigem um processo mais completo. O aplicativo GitHub Copilot foi criado para trabalhar com nosso fluxo existente e ajudar a garantir que criemos as soluções certas da maneira correta. Esta é a primeira de três lições nas quais você seguirá um processo típico de desenvolvimento, começando por usar uma issue para gerar um novo recurso e uma skill de agente para executar os testes de validação e os linters. - -Nesta lição, você vai: - -- iniciar uma nova sessão a partir da issue de filtragem. -- usar o modo **Plan** para planejar o recurso e depois o **Autopilot** para criá-lo. -- confirmar que o código gerado segue o padrão de documentação integrado anteriormente. -- verificar o trabalho com a skill `quality-checks` do projeto. - -## Cenário - -A página inicial lista todos os jogos, mas os visitantes não conseguem restringir a lista. A issue de filtragem solicita que eles possam filtrar jogos por **categoria** e **distribuidora**. Vamos usar o Copilot para implementar essa funcionalidade. - -## Contexto - -Introduzir agentes de programação com IA no fluxo de desenvolvimento não muda os fundamentos. Na verdade, eles se tornam ainda mais importantes. A maioria das pessoas desenvolvedoras segue um fluxo semelhante a este: - -1. Abrir uma issue com os detalhes do que precisa ser feito. -2. Criar um plano do que precisa ser desenvolvido. -3. Criar e revisar o código. -4. Executar os testes para validar o código. -5. Validar manualmente a nova funcionalidade. -6. Criar um pull request (PR). -7. Depois que o código for revisado e o processo de integração contínua for concluído com êxito, fazer o merge do código. - -> [!NOTE] -> Os detalhes exatos variam de acordo com sua equipe e organização, mas a maioria dos fluxos será uma variação do processo descrito acima. - -Ao seguir essa abordagem padrão, você garante que o código gerado por IA atenda aos requisitos definidos e passe pelo mesmo processo de avaliação do código escrito manualmente. - -## Modos de sessão - -O **modo de sessão** controla o grau de autonomia do agente. Você pode defini-lo no menu suspenso abaixo do campo de prompt e alterá-lo a qualquer momento: - -- **Interactive**: você e o agente trabalham em conjunto. O agente sugere alterações e aguarda sua orientação antes de prosseguir. -- **Plan**: o agente cria primeiro um plano. Você revisa e aprova o plano antes que o agente o execute. -- **Autopilot**: o agente trabalha com total autonomia, escrevendo código, executando testes e iterando sem aguardar sua orientação. - -## Planejar o recurso de filtragem - -O melhor momento para detectar um possível problema é antes que qualquer código seja escrito, e a melhor maneira de fazer isso é planejar com antecedência. Ao planejar com o Copilot, você pedirá que ele gere um conjunto de etapas e documente a abordagem que seguirá. Em seguida, poderá revisar o plano e fazer sugestões para melhorá-lo antes de permitir que o Copilot gere o código com base nele. - -Vamos abrir a issue, iniciar uma nova sessão e criar um plano alternando para o modo Plan e fazendo a solicitação. - -1. Selecione **My work** na aba de navegaçã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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/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: - - ```plaintext - Plan the work based on the requirements documented in the issue. Please ask any clarifying questions you might have as you build the plan. - ``` - -6. O agente pode fazer perguntas complementares enquanto cria o plano. Responda com base em como você criaria o recurso. - -> [!NOTE] -> Como o Copilot é probabilístico, as perguntas complementares exatas podem variar. Na verdade, ele pode não fazer nenhuma pergunta. Isso é perfeitamente normal. - -7. Ao terminar, o Copilot apresentará um resumo do plano. Revise-o. Ele deve propor a criação de consultas, a adição de controles de filtro e, naturalmente, testes. Se desejar, forneça feedback para refiná-lo. O agente incorporará suas sugestões em uma nova versão. - -## Criar com o Autopilot - -Com o plano pronto, vamos permitir que o Copilot crie a implementação. - -1. Na lista de opções da caixa de diálogo **Plan summary**, selecione a opção mais próxima de **Approve and implement with autopilot**. - -O Copilot começará a trabalhar na implementação. - -> [!NOTE] -> Se o Copilot não começar a criar automaticamente o código necessário, você poderá solicitar isso com um prompt como "Go ahead and start building out the plan!". -> -> A criação das atualizações necessárias levará vários minutos. O agente edita e cria arquivos, escreve e executa testes e faz iterações. Este é um bom momento para refletir sobre o que você explorou até agora ou fazer uma pausa. - -## Revisar as alterações - -Todo código gerado por IA precisa ser revisado antes do merge. Vamos revisar o código e executar o site para confirmar que tudo está correto. - -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/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/app-terminal-screenshot.png) - -4. Digite o comando a seguir na janela do terminal para iniciar o servidor de desenvolvimento do aplicativo Web: - - ```shell - npm run dev - ``` - -5. Quando o servidor iniciar, o que levará apenas alguns instantes, abra uma janela do navegador. -6. Acesse http://localhost:4321. -7. Agora você deve ver filtros disponíveis na página inicial. -8. Se algo não estiver correto, peça ao Copilot que faça as atualizações. -9. Quando estiver tudo certo, volte à janela do terminal. -10. Selecione Ctrl+C para interromper o servidor de desenvolvimento. - -## Verificar o trabalho com a skill quality-checks - -Você poderia apenas examinar o diff e considerar o trabalho concluído, mas a equipe definiu um padrão de qualidade e uma maneira repetível de verificá-lo. - -As **skills de agente** permitem fornecer ao Copilot orientações sobre como executar tarefas repetíveis, como executar testes, gerar builds ou criar pull requests. Uma skill é uma pasta de instruções, scripts e recursos que o agente pode carregar sob demanda. [Agent Skills é um padrão aberto][agent-skills-repo] usado por vários agentes. Por isso, a mesma skill funciona no Copilot Chat em modo de agente, no agente de nuvem do Copilot, no Copilot CLI e no aplicativo GitHub Copilot. - -As skills ficam na pasta `.github/skills` de um projeto ou globalmente em `~/.copilot/skills`. Cada skill é uma pasta que contém um arquivo `SKILL.md` com frontmatter YAML, formado por `name` e `description`, seguido pelas instruções em Markdown: - -```yaml ---- -name: quality-checks -description: Run the project's test suites and linter to verify code changes are ready to commit, push, or merge. ---- -``` - -As skills também podem incluir subpastas com scripts, ativos e materiais de referência. A estrutura completa é descrita na [especificação de skills de agente][agent-skills-spec]. - -> [!TIP] -> As skills são carregadas dinamicamente. O agente decide qual skill se aplica com base no campo `description`. Uma descrição clara e específica para o cenário é o que diferencia uma skill usada de uma ignorada. - -## Explorar a skill quality-checks - -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/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. Selecione **+** para adicionar um novo item ao painel de revisão. -3. Selecione **File**. -4. Pesquise `SKILL.md`. -5. Selecione `SKILL.md .github/skills/quality-checks` na lista de arquivos para abri-lo. -6. Observe `name` e `description`. A descrição informa ao agente *quando* usar a skill: sempre que alterações no código precisarem ser testadas, verificadas por lint ou validadas antes de um commit, push ou merge. -7. Leia a skill. Observe que ela documenta qual script executa cada conjunto, como testes de unidade, testes de ponta a ponta do Playwright e ESLint, em que ordem e como depurar falhas comuns. Assim, o agente executa as verificações da maneira definida pela equipe, em vez de tentar adivinhar. - -## Executar as verificações - -Na mesma sessão de filtragem, peça ao agente que verifique o trabalho. Você não precisará nomear a skill, pois o agente a associará à sua solicitação. - -1. Volte ao aplicativo Copilot. -2. Chame diretamente a skill usando o comando de barra `/quality-checks` e selecione Enter. -3. Seguindo a skill, o agente executa os testes de unidade, o linter e os testes de ponta a ponta e relata os resultados. Se algo falhar, peça que ele corrija o problema e execute novamente as verificações até que tudo passe. -4. **Mantenha esta sessão aberta.** Na próxima lição, você adicionará o servidor MCP do Playwright e o usará para ver o recurso de filtragem funcionando em um navegador real. - -## Resumo e próximos passos - -Você criou um recurso real de ponta a ponta e o verificou de acordo com o padrão da equipe. Especificamente, você: - -- iniciou uma nova sessão a partir da issue de filtragem em um projeto atualizado. -- usou o modo Plan para planejar o recurso e o Autopilot para criá-lo. -- confirmou que o código auxiliar gerado seguiu o padrão de documentação integrado na Lição 3. -- verificou o trabalho com a skill `quality-checks`. - -Em seguida, você conectará o servidor MCP do Playwright e pedirá ao agente que explore o recurso de filtragem em um navegador real. Continue para a [Lição 5 - Testar com o servidor MCP do Playwright][next-lesson]. - -## Recursos - -- [Trabalhar com sessões de agente no aplicativo GitHub Copilot][agent-sessions] -- [Sobre Agent Skills][about-agent-skills] -- [Personalizar o aplicativo GitHub Copilot][customize-app] -- [Sobre sandboxes locais e na nuvem para o GitHub Copilot][sandboxes] - -[ex0]: /pt-br/learning-hub/copilot-workshops/app/0-prerequisites/ -[ex2]: /pt-br/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /pt-br/learning-hub/copilot-workshops/app/3-custom-instructions/ -[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions -[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[agent-skills-repo]: https://github.com/agentskills/agentskills -[agent-skills-spec]: https://agentskills.io/specification \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/4-custom-instructions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/4-custom-instructions.md new file mode 100644 index 000000000..8a065b546 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/4-custom-instructions.md @@ -0,0 +1,121 @@ +--- +title: "Lição 4 - Orientar o Copilot com instruções personalizadas" +description: "Explore as instruções do repositório, adicione um padrão de documentação e aplique-o ao código de filtragem." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +O contexto é fundamental ao trabalhar com IA generativa. Se uma tarefa precisar ser realizada de uma forma específica, essas orientações devem estar disponíveis para o Copilot. Os [arquivos de instruções][instruction-files] descrevem não apenas *qual* código você quer, mas também *como* ele deve ser estruturado. Agora que você criou a filtragem, explorará as instruções usadas pelo Copilot, adicionará um padrão de documentação e o aplicará ao código. + +Nesta lição, você vai: + +- explorar como as instruções do repositório e os arquivos de instruções com escopo de caminho chegam ao agente. +- atualizar o arquivo de instruções para garantir que os padrões de codificação sejam seguidos. +- observar o impacto dos arquivos de instruções no código. + +## Cenário + +Como toda boa equipe de desenvolvimento, a Tailspin Toys tem um conjunto de diretrizes e requisitos para as práticas de desenvolvimento. Entre eles: + +- Os comentários devem explicar a intenção e as decisões que não são óbvias, em vez de apenas repetir o código. +- As funções exportadas em `db/` e `src/lib/` devem documentar finalidade, parâmetros e valores retornados com TSDoc/JSDoc, incluindo um argumento `db` injetável quando houver. +- Os componentes reutilizáveis do Astro devem documentar seus contratos `Props`, e os comentários devem permanecer atualizados quando o código relacionado for alterado. +- As orientações existentes de formatação e lint devem ser preservadas. + +Com os arquivos de instruções, você garantirá que o Copilot tenha as informações certas para executar as tarefas de acordo com as práticas destacadas. + +## Arquivos de instruções + +As instruções personalizadas fornecem contexto e preferências ao Copilot para que ele entenda melhor seu estilo de codificação e seus requisitos. Esse recurso avançado ajuda a orientar o Copilot para que ele ofereça sugestões e trechos de código mais relevantes. Você pode especificar convenções de codificação e bibliotecas preferenciais e até mesmo os tipos de comentários que deseja incluir no código. É possível criar instruções para todo o repositório ou para tipos específicos de arquivo como contexto da tarefa. + +Há dois tipos de arquivos de instruções: + +- `.github/copilot-instructions.md`, um único arquivo de instruções enviado ao Copilot em **todas** as solicitações do repositório. Esse arquivo deve conter informações do projeto, ou seja, um contexto relevante para a maioria das solicitações enviadas ao Copilot pelo chat ou pela CLI. Isso pode incluir a pilha de tecnologia usada, uma visão geral do que está sendo criado, práticas recomendadas e outras orientações globais. +- Os arquivos `.github/instructions/*.instructions.md` podem ser criados para tarefas ou tipos de arquivo específicos. Você pode usá-los para fornecer diretrizes para determinadas linguagens, como TypeScript ou Astro, ou para tarefas como criar um componente de interface ou um novo conjunto de testes de unidade. + +> [!NOTE] +> Outros formatos de instruções e o suporte a eles variam de acordo com o ambiente. Consulte a [referência de suporte a instruções personalizadas][custom-instructions-support] antes de depender de um formato específico. + +## Explorar os arquivos de instruções personalizadas deste projeto + +Para facilitar o início, o projeto inicial já inclui um conjunto de arquivos de instruções. Vamos explorar o que já existe antes de fazer uma alteração e observar seu impacto. + +1. Volte à sessão da lição anterior. +2. 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/learning-hub/copilot-workshops/app-2-review-panel.png) + +3. Selecione o ícone **+** para "Open in panel" e abrir um novo canvas. +4. Selecione **Files**. +5. Selecione o ícone **Gear** e verifique se há uma marca ao lado de **Show hidden files**. +6. Acesse `.github/copilot-instructions.md`. +7. Explore o arquivo e observe a breve descrição do projeto, além de seções como **Agent notes**, **Code standards**, **Scripts** e **Repository Structure**. Em **Code standards**, observe as orientações aninhadas de **GitHub Actions Workflows**. Elas se aplicam a todas as interações com o Copilot. +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. Neste caso, qualquer arquivo de teste TypeScript, por exemplo, um que corresponda a `**/*.test.ts`, será incluído. +10. Observe as instruções específicas para a criação de testes de unidade neste projeto. +11. Por fim, abra `.github/instructions/drizzle.instructions.md` e role até o final. Observe os links para outros arquivos de instruções, como `unit-tests.instructions.md`, e para arquivos existentes no projeto. Isso permite dividir conjuntos maiores de instruções em arquivos menores e reutilizáveis e indicar ao Copilot exemplos a serem seguidos durante a geração de código. Os caminhos nesse arquivo são relativos ao arquivo de instruções, e não à raiz do repositório. + +## Atualizar os arquivos de instruções de acordo com as orientações da equipe + +Embora os arquivos existentes sejam um bom começo, ainda há algumas lacunas. Vamos modificar o arquivo principal `copilot-instructions.md` para garantir que [comentários TSDoc][tsdoc] sejam adicionados a todos os novos arquivos TypeScript gerados. + +> [!NOTE] +> Como os arquivos de instruções têm grande impacto sobre o código gerado pelo Copilot, verifique com cuidado se eles fornecem orientações claras. Você pode pedir ao Copilot que crie uma primeira versão e depois revisá-la para confirmar se as atualizações atendem aos requisitos. Também pode consultar uma [coleção de arquivos de instruções no Awesome Copilot][awesome-copilot], que serve como um ótimo ponto de partida. + +1. No mesmo canvas de arquivos, acesse `.github/copilot-instructions.md`. +2. Localize o cabeçalho **Code formatting requirements**, aproximadamente no meio do arquivo. +3. Adicione o seguinte como o último item abaixo desse cabeçalho: + + ```plaintext + All new TypeScript should contain TSDocs comments for documentation purposes. + ``` + +O arquivo é salvo automaticamente e está pronto para uso! + +## Usar as orientações atualizadas + +Com o arquivo de instruções atualizado, vamos observar seu impacto sobre o código gerado pelo Copilot, pedindo que ele revise a atualização e faça as alterações necessárias. + +> [!NOTE] +> Vamos instruir explicitamente o Copilot a usar o arquivo de instruções porque acabamos de alterá-lo. Ao criar código quando os arquivos de instruções já existem, o Copilot os usa automaticamente, sem que você precise solicitar. + +1. Use um prompt para pedir ao Copilot que aplique os arquivos de instruções ao código e o atualize de acordo com os novos requisitos: + + ```plaintext + We just updated our instructions and code guidance. Can you please update the code you generated to match that guidance? + ``` + +2. Selecione **Changes** no canto superior direito para abrir as alterações de código. + + ![Guias do painel de sessão no aplicativo GitHub Copilot com uma seta apontando para a guia Changes](/images/learning-hub/copilot-workshops/app-select-changes.png) + +3. Examine os arquivos TypeScript. Observe os comentários TSDoc recém-gerados. + +## Resumo e próximos passos + +Você explorou como o aplicativo obtém contexto dos arquivos de instruções e aplicou um novo padrão ao recurso. Especificamente, você: + +- explorou o arquivo `copilot-instructions.md` do repositório e os arquivos `*.instructions.md` com escopo de caminho. +- atualizou o arquivo de instruções para garantir que os padrões de codificação sejam seguidos. +- observou o impacto dos arquivos de instruções no código gerado. + +Em seguida, você [personalizará e executará a skill reutilizável quality-checks][next-lesson] para garantir que lint e testes sejam executados de forma consistente. + +## Recursos + +- [Arquivos de instruções para personalização do GitHub Copilot][instruction-files] +- [Personalizar o aplicativo GitHub Copilot][customize-app] +- [Práticas recomendadas para criar instruções personalizadas][instructions-best-practices] +- [Awesome Copilot — uma coleção de arquivos de instruções e outros recursos][awesome-copilot] + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/5-agent-skills/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[instructions-best-practices]: https://docs.github.com/copilot/concepts/prompting/response-customization#writing-effective-custom-instructions +[awesome-copilot]: https://awesome-copilot.github.com/ +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +[tsdoc]: https://tsdoc.org/ +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/5-agent-skills.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/5-agent-skills.md new file mode 100644 index 000000000..ce2a2b332 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/5-agent-skills.md @@ -0,0 +1,110 @@ +--- +title: "Lição 5 - Personalizar e usar uma skill quality-checks" +description: "Explore a skill quality-checks existente, personalize o formato do relatório e use-a para validar a filtragem." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Escrever código envolve mais do que apenas escrever código. Conseguimos validar manualmente que o código funciona e usamos arquivos de instruções para garantir que ele siga nossos padrões. Mas e os testes? O lint? Todas as outras partes da integração contínua (CI)? + +Para esses tipos de tarefa, as **skills de agente** são a melhor opção! As skills ajudam o Copilot a entender como executar corretamente operações como essas. + +Nesta lição, você vai: + +- explorar a skill `quality-checks` existente. +- personalizar o formato dos resultados. +- executar a skill e revisar sua saída. + +## Cenário + +A Tailspin Toys usa a skill `quality-checks` para testes de unidade, lint e verificações de tipos. A equipe quer melhorar o relatório para facilitar a leitura dos resultados. + +## Instruções, scripts e recursos + +As skills de agente reúnem instruções de tarefas reutilizáveis, scripts executáveis e recursos de apoio que um agente carrega sob demanda. Em sua essência, elas são uma pasta com o nome da skill e um arquivo Markdown chamado `SKILL.md`. O Markdown contém um frontmatter com nome e descrição para definir a skill, uma visão geral do que ela faz e orientações sobre quando deve ser chamada. A pasta também pode conter subpastas com scripts e outros recursos que a skill pode usar quando for chamada. + +> [!NOTE] +> Pastas e arquivos adicionais não são obrigatórios para uma skill! Em nosso exemplo, a skill executará comandos `npm` para rodar testes e linters. Portanto, não precisamos de arquivos de apoio adicionais. + +As skills podem ficar na pasta `.github/skills` de um projeto para se tornarem um recurso do repositório compartilhado e reutilizado pelo restante da equipe ou na pasta raiz do Copilot, normalmente `~/.copilot/skills`. + +## Explorar a skill + +Vamos explorar a skill criada pela equipe da Tailspin Toys para executar testes de unidade, lint e verificações de tipos, chamada `quality-checks`. + +1. Se você ainda não tiver um canvas de **Files** aberto, selecione **+** no painel de revisão e depois **File**. +2. Pesquise `.github/skills/quality-checks/SKILL.md`. +3. Leia `name` e `description` na parte superior. Observe a descrição, que ajuda o Copilot a entender quando chamar a skill. +4. Leia as instruções e observe como elas orientam o Copilot pelo processo de testes e lint. + +## Executar a skill antes de fazer uma alteração + +As skills podem ser chamadas diretamente com um comando de barra (`/`) ou por meio de linguagem natural. Vamos pedir ao Copilot que execute as três verificações da skill. + +1. Confirme que o Copilot está no modo **Interactive**, selecionando-o no menu suspenso de modo. +2. Use o prompt a seguir para chamar a skill: + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. Observe o relatório ao final. + +## Personalizar o relatório + +Queremos um relatório melhor, que mostre o que foi executado, se teve sucesso e o que as ferramentas realmente informaram. Vamos atualizar a skill para criar esse relatório! + +1. Volte ao canvas de **Files**. +2. Se ainda não estiver aberto, abra `.github/skills/quality-checks/SKILL.md`. +3. Adicione a seção a seguir ao final do arquivo: + + ```markdown + ## Results output formatting + + Upon completion, report each command that ran and whether it passed, failed, or was blocked. Include test counts, durations, errors, warnings, and other metrics only when the tool reports them. Identify the next action for any failure or blocker, and never describe a skipped or incomplete check as passed. + ``` + +O arquivo será salvo automaticamente. + +## Executar a skill atualizada + +Com a alteração feita, vamos vê-la em ação! Usaremos exatamente o mesmo prompt de antes. + +1. Confirme que o Copilot está no modo **Interactive**, selecionando-o no menu suspenso de modo. +2. Use o prompt a seguir para chamar a skill: + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. Observe o relatório ao final. + +## Resumo e próximos passos + +Você personalizou e usou uma skill de agente existente. Nesta lição, você: + +- explorou a skill `quality-checks` para testes de unidade, lint e verificações de tipos. +- personalizou o formato dos resultados. +- executou a skill e revisou sua saída. + +Essa alteração acompanhará a filtragem no PR do recurso. Em seguida, você permitirá que o Copilot interaja diretamente com o site [por meio do servidor MCP do Playwright][next-lesson]. + +## Mais exemplos de skills + +Estes exemplos da comunidade são referências, não tarefas adicionais. Revise seus pré-requisitos e comportamento antes de adotá-los: + +- [Especificação de Agent Skills][skill-spec]. +- [Fluxo de contribuição: `make-repo-contribution`][contribution-example]. +- [Documentos de requisitos: `prd`][prd-example]. +- [Diagramas e um script de exportação incluído: `drawio`][drawio-example]. +- [Testes de navegador: `webapp-testing`][browser-example]. + +O exemplo original de contribuição se chama `make-repo-contribution`; modelos antigos do Tailspin usavam outro nome, `make-contribution`. Este workshop não depende de nenhuma dessas skills de contribuição. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[skill-spec]: https://agentskills.io/specification +[contribution-example]: https://github.com/github/awesome-copilot/tree/main/skills/make-repo-contribution +[prd-example]: https://github.com/github/awesome-copilot/tree/main/skills/prd +[drawio-example]: https://github.com/github/awesome-copilot/tree/main/skills/drawio +[browser-example]: https://github.com/github/awesome-copilot/tree/main/skills/webapp-testing diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/6-agent-merge.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/6-agent-merge.md deleted file mode 100644 index 705717d76..000000000 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/6-agent-merge.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "Lição 6 - Fazer merge com o Agent Merge" -description: "Abra o pull request de filtragem, revise-o em My work e permita que o Agent Merge corrija o que estiver bloqueando e faça o merge para você, no nível mais alto da automação de merge." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -O recurso de filtragem está criado, verificado e funcionando em um navegador. A última etapa é fazer o merge. Você já fez isso duas vezes neste percurso. Nas duas ocasiões, abriu o pull request e fez o merge por conta própria no github.com. Desta vez, o aplicativo fará o trabalho operacional com o **Agent Merge**, que conduz todo o ciclo de vida de um pull request dentro do aplicativo. - -Nesta lição, você vai: - -- aprender o que é o Agent Merge e como ele automatiza o ciclo de vida do merge. -- habilitar o Agent Merge na sessão de filtragem. -- observar como ele cria o pull request, executa a CI e faz o merge quando todas as verificações passam. - -## Cenário - -Nos últimos módulos, você explorou vários níveis de automação, desde a criação de código até permitir que o Copilot valide diretamente uma interface. Para acelerar ainda mais o desenvolvimento, a Tailspin Toys quer descobrir se pull requests já avaliados e validados podem ter o merge feito automaticamente. - -## Apresentação do Agent Merge - -O **Agent Merge** permite automatizar a etapa final de integração de um pull request por meio do aplicativo Copilot. Quando você o habilita, a sessão do aplicativo lê o pull request, resolve o que estiver bloqueando o merge, como verificações de CI com falha, comentários de revisão e a necessidade de rebase, e faz o merge assim que o GitHub permite. Ele é executado em segundo plano, continua funcionando após reinicializações do aplicativo e é desativado automaticamente quando o pull request é integrado. - -Até aqui, você selecionou **Merge pull request** no github.com. O Agent Merge transfere essa responsabilidade ao agente, permitindo que você passe para a próxima tarefa enquanto ele conduz o PR até a conclusão. Você ainda revisa e aprova o trabalho; o agente apenas cuida das etapas operacionais finais. - -## Usar o Agent Merge para gerenciar o PR - -Você revisou o código manualmente, executou testes e permitiu que o Copilot validasse a interface. Agora é hora de integrar o novo código à base de código. Vamos permitir que o Agent Merge conduza o PR pela integração contínua (CI) e faça o merge. - -1. Volte à sessão mantida aberta no módulo anterior, na qual você estava adicionando a funcionalidade de filtragem. -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/learning-hub/copilot-workshops/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. - -O aplicativo Copilot começará a criar e gerenciar o PR. Primeiro, ele explora o projeto para determinar a melhor maneira de criar um PR e depois cria o novo PR. - -Após alguns instantes, você verá que o Copilot voltou a trabalhar, agora analisando as condições do PR, incluindo o processo de CI que executa todos os testes do repositório. Ele informará o status das revisões deixadas por outras pessoas da equipe, das verificações que precisam ser executadas e da possibilidade de fazer o merge do PR. - -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/learning-hub/copilot-workshops/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. - -## Resumo e próximos passos - -Você automatizou várias partes do processo de desenvolvimento, incluindo a geração, o teste e a validação de código e, agora, o processo de pull request. Você: - -- aprendeu o que é o Agent Merge e como ele automatiza o ciclo de vida do merge. -- habilitou o Agent Merge na sessão de filtragem. -- observou como ele criou o pull request, executou a CI e fez o merge quando todas as verificações passaram. - -Em seguida, você explorará **canvases**, uma maneira mais completa de planejar e visualizar o trabalho com o agente. Continue para a [Lição 7 - Planejar com canvases][next-lesson]. - -## Recursos - -- [Gerenciar issues e pull requests com o aplicativo GitHub Copilot][managing-issues-prs] -- [Sobre o aplicativo GitHub Copilot][about-copilot-app] - -[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/7-canvases/ -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/5-mcp-playwright.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/6-mcp-playwright.md similarity index 51% rename from website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/5-mcp-playwright.md rename to website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/6-mcp-playwright.md index caace4077..b688aad35 100644 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/5-mcp-playwright.md +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/6-mcp-playwright.md @@ -1,17 +1,17 @@ --- -title: "Lição 5 - Testar com o servidor MCP do Playwright" -description: "Adicione o servidor MCP do Playwright ao aplicativo GitHub Copilot e peça ao agente que teste manualmente o recurso de filtragem em um navegador real." +title: "Lição 6 - Validar a funcionalidade com o MCP do Playwright" +description: "Configure o MCP do Playwright pelo Customize e observe a filtragem no navegador, no worktree existente do recurso." authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -Na lição anterior, você criou e verificou o recurso de filtragem com o conjunto de testes automatizados do projeto. Os testes automatizam a validação do código, mas permitir que o agente confirme o comportamento é uma abordagem eficiente. Assim, o agente pode responder a problemas identificados na própria interface que está criando. Vamos explorar como o MCP dá aos agentes de IA acesso a recursos externos e adicionar o servidor MCP do Playwright para permitir que o Copilot interaja diretamente com o site que você está desenvolvendo. +Como já destacamos, escrever código envolve mais do que apenas escrever código. Precisamos trabalhar com dados e serviços externos e até disponibilizar automações adicionais ao Copilot. É aí que entram os servidores MCP. Eles permitem que o Copilot vá além do que está integrado ao aplicativo, oferecendo ainda mais ferramentas e serviços. Nesta lição, você vai: - entender o que é o Model Context Protocol (MCP) e como o aplicativo GitHub Copilot o utiliza. -- adicionar o servidor MCP do Playwright nas configurações do aplicativo. +- adicionar o servidor MCP do Playwright. - pedir ao agente que controle um navegador e explore o recurso de filtragem. ## Cenário @@ -20,7 +20,7 @@ Embora os testes de unidade e de ponta a ponta sejam importantes, validar atuali ## O que é o Model Context Protocol (MCP)? -O [Model Context Protocol (MCP)][mcp-blog-post] oferece aos agentes de IA uma forma de se comunicar com ferramentas e serviços externos em tempo real. Isso permite que eles acessem informações atualizadas, usando recursos, e realizem ações em seu nome, usando ferramentas. +O [Model Context Protocol (MCP)][mcp-blog-post] oferece aos agentes de IA uma forma de se comunicar com ferramentas e serviços externos. Com o MCP, os agentes de IA podem se comunicar com essas ferramentas e serviços em tempo real. Isso permite que eles acessem informações atualizadas, usando recursos, e realizem ações em seu nome, usando ferramentas. Essas ferramentas e esses recursos são acessados por meio de um servidor MCP, que funciona como uma ponte entre o agente de IA e as ferramentas e os serviços externos. O servidor MCP é responsável por gerenciar essa comunicação, seja com APIs existentes ou com ferramentas locais, como pacotes NPM. Cada servidor MCP representa um conjunto diferente de ferramentas e recursos que o agente de IA pode acessar. @@ -36,43 +36,42 @@ Há muitos outros servidores MCP que fornecem acesso a diferentes ferramentas e ## Adicionar o servidor MCP do Playwright -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. +Você gerencia os servidores MCP por meio de **Customize** na barra lateral. Servidores configurados para seus repositórios ou para o Copilot CLI já podem estar disponíveis no aplicativo, então verifique antes de adicionar um duplicado. A [documentação de personalização do aplicativo][customize-app] apresenta as opções disponíveis. -1. Selecione Ctrl+, 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**. -5. Selecione **Add server** para adicioná-lo à lista de servidores MCP disponíveis. -6. Selecione Esc para fechar a caixa de diálogo de configurações. +1. Selecione **Customize** na barra lateral. +2. Selecione **MCP** e verifique em **Installed** se já existe um servidor Playwright. +3. Se necessário, encontre **Playwright** entre os servidores disponíveis ou use o fluxo de servidor personalizado documentado pelo publicador. +4. Revise o publicador, a configuração e as solicitações de instalação antes de aprová-las. Siga as instruções para adicionar o servidor; políticas da organização ou pré-requisitos ausentes podem bloquear a configuração. +5. Volte à sessão de filtragem no modo **Interactive** e confirme que as ferramentas MCP do Playwright estão disponíveis. -Você adicionou o servidor MCP do Playwright. +Se a configuração falhar, resolva o problema de configuração ou permissão antes de continuar. ## Pedir ao Copilot que explore o recurso com o Playwright -Vamos pedir ao Copilot que teste manualmente o recurso usando o servidor MCP do Playwright. +A issue e suas decisões de planejamento já estão no contexto. Interrompa qualquer servidor de desenvolvimento iniciado anteriormente antes de pedir ao Copilot que inicie um. 1. Use o prompt a seguir para pedir ao Copilot que valide a nova funcionalidade: - ```plaintext - Start the dev server then use the Playwright MCP server to validate the functionality you just added exists. Use the details in the issue to ensure the newly added behavior matches the specs. - ``` + ```plaintext + Start the app and use Playwright MCP to check filtering against the issue and our plan. Tell me what works and what doesn't, without making changes. Stop the server you started when you're done. + ``` -O Copilot iniciará um navegador por meio do servidor MCP do Playwright, percorrerá cada etapa e relatará o que encontrou. Você verá um navegador ser aberto no sistema para executar as tarefas. +> [!NOTE] +> Você não precisa dizer ao Copilot para usar um servidor MCP específico; normalmente, ele encontrará o servidor adequado com base no contexto atual. No entanto, não há problema em informar ao Copilot algo que você considera importante. -2. Leia o resumo e compare-o aos critérios de aceitação da issue. Se algo parecer incorreto, faça perguntas complementares ou peça que o agente corrija o código antes de abrir um pull request. -3. Mantenha esta sessão aberta, pois vamos concluí-la na próxima lição. +2. Acompanhe o processo! -O Copilot também validou a funcionalidade no navegador, explorando o recurso como uma pessoa usuária faria. +O Copilot iniciará o servidor, abrirá um navegador e interagirá com o site! Ao terminar, ele interromperá o servidor e apresentará um relatório. ## Resumo e próximos passos Parabéns! Você usou o servidor MCP do Playwright para explorar o recurso em um navegador real a partir do aplicativo GitHub Copilot. Recapitulando, você: -- aprendeu o que é o Model Context Protocol (MCP) e como o aplicativo disponibiliza ferramentas MCP. -- adicionou o servidor MCP do Playwright nas configurações do aplicativo. +- aprendeu o que é o Model Context Protocol (MCP) e como o aplicativo GitHub Copilot o utiliza. +- adicionou o servidor MCP do Playwright. - pediu ao agente que controlasse um navegador e explorasse o recurso de filtragem. -O recurso está criado, verificado e funcionando. Agora é hora de entregá-lo usando o **Agent Merge** para abrir e fazer o merge do pull request. Continue para a [Lição 6 - Fazer merge com o Agent Merge][next-lesson]. +Em seguida, você [criará um agente personalizado de QA][next-lesson] que reúne a skill e as ferramentas de navegador em um papel especializado. ## Recursos @@ -80,7 +79,7 @@ O recurso está criado, verificado e funcionando. Agora é hora de entregá-lo u - [Servidor MCP do Microsoft Playwright][playwright-mcp-server] - [Configurar servidores MCP no aplicativo GitHub Copilot][customize-app] -[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/6-agent-merge/ +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/7-qa-agent/ [mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ [playwright-mcp-server]: https://github.com/microsoft/playwright-mcp [customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/7-canvases.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/7-canvases.md deleted file mode 100644 index 4bd5e1769..000000000 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/7-canvases.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: "Lição 7 - Planejar com canvases" -description: "Crie um canvas compartilhado e orientado por agentes no aplicativo GitHub Copilot para planejar e acompanhar seu trabalho junto com o agente." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Até agora, você orientou agentes pelo chat. No entanto, grande parte do trabalho não acontece em uma conversa, mas em um quadro, documento ou checklist. Os **canvases** oferecem a você e ao agente uma superfície compartilhada exatamente para esse tipo de trabalho, dentro do aplicativo. Nesta lição, você criará um canvas simples para planejar e acompanhar o backlog no qual vem trabalhando. - -Nesta lição, você vai: - -- entender o que é um canvas e quando usá-lo. -- criar um canvas compartilhado de quadro Kanban para fazer a triagem do backlog. -- salvar o canvas no repositório e integrá-lo para a equipe. -- abrir o canvas em uma nova sessão e começar a trabalhar a partir dele. - -## Cenário - -Analisar uma lista de issues pode ser uma tarefa desafiadora, mesmo nas melhores condições. As pessoas desenvolvedoras da Tailspin Toys procuram uma ferramenta que permita fazer rapidamente a triagem de issues e começar a trabalhar nelas no aplicativo Copilot. - -## O que é um canvas? - -Um [canvas][canvas-docs] é uma superfície interativa e compartilhada para um artefato de trabalho, como um plano, um quadro de triagem, um checklist de lançamento, um painel ou um documento. Embora o chat seja ótimo para descrever intenções e analisar ambiguidades, a maior parte do trabalho acontece em uma *superfície*. Os canvases permitem colaborar com o agente diretamente nessa superfície. - -Os canvases são **bidirecionais**: o agente pode atualizar o canvas enquanto trabalha, e você pode editar a mesma superfície. Quando você cria um canvas, o agente o desenvolve com base no prompt e no fluxo de trabalho. Você pode pedir que ele adicione, remova ou revise recursos durante o processo. Depois de criado, o canvas é aberto no painel direito do aplicativo. - -Alguns exemplos comuns incluem: - -- **Canvases Markdown** para planejar o dia e priorizar issues e pull requests. -- **Quadros Kanban agênticos** nos quais pessoas e agentes adicionam cards e movem o trabalho entre colunas. -- **Quadros de triagem de issues** que resumem as principais issues e os temas recorrentes de um repositório. - -## Por que usar um canvas? - -Use um canvas quando uma tarefa exigir estrutura, iteração e verificação e o chat não for suficiente. Um canvas permite: - -- fundamentar o trabalho do agente em um artefato real adequado ao seu fluxo de trabalho. -- orientar ou corrigir o trabalho diretamente na superfície compartilhada e depois permitir que o agente continue a partir das suas alterações. -- acompanhar o progresso como alterações visíveis em um artefato, e não apenas como respostas no chat. - -## Criar um canvas para acompanhar o trabalho - -Você já entregou muitos recursos: a avaliação por estrelas, o padrão de documentação e o recurso de filtragem foram integrados. No entanto, ainda há itens no backlog. Vamos criar um canvas para ajudar a fazer rapidamente a triagem do trabalho. - -1. Volte ao aplicativo GitHub Copilot ou abra-o. -2. Selecione **Home screen**. -3. Verifique se `tailspin-toys` está selecionado como repositório. -4. Na caixa de prompt, use o prompt a seguir para criar um canvas que atenda às nossas necessidades: - - ```plaintext - Create a basic Kanban board canvas that allows me to quickly triage work. Highlight the three issues which are most likely to need attention right now, with the remainder in a second section down below. The top three cards should include a description of the issue's content and a justification of why they're at the top of the list. Each issue should have a button that allows me to add it to the current context for the current session so I can get to work on it straightaway. - ``` - -O Copilot começará a criar o canvas. - -> [!NOTE] -> A criação levará alguns minutos. Como essa é uma tarefa complexa, talvez a primeira versão não atenda a todas as suas expectativas. Você pode continuar enviando prompts para criar a ferramenta ideal para suas necessidades. - -## Salvar o canvas e integrá-lo ao repositório - -Os canvases podem se tornar ativos do repositório, assim como arquivos de instruções e skills. Vamos pedir ao Copilot que adicione o canvas ao repositório e faça o merge para que toda a equipe possa usá-lo. - -1. Na mesma sessão, peça ao Copilot que salve o canvas no repositório usando o prompt a seguir: - - ```plaintext - Let's save this canvas definition to the repository so I can share it with my development team - ``` - -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/learning-hub/copilot-workshops/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. - -O aplicativo Copilot começará a criar e gerenciar o PR. Primeiro, ele explora o projeto para determinar a melhor maneira de criar um PR e depois cria o pull request. - -Após alguns instantes, você verá que o Copilot voltou a trabalhar, agora analisando as condições do PR, incluindo o processo de CI que executa todos os testes do repositório. Ele informará o status das revisões deixadas por outras pessoas da equipe, das verificações que precisam ser executadas e da possibilidade de fazer o merge do PR. - -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/learning-hub/copilot-workshops/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. - -Você criou um novo canvas compartilhado para a equipe. - -## Trabalhar no canvas - -Com o canvas criado, vamos iniciar uma nova sessão e usá-lo. - -1. No aplicativo Copilot, inicie uma nova sessão selecionando **New session** ao lado de **tailspin-toys**. -2. Peça ao Copilot que abra o canvas de triagem usando o prompt a seguir: - - ```plaintext - Open the triage issues canvas - ``` - -3. O canvas criado será aberto nessa nova sessão. -4. Selecione **Add to current context** em uma das issues que mais lhe interessam. -5. O Copilot começará a trabalhar na issue. - -Você usou um canvas criado por você para otimizar o processo de desenvolvimento. - -## Resumo e próximos passos - -Você criou uma superfície compartilhada na qual você e o agente podem colaborar. Você: - -- aprendeu o que são canvases e quando usá-los. -- criou com o agente um canvas compartilhado de quadro Kanban para triagem. -- salvou o canvas no repositório e fez o merge dele com o Agent Merge. -- abriu o canvas em uma nova sessão e o usou para começar a trabalhar. - -Com o backlog acompanhado, é hora de revisar tudo o que você criou e decidir os próximos passos. Continue para a [Lição 8 - Revisão e próximos passos][next-lesson]. - -## Recursos - -- [Trabalhar com extensões de canvas no aplicativo GitHub Copilot][canvas-docs] -- [Canvases no Awesome Copilot][awesome-copilot-canvases] -- [Sobre o aplicativo GitHub Copilot][about-copilot-app] - -[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/8-review/ -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/7-qa-agent.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/7-qa-agent.md new file mode 100644 index 000000000..436cfc92d --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/7-qa-agent.md @@ -0,0 +1,80 @@ +--- +title: "Lição 7 - Criar e usar um agente de QA" +description: "Crie um perfil de QA que parta dos requisitos e combine cobertura de testes, a skill quality-checks e evidências diretas do navegador." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você usou a skill `quality-checks` para executar verificações automatizadas e o MCP do Playwright para observar a experiência de filtragem em um navegador. Agora, reunirá essas capacidades em um agente personalizado com um processo de QA claramente definido. + +Nesta lição, você vai: + +- explorar como um agente personalizado trabalha com instruções, skills e ferramentas MCP. +- criar e examinar um perfil de QA reutilizável. +- selecionar o agente de QA e revisar suas conclusões em relação à issue de filtragem. + +## Cenário + +A Tailspin Toys quer uma revisão consistente dos requisitos, da qualidade do código, das verificações automatizadas, da cobertura de testes e do comportamento no navegador antes de abrir um pull request (PR). Um agente personalizado pode coordenar esse processo de QA e fornecer um relatório reutilizável. + +## O que é um agente personalizado? + +Um agente personalizado é uma versão especializada do Copilot definida em um perfil Markdown. O perfil descreve a finalidade, as instruções e as ferramentas disponíveis para o agente. Neste workshop, você definirá um papel de QA em `.github/agents/qa.agent.md` e o selecionará no aplicativo. + +As personalizações que você criou têm funções distintas. As instruções do repositório descrevem os padrões da equipe. A skill quality-checks reúne verificações repetíveis. O MCP do Playwright fornece ferramentas de navegador. O perfil de QA informa ao Copilot como usar essas capacidades para avaliar requisitos e relatar conclusões. Ele não as substitui nem exige outra sessão de agente. + +## Criar o perfil de QA + +Antes de abrir o PR do recurso, você pedirá ao Copilot que crie um perfil de QA reutilizável. O perfil definirá tanto as verificações que o QA executa quanto os limites que ele deve seguir. + +1. Confirme que a sessão está no modo **Interactive**. +2. Envie o prompt a seguir ao Copilot para criar o novo agente personalizado: + + ```plaintext + Create a custom agent named QA in .github/agents/qa.agent.md. It should check features against their issues and agreed requirements, follow the repository instructions, run the quality-checks skill, use Playwright MCP to verify behavior, and add tests when coverage is missing. + + Have it report each requirement as pass, fail, or blocked with supporting evidence. It must ask before changing implementation code, and it must not commit changes or open pull requests. Use the current model and available tools. Just create the profile for now so I can review it. + ``` + +## Examinar o perfil + +Antes de usar o novo agente, revise o perfil para confirmar que o Copilot capturou o fluxo e os limites de autoridade de QA pretendidos. Isso evita que um agente incompleto ou amplo demais altere o recurso quando você deseja apenas verificá-lo. + +1. Abra **Changes** e selecione `.github/agents/qa.agent.md`. +2. Leia o frontmatter. O campo `description` é obrigatório; `name` é opcional, mas incluí-lo fornece ao agente um nome de exibição claro. +3. Leia as instruções do perfil e confirme que o QA começa pelos requisitos, segue as instruções do repositório, executa a skill `quality-checks` e usa o MCP do Playwright. +4. Confirme que o QA apresenta evidências de apoio, pergunta antes de alterar o código da implementação e não faz commits nem abre pull requests. +5. Se o perfil gerado não contemplar alguma dessas responsabilidades ou limites, peça ao agente geral do Copilot que o revise antes de continuar. + +## Executar QA em relação à issue + +Com o perfil revisado, selecione QA na sessão atual para que ele possa usar a issue de filtragem e as decisões de planejamento que já estão no contexto. Confirme o agente ativo antes de pedir que ele inicie a revisão. + +1. Na sessão atual, abra o seletor de agentes na caixa do prompt. +2. Selecione **QA** e verifique se o aplicativo identifica visivelmente **QA** como agente ativo antes de enviar o prompt de execução. +3. Envie o prompt a seguir para pedir que o QA revise o recurso: + + ```plaintext + Review the filtering feature against the issue and the decisions in our plan. Is it ready for a PR? + ``` + +4. Confirme que o QA usa a issue e as decisões de planejamento corretas. Forneça a URL da issue ou qualquer contexto ausente se ele solicitar. +5. Quando o trabalho for concluído, leia o relatório apresentado. + +## Resumo e próximos passos + +Você adicionou um papel especializado reutilizável ao fluxo de trabalho e revisou o trabalho dele. Nesta lição, você: + +- explorou como um agente personalizado trabalha com instruções, skills e ferramentas MCP. +- criou e examinou um perfil de QA reutilizável que começa pelos requisitos. +- selecionou o agente de QA e revisou suas conclusões em relação à issue de filtragem. + +Agora você tem a implementação, a atualização da skill, o perfil de QA, os testes e o relatório de verificação prontos para revisão. Em seguida, você [os reunirá em um PR do recurso e usará o Agent Merge][next-lesson]. + +## Recursos + +- [Personalização do aplicativo GitHub Copilot, incluindo a seleção de agentes personalizados][customize-app] + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/8-create-pull-request/ +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-create-pull-request.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-create-pull-request.md new file mode 100644 index 000000000..b20eeb56c --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-create-pull-request.md @@ -0,0 +1,74 @@ +--- +title: "Lição 8 - Criar e integrar o PR do recurso" +description: "Revise em conjunto a filtragem, as instruções, a atualização da skill, o perfil de QA e os testes; depois, crie um PR e use o Agent Merge." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +A implementação da filtragem, as atualizações de instruções e da skill, o perfil de garantia de qualidade (QA) e os testes estão salvos em uma única branch. É hora de revisá-los em conjunto e abrir um pull request. Você mesmo fez o merge do pull request (PR) de avaliações por estrelas; desta vez, permitirá que o **Agent Merge** gerencie o processo. + +> [!NOTE] +> Normalmente, dividiríamos o recurso, as atualizações de instruções e da skill e o agente de QA em alguns PRs separados. Para simplificar o workshop, você manteve todo o fluxo de filtragem e qualidade em uma única sessão e branch, com todo esse trabalho incluído neste PR. + +Nesta lição, você vai: + +- aprender o que é o Agent Merge e como ele automatiza o ciclo de vida do merge. +- examinar o PR completo do recurso e as evidências de verificação. +- autorizar o Agent Merge somente após a revisão e confirmar que o PR foi integrado. + +## Cenário + +Ao longo do fluxo de filtragem, você usou o Copilot para planejar, implementar e verificar um recurso. Agora, a Tailspin Toys quer automatizar o trabalho restante do PR, mantendo a autorização do merge sob o controle da pessoa desenvolvedora. + +## Apresentação do Agent Merge + +O **Agent Merge** automatiza o trabalho restante necessário para integrar um pull request no aplicativo GitHub Copilot. Quando você o habilita, a sessão do aplicativo lê o pull request, resolve o que estiver bloqueando o merge, como verificações de integração contínua (CI) com falha, comentários de revisão e a necessidade de rebase, e faz o merge assim que o GitHub permite. Ele é executado em segundo plano, continua funcionando após reinicializações do aplicativo e é desativado automaticamente quando o pull request é integrado. + +Até aqui, você selecionou **Merge pull request** por conta própria. O Agent Merge pode assumir essa responsabilidade, mas sua capacidade de editar código e fazer merge ainda exige autorização explícita. Revise as ações permitidas e o trabalho antes de conceder permissão de merge. + +## Usar o Agent Merge para gerenciar o PR + +Com todo o código criado e revisado, vamos permitir que o Agent Merge gerencie o processo do PR. + +1. Use o seletor de agentes para selecionar **Default agent**. +2. Selecione o menu suspenso ao lado de **Create PR**. +3. Selecione **Agent merge**. O botão mudará para **Agent merge**. +4. Selecione **Agent merge** para iniciar o processo. + +O processo do Agent Merge começa. Ele vai: + +- Criar o pull request com um título e uma descrição. +- Se você iniciou a sessão por uma issue, incluir uma referência à issue relacionada no corpo da descrição. +- Fazer rebase ou resolver possíveis conflitos de merge com a branch de destino. +- Monitorar o processo de CI para garantir que todas as verificações sejam concluídas com sucesso. +- Monitorar o PR para verificar feedback de outras pessoas desenvolvedoras ou da revisão de código do Copilot. Ele fará atualizações para resolver esses comentários. +- Opcionalmente, fazer o merge automático do PR quando tudo for concluído com sucesso. + +Vamos permitir que o Agent Merge também faça o merge do PR quando tudo for concluído com sucesso! + +5. Selecione o menu suspenso ao lado de **Agent merge**. +6. Confirme se há uma marca ao lado de **Merge pull request**. + + +> [!IMPORTANT] +> O Agent Merge não ignora as proteções do repositório nem as permissões ausentes. Resolva esses bloqueios antes de continuar. + +## Resumo e próximos passos + +Você automatizou várias partes do processo de desenvolvimento, incluindo a geração, o teste e a validação de código e, agora, o processo de pull request. Você: + +- aprendeu o que é o Agent Merge e como ele automatiza o ciclo de vida do merge. +- examinou o PR completo do recurso e as evidências de verificação. +- autorizou o Agent Merge somente após a revisão e confirmou que o PR foi integrado. + +Em seguida, você [usará um canvas existente e criará um canvas de triagem][next-lesson] para explorar uma forma mais completa de examinar, planejar e visualizar o trabalho com o agente. + +## Recursos + +- [Gerenciar issues e pull requests com o aplicativo GitHub Copilot][managing-issues-prs] +- [Sobre o aplicativo GitHub Copilot][about-copilot-app] + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/9-canvases/ +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md new file mode 100644 index 000000000..11b113440 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md @@ -0,0 +1,151 @@ +--- +title: "Preparar o projeto e o modelo" +description: "Exporte o catálogo da Tailspin, crie um projeto do Foundry e uma implantação de modelo e valide ambos no Canvas." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/ + label: "Opcional: Incorporar o Foundry" +next: + link: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: Criar e implantar o agente +--- + +Este primeiro módulo prepara os dados e os recursos do Azure para o Backer Concierge. Ainda não é necessário ter código do agente nem uma implantação hospedada. + +Ao final, você terá: + +- Uma exportação do catálogo com limites explícitos para fundamentar as respostas. +- Um projeto do Foundry e uma implantação de modelo escolhida para os requisitos do recurso. +- Uma implantação validada no Canvas e uma verificação básica do modelo com respostas limitadas ao catálogo. + +## Cenário + +As pessoas que apoiam a Tailspin Toys podem filtrar jogos por categoria e editora, mas perguntas como *Quais jogos seriam adequados para quem adora trocadilhos com Git?* não têm respostas em menus suspensos. Um Backer Concierge deve recomendar somente jogos do catálogo da Tailspin e nunca inventar jogos, editoras, avaliações, totais arrecadados, números de apoiadores, preços, números de jogadores, durações de partidas ou datas de lançamento. Um catálogo confiável e um modelo adequado são a base dessas respostas. + +## Preparar suas ferramentas e a sessão da issue + +A configuração conecta o aplicativo GitHub Copilot ao Azure e mantém todo o trabalho do recurso reunido. + +1. Confirme que você tem uma assinatura do Azure. Se precisar de uma, as opções disponíveis incluem uma [assinatura gratuita do Azure com US$ 200 de crédito][azure-free] ou o [Azure for Students com US$ 100 em créditos][azure-students]. +2. Instale a [Azure CLI][install-azure-cli] para seu sistema operacional e verifique a instalação usando `az version`. +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/learning-hub/copilot-workshops/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. Selecione **Issues** na barra lateral e, em seguida, 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. +7. Digite `/microsoft-foundry` e depois `/azure` para confirmar que as duas skills estão instaladas e disponíveis; não envie prompts ainda. Se um plugin não aparecer imediatamente, reinicie o aplicativo, volte para esta mesma sessão da issue e verifique novamente. + +## Gerar a exportação do catálogo + +O repositório de exemplo inclui um script de exportação que fornece ao agente um arquivo que ele pode ler. + +8. Nesta sessão de worktree vinculada à issue, substitua o prompt padrão `/fix-issue` na caixa de prompt por: + + ```plaintext + Install the project dependencies, seed the database, then run the existing db:export script. Show me the command output and summarize the shape and grounding limits of db/catalog.json. + ``` + +9. Revise a saída dos comandos. O Copilot deve executar o equivalente a: + + ```bash + npm install + npm run db:setup + npm run db:export + ``` + + ![Gerar a exportação do catálogo](/images/learning-hub/copilot-workshops/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/learning-hub/copilot-workshops/app-8-view-catalog.png) + +## Configurar um projeto e um modelo do Foundry + +Criar primeiro o projeto e a implantação no chat garante que o Canvas se conecte somente a recursos que já existem. + +11. Selecione **+**, selecione **Terminal** e entre no Azure: + + ```bash + az login + ``` + +12. Verifique a assinatura selecionada e liste os grupos de recursos: + + ```bash + az account show --output table + az group list --output table + ``` + + Se a assinatura estiver incorreta, execute `az account set --subscription ` e repita os dois comandos. + + Se `rg-tailspin-toys` aparecer, inspecione os recursos: + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + Se o grupo contiver recursos não relacionados ou compartilhados, pare e escolha um nome dedicado antes de usar o prompt a seguir. Substitua os nomes de exemplo em todos os prompts e comandos posteriores pelos nomes aprovados. +13. Na mesma sessão da issue, insira: + + ```plaintext + 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/learning-hub/copilot-workshops/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: + + ```plaintext + Use the Microsoft Foundry skill to recommend two or three current chat models in the tailspin-toys project that meet this issue's acceptance criteria. Explain the tradeoffs and wait for me to choose. + ``` + +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/learning-hub/copilot-workshops/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: + + ```plaintext + Deploy the model I selected to the tailspin-toys Foundry project, using the model name as the deployment name. + ``` + +> [!TIP] +> A disponibilidade dos modelos muda com o tempo. A escolha adequada é o modelo que o Copilot confirma estar disponível no seu projeto, e não um modelo fixo indicado neste módulo. + +## Validar e fazer uma verificação básica do modelo no Canvas + +Esta verificação valida o projeto e o modelo antes de existir qualquer código do agente. Uma verificação básica do modelo não substitui os testes de fundamentação das respostas do agente hospedado no módulo 2. + +17. Selecione **+**, depois **Canvas** e depois **Microsoft Foundry (Preview)**. +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/learning-hub/copilot-workshops/app-8-validate-project-model.png) + +20. Na mesma sessão, insira: + + ```plaintext + Use a skill do Microsoft Foundry para testar diretamente o modelo implantado no projeto tailspin-toys sem criar um agente. Fundamente a resposta no conteúdo de @db/catalog.json e pergunte: "Adoro jogos de quebra-cabeça sobre rastrear bugs. Qual jogo devo apoiar e quanto ele arrecadou?". Mostre a resposta e metadados úteis, como os tokens usados e o tempo de resposta, somente se estiverem disponíveis. Use meu login existente do Azure. Não exiba credenciais, altere arquivos nem crie recursos. + ``` + +21. Revise a resposta. Ela deve recomendar apenas um jogo real de `db/catalog.json`, usar o título, a editora e a avaliação corretos e explicar que as informações de financiamento não estão disponíveis. Se o modelo inventar um jogo, detalhes do catálogo ou um valor de financiamento, compare outro modelo recomendado antes de continuar. + +> [!NOTE] +> O Canvas lembra o projeto selecionado quando é reaberto. Suas etapas são **Create new hosted agents**, para gerar a estrutura inicial; **Build current hosted agent**, para conectar modelos, caixas de ferramentas, skills e mecanismos de proteção; e **Deploy and test**, para executar localmente e implantar no Microsoft Foundry. + +## Ponto de verificação e próximos passos + +Você preparou as ferramentas do Azure, exportou o catálogo e testou um modelo implantado de acordo com as regras de fundamentação do Backer Concierge. O ponto de verificação deste módulo é um modelo que recomenda jogos reais do catálogo sem inventar informações ausentes. + +Em seguida, você usará o mesmo repositório Tailspin Toys, branch do worktree, sessão vinculada à issue, projeto do Foundry e implantação de modelo selecionada para [criar e implantar o agente][next-module]. Se encerrar aqui, [limpe os recursos do Azure][cleanup] para evitar custos contínuos. + +[azure-free]: https://azure.microsoft.com/pricing/purchase-options/azure-account +[azure-students]: https://azure.microsoft.com/free/students +[install-azure-cli]: https://learn.microsoft.com/cli/azure/install-azure-cli +[install-azd]: https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd +[next-module]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[cleanup]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/#limpar-seus-recursos diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md new file mode 100644 index 000000000..5d71e7be5 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md @@ -0,0 +1,160 @@ +--- +title: "Criar e implantar o agente" +description: "Gere a estrutura inicial do Backer Concierge no Canvas, inspecione-o localmente e implante e teste-o novamente no Foundry." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: Preparar o projeto e o modelo +next: + link: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + label: Conectar o agente ao site +--- + +Este módulo transforma o projeto, a implantação de modelo e o catálogo de [Preparar o projeto e o modelo][previous-module] em um Backer Concierge hospedado por meio do Microsoft Foundry Canvas. + +Ao final, você terá: + +- A estrutura inicial de um agente com os dados do catálogo empacotados e testes focados. +- Evidências locais para cada critério de aceitação relacionado ao catálogo e à conversa. +- Uma versão implantada do agente testada novamente no Foundry. + +## Cenário + +A Tailspin Toys precisa de um concierge que responda a perguntas reais sobre o catálogo, reconheça quando faltam informações e lembre os jogos discutidos em uma conversa. O serviço precisa conquistar essa confiança antes de fazer parte da loja. + +## Preparar as ferramentas de implantação + +A inspeção e a implantação de agentes hospedados usam a Azure Developer CLI por meio do Canvas; o projeto e o modelo existentes do Foundry são reutilizados. + +1. Retome a mesma sessão vinculada à issue **Add a Backer Concierge assistant for catalog questions** do módulo 1. Confirme que `db/catalog.json` está intacto, que você está conectado à assinatura e ao projeto do Foundry corretos e que a implantação de modelo continua disponível. Se os recursos foram removidos na limpeza, repita primeiro as etapas relevantes da [configuração do projeto e do modelo][previous-module]. + +2. Selecione **+**, selecione **Terminal** e entre na Azure Developer CLI, concluindo a autenticação no navegador quando solicitado: + + ```bash + azd auth login + ``` + +3. Execute `azd config show` para verificar a assinatura do Azure. Se ela estiver vazia ou incorreta, atualize-a com `azd config set defaults.subscription ` e execute `azd config show` novamente para confirmar a alteração. +## Gerar a estrutura inicial do Backer Concierge + +O Canvas gera o código, a estrutura de pastas e o `azure.yaml` na raiz que conectam o Backer Concierge à implantação de modelo existente. + +4. Na versão prévia de **Create new hosted agents**, insira: + + ```plaintext + Scaffold a hosted agent named Backer Concierge in agent/backer-concierge, connected to the tailspin-toys project and the model deployment I just confirmed. Use Microsoft Agent Framework with the Responses API. Ground it in db/catalog.json and ensure it meets the acceptance criteria in this issue. Keep a single azure.yaml at the repository root with the hosted-agent service pointing to agent/backer-concierge. Make sure the deployed agent includes the catalog data it needs, and add focused tests. + ``` + + 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/learning-hub/copilot-workshops/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: + + - O agente fica em `agent/backer-concierge`. + - Um único `azure.yaml` na raiz do repositório contém um serviço com `host: azure.ai.agent`. + - O agente que será implantado inclui sua própria cópia gerada do catálogo. + - Testes focados cobrem os requisitos de fundamentação das respostas no catálogo. + - Nenhuma credencial ou arquivo de ambiente local está incluído. + + ```text + tailspin-toys/ + ├── azure.yaml + ├── agent/ + │ └── backer-concierge/ + │ └── requirements.txt + ├── db/ + │ └── catalog.json + └── src/ + ``` + +6. Peça ao Copilot que execute os testes focados e corrija quaisquer falhas antes de continuar para **Deploy and test**. + +## Inspecionar o agente localmente + +**Inspect Locally** executa `azd ai agent run` no terminal integrado do Copilot, aguarda o agente hospedado iniciar e abre o Agent Inspector incorporado. + +7. Em **Deploy and test**, selecione **Inspect Locally** e aguarde o Agent Inspector abrir. + +> [!NOTE] +> A primeira execução local pode levar vários minutos enquanto `azd` cria um ambiente e instala as dependências. + +8. Se o inspetor não conseguir se conectar, confirme que nenhum outro processo está usando a porta necessária, envie o erro ao Copilot e tente novamente após a correção do problema. +9. Teste uma **recomendação fundamentada no catálogo** no Agent Inspector: + + ```text + I love puzzle games about tracking down bugs. What should I back? + ``` + + 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/learning-hub/copilot-workshops/app-8-grounded-recommendation.png) + +10. Teste uma **armadilha de alucinação**: + + ```text + How much has Pipeline Conquest raised so far, and how many backers does it have? + ``` + + Resultado esperado: explica que o catálogo não acompanha a arrecadação nem os apoiadores e, em seguida, oferece informações que estão presentes. + +11. Teste a **pressão para ir além do catálogo**: + + ```text + Do you have Wingspan? If not, what's the closest thing you've got? + ``` + + Resultado esperado: informa que Wingspan não está no catálogo, não o descreve com base em conhecimento externo e redireciona a resposta para títulos reais da Tailspin. + +12. Teste um **pedido vago**: + + ```text + Recommend me something good. + ``` + + Resultado esperado: faz uma pergunta curta para esclarecer o pedido e ainda não recomenda um título. + +13. Teste a **precisão da classificação**: + + ```text + What are your three highest rated games? + ``` + + Resultado esperado: retorna as três entradas mais bem avaliadas do catálogo na ordem correta e com as avaliações corretas. + +14. Teste a **continuidade da conversa** enviando estes prompts na mesma conversa: + + ```text + Show me two highly rated strategy games. + ``` + + ```text + Which of those has the higher rating? + ``` + + Resultado esperado: a segunda resposta se refere somente aos dois títulos da primeira resposta e compara corretamente as avaliações deles no catálogo. + +15. Compare cada resposta com `db/catalog.json` e os critérios de aceitação da issue. Confirme que o agente nunca inventa jogos, editoras, avaliações, totais arrecadados, números de apoiadores, preços, números de jogadores, durações de partidas ou datas de lançamento. Se o Agent Inspector relatar um erro ou uma resposta ultrapassar os limites das informações do catálogo, copie o resultado para a área de prompt do Canvas e peça ao Copilot que corrija o problema. Reinicie a inspeção local e execute novamente o teste que falhou após cada alteração; depois, confirme que todas as seis verificações passaram antes de implantar. + +## Implantar e testar novamente o agente hospedado + +O Canvas usa `azd` para implantar o agente testado. O Foundry empacota o código-fonte do serviço, resolve as dependências, faz o build remotamente e publica o serviço no Microsoft Foundry. + +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/learning-hub/copilot-workshops/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. + +## Ponto de verificação e próximos passos + +Você gerou a estrutura inicial do Backer Concierge, testou localmente a fundamentação no catálogo e o comportamento da conversa, implantou-o no Microsoft Foundry e testou novamente a versão hospedada. O ponto de verificação deste módulo é um agente hospedado que passa nas seis verificações de aceitação sem inventar informações ausentes. + +Em seguida, você usará o mesmo repositório Tailspin Toys, branch do worktree, sessão vinculada à issue, projeto do Foundry, implantação de modelo selecionada e agente hospedado para [conectar o agente ao site][next-module]. Se encerrar aqui, [limpe os recursos do Azure][cleanup] para evitar custos contínuos. + +[previous-module]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[next-module]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[cleanup]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/#limpar-seus-recursos diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md new file mode 100644 index 000000000..4570441e9 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md @@ -0,0 +1,90 @@ +--- +title: "Conectar o agente ao site" +description: "Integre o Backer Concierge hospedado por meio de um proxy local que protege as credenciais e teste o widget de ponta a ponta." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: Criar e implantar o agente +next: { link: /pt-br/learning-hub/copilot-workshops/app/10-review/, label: Revisão e próximos passos } +--- + +Este último módulo conecta o agente hospedado testado em [Criar e implantar o agente][previous-module] ao site da Tailspin Toys em execução local. + +Ao final, você terá: + +- Um proxy local do Azure Functions que protege as credenciais do Foundry e os identificadores de conversa. +- Um widget de chat acessível com comportamento verificado de ponta a ponta. +- Uma integração verificada localmente e um ponto de verificação para a limpeza dos recursos. + +## Cenário + +As pessoas que apoiam a Tailspin Toys precisam de orientações sobre o catálogo no mesmo lugar em que exploram os jogos. O Backer Concierge deve preservar a conversa, funcionar com navegação pelo teclado e lidar de forma clara com informações indisponíveis e erros. Essa conveniência não pode expor credenciais do serviço nem detalhes internos da conversa ao navegador. + +## Retomar o ponto de verificação do agente hospedado + +A integração usa o agente hospedado existente, em vez de criar novos recursos do Foundry. + +1. Retome o mesmo repositório Tailspin Toys, branch do worktree e sessão da issue **Add a Backer Concierge assistant for catalog questions** dos módulos anteriores. Confirme que o `azure.yaml` na raiz, o código-fonte do agente e o catálogo estão presentes e verifique a assinatura registrada, o grupo de recursos dedicado, o projeto do Foundry, a implantação de modelo e a versão testada do agente hospedado. +2. Se os recursos foram removidos na limpeza, restaure o [projeto e o modelo][project-module] e a [implantação hospedada testada][previous-module] correspondentes antes da integração. + +## Criar o proxy do lado do servidor + +A Tailspin Toys é totalmente pré-renderizada. O código do navegador nunca deve chamar o agente hospedado diretamente nem receber credenciais do Foundry. Uma **barreira de proteção de credenciais do lado do servidor**, implementada localmente com o Azure Functions, faz a autenticação no Foundry e retorna somente a resposta do agente ao navegador. O navegador envia cada mensagem com uma referência opaca à conversa; o proxy mapeia essa referência para a conversa do Foundry sem expor o identificador interno. + +O proxy é a única parte do código que tem permissão para acessar suas credenciais do Azure. Neste workshop, a Function e o site são executados localmente, com o servidor de desenvolvimento do Astro encaminhando as solicitações `/api` para a Function. + +> [!IMPORTANT] +> Este proxy do workshop é apenas para desenvolvimento local. Ele não deve ser implantado como um endpoint público anônimo. Uma integração de produção precisa de um projeto de autenticação e controle de abuso específico para a aplicação, incluindo limites de taxa ou cotas adequados, restrições de CORS, monitoramento e controles de custo. + +3. Na mesma sessão do Copilot, insira: + + ```plaintext + Add a local Azure Functions proxy in api for the static Astro site to call my deployed Backer Concierge during development. Use my existing local Azure sign-in, keep credentials and Foundry conversation identifiers out of the browser, return an opaque conversation handle, validate requests, sanitize errors, and add focused tests. Configure the Astro development server so /api requests reach the local Function. Don't create public deployment infrastructure. + ``` + +4. Revise o proxy gerado e os testes focados quanto à validação de solicitações, à remoção de informações sensíveis dos erros, às referências opacas de conversa e à proteção de credenciais restrita ao servidor. Peça ao Copilot que execute os testes focados e corrija quaisquer falhas. +5. Abra outro terminal, inicie a Function local usando o comando fornecido pelo Copilot e deixe-a em execução. +6. Volte ao chat e peça ao Copilot que teste o proxy local: + + ```plaintext + Test the local /api/concierge endpoint by asking "Which games are under $30?" Show me the sanitized response and confirm that no credentials or internal conversation identifiers are returned. + ``` + +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/learning-hub/copilot-workshops/app-8-local-proxy-test.png) + +## Criar e testar o widget de chat + +Com o proxy em execução, o widget apresenta a conversa no site sem expor detalhes do Foundry. + +8. Peça ao Copilot que crie a integração ao site: + + ```plaintext + 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, keep Foundry details out of the browser, and add end-to-end tests covering the chat flow, conversation continuity, accessibility, error handling, and grounding boundaries. + ``` + +9. Inicie o servidor de desenvolvimento do Astro em outro terminal usando o comando fornecido pelo Copilot. Mantenha o site e a Function local em execução. +10. Peça ao Copilot que execute os testes de ponta a ponta: + + ```plaintext + Run the end-to-end tests for the Backer Concierge widget in the 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. + ``` + +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/learning-hub/copilot-workshops/app-8-e2e-test-results.png) + +## Ponto de verificação e próximos passos + +Você criou um proxy local que protege as credenciais, conectou um widget de chat acessível e verificou todo o fluxo da conversa com o Backer Concierge hospedado. O ponto de verificação deste módulo é uma integração ao site testada localmente que preserva os limites do catálogo e mantém as credenciais e os identificadores internos do Foundry fora do navegador. Ela não representa uma implantação de produção do proxy ou do site. + +Quando terminar de experimentar, interrompa os dois serviços locais e [limpe os recursos do Azure][cleanup]. Em seguida, continue para [Revisão e próximos passos][core-review] na rota principal do workshop. + +[previous-module]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[project-module]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[agent-checks]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/#inspecionar-o-agente-localmente +[cleanup]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/#limpar-seus-recursos +[core-review]: /pt-br/learning-hub/copilot-workshops/app/10-review/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md new file mode 100644 index 000000000..254a46d7e --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md @@ -0,0 +1,89 @@ +--- +title: "Opcional: Incorporar o Foundry" +description: "Crie um Backer Concierge baseado no catálogo com o Microsoft Foundry Canvas, com pontos seguros para encerrar ao longo do percurso." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: { link: /pt-br/learning-hub/copilot-workshops/app/10-review/, label: Revisão e próximos passos } +next: + link: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: Preparar o projeto e o modelo +tags: + - workshop +--- + +Este percurso opcional adiciona um **Backer Concierge** à Tailspin Toys usando o Microsoft Foundry Canvas no aplicativo GitHub Copilot. Ele começa com um experimento de modelo baseado no catálogo, avança para um agente hospedado e termina com uma integração local ao site. + +## O percurso + +Cada módulo termina com um ponto de verificação e um ponto seguro para encerrar. O mesmo repositório Tailspin Toys, branch do worktree, sessão vinculada à issue, projeto do Foundry e implantação de modelo são mantidos ao longo do percurso. + +- [Preparar o projeto e o modelo][module-1] estabelece os limites do catálogo, cria o projeto e a implantação de modelo e verifica ambos no Canvas. +- [Criar e implantar o agente][module-2] gera a estrutura inicial do Backer Concierge, testa-o localmente e implanta e testa novamente o agente hospedado. +- [Conectar o agente ao site][module-3] adiciona um proxy local que protege as credenciais, um widget de chat acessível e testes de ponta a ponta. + +> [!IMPORTANT] +> O Microsoft Foundry Canvas e os agentes hospedados estão em versão prévia pública. +> +> Este percurso cria recursos do Azure que geram custos, incluindo uma implantação de modelo e, a partir do módulo 2, um agente hospedado. A assinatura, a região, a cota e o custo estimado precisam de aprovação antes da criação dos recursos. A limpeza também se aplica quando você encerra após criar apenas o projeto e o modelo. + +1. Comece por [Preparar o projeto e o modelo][module-1], mantendo o trabalho no repositório Tailspin Toys, e não neste repositório de conteúdo do workshop. +2. Se preferir concluir o workshop principal, continue para [Revisão e próximas etapas][core-review]. + +## Limpar seus recursos + +Quando terminar de experimentar em qualquer ponto de verificação, remova os recursos do Azure para evitar custos indesejados. A limpeza remove os recursos necessários para os módulos posteriores, portanto, será necessário criá-los novamente para continuar depois. + +> [!WARNING] +> Exclua `rg-tailspin-toys` somente se ele for dedicado a este exercício e não contiver recursos que precisam ser mantidos. A exclusão de um grupo de recursos compartilhado também removerá recursos não relacionados. +> +> Se você aprovou outro nome para o grupo de recursos no módulo 1, substitua `rg-tailspin-toys` por esse nome em todos os comandos abaixo. + +1. Interrompa no respectivo terminal qualquer Agent Inspector, Azure Function ou servidor de desenvolvimento do Astro local que você iniciou. +2. Se implantou o agente hospedado no módulo 2 ou 3, abra um terminal no mesmo worktree da Tailspin Toys, use o mesmo ambiente `azd` e execute: + + ```bash + azd down --purge + ``` + +3. Verifique a assinatura selecionada e se o grupo de recursos do workshop ainda existe: + + ```bash + az account show --output table + az group exists --name rg-tailspin-toys + ``` + + Se o comando retornar `false`, a limpeza está concluída. Se retornar `true`, inspecione os recursos do grupo: + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + Confirme que todos os recursos restantes pertencem a este exercício. Se parou após o módulo 1, ainda será necessário limpar o projeto do Foundry e o modelo, mesmo sem ter implantado um serviço `azd`. +4. Se o grupo de recursos dedicado do workshop ainda existir e contiver apenas os recursos que você pretende remover, execute: + + ```bash + az group delete --name rg-tailspin-toys --yes --no-wait + ``` + +5. Como `--no-wait` retorna antes da conclusão da exclusão, execute novamente o comando a seguir até que ele retorne `false`: + + ```bash + az group exists --name rg-tailspin-toys + ``` + +## Recursos + +A documentação da Microsoft descreve o Canvas, as implantações hospedadas e suas permissões. + +- [O que é o Microsoft Foundry Canvas?][foundry-canvas] +- [Implantar seu primeiro agente hospedado com o Foundry Canvas][hosted-agent-quickstart] +- [Permissões de agentes hospedados][hosted-agent-permissions] + +[module-1]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[module-2]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[module-3]: /pt-br/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[core-review]: /pt-br/learning-hub/copilot-workshops/app/10-review/ +[foundry-canvas]: https://learn.microsoft.com/azure/foundry/agents/concepts/foundry-canvas +[hosted-agent-quickstart]: https://learn.microsoft.com/azure/foundry/agents/quickstarts/quickstart-hosted-agent?pivots=canvas +[hosted-agent-permissions]: https://learn.microsoft.com/azure/foundry/agents/concepts/hosted-agent-permissions diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-review.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-review.md deleted file mode 100644 index e1c2fcbfe..000000000 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/8-review.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: "Lição 8 - Revisão e próximos passos" -description: "Recapitule o percurso do aplicativo GitHub Copilot, automatize trabalhos recorrentes e explore os próximos passos." -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -Nas últimas lições, você levou um recurso da ideia ao merge com o aplicativo GitHub Copilot. Nesse processo, você: - -- conectou um repositório e conheceu o espaço de trabalho do aplicativo e o backlog criado pelo modelo. -- iniciou sessões a partir de uma tarefa direta e de issues e usou os modos Plan e Autopilot para controlar como o agente trabalha. -- orientou o agente com instruções personalizadas e uma skill reutilizável. -- testou o trabalho com o servidor MCP do Playwright em um navegador real. -- colaborou com o agente em um canvas compartilhado. -- entregou alterações avançando por níveis de automação de merge, desde fazer o merge por conta própria no github.com até permitir que o **Agent Merge** integrasse um pull request. - -Vamos automatizar parte do trabalho recorrente, analisar boas práticas e explorar os próximos passos. - -## Automatizar trabalhos recorrentes - -O aplicativo pode executar agentes para você em uma agenda ou sob demanda por meio de **automações**, ideais para tarefas rotineiras como fazer a triagem de novas issues ou recapitular atividades recentes. Vamos criar uma automação simples e não destrutiva. - -1. Selecione **Automations** na barra lateral e depois selecione **New automation**. -2. Dê um nome a ela, como `Recap my recent work`. -3. Escolha um gatilho. **Manual** permite executá-la sob demanda; **On a schedule** a executa automaticamente; **When an issue is created** reage a novas issues. Escolha **Manual** para esta lição. -4. Insira um prompt somente leitura para impedir que a automação faça alterações. Por exemplo: - - ```plaintext - Summarize the pull requests merged in this repository over the last week, and list any issues still open in the backlog. - ``` - -5. Escolha o projeto, ou seja, seu repositório Tailspin Toys, e crie a automação. -6. Execute-a sob demanda para ver o resultado. - -> [!TIP] -> As automações podem ser executadas localmente ou na nuvem. Habilite **Run in the cloud** e escolha as **Tools** que uma automação pode usar quando quiser que ela seja executada sem supervisão e de acordo com uma agenda. Mantenha as automações agendadas com escopo limitado e sem ações destrutivas até confiar nos resultados. - -## Boas práticas - -Ao usar qualquer ferramenta de IA, a infraestrutura ao redor dela influencia a qualidade dos resultados. Arquivos de instruções, skills e agentes personalizados tiveram uma função neste workshop. Invista neles e reutilize-os entre as sessões. - -Associe o **modo e o modelo** à tarefa. Use **Plan** para analisar uma abordagem antes de desenvolver, **Interactive** para acompanhar alterações específicas e **Autopilot** somente para tarefas isoladas e com escopo bem definido. Escolha um modelo mais rápido para edições rotineiras e um modelo mais avançado, com maior esforço de raciocínio, para trabalhos complexos. - -O contexto continua tão importante quanto a infraestrutura. Descrever claramente *o que* você quer criar, *por que* e *como* muda significativamente o resultado. Os chats rápidos são ótimos para definir o escopo de uma ideia antes de transformá-la em uma sessão completa. - -## Mais recursos para explorar - -Você percorreu o fluxo de trabalho principal. Veja outros recursos que valem a pena conhecer: - -- **Quick chats** para perguntas rápidas e descartáveis que não exigem uma sessão completa. -- **Rubber duck** para analisar um problema e receber feedback relevante antes de começar a desenvolver. -- [**Agentes personalizados**][custom-agents] para empacotar uma função, suas ferramentas e instruções para trabalhos especializados e repetíveis. -- [`/chronicle`][chronicle] para gerar uma narrativa do que aconteceu em uma sessão. -- [Bring your own key (BYOK)][byok] para usar modelos do seu próprio provedor, incluindo modelos locais por meio de Ollama, Foundry Local ou LM Studio. -- [Sandboxes na nuvem][sandboxes] para executar sessões em um ambiente isolado hospedado pelo GitHub. -- [Deep links][deep-links] para abrir o aplicativo diretamente em um repositório, uma sessão ou um prompt. - -## Próximos passos - -A melhor maneira de melhorar com qualquer ferramenta é continuar usando-a. Use-a em código de produção, em projetos pessoais ou naquele pequeno aplicativo que você planeja criar há anos. Compartilhe o que aprendeu com sua equipe e aprenda com as experiências dela. E, como sempre, explore a documentação. - -Para conhecer melhor o ecossistema do GitHub Copilot, confira o [percurso do VS Code](/pt-br/learning-hub/copilot-workshops/vscode/), o [percurso do Copilot CLI](/pt-br/learning-hub/copilot-workshops/cli/) ou o [percurso do agente de nuvem](/pt-br/learning-hub/copilot-workshops/cloud/). - -## Recursos - -- [Sobre o aplicativo GitHub Copilot][about-copilot-app] -- [Introdução ao aplicativo GitHub Copilot][getting-started] -- [Personalizar o aplicativo GitHub Copilot][customize] -- [Usar automações][using-automations] -- [Trabalhar com extensões de canvas][canvas-docs] -- [Sobre sandboxes locais e na nuvem][sandboxes] - -[about-copilot-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 -[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle -[custom-agents]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents -[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models -[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/9-canvases.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/9-canvases.md new file mode 100644 index 000000000..7d53bd31f --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/9-canvases.md @@ -0,0 +1,117 @@ +--- +title: "Lição 9 - Explorar e criar canvases" +description: "Use o canvas Database Explorer existente e depois crie e revise um canvas de triagem vinculado ao repositório." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Até agora, você orientou agentes pelo chat. No entanto, grande parte do trabalho não acontece em uma conversa, mas em um quadro, documento ou checklist. Os **canvases** oferecem a você e ao agente uma superfície compartilhada exatamente para esse tipo de trabalho, dentro do aplicativo. Nesta lição, você primeiro usará um canvas incluído na Tailspin Toys e depois criará um para o backlog no qual vem trabalhando. + +Nesta lição, você vai: + +- entender o que é um canvas e quando usá-lo. +- usar o canvas Database Explorer existente para examinar dados do projeto. +- criar um canvas compartilhado de quadro Kanban para fazer a triagem do backlog. +- examinar e testar o novo canvas sem implementar outro recurso. + +## Cenário + +A Tailspin Toys já inclui um canvas para explorar seu banco de dados. Depois de usá-lo para entender como um canvas transforma dados do projeto em uma superfície interativa, você criará um quadro reutilizável para escolher o próximo trabalho sem iniciar outro recurso. + +## O que é um canvas? + +Um [canvas][canvas-docs] é uma superfície interativa e compartilhada para um artefato de trabalho, como um plano, um quadro de triagem, um checklist de lançamento, um painel ou um documento. Embora o chat seja ótimo para descrever intenções e analisar ambiguidades, a maior parte do trabalho acontece em uma *superfície*. Os canvases permitem colaborar com o agente diretamente nessa superfície. + +Os canvases são **bidirecionais**: o agente pode atualizar o canvas enquanto trabalha, e você pode editar a mesma superfície. Quando você cria um canvas, o agente o desenvolve com base no prompt e no fluxo de trabalho. Você pode pedir que ele adicione, remova ou revise recursos durante o processo. Depois de criado, o canvas é aberto no painel direito do aplicativo. + +Alguns exemplos comuns incluem: + +- **Canvases Markdown** para planejar o dia e priorizar issues e pull requests. +- **Quadros Kanban agênticos** nos quais pessoas e agentes adicionam cards e movem o trabalho entre colunas. +- **Quadros de triagem de issues** que resumem as principais issues e os temas recorrentes de um repositório. + +## Por que usar um canvas? + +Use um canvas quando uma tarefa exigir estrutura, iteração e verificação e o chat não for suficiente. Um canvas permite: + +- fundamentar o trabalho do agente em um artefato real adequado ao seu fluxo de trabalho. +- orientar ou corrigir o trabalho diretamente na superfície compartilhada e depois permitir que o agente continue a partir das suas alterações. +- acompanhar o progresso como alterações visíveis em um artefato, e não apenas como respostas no chat. + +## Usar o canvas Database Explorer + +Comece pelo canvas Database Explorer existente no projeto. Usar um exemplo funcional permite observar como um canvas com escopo de repositório se comporta antes de criar o seu. + +1. Confirme que o pull request (PR) da filtragem foi integrado e atualize sua branch `main` local. +2. Volte ao aplicativo GitHub Copilot e selecione **Home screen**. +3. Confirme que `tailspin-toys` é o repositório selecionado. +4. Crie uma sessão em uma **new working tree** baseada na `main` atualizada e selecione o modo **Interactive**. +5. Peça ao Copilot que prepare o banco de dados local, se necessário, e abra o canvas existente sem alterá-lo: + + ```plaintext + Set up the local database if needed, then open the repository's Database Explorer canvas. Do not change any files. + ``` + +6. No Database Explorer, navegue pelas tabelas disponíveis e selecione `games`. +7. Execute uma consulta somente leitura que mostre cinco jogos com as melhores avaliações: + + ```sql + SELECT title, star_rating + FROM games + ORDER BY star_rating DESC + LIMIT 5; + ``` + +8. Confirme que os resultados contêm no máximo cinco jogos em ordem decrescente de avaliação. +9. Abra **Files** e examine `.github/extensions/database-explorer/extension.mjs`. Observe como o canvas é armazenado com o projeto e restringe as consultas a instruções `SELECT` e `WITH` somente leitura. +10. Confirme que a sessão não tem alterações em arquivos. + +## Criar um canvas para fazer a triagem de issues + +Agora, crie outro tipo de superfície compartilhada. Salvar o canvas de triagem no escopo do projeto faz com que ele se torne um recurso do repositório que a equipe pode revisar e reutilizar. + +1. Na mesma sessão, digite `/create-canvas` e descreva o canvas que deseja criar: + + ```plaintext + Create a Kanban triage canvas for this repo's open issues and save it under .github/extensions/. Highlight the three issues you'd prioritize and explain why, with the rest below. Include summaries and links. + + Give each card an "Add to current context" action that adds the issue details without starting work or changing the issue. Make it keyboard-accessible and open it so I can try it. + ``` + +O Copilot cria a extensão de canvas em `.github/extensions` e abre a superfície compartilhada no painel direito do aplicativo. A extensão gerada é conteúdo executável do repositório, não apenas um artefato visual, então você examinará seus arquivos e seu comportamento em seguida. + +## Inspecionar e exercitar o canvas + +Antes de compartilhar o canvas, compare-o com as issues reais do repositório e teste seus controles. Isso confirma que o conteúdo é preciso, que a interação é acessível e que a ação da issue adiciona contexto sem iniciar o trabalho. + +1. Abra **Changes** e confirme que a definição do canvas está vinculada ao repositório em `.github/extensions/`, e não salva apenas para seu usuário ou sessão. Verifique se as extensões existentes e os arquivos da aplicação permanecem inalterados. +2. Compare o quadro com as issues abertas reais e avalie as explicações da classificação. +3. Verifique se os cards e controles são legíveis e utilizáveis por teclado. +4. Selecione **Add to current context** em uma issue e confirme que apenas seus detalhes entram na conversa. Nenhuma implementação ou alteração de estado da issue deve começar. +5. Revise as correções e peça ao Copilot que execute a validação existente aplicável aos arquivos alterados. Registre resultados e bloqueios, em vez de presumir que uma superfície interativa está correta apenas porque foi aberta. +6. Se o canvas precisar de alterações, solicite melhorias específicas dentro do escopo da triagem e repita as verificações afetadas. Não implemente uma das issues do backlog como parte deste trabalho de canvas. + +O workshop termina antes da criação de outro PR porque você já praticou o merge manual e o Agent Merge. Em produção, revise e faça o merge do canvas pelo processo normal da sua equipe antes que outras pessoas dependam dele. + +## Resumo e próximos passos + +Você criou uma superfície compartilhada na qual você e o agente podem colaborar. Você: + +- entendeu o que é um canvas e quando usá-lo. +- usou o canvas Database Explorer existente para examinar dados do projeto. +- criou um canvas compartilhado de quadro Kanban para fazer a triagem do backlog. +- examinou e testou o novo canvas sem implementar outro recurso. + +Com o backlog acompanhado, você [revisará tudo o que criou e explorará os próximos passos][next-lesson]. + +## Recursos + +- [Trabalhar com extensões de canvas no aplicativo GitHub Copilot][canvas-docs] +- [Canvases no Awesome Copilot][awesome-copilot-canvases] +- [Sobre o aplicativo GitHub Copilot][about-copilot-app] + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/app/10-review/ +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/index.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/index.md index 62b64bd24..3c80d699f 100644 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/index.md +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/app/index.md @@ -2,12 +2,26 @@ title: "Aplicativo GitHub Copilot" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- O [**aplicativo GitHub Copilot**](https://docs.github.com/copilot/concepts/agents/github-copilot-app) é um aplicativo para desktop criado com base no Copilot CLI que reúne o desenvolvimento orientado por agentes em um espaço de trabalho único e focado. Ele oferece sessões paralelas de agentes, modos de sessão alternáveis, canvases compartilhados e gerenciamento nativo de issues e pull requests do GitHub, incluindo o **Agent Merge**, que conduz um pull request por rebases, feedback de revisão, correções de CI e merge. -Ao longo destas lições, você instalará o aplicativo e configurará o projeto. Depois, conhecerá o espaço de trabalho do aplicativo e o backlog que o modelo criou para você. Você começará com uma pequena alteração, adicionando uma avaliação por estrelas, e então adicionará a partir de uma issue um padrão de instruções personalizadas, criará um recurso de filtragem em uma sessão isolada de agente e o verificará com uma skill reutilizável. Você adicionará o servidor MCP do Playwright para explorar o recurso em um navegador real e, em seguida, avançará por níveis de automação de merge até que o **Agent Merge** conclua o merge do pull request. Por fim, você colaborará em um canvas compartilhado e automatizará trabalhos recorrentes, completando todo o ciclo, da ideia ao recurso integrado. +O workshop segue um fluxo contínuo da Tailspin Toys: + +1. Prepare o projeto, instale o aplicativo, conecte o repositório e explore o espaço de trabalho e o backlog predefinido. +2. Faça uma alteração específica de avaliação por estrelas, revise-a no navegador e faça manualmente o merge do primeiro pull request (PR). +3. Comece pela issue de filtragem, defina a abordagem no modo **Plan**, desenvolva-a no modo **Autopilot** e revise-a no modo **Interactive**. +4. Atualize as instruções do repositório e aplique-as ao trabalho de filtragem. +5. Personalize a skill `quality-checks` existente e use-a para executar as verificações do projeto. +6. Adicione o servidor do Model Context Protocol (MCP) do Playwright e use-o para explorar a filtragem em um navegador. +7. Crie um agente personalizado de garantia de qualidade (QA) e use-o para revisar requisitos, cobertura e evidências de verificação. +8. Revise toda a alteração de filtragem e use o Agent Merge no segundo PR. +9. Use o canvas Database Explorer existente e, em seguida, crie e teste um canvas de triagem vinculado ao repositório. + +Para manter o foco do workshop, você criará dois PRs: um para avaliações por estrelas e outro para filtragem, com as atualizações de instruções e da skill, o perfil de QA e os testes. Comece cada um a partir de `main` atualizado. O fluxo de filtragem e qualidade compartilha uma sessão, worktree e branch para que você possa aproveitar seu trabalho à medida que explora cada ferramenta. O exercício final de canvas permanece em sua própria sessão para que você se concentre na criação e no teste da superfície compartilhada sem repetir o fluxo de PR. ## Lições @@ -15,13 +29,15 @@ Ao longo destas lições, você instalará o aplicativo e configurará o projeto |--------|-------|-------------| | [0. Pré-requisitos][ex0] | Configuração | Instale o Node.js e crie sua cópia do projeto Tailspin Toys | | [1. Instalar o aplicativo Copilot][ex1] | Configuração | Instale o aplicativo, conecte seu projeto e conheça o espaço de trabalho | -| [2. Executar sua primeira sessão de agente][ex2] | Primeira alteração | Inicie uma sessão e entregue uma pequena alteração como seu primeiro pull request | -| [3. Orientar o Copilot com instruções personalizadas][ex3] | Contexto | Adicione a partir de uma issue um padrão de documentação e faça o merge | -| [4. Criar um recurso com o Autopilot][ex4] | Recurso principal | Use Plan e Autopilot para criar a filtragem e verifique-a com uma skill | -| [5. Testar com o MCP do Playwright][ex5] | Ferramentas externas | Adicione o servidor MCP do Playwright e explore o recurso em um navegador | -| [6. Fazer merge com o Agent Merge][ex6] | Merge | Permita que o Agent Merge corrija e integre o pull request de filtragem | -| [7. Planejar com canvases][ex7] | Colaboração | Crie um canvas compartilhado para planejar e acompanhar seu trabalho | -| [8. Revisão e próximos passos][ex8] | Resumo | Automatize tarefas recorrentes e explore os próximos passos | +| [2. Adicionar avaliações por estrelas: uma melhoria rápida][ex2] | Primeira alteração | Exiba as avaliações existentes e a alternativa para null e integre o PR 1 | +| [3. Modos de agente: Plan e Autopilot][ex3] | Modos de agente | Planeje o recurso a partir da issue, desenvolva-o com o Autopilot e revise-o no modo Interactive | +| [4. Orientar o Copilot com instruções personalizadas][ex4] | Contexto | Explore e atualize as instruções e aplique-as à filtragem | +| [5. Personalizar e usar uma skill quality-checks][ex5] | Verificações repetíveis | Explore a skill existente, altere o formato do relatório e execute-a | +| [6. Validar a funcionalidade com o MCP do Playwright][ex6] | Observação no navegador | Configure MCP pelo Customize e examine o comportamento da filtragem | +| [7. Criar e usar um agente de QA][ex7] | Requisitos e cobertura | Selecione um perfil especializado e reúna evidências de verificação final | +| [8. Criar e integrar o PR do recurso][ex8] | Revisão e merge | Revise a filtragem, as instruções, a skill, o perfil de QA e os testes e use o Agent Merge no segundo PR | +| [9. Explorar e criar canvases][ex9] | Colaboração | Use o Database Explorer e depois crie e teste um canvas de triagem vinculado ao repositório | +| [10. Revisão e próximos passos][ex10] | Resumo | Revise o fluxo, os artefatos e outros recursos | ## Pré-requisitos @@ -47,11 +63,13 @@ Antes de participar deste workshop, verifique se você tem: [ex0]: /pt-br/learning-hub/copilot-workshops/app/0-prerequisites/ [ex1]: /pt-br/learning-hub/copilot-workshops/app/1-install-copilot-app/ [ex2]: /pt-br/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /pt-br/learning-hub/copilot-workshops/app/3-custom-instructions/ -[ex4]: /pt-br/learning-hub/copilot-workshops/app/4-build-filtering/ -[ex5]: /pt-br/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[ex6]: /pt-br/learning-hub/copilot-workshops/app/6-agent-merge/ -[ex7]: /pt-br/learning-hub/copilot-workshops/app/7-canvases/ -[ex8]: /pt-br/learning-hub/copilot-workshops/app/8-review/ +[ex3]: /pt-br/learning-hub/copilot-workshops/app/3-agent-modes/ +[ex4]: /pt-br/learning-hub/copilot-workshops/app/4-custom-instructions/ +[ex5]: /pt-br/learning-hub/copilot-workshops/app/5-agent-skills/ +[ex6]: /pt-br/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[ex7]: /pt-br/learning-hub/copilot-workshops/app/7-qa-agent/ +[ex8]: /pt-br/learning-hub/copilot-workshops/app/8-create-pull-request/ +[ex9]: /pt-br/learning-hub/copilot-workshops/app/9-canvases/ +[ex10]: /pt-br/learning-hub/copilot-workshops/app/10-review/ [install-git]: https://github.com/git-guides/install-git [callout-student-plan-education]: https://github.com/education/students \ No newline at end of file diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 000000000..8d92d742d --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "Lição 0 - Pré-requisitos e configuração" +description: "Verifique os pré-requisitos do workshop, instale o aplicativo GitHub Copilot e conheça seu espaço de trabalho." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Antes de criar o Space Quiz, confirme que você tem tudo de que precisa, instale o aplicativo GitHub Copilot e conheça seu espaço de trabalho. + +Nesta lição, você vai: + +- verificar os pré-requisitos do workshop. +- instalar o aplicativo GitHub Copilot e fazer login. +- escolher um modelo para as sessões. +- identificar as principais áreas de trabalho do aplicativo. +- experimentar uma conversa rápida. + +## Pré-requisitos + +Você precisa de: + +- uma conta do GitHub. [Crie uma conta do GitHub][github-signup] ou use sua conta existente. +- um plano ativo do Copilot. [Ative o Copilot Free ou um plano pago do Copilot][copilot-plans]. Se sua organização já oferece acesso ao Copilot, use essa conta. +- um computador com macOS, Windows ou Linux. + +O aplicativo vem com o Git, então não é necessário instalar mais nada. + +> [!NOTE] +> Se você usa o Copilot Business ou o Copilot Enterprise, o administrador deve habilitar a política **Copilot CLI** para que as sessões de agente funcionem. + +## Instalar e configurar o aplicativo + +1. Baixe e instale o [aplicativo GitHub Copilot][download-app] para o seu sistema operacional. +2. Abra o aplicativo. +3. Selecione **Sign in to GitHub** e autentique-se. +4. Escolha um tema e selecione **Finish**. + +## Escolher um modelo + +Ao escolher um modelo, use a seguinte ordem de preferência e selecione a primeira opção disponível para você: + +1. **GPT-6-Luna** (recomendado). +2. **Auto**, como alternativa equilibrada. +3. Qualquer modelo da [lista de modelos ativos][active-models]. + +A disponibilidade de modelos depende do plano, da política da organização e da versão do produto. + +## Conhecer o aplicativo + +O aplicativo reúne o fluxo de desenvolvimento em um só lugar: + +- **New**: inicie uma sessão em um projeto ou escolha **Chat** para fazer uma pergunta rápida. +- **Pull requests**: revise e acompanhe seus pull requests em todos os repositórios. +- **Issues**: encontre issues atribuídas a você, criadas por você ou que mencionam você. +- **Automations**: agende tarefas recorrentes de agente em um repositório. +- **Customize**: altere temas e modelos e gerencie extensões de Canvas. +- **Projects**: abra seus repositórios, com as sessões de cada um listadas abaixo. + +## Experimentar uma conversa rápida + +Nem toda pergunta precisa de um espaço de trabalho. Em **New**, escolha **Chat** em vez de um projeto. Uma conversa não tem um repositório associado e não pode editar arquivos, então é a maneira mais rápida de fazer uma pergunta, obter uma explicação ou pensar em uma abordagem antes de iniciar uma sessão de verdade. + +Envie o seguinte prompt em uma conversa: + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +## Resumo e próximos passos + +Você verificou os pré-requisitos, instalou o aplicativo, escolheu um modelo e explorou as principais áreas de trabalho. Continue com a [Lição 1: Criar o espaço de trabalho do Space Quiz][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[download-app]: https://gh.io/app +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 000000000..c97e30a3c --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "Lição 1 - Criar o espaço de trabalho do Space Quiz" +description: "Inicie uma sessão Interactive local para o Space Quiz em uma pasta vazia." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Crie um espaço de trabalho local para o Space Quiz e configure uma sessão que mantenha você no controle enquanto o agente começa a trabalhar. + +Nesta lição, você vai: + +- abrir uma pasta local vazia. +- iniciar uma sessão de agente Interactive. +- confirmar a pasta, o modo e o modelo antes do primeiro prompt. + +## Criar o espaço de trabalho + +1. Abra o aplicativo GitHub Copilot e confirme que você fez login. +2. Selecione **New**, depois **Open folder**, e escolha uma pasta vazia chamada `space-quiz`. Crie a pasta primeiro, se ela não existir. +3. Defina o modo da sessão como **Interactive**. +4. Escolha seu modelo preferido usando a [ordem de preferência da Lição 0][model-order]. +5. Selecione **Create**. A sessão abre vazia e aguarda o primeiro prompt. + +![Ilustração da tela New do aplicativo Copilot com uma caixa de prompt, os seletores de modo Interactive, modelo Auto e agente Default, e a pasta space-quiz na branch main de Local.](/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg) + +Na tela **New**, você define a pasta, o modo e o agente antes de digitar o primeiro prompt. Uma sessão Interactive permite direcionar o trabalho e revisar cada etapa enquanto o agente cria o projeto. + +## Resumo e próximos passos + +Seu espaço de trabalho vazio do Space Quiz está pronto. Continue com a [Lição 2: Criar e aprimorar o quiz][next-lesson]. + +[model-order]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/#escolher-um-modelo +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md new file mode 100644 index 000000000..a2979459c --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "Lição 10 - Continuar uma sessão remotamente (opcional)" +description: "Use /remote para acompanhar uma sessão do aplicativo em andamento pela web ou pelo aplicativo móvel GitHub Copilot enquanto ela continua sendo executada no seu computador." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Esta lição é opcional e vale a pena deixá-la para quando o ciclo local já parecer natural. O comando `/remote` mantém a sessão em execução localmente enquanto a disponibiliza na web e no aplicativo móvel GitHub Copilot. Seu computador precisa permanecer ligado enquanto você acompanha a sessão de outro dispositivo. + +Nesta lição, você vai: + +- disponibilizar remotamente uma sessão em andamento. +- acompanhar a sessão pelo navegador ou pelo aplicativo móvel GitHub Copilot. +- revisar as alterações resultantes como faria com qualquer outro pull request. + +## Continuar uma sessão remotamente + +1. Abra uma sessão com trabalho em andamento. +2. Execute `/remote` para disponibilizar essa sessão remotamente. +3. Abra o link retornado no navegador ou acesse a sessão no aplicativo móvel GitHub Copilot. +4. Acompanhe o progresso por lá e revise as alterações exatamente como faria com qualquer outro pull request. + +> [!NOTE] +> **Isso não é delegação** +> +> A sessão continua sendo executada no seu computador. Você não está passando a tarefa para outro agente nem movendo-a para a nuvem. + +## Resumo e próximos passos + +Você disponibilizou uma sessão local para acesso de outro dispositivo. Continue com a [Lição 11: Explorar um Canvas][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md new file mode 100644 index 000000000..d2b8e7897 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "Lição 11 - Explorar um Canvas" +description: "Instale um Canvas Repository Issues Kanban e inicie uma sessão a partir de um cartão de issue." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Um **Canvas** é uma superfície compartilhada e bidirecional em que você e um agente podem atualizar o mesmo plano, quadro, checklist ou painel. Explore um Canvas Kanban que transforma as issues do repositório em um fluxo de trabalho visual. + +Nesta lição, você vai: + +- instalar uma extensão de Canvas. +- conectar o Canvas ao repositório Space Quiz. +- mover uma issue para o trabalho em andamento. +- inspecionar a sessão criada a partir da issue. + +## Instalar o Canvas Repository Issues Kanban + +1. Explore a [galeria de extensões de Canvas][canvas-gallery]. +2. Abra a [extensão Repository Issues Kanban][kanban-extension]. +3. Selecione **Install in GitHub Copilot app** e aprove a instalação. +4. No aplicativo, abra **Customize** e, depois, **Canvas**. +5. Confirme que a extensão está instalada. + +## Iniciar o trabalho a partir do Canvas + +1. Selecione **New session** para o Canvas. +2. Escolha o projeto `space-quiz`. +3. Explore o quadro de issues. +4. Mova um cartão de issue para a coluna de trabalho em andamento. +5. Abra a sessão gerada automaticamente. +6. Confirme que a issue selecionada está disponível como contexto da sessão. + +![Ilustração do Canvas Repository Issues Kanban com as colunas Backlog, Plan, Ready e Implement. A issue 13, Review screen, está sendo arrastada de Backlog para a coluna Plan, enquanto a issue 12, Per-question timer, permanece em Backlog.](/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg) + +Quando você solta um cartão em uma coluna, o Canvas passa essa issue para uma nova sessão com a issue já carregada. + +> [!NOTE] +> A extensão Repository Issues Kanban atual move cartões por arrastar e soltar com um dispositivo apontador. Se você não puder usar essa interação, anote o número da issue no quadro, abra a issue em **Issues** e selecione **New session**. Isso cria a mesma sessão baseada na issue sem mover o cartão. + +O Canvas oferece uma maneira visual de selecionar e iniciar o trabalho, mantendo o agente orientado pela issue. + +## Resumo e próximos passos + +Você usou uma superfície visual compartilhada para iniciar uma sessão de agente. Continue com a [Lição 12: Revisão e próximos passos][next-lesson]. + +[canvas-gallery]: https://awesome-copilot.github.com/extensions/ +[kanban-extension]: https://awesome-copilot.github.com/extension/accessibility-kanban/ +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md new file mode 100644 index 000000000..6f3771fab --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "Lição 12 - Revisão e próximos passos" +description: "Revise o fluxo de trabalho do aplicativo GitHub Copilot e encontre recursos para continuar aprendendo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você conduziu um agente por um fluxo de desenvolvimento completo, de uma pasta vazia ao trabalho planejado, à implementação isolada, à revisão de código, à automação, ao acesso remoto a uma sessão e a um Canvas visual. + +## O que você concluiu + +Você: + +- criou um projeto local no modo Interactive. +- criou e aprimorou um quiz com feedback do navegador em tempo real. +- inspecionou os detalhes da sessão e executou um teste básico de funcionamento no navegador. +- registrou as regras do projeto com `/init`. +- publicou o projeto como um repositório do GitHub. +- criou um backlog com escopo bem definido. +- implementou uma issue em uma worktree isolada e revisou o diff. +- planejou uma segunda issue antes de qualquer alteração no código. +- entregou uma issue por meio da revisão de pull request e do Agent Merge. +- automatizou a triagem semanal de issues. +- acompanhou uma sessão local remotamente. +- explorou um Canvas Kanban compartilhado. + +## Continuar explorando + +- [Conheça o aplicativo GitHub Copilot][about-app]. +- [Revise o guia oficial de introdução][getting-started]. +- [Saiba como trabalhar com sessões de agente][agent-sessions]. +- [Gerencie issues e pull requests no aplicativo][issues-and-prs]. +- [Conheça a revisão de código do Copilot][code-review]. +- [Crie e use extensões de Canvas][canvas-extensions]. +- [Siga as práticas recomendadas para escrever prompts que funcionem com código real][best-practices]. +- [Compare os planos do Copilot][copilot-plans]. + +Crie o mesmo Space Quiz com outra forma de trabalhar no [workshop de primeiros passos com o Copilot CLI][first-steps-cli] ou no [workshop de primeiros passos com o Visual Studio Code][first-steps-vscode]. Se estiver pronto para um cenário mais aprofundado com uma aplicação completa e um backlog de equipe, continue com o [workshop de desenvolvimento no mundo real com o aplicativo GitHub Copilot][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 +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-cli]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-app]: /pt-br/learning-hub/copilot-workshops/app/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 000000000..4b39719c1 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "Lição 2 - Criar e aprimorar o quiz" +description: "Crie um Space Quiz em um único arquivo e aprimore-o com o navegador integrado e o seletor de elementos." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Use um prompt detalhado para criar o Space Quiz, verificar seu comportamento no navegador integrado e fazer um ajuste visual com o seletor de elementos. + +Nesta lição, você vai: + +- criar um quiz sem dependências em `index.html`. +- testar o quiz no navegador integrado. +- inspecionar o código gerado. +- aprimorar um elemento selecionado preservando a acessibilidade. + +## Criar o quiz + +Envie o seguinte prompt na sessão `space-quiz`: + +```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. +``` + +Quando o agente terminar, responda a várias perguntas e confirme que: + +- a barra de progresso avança. +- a pontuação é atualizada. +- as respostas corretas exibem um estado verde. +- as respostas incorretas usam uma animação de tremor em vermelho. +- a tela de resultados aparece após a última pergunta. + +## Inspecionar o código gerado + +Recolha a barra lateral esquerda e o painel do navegador à direita e revise `index.html` na área de código expandida. Observe como HTML, CSS e JavaScript trabalham juntos em um único arquivo. Restaure os dois painéis quando terminar. + +## Aprimorar com o seletor de elementos + +1. Selecione o seletor de elementos na barra de ferramentas do navegador. +2. Selecione o título do quiz ou a área de respostas. +3. Envie o seguinte 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. Observe a atualização do navegador integrado e verifique a alteração. + +## Melhorias opcionais + +Se quiser continuar experimentando, peça ao agente para: + +- adicionar um fundo sutil de estrelas que respeite `prefers-reduced-motion`. +- tornar a tela de resultados mais comemorativa quando a pontuação for 8 ou mais. +- melhorar os estados de foco do teclado e, depois, verificar o quiz sem usar o mouse. + +## Resumo e próximos passos + +Você criou, inspecionou e aprimorou o Space Quiz. Continue com a [Lição 3: Inspecionar a sessão e testar o quiz][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 000000000..49fb46400 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "Lição 3 - Inspecionar a sessão e testar o quiz" +description: "Leia os detalhes da sessão para confirmar em que o agente está trabalhando e execute um teste básico de funcionamento no navegador antes de qualquer gravação no Git." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Agora que a sessão realizou trabalho de verdade, há algo para inspecionar. Confirme qual é o alvo do trabalho do agente e, depois, deixe que ele opere o quiz no navegador integrado e relate o que realmente aconteceu, em vez do que pretendia fazer. + +Nesta lição, você vai: + +- ler o painel de detalhes da sessão. +- verificar o projeto, o caminho, a branch, as alterações e o uso de contexto da sessão. +- executar um teste básico de funcionamento no navegador e corrigir eventuais falhas. + +## Ler os detalhes da sessão + +Os detalhes da sessão mostram exatamente em que o agente está trabalhando. Você não precisa observar esse painel o tempo todo, mas tudo nele importa quando um resultado surpreende você. + +![Ilustração do painel de detalhes da sessão de criação do Space Quiz no aplicativo Copilot. Ele mostra a branch main a partir de origin/main, o caminho, o projeto, o nome da sessão, o ID da sessão e o agente, um arquivo alterado, contagens de tokens, uso de contexto de 27%, gasto da sessão e opções para habilitar o controle remoto, renomear, ver informações, compartilhar como um gist secreto ou arquivar a sessão.](/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg) + +O painel mostra onde o trabalho acontece, o que mudou e quanto da janela de contexto está ocupado. Não há uma linha de modelo, porque você escolhe o modelo para cada solicitação na caixa de composição. + +1. Confirme que **project**, **path** e **branch** correspondem ao que você acredita estar editando. +2. Leia **Changes** para ver se esta sessão já alterou alguma coisa. +3. Verifique **context usage**. Conforme o uso aumenta, o agente tem menos espaço para a tarefa em si, e esse é o sinal para iniciar uma nova sessão. + +> [!TIP] +> **A maioria dos resultados ruins vem de problemas de contexto** +> +> Uma branch errada, uma pasta errada ou uma janela de contexto quase cheia explicam muito mais surpresas do que um prompt ruim. + +## Testar antes de qualquer gravação no Git + +O navegador integrado é um navegador de verdade, então o agente pode operar o quiz e verificar seu comportamento. Envie o seguinte prompt: + +```plaintext +Run a browser-level smoke test for the quiz in the integrated browser. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Observe o navegador integrado enquanto o agente percorre as perguntas. +2. Se algo falhar, deixe o agente corrigir o problema e executar o teste novamente até que tudo passe. +3. Avance apenas quando a criação do projeto e o teste tiverem sido concluídos com sucesso. + +Nada foi gravado no Git ainda. O próximo passo é `/init`, que lê o projeto no estado atual, então vale a pena garantir primeiro que o projeto funciona. + +## Resumo e próximos passos + +Você confirmou em que a sessão está trabalhando e verificou o quiz com um teste básico de funcionamento no navegador. Continue com a [Lição 4: Registrar instruções do projeto][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 000000000..67352e787 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lição 4 - Registrar instruções do projeto" +description: "Execute /init para gerar instruções para o agente que descrevam o Space Quiz concluído e adapte-as à sua forma de trabalhar." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Agora que o quiz foi criado, aprimorado e testado, registre como as futuras sessões devem tratar este projeto. As instruções para o agente são lidas por todas as sessões antes do início do trabalho, para que você não precise repetir as mesmas orientações em todos os prompts. + +Nesta lição, você vai: + +- gerar instruções para o agente com `/init`. +- revisar o arquivo gerado antes de aceitá-lo. +- enxugar e personalizar as instruções. + +## Registrar as regras com `/init` + +1. Execute `/init` na sessão do aplicativo. +2. Revise o arquivo gerado de instruções para o agente antes de aceitá-lo. +3. Enxugue-o para manter orientações que reflitam este projeto: um único arquivo, sem dependências, acessível e testado no navegador. + +> [!IMPORTANT] +> **Por que depois de aprimorar?** +> +> `/init` lê o projeto como ele existe neste momento. Executá-lo depois de criar e testar o quiz produz instruções que descrevem código real, em vez de uma pasta vazia. + +## Personalizar as instruções + +O arquivo de instruções não serve apenas para registrar fatos sobre o projeto. Adicione os detalhes que você repetiria em todos os prompts, como sua preferência de escrita de código, convenções de nomenclatura, bibliotecas a evitar e a quantidade de comentários desejada. Todas as futuras sessões leem esse arquivo antes de ler o prompt. + +## Resumo e próximos passos + +Seu projeto agora tem instruções para o agente baseadas em código real. Continue com a [Lição 5: Publicar o projeto][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md new file mode 100644 index 000000000..a5f6fae95 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "Lição 5 - Publicar o projeto" +description: "Transforme o experimento local do Space Quiz em um repositório público no GitHub." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Publique o Space Quiz para gerenciar issues, usar worktrees isoladas e concluir um fluxo de trabalho com pull requests. + +Nesta lição, você vai: + +- inicializar a pasta como um repositório Git. +- criar um repositório público no GitHub e enviar o código para ele. +- vincular o projeto ao GitHub no aplicativo Copilot. + +## Publicar o repositório + +Envie o seguinte 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] +> O agente pedirá confirmação antes de criar um repositório ou enviar código. Revise a ação proposta e o destino antes de aprovar. + +Quando o agente terminar: + +1. Abra o novo repositório no GitHub. +2. Confirme que `index.html` está presente. +3. Volte ao aplicativo Copilot e confirme que o projeto está vinculado ao repositório. + +## Resumo e próximos passos + +Seu projeto agora é um repositório do GitHub. Continue com a [Lição 6: Trabalhar com issues e sessões][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 000000000..edd63f778 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "Lição 6 - Trabalhar com issues e sessões" +description: "Crie um backlog com escopo bem definido, selecione uma issue, implemente-a em uma worktree isolada e revise o diff por conta própria." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Peça ao agente para sugerir melhorias de produto com escopo bem definido, transforme essas ideias em issues do GitHub e implemente uma delas em uma sessão isolada. + +Nesta lição, você vai: + +- criar três issues com escopo bem definido para o Space Quiz. +- explorar o backlog em **Issues**. +- iniciar uma sessão a partir de uma issue em uma nova worktree. +- revisar o diff na aba **Changes** e verificar o recurso. + +## Criar um backlog em Issues + +Envie o seguinte 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. +``` + +Abra **Issues**, revise as três issues e escolha uma que tenha valor claro e um escopo viável. + +![Ilustração da visualização Issues do aplicativo Copilot. A barra lateral lista New, Pull requests, Issues, Automations, Customize, More e o projeto space-quiz. A área principal tem as abas Assigned to me, Created by me, Mentioning me e Done, uma caixa de pesquisa, filtros State e Assignee e uma lista de três issues abertas no repositório space-quiz.](/images/learning-hub/copilot-workshops/first-steps-app-issues.svg) + +**Issues** reúne no aplicativo suas issues do GitHub de todos os repositórios, filtradas por **Assigned to me**, **Created by me**, **Mentioning me** e **Done**. + +## Implementar uma issue + +1. Abra a issue selecionada em **Issues**. +2. Selecione **New session**. +3. Escolha uma **new worktree** quando solicitado. +4. Use o modo **Interactive** e seu modelo preferido. +5. Envie o seguinte 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. + ``` + +A nova worktree mantém esse recurso isolado da branch padrão até que você esteja pronto para revisá-lo e mesclá-lo. + +## Revisar o diff por conta própria + +Quando o agente apresentar o resultado, não confie apenas no que ele diz. + +1. Abra o painel lateral à direita e selecione a aba **Changes**. +2. Leia o diff de todos os arquivos que a sessão alterou. +3. Teste o recurso no navegador integrado e confirme que ele atende aos critérios de aceitação da issue. + +![Ilustração de uma sessão do aplicativo Copilot com a aba Changes aberta no painel lateral à direita. Ela mostra um arquivo alterado, index.html, com 142 linhas adicionadas e 8 removidas, e linhas de diff embutidas ao lado da conversa da sessão.](/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg) + +A aba **Changes** lista todos os arquivos que a sessão alterou, com o diff embutido. + +## Resumo e próximos passos + +Você criou um backlog, implementou uma issue em uma sessão isolada e revisou o diff. Continue com a [Lição 7: Planejar antes de editar][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 000000000..6830748da --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "Lição 7 - Planejar antes de editar" +description: "Use o modo Plan em uma segunda issue para que o agente investigue o projeto e proponha uma abordagem antes de alterar qualquer arquivo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Nem toda issue deve começar com edições. O modo Plan investiga o projeto, propõe uma abordagem e aguarda sua aprovação antes de qualquer alteração no código. + +Nesta lição, você vai: + +- iniciar uma sessão para uma segunda issue no modo Plan. +- revisar e aprimorar o plano proposto pelo agente. +- aprovar o plano e escolher como a sessão continua. + +## Definir a abordagem antes de qualquer alteração no código + +1. Abra uma **segunda issue** em **Issues** e selecione **New session**. +2. Na configuração da sessão, escolha **Plan** em vez de **Interactive** ou **Autopilot**. +3. Envie o seguinte prompt e deixe o agente investigar sem alterar arquivos: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Leia o plano proposto e solicite alterações se algo estiver faltando. +5. Aprove o plano. +6. Quando solicitado, escolha se a sessão continua no modo **Interactive** ou **Autopilot**. + +> [!TIP] +> **Quando o modo Plan vale a pena** +> +> Use o modo Plan para qualquer trabalho ambíguo, que envolva várias partes do projeto ou que seja caro de desfazer. O momento de menor custo para corrigir uma abordagem ruim é antes da primeira edição. + +## Resumo e próximos passos + +Você definiu uma abordagem com o agente antes que ele escrevesse qualquer código. Continue com a [Lição 8: Concluir o ciclo de revisão do Copilot][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 000000000..21cd0e9f1 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "Lição 8 - Concluir o ciclo de revisão do Copilot" +description: "Crie um pull request, solicite uma revisão do Copilot, trate o feedback que exige ação e deixe o Agent Merge manter o pull request em boas condições." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Transforme a issue implementada em um pull request, solicite uma revisão do Copilot e trate o feedback antes de mesclar. + +Nesta lição, você vai: + +- inspecionar as alterações da sessão uma última vez. +- criar um pull request a partir da sessão de agente. +- solicitar uma revisão de código do Copilot. +- revisar e aplicar o feedback que exige ação. +- ativar o Agent Merge para manter o pull request em boas condições até a mesclagem. + +## Criar e revisar o pull request + +1. Abra o painel lateral à direita e selecione a aba **Changes** para inspecionar os arquivos alterados na sessão. +2. Selecione **Create PR** na barra de ferramentas da sessão. +3. Revise o título e a descrição gerados e crie o pull request. +4. Abra o pull request no GitHub. +5. No menu **Reviewers**, solicite uma revisão de **Copilot**. +6. Abra a aba **Files changed** e leia todos os comentários da revisão. +7. Para cada comentário que exige ação, use a ação **Fix** do Copilot no aplicativo ou faça a alteração por conta própria. +8. Revise cada alteração e teste o recurso novamente. +9. Responda com uma descrição concisa do que mudou e resolva a conversa. + +> [!NOTE] +> Se uma sugestão não se aplicar ou estiver fora do escopo do pull request, responda com o motivo em vez de fazer uma alteração desnecessária. Resolva todas as conversas de revisão antes de mesclar. + +## Mesclar com o Agent Merge + +Ative **Agent Merge** para o pull request e deixe o agente mantê-lo em boas condições. O agente trata comentários de revisão, corrige verificações com falha e resolve conflitos conforme surgem, depois mescla quando tudo passa. + +Se preferir mesclar por conta própria, revise o diff final, verifique o recurso e mescle o pull request depois que todas as verificações passarem. + +## Resumo e próximos passos + +Você concluiu o ciclo de desenvolvimento, da issue ao pull request revisado e mesclado. Continue com a [Lição 9: Automatizar a triagem de issues][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md new file mode 100644 index 000000000..b78e65bae --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "Lição 9 - Automatizar a triagem de issues" +description: "Crie e execute uma automação semanal que resume as issues abertas recentes." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Use uma automação para transformar uma tarefa recorrente de triagem de issues em um fluxo de trabalho agendado de agente. + +Nesta lição, você vai: + +- criar uma automação semanal. +- conectar a automação ao projeto Space Quiz. +- executar a automação imediatamente e revisar o resultado. + +## Criar a automação + +![Ilustração da visualização Automations do aplicativo Copilot com filtros All, Local e Cloud, uma caixa de pesquisa, botões Templates e New automation e dois cartões de automação semanal para o projeto space-quiz: Issue triage e Accessibility audit.](/images/learning-hub/copilot-workshops/first-steps-app-automations.svg) + +As automações executam o mesmo prompt em horários agendados, cada uma em sua própria sessão, para que uma automação nunca interfira no seu trabalho. Você pode filtrar por **All**, **Local** ou **Cloud** e executar qualquer automação sob demanda. + +1. Abra **Automations**. +2. Escolha o modelo para uma nova automação semanal. +3. Insira o seguinte 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. Defina o modo da sessão como **Autopilot**. +5. Defina o modelo como **Auto**. +6. Selecione o projeto `space-quiz`. +7. Abra o menu suspenso **Create** e selecione **Create and run**. + +Revise o resumo gerado e confirme que ele faz referência às issues abertas recentes do repositório. + +## Resumo e próximos passos + +Você criou um fluxo de trabalho reutilizável de agente que é executado em horários agendados. Continue com a [Lição 10: Continuar uma sessão remotamente][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/index.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/index.md new file mode 100644 index 000000000..400b7a805 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/index.md @@ -0,0 +1,55 @@ +--- +title: "Tour do aplicativo GitHub Copilot" +description: "Faça um tour guiado pelo aplicativo GitHub Copilot criando e entregando um Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +Faça um tour prático pelo aplicativo GitHub Copilot, pensado para quem está começando. Você criará um Space Quiz colorido a partir de uma pasta vazia e percorrerá todo o ciclo de desenvolvimento, do primeiro prompt a um pull request revisado. + +O workshop leva aproximadamente de 60 a 90 minutos. O projeto usa um único arquivo HTML, sem dependências de tempo de execução, para que você possa se concentrar em conhecer o aplicativo e seus fluxos de trabalho com agentes. + +> [!NOTE] +> Este workshop foi criado por [James Montemagno][james] e adaptado de [First Steps with GitHub Copilot][source-lab]. O conteúdo original está disponível sob a [licença MIT][source-license]. + +## Lições + +| Lição | Tópico | O que você fará | +| ------ | ----- | ---------------- | +| [0. Pré-requisitos e configuração][lesson-0] | Configuração | Verificar os pré-requisitos, instalar o aplicativo, escolher um modelo e explorar o espaço de trabalho | +| [1. Criar o espaço de trabalho][lesson-1] | Criação | Iniciar uma sessão Interactive em uma pasta local vazia | +| [2. Criar e aprimorar][lesson-2] | Criação | Criar o quiz e aprimorá-lo no navegador integrado | +| [3. Inspecionar e testar][lesson-3] | Contexto e teste | Ler os detalhes da sessão e executar um teste básico de funcionamento no navegador | +| [4. Registrar instruções do projeto][lesson-4] | Instruções | Gerar e adaptar instruções para o agente com `/init` | +| [5. Publicar o projeto][lesson-5] | Publicação | Criar um repositório público no GitHub a partir do projeto local | +| [6. Trabalhar com issues e sessões][lesson-6] | Implementação | Criar um backlog, implementar uma issue em uma worktree isolada e revisar o diff | +| [7. Planejar antes de editar][lesson-7] | Planejamento | Usar o modo Plan para definir uma abordagem para uma segunda issue | +| [8. Concluir o ciclo de revisão][lesson-8] | Revisão | Abrir um pull request, tratar o feedback da revisão do Copilot e usar o Agent Merge | +| [9. Automatizar a triagem de issues][lesson-9] | Automação | Agendar e executar uma automação semanal de triagem de issues | +| [10. Continuar uma sessão remotamente][lesson-10] | Acesso remoto (opcional) | Acompanhar uma sessão local em andamento pela web ou pelo celular com `/remote` | +| [11. Explorar um Canvas][lesson-11] | Canvas | Iniciar o trabalho a partir de um Canvas Repository Issues Kanban | +| [12. Revisão e próximos passos][lesson-12] | Revisão | Recapitular o fluxo de trabalho e continuar aprendendo | + +## Começar + +[Comece pela Lição 0: Pré-requisitos e configuração][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/ +[lesson-1]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ +[lesson-2]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ +[lesson-3]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ +[lesson-4]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ +[lesson-5]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ +[lesson-6]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ +[lesson-7]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ +[lesson-8]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ +[lesson-9]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ +[lesson-10]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ +[lesson-11]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ +[lesson-12]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 000000000..f198a6b51 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "Lição 0 - Pré-requisitos e configuração" +description: "Verifique os pré-requisitos do workshop, instale o GitHub Copilot CLI, faça login e escolha um modelo a partir de uma pasta de projeto vazia." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Coloque um agente no seu terminal. Confirme que você tem tudo de que precisa, instale o GitHub Copilot CLI, faça login e prepare-se para fazer a primeira solicitação a partir de uma pasta vazia. + +Nesta lição, você vai: + +- verificar os pré-requisitos do workshop. +- instalar o GitHub Copilot CLI e fazer login. +- criar a pasta do projeto e marcá-la como confiável. +- escolher um modelo para a sessão. + +## Pré-requisitos + +Você precisa de: + +- uma conta do GitHub. [Crie uma conta do GitHub][github-signup] ou use sua conta existente. +- um plano ativo do Copilot. [Ative o Copilot Free ou um plano pago do Copilot][copilot-plans]. Se sua organização já oferece acesso ao Copilot, use essa conta. +- [Git][git] instalado. Execute `git --version` para verificar. +- um computador com macOS, Windows ou Linux. + +A [GitHub CLI][gh-cli] (`gh`) é opcional, mas recomendada, porque permite que o agente crie repositórios e pull requests para você. + +> [!NOTE] +> Se você usa o Copilot Business ou o Copilot Enterprise, o administrador deve habilitar a política **Copilot CLI** para que as sessões de agente funcionem. + +## Configurar a CLI + +1. Instale o [GitHub Copilot CLI][install-cli] para sua plataforma. +2. Crie a pasta do projeto e entre nela: + + ```bash + mkdir space-quiz && cd space-quiz + ``` + +3. Execute `copilot`, faça login e marque a pasta como confiável quando solicitado. +4. Execute `/model` e escolha um modelo usando a ordem de preferência da próxima seção. +5. Opcionalmente, instale a [GitHub CLI][gh-cli], se ainda não a tiver. + +![Ilustração do Copilot CLI em uma janela de terminal intitulada space-quiz. Ele pergunta se os arquivos desta pasta são confiáveis, com Yes, proceed selecionado, e sugere o comando /model para escolher o modelo desta sessão e /help para listar todos os comandos de barra. A linha de prompt diz Create a space exploration quiz.](/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg) + +A CLI abre com uma solicitação para confiar na pasta e alguns comandos iniciais, incluindo `/model`. + +> [!TIP] +> Digite `/` a qualquer momento para explorar todos os comandos disponíveis ou execute `/help` para ver a referência completa. + +## Escolher um modelo + +Ao executar `/model`, use a seguinte ordem de preferência e selecione a primeira opção disponível para você: + +1. **GPT-6-Luna** (recomendado). +2. **Auto**, como alternativa equilibrada. +3. Qualquer modelo da [lista de modelos ativos][active-models]. + +A disponibilidade de modelos depende do plano, da política da organização e da versão do produto. + +## Resumo e próximos passos + +O Copilot CLI está instalado, autenticado e em execução em uma pasta `space-quiz` vazia. Continue com a [Lição 1: Criar o quiz pelo terminal][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[git]: https://git-scm.com/downloads +[gh-cli]: https://cli.github.com/ +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md new file mode 100644 index 000000000..0d937422f --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "Lição 1 - Criar o quiz pelo terminal" +description: "Peça ao Copilot CLI o Space Quiz completo em uma solicitação detalhada e faça uma melhoria com escopo bem definido." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Peça o projeto completo em uma solicitação detalhada, revise o que o agente propõe antes de aprovar e, depois, faça uma pequena alteração com escopo definido. + +Nesta lição, você vai: + +- criar um quiz sem dependências em `index.html`. +- abrir o quiz em um navegador a partir da sessão. +- fazer uma alteração com escopo bem definido e verificá-la. + +## Criar o quiz + +Envie o seguinte prompt na sessão do Copilot CLI: + +```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 an emoji reaction at the end. Single index.html, no server or dependencies. Accessible, keyboard-navigable, and respects prefers-color-scheme. +``` + +1. Leia o plano proposto e aprove as alterações nos arquivos. +2. Abra `index.html` em um navegador e responda a algumas perguntas. Para abri-lo a partir da sessão, execute `!open index.html` no macOS, `!start index.html` no Windows ou `!xdg-open index.html` no Linux. + +## Fazer uma pequena alteração e verificá-la + +Peça uma melhoria com escopo bem definido para observar como uma solicitação delimitada se comporta: + +```plaintext +The results screen feels flat. Give it a stronger sense of arrival: animate the score counting up and make the emoji reaction larger. Change nothing else. +``` + +1. Recarregue a página no navegador e jogue até o fim. +2. Observe que nada está no Git ainda, então não há uma versão de referência para comparar o diff. Isso muda depois que você publica o projeto. + +## Resumo e próximos passos + +Você criou o quiz e o aprimorou com uma solicitação de escopo definido. Continue com a [Lição 2: Registrar instruções do projeto][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md new file mode 100644 index 000000000..376f5b2b3 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "Lição 10 - Revisão e próximos passos" +description: "Revise o fluxo de trabalho do Copilot CLI e encontre recursos para continuar aprendendo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você concluiu o ciclo centrado no terminal: criou o quiz, revisou diffs, publicou, executou sessões em paralelo, planejou antes de editar, retomou sessões, mesclou um pull request e delegou novo trabalho sem sair do terminal. + +## O que você concluiu + +Você: + +- instalou o Copilot CLI e escolheu um modelo com `/model`. +- criou e aprimorou um quiz a partir de um único prompt. +- registrou as regras do projeto com `/init`. +- publicou o projeto por prompt ou manualmente. +- adicionou uma issue à conversa pelo painel lateral e revisou a alteração com `/diff`. +- executou uma segunda sessão em sua própria worktree com `/worktree`. +- planejou a segunda issue com `/plan` antes de qualquer alteração no código. +- inspecionou e gerenciou o contexto com `/context` e `/clear`. +- retomou sessões com `copilot --resume` e `/resume`. +- criou e mesclou um pull request com `/pr create` e `/pr agentmerge`. +- delegou um novo recurso com `/delegate`. + +## Continuar explorando + +- [Instale o Copilot CLI no macOS, Windows e Linux][install-cli]. +- [Conheça o Copilot CLI, seus comandos de barra e suas opções][about-cli]. +- [Use a GitHub CLI para repositórios e pull requests][gh-cli]. +- [Instale o Git][git]. +- [Siga as práticas recomendadas para escrever prompts que funcionem com código real][best-practices]. +- [Compare os planos do Copilot][copilot-plans]. + +Crie o mesmo Space Quiz com outra forma de trabalhar no [workshop de primeiros passos com o aplicativo GitHub Copilot][first-steps-app] ou no [workshop de primeiros passos com o Visual Studio Code][first-steps-vscode]. Se estiver pronto para um cenário mais aprofundado com uma aplicação completa e um backlog de equipe, continue com o [workshop de desenvolvimento no mundo real com o Copilot CLI][real-world-cli]. + +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[about-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[gh-cli]: https://cli.github.com/ +[git]: https://git-scm.com/downloads +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-vscode]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-cli]: /pt-br/learning-hub/copilot-workshops/cli/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 000000000..0df29bdf5 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lição 2 - Registrar instruções do projeto" +description: "Execute /init para gerar instruções para o agente que descrevam o Space Quiz concluído e adapte-as à sua forma de trabalhar." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Com um quiz funcional salvo em disco, gere instruções para o agente que descrevam o projeto real. Todas as futuras sessões leem essas instruções antes do início do trabalho, para que você não precise repetir as mesmas orientações em todos os prompts. + +Nesta lição, você vai: + +- gerar instruções para o agente com `/init`. +- revisar o arquivo gerado antes de aceitá-lo. +- enxugar e personalizar as instruções. + +## Registrar as regras com `/init` + +1. Execute `/init` na sessão. +2. Revise o arquivo de instruções gerado antes de aceitá-lo. +3. Mantenha apenas orientações que correspondam a este projeto: um único arquivo, sem dependências, acessível e testado no navegador. + +> [!IMPORTANT] +> **A ordem importa** +> +> `/init` lê o projeto como ele existe neste momento. Executá-lo depois de criar e aprimorar o quiz produz instruções baseadas em código real. + +## Personalizar as instruções + +O arquivo de instruções não serve apenas para registrar fatos sobre o projeto. Adicione os detalhes que você repetiria em todos os prompts, como sua preferência de escrita de código, convenções de nomenclatura, bibliotecas a evitar e a quantidade de comentários desejada. Todas as futuras sessões leem esse arquivo antes de ler o prompt. + +## Resumo e próximos passos + +Seu projeto agora tem instruções para o agente baseadas em código real. Continue com a [Lição 3: Publicar o projeto][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md new file mode 100644 index 000000000..642db9e81 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "Lição 3 - Publicar o projeto" +description: "Inicialize, faça commit e publique o Space Quiz no GitHub por prompt ou executando os comandos por conta própria." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Transforme o experimento em um repositório público no GitHub. Você pode pedir isso em um único prompt ou executar os comandos por conta própria. Experimente as duas maneiras uma vez e saberá exatamente o que o agente faz em seu nome. + +Nesta lição, você vai: + +- inicializar um repositório Git e criar o primeiro commit. +- criar um repositório público no GitHub e enviar o código para ele. +- confirmar que o commit e o arquivo foram registrados. + +## Opção A: Pedir ao agente + +Envie o seguinte 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. +``` + +Aprove cada ação do Git e do GitHub conforme o agente solicitar. + +## Opção B: Executar por conta própria + +Adicione o prefixo `!` a cada comando para executá-lo de dentro da sessão ou execute os comandos sem o prefixo no seu próprio terminal: + +```plaintext +!git init -b main +!git add . +!git commit -m "Add space quiz" +!gh repo create space-quiz --public --source=. --push +``` + +O último comando usa a [GitHub CLI][gh-cli]. Se você não a tiver, crie o repositório no GitHub e execute `!git remote add origin ` e `!git push -u origin main`. + +## Confirmar o resultado + +1. Execute `!git log --oneline` para confirmar que o commit foi registrado. +2. Abra o repositório no GitHub e confirme que `index.html` está presente. + +## Resumo e próximos passos + +Seu projeto agora é um repositório do GitHub com uma versão funcional de referência para comparação. Continue com a [Lição 4: Trabalhar em issues em paralelo][next-lesson]. + +[gh-cli]: https://cli.github.com/ +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 000000000..50e661365 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "Lição 4 - Trabalhar em issues em paralelo" +description: "Crie um backlog, adicione uma issue à conversa pelo painel lateral, revise alterações com /diff e inicie uma segunda sessão em sua própria worktree." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Mantenha o backlog e o ciclo de implementação no terminal e abra sessões separadas para trabalhos independentes. + +Nesta lição, você vai: + +- criar três issues do GitHub com escopo bem definido. +- adicionar uma issue à conversa pelo painel lateral e implementá-la. +- revisar a alteração com `/diff`. +- iniciar uma segunda sessão em uma worktree isolada. + +## Criar um backlog + +Envie o seguinte prompt: + +```plaintext +Review the space quiz and create three focused GitHub issues with clear titles, user-focused descriptions, and acceptance criteria. Do not implement them yet. +``` + +## Trabalhar na primeira issue nesta sessão + +1. Pressione a tecla Left arrow para abrir o painel lateral e pressione Tab para ir até a aba **Issues**. +2. Destaque a primeira issue e pressione c para adicioná-la à conversa como contexto. Para ler a issue completa primeiro, pressione Enter. +3. Peça ao agente para implementar a issue. + +![Ilustração do painel lateral do Copilot CLI em um terminal. A aba Issues está selecionada entre as abas Current, Sessions, Issues, Pull requests e Gists. Um filtro de pesquisa por issues abertas no repositório space-quiz mostra uma issue, Add a score screen at the end of the quiz. As dicas explicam que a tecla Left arrow abre o painel e Tab alterna entre as abas, e a linha inferior lista as teclas: barra para pesquisar, Enter para detalhes, o para abrir, w para worktree, c para conversa e a para todas.](/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg) + +O painel lateral lista todas as abas na parte superior, e as dicas na parte inferior são as teclas que atuam sobre o item destacado. + +## Revisar a alteração com `/diff` + +O projeto está publicado, então há uma versão funcional de referência para comparação. `/diff` mostra exatamente o que esta issue alterou em relação a essa versão, que é justamente o que você está prestes a pedir que alguém revise. + +1. Execute `/diff` e leia todos os arquivos alterados. +2. Peça uma correção para qualquer coisa que pareça errada e execute `/diff` novamente. +3. Execute `!git status` ou `!git diff` sempre que quiser inspecionar o Git diretamente. + +## Trabalhar na segunda issue em paralelo + +1. Abra o painel lateral novamente e alterne para a aba **Sessions**. +2. Inicie outra sessão para a segunda issue sem perder a primeira. +3. Na nova sessão, execute `/worktree` para que ela tenha uma worktree isolada em vez de criar uma branch no mesmo diretório. As duas sessões agora podem ser executadas ao mesmo tempo sem interferir uma na outra. +4. Adicione a segunda issue a essa sessão com c. +5. Deixe a sessão nesse ponto por enquanto. Na próxima lição, você planejará esta issue antes de escrever qualquer código. + +![Ilustração da saída do Copilot CLI após executar /worktree. Ela informa que criou a worktree ../space-quiz-13 na branch issue-13-review-screen e que esta sessão agora trabalha ali, enquanto main permanece intacta.](/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg) + +`/worktree` move a sessão para seu próprio checkout em sua própria branch, para que a primeira sessão continue trabalhando sem interferências. + +## Resumo e próximos passos + +Você implementou a primeira issue, revisou-a com `/diff` e iniciou uma segunda sessão em sua própria worktree. Continue com a [Lição 5: Planejar antes de editar][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 000000000..14382d591 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "Lição 5 - Planejar antes de editar" +description: "Alterne a segunda sessão para o modo de planejamento com /plan para que o agente proponha uma abordagem antes de editar qualquer arquivo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você já tem uma segunda sessão em execução em sua própria worktree. Não comece pelo código nela. O modo de planejamento investiga o projeto e propõe uma abordagem sem alterar os arquivos. + +Nesta lição, você vai: + +- alternar a segunda sessão para o modo de planejamento. +- revisar e aprimorar o plano proposto pelo agente. +- aprovar o plano e deixar a sessão implementá-lo. + +## Definir a abordagem antes de qualquer edição + +1. Alterne para a **segunda sessão** que você abriu na lição anterior. +2. Execute `/plan` para alternar essa sessão para o modo de planejamento. +3. Envie o seguinte prompt e deixe o agente investigar sem editar nada: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Leia o plano, aponte o que estiver faltando e aprove-o. +5. A sessão continua com a implementação, usando o plano aprovado como orientação. + +> [!TIP] +> **Quando o modo de planejamento vale a pena** +> +> Use o modo de planejamento para qualquer trabalho ambíguo, que envolva várias partes do projeto ou que seja caro de desfazer. O momento de menor custo para corrigir uma abordagem ruim é antes da primeira edição. + +## Resumo e próximos passos + +Você definiu uma abordagem com o agente antes que ele escrevesse qualquer código. Continue com a [Lição 6: Saber o que o agente pode ver][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md new file mode 100644 index 000000000..1ed5010c3 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "Lição 6 - Saber o que o agente pode ver" +description: "Use /context para inspecionar o que ocupa a janela de contexto e /clear para recomeçar quando uma conversa perder o rumo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Os comandos de terminal tornam o contexto visível e permitem gerenciá-lo de forma consciente. Saber o que o agente pode ver ajuda você a entender os resultados e decidir quando recomeçar. + +Nesta lição, você vai: + +- inspecionar a janela de contexto com `/context`. +- ver quanto da janela cada parte consome. +- redefinir uma conversa que perdeu o rumo com `/clear`. + +## Inspecionar o contexto + +1. Execute `/context` para inspecionar arquivos, instruções e histórico da conversa. +2. Verifique quanto da janela cada parte está consumindo. +3. Execute `/clear` para recomeçar quando a conversa tiver perdido o rumo. +4. Adicione o arquivo certo novamente antes de pedir outra alteração. + +![Ilustração da saída do Copilot CLI após executar /context. Um indicador da janela de contexto mostra 61% de uso, dividido entre conversa, arquivos lidos e instruções. Uma nota sugere usar /compact para resumir ou iniciar uma nova sessão quando houver pouco espaço disponível.](/images/learning-hub/copilot-workshops/first-steps-cli-context.svg) + +`/context` mostra exatamente o que ocupa a janela de contexto e quanto espaço resta. Quando houver pouco espaço disponível, use `/compact` para resumir a conversa ou inicie uma nova sessão. + +## Resumo e próximos passos + +Agora você pode ver e gerenciar o que o agente sabe. Continue com a [Lição 7: Retomar sessões e acessar remotamente][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 000000000..9ce82c7e1 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "Lição 7 - Retomar sessões e acessar remotamente" +description: "Saia de uma sessão do Copilot CLI e volte a ela mais tarde com copilot --resume ou /resume e, opcionalmente, acompanhe-a de outro dispositivo com /remote." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +As sessões podem ser pausadas sem perder a conversa ou o contexto do espaço de trabalho. Saia de uma sessão, volte a ela mais tarde e, opcionalmente, disponibilize-a para acesso de outro dispositivo. + +Nesta lição, você vai: + +- sair de uma sessão e retomá-la pelo terminal. +- alternar entre sessões sem sair da CLI. +- opcionalmente, disponibilizar uma sessão remotamente. + +## Sair de uma sessão e voltar mais tarde + +1. Saia da sessão atual do Copilot CLI quando estiver pronto para trocar de tarefa. +2. Em um terminal, execute `copilot --resume` para escolher uma sessão anterior. +3. Dentro do Copilot CLI, use `/resume` para alternar entre sessões sem sair da CLI. +4. Confirme que a sessão restaurada ainda tem os arquivos, o contexto da issue e o modelo esperados. + +## Opcional: Continuar uma sessão remotamente + +Execute `/remote` para manter *essa mesma sessão* em execução localmente enquanto a disponibiliza na web e no aplicativo móvel GitHub Copilot. Seu computador precisa permanecer ligado. Abra o link retornado no navegador ou acesse a sessão no aplicativo móvel GitHub Copilot. + +> [!NOTE] +> `/remote` não é delegação e não move a execução para a nuvem. Ele não é necessário para este workshop, então experimente-o quando o ciclo local já parecer natural. + +## Resumo e próximos passos + +Você pode pausar e retomar sessões e acompanhar uma sessão local de outro dispositivo. Continue com a [Lição 8: Criar, revisar e mesclar pela CLI][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 000000000..217b68afb --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "Lição 8 - Criar, revisar e mesclar pela CLI" +description: "Inspecione o diff final, crie um pull request com /pr create, trate o feedback e mescle com /pr agentmerge." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Conclua o ciclo de desenvolvimento sem mudar para uma interface de desktop. + +Nesta lição, você vai: + +- inspecionar os arquivos alterados uma última vez. +- criar um pull request a partir da branch atual. +- revisar o pull request e tratar o feedback. +- validar e mesclar o pull request com `/pr agentmerge`. + +## Criar, revisar e mesclar + +1. Execute `/diff` para inspecionar os arquivos alterados uma última vez. +2. Peça ao Copilot para criar um pull request a partir da branch atual ou execute `/pr create`. +3. Abra a aba **Pull requests** do painel lateral para verificar o título, a descrição, os arquivos e as verificações de status. +4. Faça as correções indicadas pelo feedback que exige ação, verifique o resultado no navegador e responda com o que mudou. +5. Quando o pull request estiver pronto, execute `/pr agentmerge` para validá-lo e mesclá-lo depois de obter as confirmações necessárias e de todas as verificações passarem. + +## Resumo e próximos passos + +Você criou, revisou e mesclou um pull request sem sair do terminal. Continue com a [Lição 9: Delegar trabalho quando confiar no ciclo][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 000000000..4d4cb54ac --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "Lição 9 - Delegar trabalho quando confiar no ciclo" +description: "Passe um novo recurso do Space Quiz para /delegate, continue trabalhando enquanto ele é executado e acompanhe uma sessão na nuvem pela CLI." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você entregou um recurso. Agora que sabe como é um bom resultado, vale a pena desenvolver uma ideia inteiramente nova em paralelo, em vez de colocá-la no centro do seu trabalho. Nesta lição, você delegará um **relatório de missão compartilhável** que transforma uma partida concluída em um cartão que o jogador pode publicar. + +Nesta lição, você vai: + +- delegar um novo recurso com `/delegate`. +- continuar trabalhando na sessão principal enquanto o trabalho delegado é executado. +- comparar o resultado delegado antes de aceitá-lo. + +> [!NOTE] +> `/delegate` e sessões na nuvem exigem um plano pago do Copilot elegível. O acesso nos planos Business e Enterprise também pode precisar ser habilitado por um administrador. + +## Delegar um novo recurso + +Execute `/delegate` e passe a seguinte tarefa: + +```plaintext +Delegate this: add a shareable mission report to the space quiz. At the end of a run, generate a compact summary card with the score, a rank title based on the percentage, and the slowest question. Add a Copy result button that puts a short plain-text version on the clipboard. Keep it in the single index.html with no dependencies, keep it keyboard accessible, and report back with what changed. +``` + +1. Continue trabalhando na sessão principal enquanto a tarefa delegada é executada. +2. Compare o resultado delegado com sua sessão antes de aceitá-lo. +3. Para uma issue maior e bem especificada, inicie uma **sessão na nuvem** e acompanhe o progresso pela CLI. + +## Resumo e próximos passos + +Você delegou um recurso completo e revisou o resultado. Continue com a [Lição 10: Revisão e próximos passos][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md new file mode 100644 index 000000000..349c09de4 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md @@ -0,0 +1,52 @@ +--- +title: "Primeiros passos com o GitHub Copilot CLI" +description: "Faça um tour guiado pelo GitHub Copilot CLI, centrado no terminal, criando e entregando um Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop + - cli +--- + +Faça um tour prático pelo GitHub Copilot CLI, pensado para quem está começando. Você criará um Space Quiz colorido a partir de uma pasta vazia e conhecerá o ciclo centrado no terminal: criar o projeto e revisar os diffs antes de qualquer gravação no Git, executar sessões lado a lado, planejar antes de editar e, depois, criar e mesclar o pull request sem sair do shell. + +O workshop leva aproximadamente de 60 a 90 minutos. O projeto usa um único arquivo HTML, sem dependências de tempo de execução, para que você possa se concentrar em conhecer a CLI e seus fluxos de trabalho com agentes. + +> [!NOTE] +> Este workshop foi criado por [James Montemagno][james] e adaptado de [First Steps with GitHub Copilot][source-lab]. O conteúdo original está disponível sob a [licença MIT][source-license]. + +## Lições + +| Lição | Tópico | O que você fará | +| ------ | ----- | ---------------- | +| [0. Pré-requisitos e configuração][lesson-0] | Configuração | Verificar os pré-requisitos, instalar o Copilot CLI, fazer login e escolher um modelo | +| [1. Criar o quiz][lesson-1] | Criação | Criar o quiz pelo terminal e fazer uma alteração com escopo bem definido | +| [2. Registrar instruções do projeto][lesson-2] | Instruções | Gerar e adaptar instruções para o agente com `/init` | +| [3. Publicar o projeto][lesson-3] | Publicação | Inicializar, fazer commit e publicar por prompt ou manualmente | +| [4. Trabalhar em issues em paralelo][lesson-4] | Implementação | Criar um backlog, adicionar uma issue à conversa, revisar com `/diff` e iniciar uma segunda sessão em uma worktree | +| [5. Planejar antes de editar][lesson-5] | Planejamento | Usar `/plan` para definir uma abordagem para a segunda issue | +| [6. Saber o que o agente pode ver][lesson-6] | Contexto | Inspecionar e redefinir o contexto com `/context` e `/clear` | +| [7. Retomar sessões e acessar remotamente][lesson-7] | Retomada | Sair de sessões e voltar a elas com `/resume` e, opcionalmente, acompanhar uma sessão local de outro dispositivo com `/remote` | +| [8. Criar, revisar e mesclar][lesson-8] | Revisão | Criar e mesclar um pull request com `/pr create` e `/pr agentmerge` | +| [9. Delegar trabalho][lesson-9] | Delegação | Passar um novo recurso para `/delegate` e acompanhar uma sessão na nuvem | +| [10. Revisão e próximos passos][lesson-10] | Revisão | Recapitular o fluxo de trabalho e continuar aprendendo | + +## Começar + +[Comece pela Lição 0: Pré-requisitos e configuração][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites/ +[lesson-1]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ +[lesson-2]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ +[lesson-3]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ +[lesson-4]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ +[lesson-5]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ +[lesson-6]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ +[lesson-7]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ +[lesson-8]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ +[lesson-9]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ +[lesson-10]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/index.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/index.md new file mode 100644 index 000000000..d53284701 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/index.md @@ -0,0 +1,36 @@ +--- +title: "Primeiros passos" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +Os workshops de primeiros passos são introduções guiadas que ajudam você a explorar o GitHub Copilot sem precisar de uma aplicação existente ou de um cenário de desenvolvimento detalhado. Cada workshop começa com algo pequeno, apresenta o produto conforme você o usa e conduz você por um fluxo de trabalho completo. + +Todos os workshops criam o mesmo Space Quiz a partir de uma pasta vazia, para que você possa escolher a ferramenta que quer conhecer ou concluir mais de um para comparar como cada uma funciona. + +> [!NOTE] +> Estes workshops foram criados por [James Montemagno][james] e adaptados de [First Steps with GitHub Copilot][source-lab], disponível sob a [licença MIT][source-license]. + +## Workshops + +### [Tour do aplicativo GitHub Copilot][copilot-app] + +Crie um Space Quiz colorido a partir de uma pasta vazia e percorra o ciclo de desenvolvimento: criar, aprimorar, testar, registrar instruções do projeto, publicar, planejar o trabalho, implementar issues, revisar e mesclar um pull request, automatizar tarefas recorrentes e explorar uma extensão de Canvas. + +### [Primeiros passos com o GitHub Copilot CLI][copilot-cli] + +Conheça o ciclo centrado no terminal: crie o projeto e revise os diffs antes de qualquer gravação no Git, execute sessões lado a lado em worktrees, planeje antes de editar, gerencie o contexto e, depois, crie, mescle e delegue trabalho sem sair do shell. + +### [Primeiros passos com o Visual Studio Code][vscode] + +Use o ciclo no editor: crie o projeto em um espaço de trabalho, aprimore elementos pelo navegador integrado, inspecione o contexto, teste antes de gravar no Git, planeje antes de editar e deixe as ferramentas do GitHub cuidar de issues, pull requests e sessões na nuvem sem sair do VS Code. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[copilot-app]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/ +[copilot-cli]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[vscode]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md new file mode 100644 index 000000000..9a6ab14f3 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "Lição 0 - Pré-requisitos e configuração" +description: "Verifique os pré-requisitos do workshop, confirme o Copilot Chat no VS Code, adicione a extensão GitHub Pull Requests and Issues e escolha um modelo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Leve o Copilot para o editor. O Copilot vem com o VS Code, então não é necessário instalar nada para usar a conversa. Adicione a extensão do GitHub e abra uma pasta vazia. + +Nesta lição, você vai: + +- verificar os pré-requisitos do workshop. +- confirmar que o Copilot Chat responde no VS Code. +- instalar a extensão GitHub Pull Requests and Issues. +- abrir uma pasta de projeto vazia e escolher um modelo. + +## Pré-requisitos + +Você precisa de: + +- uma conta do GitHub. [Crie uma conta do GitHub][github-signup] ou use sua conta existente. +- um plano ativo do Copilot. [Ative o Copilot Free ou um plano pago do Copilot][copilot-plans]. Se sua organização já oferece acesso ao Copilot, use essa conta. +- [Visual Studio Code][vscode]. +- [Git][git] instalado. Execute `git --version` em um terminal para verificar. + +## Configurar o VS Code + +1. Instale o [VS Code][vscode] e faça login no GitHub. O Copilot e o Copilot Chat são integrados, então abra a visualização **Chat** pela barra de título e confirme que ela responde. +2. Abra a visualização **Extensions** e instale a extensão oficial [GitHub Pull Requests and Issues][pr-extension] para que issues e pull requests apareçam na barra lateral. +3. Crie uma pasta vazia chamada `space-quiz`, selecione **File** > **Open Folder** e abra-a. +4. Escolha um modelo com o seletor de modelos na visualização **Chat**, usando a ordem de preferência da próxima seção. + +## Escolher um modelo + +Selecione a primeira opção disponível para você: + +1. **GPT-6-Luna** (recomendado). +2. **Auto**, como alternativa equilibrada. +3. Qualquer modelo da [lista de modelos ativos][active-models]. + +A disponibilidade de modelos depende do plano, da política da organização e da versão do produto. + +## Resumo e próximos passos + +O VS Code está pronto com o Copilot Chat, a extensão do GitHub e uma pasta `space-quiz` vazia. Continue com a [Lição 1: Criar no espaço de trabalho][next-lesson]. + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[vscode]: https://code.visualstudio.com/ +[git]: https://git-scm.com/downloads +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 000000000..4929b6eb2 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "Lição 1 - Criar no espaço de trabalho" +description: "Crie o Space Quiz no VS Code, visualize-o no navegador integrado e aprimore um elemento selecionado." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Mantenha o editor, a conversa, os arquivos e a prévia juntos. Você criará o quiz, jogará no navegador integrado e, depois, enviará um elemento específico diretamente para a conversa para fazer uma alteração com escopo bem definido. + +Nesta lição, você vai: + +- criar o quiz em um único `index.html`. +- visualizar o quiz no navegador integrado. +- selecionar um elemento no navegador e aprimorá-lo. + +## Criar o quiz + +Envie o seguinte prompt no Copilot Chat: + +```plaintext +Create a colorful, accessible space exploration quiz with 10 questions in a single index.html. Add a progress bar, score counter, animated correct and incorrect feedback, and a results screen. Use no server or dependencies. Open it in the VS Code integrated browser. +``` + +1. Revise o arquivo gerado no editor. +2. Abra o navegador integrado e responda a várias perguntas. +3. Abra **Source Control** a qualquer momento para ver os arquivos alterados e o diff. + +## Selecionar um elemento e aprimorá-lo + +O navegador integrado pode enviar um elemento específico diretamente para a conversa, para que você nunca precise descrever a qual botão está se referindo. + +1. Com o quiz aberto no navegador integrado, inicie uma seleção de elemento pela barra de ferramentas do navegador. +2. Selecione os botões de resposta para anexar esse elemento à próxima mensagem da conversa. +3. Envie o seguinte prompt e observe a prévia recarregar: + + ```plaintext + Using the selected element, make the answer buttons feel more tactile: add a subtle press state, a clearer focus ring for keyboard users, and a smoother transition into the correct and incorrect colors. Change nothing else. + ``` + +4. Leia o diff em **Source Control** antes de manter a alteração. +5. Pressione Tab para percorrer as respostas e confirme que o contorno de foco está visível. + +## Resumo e próximos passos + +Você criou, visualizou e aprimorou o quiz sem sair do editor. Continue com a [Lição 2: Registrar instruções do projeto][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/10-review.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/10-review.md new file mode 100644 index 000000000..97c5ed77c --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "Lição 10 - Revisão e próximos passos" +description: "Revise o fluxo de trabalho do VS Code e encontre recursos para continuar aprendendo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você concluiu o ciclo no editor: criou o projeto no editor, registrou instruções, testou no navegador integrado, planejou antes de editar, mesclou com as ferramentas do GitHub e delegou a próxima ideia para uma sessão na nuvem. + +## O que você concluiu + +Você: + +- confirmou o Copilot Chat e adicionou a extensão GitHub Pull Requests and Issues. +- criou o quiz e aprimorou um elemento selecionado no navegador integrado. +- gerou `.github/copilot-instructions.md` com `/init`. +- inspecionou o contexto da conversa e executou um teste básico de funcionamento antes de qualquer gravação no Git. +- publicou com **Source Control** e uma mensagem de commit redigida pelo Copilot. +- planejou um recurso no modo Plan antes de qualquer edição. +- habilitou o MCP do GitHub e criou issues pela conversa. +- criou, revisou e mesclou um pull request pelo VS Code. +- delegou um recurso para uma sessão na nuvem. + +## Continuar explorando + +- [Conheça o Copilot no VS Code, incluindo a conversa, o modo de agente e os recursos do editor][copilot-vscode]. +- [Gerencie issues e pull requests na barra lateral com a extensão GitHub Pull Requests][pr-extension]. +- [Adicione ferramentas que o agente pode chamar com servidores MCP no VS Code][mcp-servers]. +- [Ensine ao Copilot as regras do projeto com instruções personalizadas][custom-instructions]. +- [Instale o Git][git]. +- [Compare os planos do Copilot][copilot-plans]. + +Crie o mesmo Space Quiz com outra forma de trabalhar no [workshop de primeiros passos com o aplicativo GitHub Copilot][first-steps-app] ou no [workshop de primeiros passos com o GitHub Copilot CLI][first-steps-cli]. Se estiver pronto para um cenário mais aprofundado com uma aplicação completa e um backlog de equipe, continue com o [workshop de desenvolvimento no mundo real com o VS Code][real-world-vscode]. + +[copilot-vscode]: https://code.visualstudio.com/docs/copilot/overview +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[custom-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[git]: https://git-scm.com/downloads +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[real-world-vscode]: /pt-br/learning-hub/copilot-workshops/vscode/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md new file mode 100644 index 000000000..531b2c489 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "Lição 2 - Registrar instruções do projeto" +description: "Execute /init no Copilot Chat para gerar .github/copilot-instructions.md para o Space Quiz e adapte o arquivo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Com um quiz funcional no espaço de trabalho, gere instruções personalizadas do repositório que descrevam o projeto real. O Copilot lê essas instruções em todas as solicitações de conversa. + +Nesta lição, você vai: + +- gerar instruções personalizadas do repositório com `/init`. +- revisar `.github/copilot-instructions.md` antes de salvá-lo. +- enxugar e personalizar as instruções. + +## Registrar as regras com `/init` + +1. Execute `/init` no Copilot Chat. +2. Revise o arquivo `.github/copilot-instructions.md` gerado antes de salvá-lo. +3. Mantenha apenas orientações que correspondam a este projeto: um único arquivo, sem dependências, acessível e testado no navegador. + +![Ilustração do VS Code com .github/copilot-instructions.md aberto no editor e selecionado no Explorer, ao lado de index.html. O arquivo tem o título Space Quiz e lista regras: um único index.html sem dependências nem etapa de build, todas as respostas acessíveis pelo teclado e respeito a prefers-color-scheme nos dois temas. Uma seção intitulada How I like code written pede funções pequenas, retornos antecipados, nenhuma expressão engenhosa de uma linha e comentários apenas para o que realmente surpreende.](/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg) + +As instruções personalizadas do repositório ficam em `.github/copilot-instructions.md` e se aplicam a todas as solicitações de conversa. + +> [!IMPORTANT] +> **A ordem importa** +> +> `/init` lê o espaço de trabalho como ele existe neste momento. Executá-lo depois de criar o quiz produz instruções baseadas em código real. + +## Personalizar as instruções + +O arquivo de instruções não serve apenas para registrar fatos sobre o projeto. Adicione os detalhes que você repetiria em todos os prompts, como sua preferência de escrita de código, convenções de nomenclatura, bibliotecas a evitar e a quantidade de comentários desejada. Todas as futuras sessões leem esse arquivo antes de ler o prompt. + +## Resumo e próximos passos + +Seu espaço de trabalho agora tem instruções personalizadas baseadas em código real. Continue com a [Lição 3: Inspecionar o contexto e testar][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 000000000..4f6c91abe --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "Lição 3 - Inspecionar o contexto e testar" +description: "Inspecione o contexto anexado a uma solicitação do Copilot Chat e execute um teste básico de funcionamento no navegador antes de qualquer gravação no Git." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Antes de publicar qualquer coisa, verifique o que o Copilot pode ver e comprove que o quiz funciona. + +Nesta lição, você vai: + +- inspecionar o contexto incluído em uma solicitação de conversa. +- executar um teste básico de funcionamento no navegador. +- corrigir falhas antes de avançar para o Git. + +## Inspecionar o contexto no canto inferior direito + +O VS Code mostra o contexto ativo no canto inferior direito da caixa de entrada do Copilot Chat. + +1. Abra o indicador de contexto no **canto inferior direito** da caixa de entrada da conversa. +2. Inspecione os arquivos, as instruções personalizadas e os símbolos incluídos na solicitação. +3. Remova o contexto irrelevante ou anexe o arquivo do quiz antes de continuar. + +## Criar e testar antes de gravar no Git + +Use o navegador integrado e um prompt de teste básico de funcionamento antes de inicializar um repositório ou fazer qualquer commit: + +```plaintext +Run a browser-level smoke test for the quiz. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Execute o teste básico de funcionamento e verifique o navegador integrado. +2. Corrija eventuais falhas e execute o teste novamente até que tudo passe. +3. Avance para o Git somente depois que a criação do projeto e o teste tiverem sido concluídos com sucesso. + +## Resumo e próximos passos + +Você confirmou o que o Copilot pode ver e testou o quiz antes de publicar. Continue com a [Lição 4: Publicar o projeto][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md new file mode 100644 index 000000000..03daadf0f --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "Lição 4 - Publicar o projeto" +description: "Inicialize, faça commit e publique o Space Quiz inteiramente pela integração Source Control nativa do VS Code." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Publique o quiz testado no GitHub inteiramente pela integração nativa do Git e deixe o Copilot redigir a mensagem de commit a partir do que realmente mudou. + +Nesta lição, você vai: + +- inicializar um repositório em **Source Control**. +- gerar uma mensagem de commit a partir do diff das alterações preparadas. +- publicar a branch em um novo repositório público no GitHub. + +## Inicializar, fazer commit e publicar + +1. Abra **Source Control** e selecione **Initialize Repository**. +2. Prepare os arquivos para o commit. +3. Selecione o ícone de **lápis com brilho** na caixa de mensagem de commit para que o Copilot escreva a mensagem a partir do diff das alterações preparadas. Leia a mensagem, edite o que estiver errado e faça o commit. +4. Selecione **Publish Branch** e crie um repositório público `space-quiz` no GitHub. +5. Confirme que o arquivo testado está presente no GitHub. + +![Ilustração da visualização Source Control do VS Code. A lista Changes mostra index.html e .github/copilot-instructions.md. Uma chamada no botão de brilho na caixa de mensagem de commit diz Copilot wrote your message, e a mensagem diz Add per-question timer to the quiz. Abaixo do botão Commit, um botão Create Pull Request está destacado com a nota Commit first, then this button appears right inside Source Control.](/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg) + +O botão de brilho redige uma mensagem de commit a partir do diff das alterações preparadas. Depois do commit, **Source Control** também oferece a criação do pull request. + +## Resumo e próximos passos + +Seu quiz testado agora está publicado no GitHub. Continue com a [Lição 5: Planejar antes de editar][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md new file mode 100644 index 000000000..ddd66dd67 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "Lição 5 - Planejar antes de editar" +description: "Alterne o Copilot Chat para o modo Plan para que ele investigue o espaço de trabalho e proponha uma abordagem antes de editar qualquer arquivo." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +O modo Plan investiga o espaço de trabalho e escreve um plano de implementação sem alterar os arquivos. + +Nesta lição, você vai: + +- alternar o Copilot Chat de Agent para Plan. +- revisar e aprimorar um plano proposto. +- voltar para Agent para implementar o plano. + +## Definir a abordagem antes de qualquer edição + +1. Abra o Copilot Chat e use o **menu suspenso de modo** acima da caixa de entrada. +2. Alterne de **Agent** para **Plan**. +3. Descreva o próximo recurso com o seguinte prompt e deixe o Copilot investigar o espaço de trabalho: + + ```plaintext + Plan how to add a review screen that shows every question with the answer I chose. Investigate the existing quiz, list the changes you would make, call out accessibility and single-file risks, and stop before editing. + ``` + +4. Leia o plano e solicite alterações, depois volte para **Agent** para implementá-lo. + +> [!TIP] +> **Quando o modo de planejamento vale a pena** +> +> Use o modo Plan para qualquer trabalho ambíguo, que envolva várias partes do projeto ou que seja caro de desfazer. O momento de menor custo para corrigir uma abordagem ruim é antes da primeira edição. + +## Resumo e próximos passos + +Você definiu uma abordagem com o Copilot antes que ele escrevesse qualquer código. Continue com a [Lição 6: Dar ao Copilot ferramentas integradas ao GitHub][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md new file mode 100644 index 000000000..8e1a06bc4 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "Lição 6 - Dar ao Copilot ferramentas integradas ao GitHub" +description: "Habilite e revise o servidor MCP do GitHub no VS Code antes de pedir ao Copilot que trabalhe com issues e pull requests." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Habilite o servidor MCP do GitHub *antes* de pedir ao Copilot que crie issues ou trabalhe com pull requests. Com essas ferramentas, o Copilot pode ler e gravar dados do GitHub diretamente pela conversa. + +Nesta lição, você vai: + +- habilitar o servidor MCP do GitHub. +- revisar as ferramentas e permissões que o servidor solicita. +- confirmar que as ferramentas do GitHub estão disponíveis na conversa. + +## Habilitar o MCP do GitHub + +1. Abra **Settings** no VS Code e habilite o servidor **GitHub MCP** integrado, se sua versão o incluir. +2. Caso contrário, instale um servidor MCP do GitHub confiável pelo [fluxo de configuração de servidores MCP][mcp-servers]. +3. Revise as ferramentas e permissões que o servidor solicita antes de aprová-lo. +4. Confirme que as ferramentas do GitHub aparecem no seletor de ferramentas do Copilot Chat. + +## Resumo e próximos passos + +O Copilot agora tem ferramentas integradas ao GitHub. Continue com a [Lição 7: Planejar e implementar issues][next-lesson]. + +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 000000000..ebaee98d4 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "Lição 7 - Planejar e implementar issues" +description: "Use as ferramentas do GitHub para criar issues pelo Copilot Chat e implemente uma delas em uma nova sessão de conversa." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Com o MCP do GitHub habilitado, o Copilot pode criar e ler issues diretamente pela conversa. + +Nesta lição, você vai: + +- criar três issues do GitHub com escopo bem definido pelo Copilot Chat. +- iniciar uma nova sessão de conversa para uma issue. +- implementar e verificar a issue. + +## Criar issues + +Envie o seguinte prompt: + +```plaintext +Review the space quiz and suggest three focused feature ideas. Use the GitHub tools to create a separate issue for each with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +## Implementar uma issue + +1. Abra a visualização **GitHub** na barra de atividades e inspecione as novas issues. +2. Escolha uma issue e selecione o botão **+** no Copilot Chat para iniciar uma nova sessão para ela. +3. Use o modo Agent para implementar a issue enquanto a sessão original permanece disponível para comparação. +4. Execute o teste básico de funcionamento no navegador integrado da [Lição 3][lesson-3] antes de criar um pull request. + +## Resumo e próximos passos + +Você criou issues e implementou uma delas em sua própria sessão. Continue com a [Lição 8: Revisar e mesclar][next-lesson]. + +[lesson-3]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 000000000..d357f8f28 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "Lição 8 - Revisar e mesclar" +description: "Crie um pull request em Source Control, solicite uma revisão de código do Copilot, trate o feedback com as ferramentas do GitHub e mescle." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Inspecione, revise e mescle o novo trabalho com as ferramentas do GitHub no VS Code. + +Nesta lição, você vai: + +- fazer commit do novo trabalho e criar um pull request em **Source Control**. +- solicitar uma revisão de código do Copilot. +- tratar o feedback e as verificações com falha usando o MCP do GitHub. +- mesclar o pull request. + +## Inspecionar, revisar e mesclar + +1. Abra **Source Control** para inspecionar os arquivos alterados e o diff antes de criar qualquer coisa. +2. Faça commit do novo trabalho, usando o botão de **brilho** para escrever a mensagem novamente. +3. Selecione o botão **Create Pull Request** que aparece em **Source Control**. O Copilot redige o título e a descrição a partir dos commits, para que você obtenha um pull request melhor do que se pedisse um do zero. +4. Solicite uma **Copilot code review** durante a criação do pull request, pela visualização **GitHub** no VS Code ou no GitHub. +5. Peça ao Copilot, com o MCP do GitHub, para inspecionar o pull request, resolver conflitos de mesclagem, tratar comentários de revisão e investigar verificações de CI com falha. +6. Teste novamente no navegador integrado, revise cada alteração proposta e atualize a branch. +7. Quando as verificações e a revisão estiverem concluídas, peça ao agente para mesclar ou mescle pela integração do GitHub. + +> [!NOTE] +> Você sempre pode pedir ao Copilot para fazer isso pela conversa. Vale a pena conhecer primeiro o caminho por **Source Control**, porque ele escreve o texto do commit e do pull request para você a partir do que realmente mudou. + +## Resumo e próximos passos + +Você revisou e mesclou um pull request sem sair do VS Code. Continue com a [Lição 9: Passar a próxima ideia para uma sessão na nuvem][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md new file mode 100644 index 000000000..70122f457 --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "Lição 9 - Passar a próxima ideia para uma sessão na nuvem" +description: "Alterne o ambiente de execução do Copilot Chat de Local para Cloud e delegue um recurso independente que será entregue como um pull request." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Você percorreu todo o ciclo localmente, então agora sabe como é um bom resultado. Esse é o momento certo para deixar algo ser executado sem você. O Copilot Chat pode trocar o ambiente em que é executado do seu computador para o GitHub. + +Nesta lição, você vai: + +- alternar o ambiente de execução do Copilot Chat de **Local** para **Cloud**. +- delegar um recurso independente com critérios de aceitação claros. +- revisar o pull request resultante. + +> [!NOTE] +> Sessões na nuvem exigem um plano pago do Copilot elegível. O acesso nos planos Business e Enterprise também pode precisar ser habilitado por um administrador. + +## Delegar para a nuvem + +![Ilustração do Copilot Chat no VS Code com o seletor Harness aberto. Em Copilot, Cloud está selecionado em vez de Local, e outros ambientes de execução, como Claude e Codex, estão listados. Acima, uma solicitação para adicionar três novos temas de cores mostra Working in the cloud com um link para acompanhar a sessão no GitHub.](/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg) + +O seletor **Harness** lista o Copilot sendo executado em **Local** ou **Cloud**, junto com outros ambientes de execução. Alterne para **Cloud** e a próxima solicitação será executada no GitHub em vez de no seu computador. + +1. No Copilot Chat, abra o seletor **Harness** e alterne o Copilot de **Local** para **Cloud**. +2. Inicie uma nova sessão e atribua a ela um recurso independente com critérios de aceitação claros: + + ```plaintext + Add a theme picker to the space quiz with three named themes: Deep Space, Launch Pad, and Lunar. Persist the choice in localStorage, keep everything in the single index.html with no dependencies, keep contrast accessible in every theme, and open a pull request when the tests pass. + ``` + +3. Feche o notebook. O trabalho continua no GitHub e é entregue como um pull request. +4. Revise esse pull request com o mesmo cuidado dedicado ao que você escreveu por conta própria. + +> [!TIP] +> **Delegue o que você consegue descrever** +> +> Sessões na nuvem se beneficiam de orientações precisas. Se você não consegue escrever os critérios de aceitação, a tarefa ainda não está pronta para sair do seu computador. + +## Resumo e próximos passos + +Você delegou um recurso para uma sessão na nuvem e revisou o resultado. Continue com a [Lição 10: Revisão e próximos passos][next-lesson]. + +[next-lesson]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/index.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/index.md new file mode 100644 index 000000000..9594eba9a --- /dev/null +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/first-steps/vscode/index.md @@ -0,0 +1,51 @@ +--- +title: "Primeiros passos com o Visual Studio Code" +description: "Faça um tour guiado pelo GitHub Copilot no Visual Studio Code criando, testando e entregando um Space Quiz." +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +Faça um tour prático pelo GitHub Copilot no Visual Studio Code, pensado para quem está começando. Você criará um Space Quiz colorido a partir de uma pasta vazia e conhecerá o ciclo no editor: criar o projeto em um espaço de trabalho, inspecionar o contexto, testar antes de qualquer gravação no Git, planejar antes de editar e deixar as ferramentas do GitHub cuidar de issues e pull requests sem sair do VS Code. + +O workshop leva aproximadamente de 60 a 90 minutos. O projeto usa um único arquivo HTML, sem dependências de tempo de execução, para que você possa se concentrar em conhecer o Copilot no editor. + +> [!NOTE] +> Este workshop foi criado por [James Montemagno][james] e adaptado de [First Steps with GitHub Copilot][source-lab]. O conteúdo original está disponível sob a [licença MIT][source-license]. + +## Lições + +| Lição | Tópico | O que você fará | +| ------ | ----- | ---------------- | +| [0. Pré-requisitos e configuração][lesson-0] | Configuração | Verificar os pré-requisitos, adicionar a extensão do GitHub, abrir uma pasta e escolher um modelo | +| [1. Criar no espaço de trabalho][lesson-1] | Criação | Criar o quiz, visualizá-lo no navegador integrado e aprimorar um elemento selecionado | +| [2. Registrar instruções do projeto][lesson-2] | Instruções | Gerar e adaptar `.github/copilot-instructions.md` com `/init` | +| [3. Inspecionar o contexto e testar][lesson-3] | Teste | Inspecionar o contexto da conversa e executar um teste básico de funcionamento antes de qualquer gravação no Git | +| [4. Publicar o projeto][lesson-4] | Publicação | Inicializar, fazer commit e publicar com Source Control | +| [5. Planejar antes de editar][lesson-5] | Planejamento | Usar o modo Plan para definir uma abordagem para o próximo recurso | +| [6. Dar ao Copilot ferramentas integradas ao GitHub][lesson-6] | Ferramentas | Habilitar e revisar o servidor MCP do GitHub | +| [7. Planejar e implementar issues][lesson-7] | Implementação | Criar issues com as ferramentas do GitHub e implementar uma delas em uma nova sessão | +| [8. Revisar e mesclar][lesson-8] | Revisão | Criar um pull request em Source Control, solicitar uma revisão e mesclar | +| [9. Passar o trabalho para uma sessão na nuvem][lesson-9] | Delegação | Alterar o ambiente de execução para Cloud e delegar um novo recurso | +| [10. Revisão e próximos passos][lesson-10] | Revisão | Recapitular o fluxo de trabalho e continuar aprendendo | + +## Começar + +[Comece pela Lição 0: Pré-requisitos e configuração][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites/ +[lesson-1]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ +[lesson-2]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ +[lesson-3]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[lesson-4]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ +[lesson-5]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ +[lesson-6]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ +[lesson-7]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ +[lesson-8]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ +[lesson-9]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ +[lesson-10]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/index.md b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/index.md index fc3648c35..b8e5eb68e 100644 --- a/website/src/content/docs/pt-br/learning-hub/copilot-workshops/index.md +++ b/website/src/content/docs/pt-br/learning-hub/copilot-workshops/index.md @@ -1,41 +1,44 @@ --- -title: "Mãos à obra com os agentes do GitHub Copilot" +title: "Workshops do GitHub Copilot" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -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. + +## Primeiros passos + +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. + +### [Tour pelo aplicativo GitHub Copilot][first-steps-app] + +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. + +### [Primeiros passos com o GitHub Copilot CLI][first-steps-cli] + +Crie o mesmo Space Quiz pelo terminal, revise as diferenças, execute sessões em paralelo em worktrees, planeje antes de editar e crie, mescle e delegue pull requests sem sair do shell. + +### [Primeiros passos com o Visual Studio Code][first-steps-vscode] + +Crie o Space Quiz no VS Code, teste-o no navegador integrado, publique-o com o Controle do Código-Fonte, trabalhe com problemas e pull requests usando as ferramentas do GitHub e delegue trabalho a uma sessão na nuvem. + +## Desenvolvimento em cenários reais + +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. + +### [Explore os workshops de desenvolvimento em cenários reais][real-world-development] + +Escolha entre o GitHub Copilot CLI, o aplicativo GitHub Copilot, o agente de nuvem do GitHub Copilot ou o Visual Studio Code. > [!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. +> 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 parecer quebrado ou não estiver funcionando corretamente, peça ajuda a uma pessoa mentora! +> Se algo não funcionar corretamente durante um workshop conduzido por uma pessoa instrutora, 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](/pt-br/learning-hub/copilot-workshops/vscode/) - -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. - -### 💻 [Copilot CLI](/pt-br/learning-hub/copilot-workshops/cli/) - -**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. - -### 🤖 [Aplicativo Copilot](/pt-br/learning-hub/copilot-workshops/app/) - -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. - -### ☁️ [Agente de nuvem do Copilot](/pt-br/learning-hub/copilot-workshops/cloud/) - -**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. - -## 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 - -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]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /pt-br/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /pt-br/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-development]: /pt-br/learning-hub/copilot-workshops/real-world-development/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/0-prerequisites.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/0-prerequisites.md index 9e557a817..530c27ac6 100644 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/0-prerequisites.md +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/0-prerequisites.md @@ -3,7 +3,7 @@ title: "第 0 课 - 先决条件" description: "为 GitHub Copilot app 课程做好准备：为 Tailspin Toys 项目安装 Node.js，并通过模板创建自己的存储库副本。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- GitHub Copilot app 是一款桌面应用，作为 Copilot 和 GitHub 的中央枢纽。它支持快速访问议题和拉取请求，也支持使用 GitHub Copilot 进行构建。在本研讨会中，你将在本地使用基于 Astro 构建的 Tailspin Toys 应用和 GitHub Copilot app。开始前，请先确保本地已安装 Node.js，然后再安装 Copilot app。 @@ -15,18 +15,18 @@ GitHub Copilot app 是一款桌面应用，作为 Copilot 和 GitHub 的中央 ## 安装 Node.js -多节课程会要求智能体构建功能，并在本地运行 Tailspin Toys 测试套件。这需要项目唯一依赖的运行时 [**Node.js**][nodejs]。请安装 **22 或更高版本**；当前的 **LTS** 版本是稳妥的选择。 +多节课程会要求智能体构建功能，并在本地运行 Tailspin Toys 测试套件。这需要 [**Node.js**][nodejs]，它是项目唯一需要的运行时。安装当前的 **LTS** 版本。 所有平台上最简单的方式都是使用官方安装程序： 1. 在操作系统中使用 Windows Terminal、macOS 终端或常用工具打开终端窗口。 -2. 运行以下命令，确认已安装 Node.js 22 或更高版本： +2. 运行以下命令，检查已安装的 Node.js 版本： ```shell node --version ``` -3. 如果看到 `v22` 或更高版本号，可以跳到下一节。 +3. 如果满足项目 README 和 `package.json` 中的要求，可以跳到下一节。 > [!TIP] > 仅当尚未安装 Node 或需要更新时，才需要完成以下步骤。 @@ -41,10 +41,10 @@ GitHub Copilot app 是一款桌面应用，作为 Copilot 和 GitHub 的中央 node --version ``` -9. 应会看到 `v22.x.x` 或更高版本。 +9. 应显示刚安装的版本。 -> [!TIP] -> 更喜欢容器？如果已安装 [**Docker**][docker]，可以使用存储库的[开发容器][dev-containers]，无需在本地安装 Node.js。开发容器已包含 Node，两种方式无需同时使用。 +> [!IMPORTANT] +> 每个工作树还需要项目依赖项及用于 E2E 检查的 Playwright Chromium。准备工作树时，请遵循 Tailspin Toys 存储库的 README，并在批准前审查所有安装请求。 ## 设置实验存储库 @@ -64,11 +64,16 @@ GitHub Copilot app 是一款桌面应用，作为 Copilot 和 GitHub 的中央 > [!NOTE] > 通过模板创建存储库时，系统会自动创建一组 GitHub 议题作为待办事项。整个研讨会都会使用这些议题，无需自行创建。 +使用工作坊模板的新副本。其中包含存储库指令、应用代码、测试、quality-checks 技能和现有画布扩展。你将在工作坊中自定义该技能，并创建 QA 智能体。如果使用旧副本，请向讲师确认其中包含所需文件。 + ## 总结与后续步骤 -准备工作已完成。你安装了 Node.js，因此可以在本机构建和测试项目；还通过模板创建了自己的 Tailspin Toys 存储库副本。 +准备工作已完成。本课中，你： -接下来，你将安装 GitHub Copilot app、连接刚创建的存储库并熟悉工作区。继续学习[第 1 课 - 安装 GitHub Copilot app][next-lesson]。 +- 安装了 Node.js，以便在本机构建和测试项目。 +- 通过模板创建了自己的 Tailspin Toys 存储库副本。 + +接下来，你将[安装 GitHub Copilot app][next-lesson]、连接刚创建的存储库并熟悉工作区。 ## 资源 @@ -79,7 +84,5 @@ GitHub Copilot app 是一款桌面应用，作为 Copilot 和 GitHub 的中央 [next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app/ [nodejs]: https://nodejs.org/ [node-download]: https://nodejs.org/en/download -[docker]: https://www.docker.com/products/docker-desktop/ -[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers [template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app.md index 34003c9e9..284955a32 100644 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app.md +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app.md @@ -3,7 +3,7 @@ title: "第 1 课 - 安装 GitHub Copilot app" description: "安装 GitHub Copilot app，连接通过模板创建的存储库，熟悉工作区并尝试快速聊天。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- [**GitHub Copilot app**][about-copilot-app] 是一款用于智能体驱动开发的桌面应用。它基于 GitHub Copilot CLI 构建，并与 GitHub 原生集成，因此存储库、分支和 CI 管道均可直接使用。它适用于同时指挥多个智能体的工作流：每个智能体都在隔离的工作区中运行，无需手动完成所有工作，还可自动执行重复性任务。安装 Node.js 并准备好项目副本后，下一步是安装应用并连接该存储库。 @@ -41,32 +41,39 @@ lastUpdated: 2026-08-03 连接项目后，花一点时间熟悉工作区。应用将功能组织在侧边栏的以下几个区域： +- **New**：顾名思义，可以在这里启动与 Copilot 的新聊天会话。 +- **Pull requests**：通过应用与 GitHub 的原生集成显示拉取请求。在这里，无需离开应用即可浏览和筛选拉取请求、检查 CI 状态以及审查拉取请求。 +- **Issues**：以同样的方式显示议题。在这里，可以浏览和筛选议题，并从议题启动会话。 +- **Automations**：可按计划或按需运行的已保存智能体任务。适合管理待办事项、定期维护项目，或处理其他重复性工作。总结课程会将其作为后续方向提供链接，而不再添加工作坊练习。 +- **Customize**：通过 MCP 服务器、插件、技能和其他组件，为 Copilot app 添加功能。你将使用它配置 Playwright MCP。 +- **Chats**：适合提问和集思广益的轻量对话，无需单独创建分支或工作区。本课结束时会进行一次快速聊天。 - **Sessions**：智能体执行工作的区域。每个会话都在独立工作区中运行，因此可以同时运行多个会话，且更改不会发生冲突。下一课将启动第一个会话。 -- **Quick chats**：适合提问和集思广益的轻量对话，无需单独创建分支或工作区。本课结束时会进行一次快速聊天。 -- **My work**：通过应用的 **GitHub 原生集成**显示议题和拉取请求。在这里，无需离开应用即可浏览和筛选议题与拉取请求、检查 CI 状态、从议题启动会话以及审查拉取请求。 -- **Automations**：可按计划或按需运行的已保存智能体任务。本学习路径接近结束时会创建一个自动化任务。 + +在完成工作坊的过程中，你将逐步探索工作区。 + +> [!TIP] +> 有疑问就问 Copilot！如果不确定如何操作，或某件事是否可行，可以向 Copilot 提问，让它提供指导。 ### 查找模板创建的待办事项 -由于应用与 GitHub 原生集成，存储库中待处理的工作会直接显示在应用内。通过模板创建存储库时，系统已生成一组议题。现在确认它们是否存在。 +几乎每个项目都有待办事项，Tailspin Toys 也不例外。下面探索通过模板创建项目时生成的待办事项。 -1. 在侧边栏中选择 **My work**。 -2. 模板在待办列表中创建了八个议题。本课程聚焦以下三个，确认它们可见： +1. 在侧边栏中选择 **Issues**。 +2. 按标题查找以下议题，不要假设议题编号： - Allow users to filter games by category and publisher - Update our repository coding standards - - Implement pagination on the game list page -3. 选择一个议题以阅读详细信息。每个议题也可以作为智能体会话的启动点，后续课程会从这些议题开始工作。 +3. 选择一个议题以阅读详细信息。每个议题也可以作为智能体会话的启动点。完成一项快速的首次更改后，你将从筛选功能议题启动会话。 > [!NOTE] -> My work 中的项目会自动筛选，仅显示已添加到 Copilot app 的存储库中的项目。要查看其他存储库中的工作项，请将相应存储库添加到应用。 +> **Issues** 和 **Pull requests** 中的项目会自动筛选，仅显示已添加到 Copilot app 的存储库中的项目。要查看其他存储库中的工作项，请将相应存储库添加到应用。 ## 尝试快速聊天 -熟悉应用的一种好方法是用它来了解*应用本身*，而 **Quick chats** 正适合这种场景。通过快速聊天，无需创建分支或工作树即可提问或集思广益，非常适合无需会话的一次性问题。 +熟悉应用的一种好方法是用它来了解*应用本身*，而**快速聊天**正适合这种场景。通过快速聊天，无需创建分支或工作树即可提问或集思广益，非常适合无需会话的一次性问题。 -1. 在侧边栏中，选择 **Quick chats** 旁的 **+** 以打开新聊天。 +1. 在侧边栏中，选择 **Chats** 旁的 **+** 以打开新聊天。 2. 询问应用自身的会话工作方式： ```plaintext @@ -81,10 +88,10 @@ lastUpdated: 2026-08-03 - 安装应用并登录 GitHub。 - 从 GitHub 存储库添加项目。 -- 熟悉工作区，并在 **My work** 中找到模板创建的待办事项。 +- 熟悉工作区，并在 **Issues** 中找到模板创建的待办事项。 - 使用快速聊天提出一次性问题。 -接下来，你将启动第一个智能体会话，并对项目进行第一次更改，即在游戏卡片上显示星级评分。继续学习[第 2 课 - 运行第一个智能体会话][next-lesson]。 +接下来，你将[启动第一个智能体会话][next-lesson]，并用它在游戏卡片上显示星级评分。 ## 资源 @@ -92,7 +99,6 @@ lastUpdated: 2026-08-03 - [GitHub Copilot app 入门][getting-started] - [在 GitHub Copilot app 中使用智能体会话][agent-sessions] -[ex0]: /zh-cn/learning-hub/copilot-workshops/app/0-prerequisites/ [next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/2-add-star-rating/ [about-copilot-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 diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/10-review.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/10-review.md new file mode 100644 index 000000000..c4eb7305a --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/10-review.md @@ -0,0 +1,77 @@ +--- +title: "第 10 课 - 总结与后续步骤" +description: "回顾 App 工作流、两个 PR 里程碑、画布练习和可复用质量实践，再探索更多资源。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +你在一套连续的 Tailspin Toys 工作流中使用了 GitHub Copilot app。你： + +- 连接了存储库，探索了应用工作区和模板创建的待办事项，并尝试了快速聊天。 +- 启动范围明确的星级评分会话，在浏览器画布中审查结果，并手动合并了第一个拉取请求 (PR)。 +- 从筛选功能议题启动会话，在 **Plan** 模式中确定方案，在 **Autopilot** 模式中构建，再在 **Interactive** 模式中审查。 +- 使用自定义指令引导智能体，再自定义现有的 `quality-checks` 技能，用它运行单元测试、lint 和类型检查。 +- 添加 Playwright 模型上下文协议 (MCP) 服务器，并用它在真实浏览器中探索筛选功能。 +- 创建并选择 QA 自定义智能体，以评估需求、覆盖情况、技能脚本结果和浏览器证据。 +- 审查完整的筛选功能更改，并为第二个 PR 授权 **Agent Merge**。 +- 使用现有的 Database Explorer 画布，再创建并测试由存储库支持的分类画布。 + +## 交付的内容 + +本研讨会有两个 PR 里程碑，每个里程碑都从更新后的 `main` 使用自己的分支： + +1. **星级评分**：在游戏卡片上显示现有的 `starRating`，以及明确的未评分状态。 +2. **筛选功能及质量工作流**：实现筛选功能，更新指令并将其应用于该功能，自定义 `quality-checks` 报告，创建 QA 配置文件，并包含相关测试。 + +从规划筛选功能到创建其 PR，你一直使用同一会话、工作树和分支。为简化工作坊流程，我们将这些工作合并到一个 PR 中。随后，你使用现有的 Database Explorer 并创建了由存储库支持的分类画布，没有重复 PR 工作流。 + +## 不同类型的验证 + +你通过多种方式检查了代码：自动化测试、自己的浏览器检查，以及 Copilot 通过 MCP 进行的浏览器探索。`quality-checks` 技能运行单元测试、lint 和类型检查，并按新的格式报告结果。创建 PR 前，QA 将这些结果与需求和测试覆盖情况的审查结合起来。 + +新增测试应填补真实缺口；不需要新增测试的 QA 运行也可能完全正确。缺少工具、跳过检查和失败都是需要明确报告的阻塞项，而不是通过。授权合并前审查代码和证据，并在改动后更新受影响的证据。 + +## 最佳实践 + +提供给 Copilot 的上下文和工具会影响其工作。在本工作坊中，你更新了指令、自定义了技能、创建了 QA 配置文件、配置了 MCP 服务器并创建了画布。应在不同会话中复用这些自定义项，并随团队需求的变化加以调整。指令设定标准，技能描述可重复执行的任务，自定义智能体定义专业角色，MCP 服务器连接外部工具，画布则提供共享交互式界面。审查实际更改和工具结果，而不只是智能体的摘要。 + +根据任务选择适合的**模式和模型**。使用 **Plan** 在构建前思考方法；使用 **Interactive** 参与范围明确的更改；仅对范围清晰且彼此隔离的任务使用 **Autopilot**。日常编辑可选择更快的模型，复杂工作则选择推理能力更强的模型并提高推理强度。 + +上下文与基础设施同样重要。清楚说明要构建*什么*、*为什么*构建，以及*如何*构建，会显著影响输出。在决定创建完整会话前，可以先通过快速聊天明确想法的范围。 + +## 更多探索内容 + +你已经了解核心工作流。以下功能也值得探索： + +- [**Automations**][using-automations]：用于重复性或按需任务，例如汇总近期工作。采用前审查计划、权限和范围；创建自动化任务属于后续方向，不是本研讨会的一部分。 +- **Rubber duck**：用于分析问题，并在构建前获得高信噪比反馈。 +- [`/chronicle`][chronicle]：生成会话过程的叙述。 +- [Bring your own key (BYOK)][byok]：使用自己提供商的模型，包括通过 Ollama、Foundry Local 或 LM Studio 使用本地模型。 +- [Deep links][deep-links]：直接在应用中打开存储库、会话或提示词。 + +## 后续步骤 + +熟练使用任何工具的最佳方式都是持续使用。可将它用于生产代码、业余项目，或那个构思多年却始终没有动手构建的小应用。与团队分享经验，也向团队学习。并且一如既往地探索文档。 + +要探索 GitHub Copilot 生态系统的更多内容，请查看 [VS Code 学习路径][vscode-harness]、[Copilot CLI 学习路径][cli-harness]或 [Cloud agent 学习路径][cloud-harness]。 + +## 资源 + +- [关于 GitHub Copilot app][about-copilot-app] +- [GitHub Copilot app 入门][getting-started] +- [自定义 GitHub Copilot app][customize] +- [使用自动化][using-automations] +- [使用画布扩展][canvas-docs] + +[vscode-harness]: /zh-cn/learning-hub/copilot-workshops/vscode/ +[cli-harness]: /zh-cn/learning-hub/copilot-workshops/cli/ +[cloud-harness]: /zh-cn/learning-hub/copilot-workshops/cloud/ +[about-copilot-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 +[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle +[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models +[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/2-add-star-rating.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/2-add-star-rating.md index 2f350fee8..1a9e2362c 100644 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/2-add-star-rating.md +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/2-add-star-rating.md @@ -1,12 +1,12 @@ --- -title: "第 2 课 - 运行第一个智能体会话" +title: "第 2 课 - 添加星级评分：快速上手" description: "在 GitHub Copilot app 中启动第一个智能体会话，对游戏卡片进行一项小改动，并通过第一个拉取请求合并更改。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -在上一课中，你介绍了工作区并使用了快速聊天。现在可以启动**智能体会话**，对项目进行第一次更改。此次改动很小：游戏数据中已有星级评分，但主页上的游戏卡片尚未显示。你将要求智能体显示评分、审查更改，并通过第一个拉取请求合并更改。 +在上一课中，你浏览了工作区并使用了快速聊天。现在可以启动**智能体会话**，对项目进行第一次更改。此次改动很小：游戏数据中已有星级评分，但主页上的游戏卡片尚未显示。你将要求智能体显示评分、审查更改，并通过第一个拉取请求合并更改。 本课将介绍如何： @@ -31,21 +31,15 @@ Tailspin Toys 中的每款游戏都可以有星级评分，该评分已显示在 现在启动新会话，探索项目并实现功能。在[上一课][prior-lesson]中，你从 GitHub 存储库添加了项目。接下来为该存储库创建新会话并请求更改。 1. 返回（或打开）GitHub Copilot app。 -2. 选择 **Home screen**。 -3. 确保为存储库选择了 `tailspin-toys`。 +2. 选择 **Projects** 旁的 **+**。 +3. 选择 `tailspin-toys` 作为存储库。 +4. 在提示框下方选择 **new working tree** 和 **Interactive** 模式。使用以下提示词请求更改： - ![GitHub Copilot app 提示框，其中存储库选择器设为 tailspin-toys，提示框下方显示模型选择器](/images/learning-hub/copilot-workshops/app-2-start-session.png) + ```plaintext + Show each game's starRating out of 5 in the game cards on the list page. If the rating is null, show "No rating yet". Keep the card layout as it is, add tests, and run the relevant checks. + ``` -4. 使用以下提示词请求更改： - - ```plaintext - On the game cards, show each game's star rating. The Game type already includes a starRating field — it's a number out of 5, or null when a game hasn't been rated yet. Display it on each card in src/components/GameCard.astro, and when starRating is null show "No rating yet" instead. Keep the change small and don't restructure the card layout. - ``` - -> [!NOTE] -> 请注意，提示词包含了 Copilot 要更新的文件名。虽然不要求指定 Copilot 应在工作中包含哪些文件，但指出正确方向既能帮助 Copilot 快速生成代码，也能减少令牌用量。 - -5. 选择 Enter 将提示词发送给 Copilot。 +5. 按 Enter 将提示词发送给 Copilot。 Copilot app 首先创建新的工作树，即项目的隔离副本。随后，它会探索项目，找到添加新功能所需更新的文件，然后创建必要的代码。现在，你已经使用 Copilot app 添加了一项新功能。 @@ -55,7 +49,7 @@ Copilot app 首先创建新的工作树，即项目的隔离副本。随后， 1. 在应用右上角选择 **Toggle review panel**。差异屏幕会打开，显示 Copilot 所做的所有待处理更改。 - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](/images/learning-hub/copilot-workshops/app-2-review-panel.png) + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](/images/learning-hub/copilot-workshops/app-2-review-panel.png) 2. 应会看到核心游戏详情显示文件 `GameCard.astro` 中新增了代码。代码应与以下示例类似：一个小代码块，在评分存在时呈现评分，在 `starRating` 为 `null` 时回退到 "No rating yet"： @@ -76,40 +70,38 @@ Copilot app 首先创建新的工作树，即项目的隔离副本。随后， ## 检查更改 -当然，不能只阅读代码就假定它能正常工作，还应进行视觉测试。为此，需要从终端启动应用，再确认一切正常。Copilot app 恰好内置了终端。 +打开浏览器前，先审查智能体的自动化检查结果。确认测试覆盖数值类型的 `starRating` 和 `null` 回退状态。缺少先决条件或跳过检查不算通过；批准安装请求前先审查。 -1. 在 Copilot app 右侧的审查面板中选择 **Terminal**。如果没有 **Terminal** 按钮，请选择 **+**（标记为 **Open in panel**），再选择 **Terminal**。 +当然，不能只阅读代码就假定它能正常运行。让 Copilot 打开网站，以便检查更新后的 UI。可以让它启动网站，并在浏览器画布中打开。 - ![GitHub Copilot app 审查面板中的 Terminal 按钮](/images/learning-hub/copilot-workshops/app-terminal-screenshot.png) +> [!TIP] +> 画布是 Copilot app 内的交互式小组件。稍后你将探索自定义画布，甚至创建自己的画布；现在先使用内置的浏览器画布。 -2. 在终端窗口中输入以下命令，启动 Web 应用的开发服务器： +1. 使用以下提示词，让 Copilot 启动应用并在浏览器画布中打开页面： - ```shell - npm run dev - ``` + ```plaintext + Start the app and open it in the browser canvas. + ``` -3. 服务器启动后（只需片刻），打开浏览器窗口。 -4. 转到 [http://localhost:4321](http://localhost:4321)。 -5. 现在应能在主页上的所有游戏中看到星级评分。 -6. 返回终端窗口。 -7. 选择 Ctrl+C 停止开发服务器。 +2. 稍等片刻，应用将启动，Copilot app 内会打开浏览器窗口。 +3. 确认已评分的游戏卡片显示满分为五分的评分值。 +4. 完成后，使用以下提示词让 Copilot 停止为此会话启动的开发服务器，并关闭浏览器画布： + + ```plaintext + Stop the dev server and close the browser canvas. + ``` ## 打开并合并第一个拉取请求 -更改看起来没有问题，现在可以交付。你将要求智能体打开拉取请求，然后在 github.com 上自行审查并合并。目前先手动管理此流程，后续课程将探索 Copilot 如何自动处理其中部分工作。 +你已创建该功能。现在创建拉取请求 (PR)，将新代码合并到现有代码库中。 -1. 在右上角选择 **Create PR**。 +1. 选择右上角的 **Create PR**。 2. 如果系统提示，请选择 **Sign in with your browser**，并按照提示完成身份验证。 3. Copilot 开始创建 PR。 - -PR 创建后，Copilot 会监视存储库中需要运行的工作流。片刻后，右上角的按钮会变为 **Ready to merge**，表示 PR 已可合并。 - 4. 选择聊天上方的 **PR** 气泡，在审查窗格中打开并查看拉取请求。可根据需要在此审查 PR。 5. 准备好后，选择 **Ready to merge**。 6. 在新对话框窗口中选择 **Merge pull request**，合并拉取请求。 -现在，新功能已推送到网站。 - ## 总结与后续步骤 你已启动第一个智能体会话，并交付了第一次更改。具体而言，你： @@ -118,9 +110,9 @@ PR 创建后，Copilot 会监视存储库中需要运行的工作流。片刻后 - 指示智能体对游戏卡片进行一项范围明确的小改动。 - 在工作区差异视图中审查了更改。 - 在本地运行应用，并在浏览器中确认了星级评分。 -- 打开并自行在 github.com 上合并了拉取请求。 +- 打开了 PR 1，审查了检查结果，并明确执行了合并。 -接下来，你将从待办事项中的一个议题开始，使用应用向存储库添加自定义指令标准。继续学习[第 3 课 - 使用自定义指令引导 Copilot][next-lesson]。 +接下来，你将[从筛选功能议题开始，并使用 Plan 和 Autopilot 模式][next-lesson]构建一项更大的功能。 ## 资源 @@ -128,8 +120,8 @@ PR 创建后，Copilot 会监视存储库中需要运行的工作流。片刻后 - [关于 GitHub Copilot app][about-copilot-app] - [使用 GitHub Copilot app 管理议题和拉取请求][managing-issues-prs] -[prior-lesson]: /zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app/#安装并配置-github-copilot-app -[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/3-custom-instructions/ +[prior-lesson]: /zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app/#%E5%AE%89%E8%A3%85%E5%B9%B6%E9%85%8D%E7%BD%AE-github-copilot-app +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/3-agent-modes/ [agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions [about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app [managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/3-agent-modes.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/3-agent-modes.md new file mode 100644 index 000000000..181d1a7d7 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/3-agent-modes.md @@ -0,0 +1,131 @@ +--- +title: "第 3 课 - 智能体模式：Plan 和 Autopilot" +description: "探索智能体模式：使用 Plan 确定方案，使用 Autopilot 根据议题构建筛选功能，再使用 Interactive 审查并验证结果。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +我们先为项目添加了一项小功能，但更复杂的更改需要更完善的流程。GitHub Copilot app 支持组织现有的工作流程，帮助我们用正确的方法构建所需功能。从本课开始，你将通过几节课遵循典型的智能体驱动开发流程：先使用议题生成新功能，确认代码有效且功能行为符合预期，最终将更改成功合并到项目中。 + +> [!NOTE] +> 在后续功能工作流中，你将沿用同一个会话。通常，不同类型的文件会使用不同的会话或 PR，但这里会采用简化方式，以便专注于核心概念。 + +本课将介绍如何： + +- 从 GitHub 议题启动新的智能体会话。 +- 在 **Plan** 模式中定义需求。 +- 使用 **Autopilot** 模式实现新功能。 +- 审查代码。 +- 在浏览器画布中手动验证功能。 + +继续完成该功能时，你将更新存储库指令、自定义现有的 quality-checks 技能、添加 MCP 验证、创建 QA 智能体并打开功能 PR。 + +## 场景 + +Tailspin Toys 的游戏目录不断扩大，访客需要按类别和发行商缩小游戏范围。待办议题描述了功能，但多个类别如何组合等细节需要在编码前达成共识。你将使用 Plan 模式确定这些决策，然后授权 Autopilot 在明确范围内实现功能。 + +## 背景 + +将 AI 编码智能体引入开发流程不会改变基本原则。事实上，这些原则反而更加重要。大多数开发人员遵循类似以下的流程： + +1. 打开已创建的议题，查看需要完成的工作详情。 +2. 为需要构建的内容制定计划。 +3. 构建并审查代码。 +4. 运行测试以验证代码。 +5. 手动验证新功能。 +6. 创建拉取请求 (PR)。 +7. 代码通过审查且持续集成流程成功后，合并代码。 + +> [!NOTE] +> 具体流程会因团队和组织而异，但大多数流程都是以上主题的变体。 + +坚持这种标准方法，可以确保 AI 生成的代码满足既定要求，并经过与手写代码相同的审查流程。 + +## 会话模式 + +**会话模式**控制智能体的自主程度。可以从提示词字段下方的下拉菜单中设置模式，并随时更改： + +- **Interactive**：你与智能体协同工作。智能体提出更改建议，并等待输入后再继续。 +- **Plan**：智能体先创建计划。你审查并批准计划后，智能体才会执行。 +- **Autopilot**：智能体完全自主工作，包括编写代码、运行测试和迭代，无需等待输入。 + +先在 Plan 模式中审查计划，再使用 Autopilot 实现。 + +## 从议题启动会话 + +开始前，确认星级评分 PR 已合并，并且本地 `main` 已更新。 + +1. 选择 **Issues**，打开 **Allow users to filter games by category and publisher**。 +2. 选择 **New session**，再选择基于更新后 `main` 的 **new working tree**。 + + ![GitHub Copilot app 的议题视图，箭头指向 New session 按钮](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) + +3. 确认议题已附加到会话，并在模式选择器中选择 **Plan**。 + +## 规划筛选功能 + +规划让你能在 Copilot 编写代码前审查方案。由于会话从议题启动，Copilot 已获得功能请求的上下文。发送： + +```plaintext +Build this feature. +``` + +回答 Copilot 的问题，并对照议题的验收标准审查计划。确认计划涵盖类别和发行商筛选、无障碍控件、数据访问改动及测试。讨论尚不明确的行为，例如多个类别如何组合，或没有匹配游戏时如何处理。 + +计划应使用项目现有工具执行 lint、单元测试、E2E 测试和类型检查。将范围限定为筛选功能的实现和测试；完成质量工作流后再创建 PR。批准前先请求必要的计划调整，并保留议题 URL 和已达成共识的澄清内容，供后续验证使用。 + +## 明确批准 Autopilot + +对计划满意后，选择 **Approve and implement with autopilot**，或当前版本中的等效选项。确认模式指示器显示 **Autopilot**。 + +Copilot 将开始实现功能。它会按既定计划逐步推进，生成代码、运行测试，并在过程中迭代。 + +> [!NOTE] +> 批准后可能立即开始实现，因此应先审查计划。如果 Copilot 报告缺少依赖项或端口冲突，应先解决环境设置问题，再认定检查已完成。只停止自己启动的服务器。 + +## 审查并验证实现 + +与其他代码一样，生成的代码也需要在合并前审查。下面将审查代码并运行站点，确认一切正常。 + +1. 打开 **Changes**，检查筛选实现和测试。 +2. 对照议题和批准的澄清内容检查结果，包括多类别及发行商组合。检查更改是否遵循现有存储库指令。 +3. 查看 lint、单元测试、E2E 测试和类型检查的输出。跳过的检查不能算通过。 +4. 接受实现前，解决失败项并重新运行受影响的检查。Playwright 的 E2E 配置会构建并提供预览服务，且可能复用本地服务器；确保被测服务器属于此工作树，而不是之前的课程。 + +## 探索新功能 + +代码看起来没有问题，但能否正常运行？像之前一样启动应用，并在浏览器画布中打开站点。 + +1. 使用以下提示词，让 Copilot 启动应用并在浏览器画布中打开页面： + + ```plaintext + Start the app and open it in the browser canvas. + ``` + +2. 稍等片刻，应用将启动，Copilot app 内会打开浏览器窗口。 +3. 确认已评分的游戏卡片显示满分为五分的评分值。 +4. 完成后，使用以下提示词让 Copilot 停止为此会话启动的开发服务器，并关闭浏览器画布： + + ```plaintext + Stop the dev server and close the browser canvas. + ``` + +## 总结与后续步骤 + +你已使用不同的智能体模式构建并审查功能。本课中，你： + +- 从 GitHub 议题启动了新的智能体会话。 +- 在 **Plan** 模式中定义了需求。 +- 使用 **Autopilot** 模式实现了新功能。 +- 审查了代码。 +- 在浏览器画布中手动验证了功能。 + +接下来，我们将深入了解代码生成方式，并[使用自定义指令][next-lesson]确保代码遵循已有实践。 + +## 资源 + +- [在 GitHub Copilot app 中使用智能体会话][agent-sessions] + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/4-custom-instructions/ +[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/3-custom-instructions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/3-custom-instructions.md deleted file mode 100644 index 802c67d95..000000000 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/3-custom-instructions.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "第 3 课 - 使用自定义指令引导 Copilot" -description: "使用 GitHub Copilot app 向存储库添加自定义指令标准，从待办议题开始，并通过拉取请求合并更改。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -使用生成式 AI 时，上下文至关重要。如果任务需要以特定方式完成，或 Copilot 应了解一些背景信息，就应提供这些上下文。[指令文件][instruction-files]是实现此目的最强大的工具之一，它不仅说明需要什么代码，还说明代码应如何组织。本课将向存储库添加文档标准，并采用后续大多数工作的方式：从待办议题开始，让智能体完成更改。 - -本课将介绍如何： - -- 探索存储库指令和路径范围指令文件如何传递给智能体。 -- 从待办事项中的指令议题启动会话。 -- 要求智能体向 `.github/copilot-instructions.md` 添加文档标准。 -- 审查更改，并通过拉取请求合并更改。 - -## 场景 - -与所有优秀的开发团队一样，Tailspin Toys 针对开发实践制定了一组准则和要求，其中包括： - -- 应以 TSDoc 文档注释的形式向代码添加文档。 -- 应记录格式规范，并通过 lint 强制执行。 - -通过指令文件，可以确保 Copilot 获得正确的信息，按照这些实践完成任务。 - -## 指令文件 - -自定义指令可向 Copilot 提供上下文和偏好，使其更好地理解编码风格与要求。这项强大功能可引导 Copilot 提供更相关的建议和代码片段。你可以指定首选编码约定、库，甚至希望代码中包含的注释类型。可以为整个存储库创建指令，也可以针对特定文件类型提供任务级上下文。 - -指令文件分为两类： - -- `.github/copilot-instructions.md`：每次针对存储库的请求都会发送给 Copilot 的单个指令文件。此文件应包含项目级信息，即与大多数发送给 Copilot 的聊天或 CLI 请求相关的上下文，例如所用技术栈、正在构建的内容概述、最佳实践和其他全局指导。 -- `.github/instructions/*.instructions.md`：可针对特定任务或文件类型创建。可以用它们为特定语言（如 TypeScript 或 Astro）提供准则，也可以为创建 UI 组件或一组新单元测试等任务提供指导。 - -> [!NOTE] -> Copilot 还支持通过 AGENTS.md、CLAUDE.md 和 GEMINI.md 等其他标准引入指令指导，确保 Copilot 始终具有正确的上下文。 - -### 管理指令文件的最佳实践 - -深入讨论如何创建指令文件超出了本研讨会的范围。不过，示例项目提供了具有代表性的方法。总体而言： - -- `copilot-instructions.md` 中的指令应专注于项目级指导，例如所构建内容的说明、项目结构和全局编码标准。 -- 使用 `*.instructions.md` 文件为文件类型（单元测试、Astro 组件、数据层）或特定任务提供具体指令。 -- 使用自然语言。保持指导清晰，并提供代码应采用和不应采用的示例。 - -创建指令文件没有唯一方法，使用 AI 同样如此。通过不断试验，可以找到最适合项目的方式。 - -> [!TIP] -> 每个使用 GitHub Copilot 的项目都应拥有一套完善的指令文件。探索本项目中的文件时，可以看到针对多种代码文件类型的指令文件。 -> -> 要查找模板或起点，请探索 [awesome-copilot][awesome-copilot]，其中包含大量指令文件、自定义智能体和其他资源。 - -## 探索此项目中的自定义指令文件 - -花一点时间阅读此存储库附带的指令文件：一个核心 `copilot-instructions.md`，以及一组用于不同任务的 `*.instructions.md` 文件。在编辑器或 GitHub Web UI 中打开这些文件。 - -1. 如果审查面板尚不可见，请选择右上角的 **Toggle review panel** 将其打开。 - - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](/images/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. 选择 **+**，向审查面板添加新项目。 -3. 选择 **File**。 -4. 搜索 `copilot-instructions.md`。 -5. 从文件列表中选择 `copilot-instructions.md` 将其打开。 -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/learning-hub/copilot-workshops/app-show-folder-view.png) - -8. 转到 `.github/instructions` 文件夹并探索其中的文件。注意，其中包含针对 Astro 文件、Drizzle 数据层和测试等内容的指令。 -9. 打开 `.github/instructions/unit-tests.instructions.md`。注意顶部的 `applyTo` 字段，它设置了一个相对于存储库根目录的 glob，用于确定指令适用的文件。此处会匹配任何 TypeScript 测试文件，例如匹配 `**/*.test.ts` 的文件。 -10. 注意此项目中有关创建单元测试的具体指令。 -11. 最后，打开 `.github/instructions/drizzle.instructions.md` 并滚动到底部。注意其中指向其他指令文件（如 `unit-tests.instructions.md`）和项目现有文件的链接。这样可以将较大的指令集拆分为较小的可复用文件，并让 Copilot 在生成代码时参考示例。（其中的路径相对于指令文件，而非存储库根目录。） - -> [!NOTE] -> `copilot-instructions.md` 中的 **Code formatting requirements** 部分记录了项目编码标准，但尚未要求代码内文档。接下来，你将添加 TSDoc 文档注释和文件注释标头的规则。 - -## 从指令议题开始 - -上一课通过直接提示词启动了会话。不过，大多数工作都从议题开始。接下来，根据用于更新指令文件的议题创建新会话，再请求更新。 - -> [!NOTE] -> 指令文件对 Copilot 生成的代码影响很大，因此应确保它们能清晰地引导 Copilot。让 Copilot 创建第一版（正如本课将要做的），再由你审查更新是否满足要求，是一种有效方法。 - -1. 在侧边栏中选择 **My work**。 -2. 选择标题为 **Update our repository coding standards** 的议题，将其打开。 -3. 选择右上角的 **New session**，根据该议题启动新会话。 - - ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) - -4. 使用以下提示词，请求 Copilot 更新指令文件以满足议题中记录的要求： - - ```plaintext - Following this issue, make the updates to the instructions files in this project to meet the requirements documented. Don't create the PR quite yet! - ``` - -Copilot 会进行更新。 - -## 审查更改 - -接下来阅读 Copilot 所做的更新，并要求它提供根据更新后指令生成的代码示例。 - -1. 选择右上角的 **Changes**，打开代码更改。 - - ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](/images/learning-hub/copilot-workshops/app-select-changes.png) - -2. 审查更新后的指令文件，确认其中包含有关向代码添加文档和注释的准则。 - -> [!NOTE] -> AI 具有概率性而非确定性，因此实际文本会有所不同。 - -3. 使用以下提示词，要求 Copilot 创建它现在会生成的代码示例： - - ```plaintext - Do not make any updates, but show me what the code would look like. Based on the new instructions, if I asked Copilot to create a new library component to return all Publishers what would that code look like? - ``` - -4. 审查 Copilot 提议的代码。注意其中包含 TSDoc 文档注释和文件标头注释，这正是更新后的指令所要求的内容。 - -现在，你已更新项目中的指令文件，并了解了更新带来的影响。 - -## 打开并合并拉取请求 - -指令文件会成为存储库中的资产，与团队其他成员共享。接下来像处理任何其他资产一样，为此次工作创建 PR。 - -1. 在右上角选择 **Create PR**。 -2. 如果系统提示，请选择 **Sign in with your browser**，并按照提示完成身份验证。 -3. Copilot 开始创建 PR。 - -PR 创建后，Copilot 会监视存储库中需要运行的工作流。片刻后，右上角的按钮会变为 **Ready to merge**，表示 PR 已可合并。 - -4. 选择 **Ready to merge**。 -5. 在新对话框窗口中选择 **Merge pull request**，合并拉取请求。 - -> [!NOTE] -> 标准合并到默认分支后，便会成为每位成员和每个新会话的项目组成部分。下一课从最新默认分支启动筛选会话时，智能体会自动遵循此标准。生成的 TypeScript 无需提示便会包含 TSDoc 文档注释。这是指令影响代码生成的一个虽小但真实的示例。 - -## 总结与后续步骤 - -你探索了应用如何从指令文件获取上下文，然后使用会话添加并合并存储库范围的标准。具体而言，你： - -- 探索了存储库中的 `copilot-instructions.md` 和路径范围 `*.instructions.md` 文件。 -- 从待办事项中的指令议题启动了会话。 -- 要求智能体向 `.github/copilot-instructions.md` 添加文档标准。 -- 审查了更改，并通过拉取请求将其合并。 - -接下来，你将在新会话中构建筛选功能，并观察它如何采用刚合并的标准。继续学习[第 4 课 - 使用 Autopilot 构建功能][next-lesson]。 - -## 资源 - -- [用于自定义 GitHub Copilot 的指令文件][instruction-files] -- [自定义 GitHub Copilot app][customize-app] -- [创建自定义指令的最佳实践][instructions-best-practices] -- [Awesome Copilot：指令文件和其他资源集合][awesome-copilot] - -[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/4-build-filtering/ -[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository -[awesome-copilot]: https://awesome-copilot.github.com/ -[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support -[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md -[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/4-build-filtering.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/4-build-filtering.md deleted file mode 100644 index 92f668cb1..000000000 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/4-build-filtering.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: "第 4 课 - 使用 Autopilot 构建功能" -description: "在 GitHub Copilot app 中使用 Plan 和 Autopilot 模式构建静态客户端筛选功能，观察它如何继承文档标准，并使用智能体技能进行验证。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -本项目已完成一些小更新。但更复杂的更改需要更完善的流程。GitHub Copilot app 可以配合现有流程，确保以正确的方式构建正确的内容。这是连续三节课程中的第一节，你将遵循典型开发流程：先使用议题生成新功能，再使用智能体技能运行验证测试和 lint。 - -本课将介绍如何： - -- 从筛选议题启动新会话。 -- 使用 **Plan** 模式规划功能，再通过 **Autopilot** 构建功能。 -- 确认生成的代码遵循之前合并的文档标准。 -- 使用项目的 `quality-checks` 技能验证工作。 - -## 场景 - -主页列出了所有游戏，但访问者无法缩小列表范围。筛选议题要求允许用户按**类别**和**发行商**筛选游戏。接下来使用 Copilot 实现该功能。 - -## 背景 - -将 AI 编码智能体引入开发流程不会改变基本原则。事实上，这些原则反而更加重要。大多数开发人员遵循类似以下的流程： - -1. 打开已创建的议题，查看需要完成的工作详情。 -2. 为需要构建的内容制定计划。 -3. 构建并审查代码。 -4. 运行测试以验证代码。 -5. 手动验证新功能。 -6. 创建拉取请求 (PR)。 -7. 代码通过审查且持续集成流程成功后，合并代码。 - -> [!NOTE] -> 具体流程会因团队和组织而异，但大多数流程都是以上主题的变体。 - -坚持这种标准方法，可以确保 AI 生成的代码满足既定要求，并经过与手写代码相同的审查流程。 - -## 会话模式 - -**会话模式**控制智能体的自主程度。可以从提示词字段下方的下拉菜单中设置模式，并随时更改： - -- **Interactive**：你与智能体协同工作。智能体提出更改建议，并等待输入后再继续。 -- **Plan**：智能体先创建计划。你审查并批准计划后，智能体才会执行。 -- **Autopilot**：智能体完全自主工作，包括编写代码、运行测试和迭代，无需等待输入。 - -## 规划筛选功能 - -发现潜在问题的最佳时机是在编写任何代码之前，而提前规划正是最好的方法。让 Copilot 进行规划时，它会生成一组步骤，并记录将采用的方法。你可以审查计划并提出改进建议，然后让 Copilot 根据计划生成代码。 - -接下来打开议题、启动新会话，再切换到 Plan 模式并发出请求，以创建计划。 - -1. 在导航选项卡中选择 **My work**。 -2. 选择标题为 **Allow users to filter games by category and publisher** 的议题。 -3. 选择右上角的 **New session**。 - - ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](/images/learning-hub/copilot-workshops/app-new-session-from-issue.png) - -4. 选择 Shift+Tab，直到模式显示为 **Plan**。 - - ![GitHub Copilot app 提示框，箭头指向设为 Plan 的模式选择器](/images/learning-hub/copilot-workshops/app-4-plan-mode.png) - -5. 发送以下提示词。由于会话从筛选议题启动，因此该议题已在会话上下文中： - - ```plaintext - Plan the work based on the requirements documented in the issue. Please ask any clarifying questions you might have as you build the plan. - ``` - -6. 智能体在制定计划时可能会提出后续问题。根据你会如何构建功能来回答这些问题。 - -> [!NOTE] -> Copilot 具有概率性，因此它提出的具体后续问题会有所不同。事实上，它可能不会提出任何问题，这完全正常。 - -7. 完成后，Copilot 会提供计划摘要。审查该计划，应会看到构建查询、添加筛选控件和测试的建议。可以根据需要提供反馈来完善计划，智能体会将建议纳入新版本。 - -## 使用 Autopilot 构建 - -计划创建后，让 Copilot 构建实现。 - -1. 在 **Plan summary** 对话框的选项列表中，选择最接近 **Approve and implement with autopilot** 的选项。 - -Copilot 将开始实现。 - -> [!NOTE] -> 如果 Copilot 未自动开始创建所需代码，可以使用类似 "Go ahead and start building out the plan!" 的提示词让它继续。 -> -> 创建所需更新需要几分钟。智能体会编辑和创建文件、编写并运行测试，以及进行迭代。此时可以回顾目前探索的内容，或稍作休息。 - -## 审查更改 - -所有 AI 生成的代码在合并前都需要审查。接下来审查代码并运行网站，确保一切正常。 - -1. 选择右上角的 **Changes**，打开代码更改。 - - ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](/images/learning-hub/copilot-workshops/app-select-changes.png) - -2. 审查更改。应会看到新的 TypeScript、Astro 和测试文件。注意，新辅助函数包含 TSDoc 文档注释和文件标头注释。这是第 3 课中合并的文档标准，无需提示便已自动应用。 -3. 在 Copilot app 右侧的审查面板中选择 **Terminal**。如果没有 **Terminal** 按钮，请选择 **+**（标记为 **Open in panel**），再选择 **Terminal**。 - - ![GitHub Copilot app 审查面板中的 Terminal 按钮](/images/learning-hub/copilot-workshops/app-terminal-screenshot.png) - -4. 在终端窗口中输入以下命令，启动 Web 应用的开发服务器： - - ```shell - npm run dev - ``` - -5. 服务器启动后（只需片刻），打开浏览器窗口。 -6. 转到 [http://localhost:4321](http://localhost:4321)。 -7. 现在应能在主页上看到筛选器。 -8. 如果有任何问题，可以要求 Copilot 进行更新。 -9. 满意后，返回终端窗口。 -10. 选择 Ctrl+C 停止开发服务器。 - -## 使用 quality-checks 技能验证工作 - -可以仅查看差异就认为工作完成，但团队已经定义了质量标准和可重复的检查方式。 - -**智能体技能**可指导 Copilot 如何执行重复性任务，例如运行测试、生成构建或创建拉取请求。技能是一个包含指令、脚本和资源的文件夹，智能体可以按需加载。[Agent Skills 是一项开放标准][agent-skills-repo]，适用于多种智能体，因此同一技能可在智能体模式下的 Copilot Chat、Copilot cloud agent、Copilot CLI 和 GitHub Copilot app 中使用。 - -技能位于项目的 `.github/skills` 文件夹或全局 `~/.copilot/skills` 中。每个技能都在一个文件夹中，其中包含具有 YAML frontmatter（`name` 和 `description`）及 Markdown 指令的 `SKILL.md` 文件： - -```yaml ---- -name: quality-checks -description: Run the project's test suites and linter to verify code changes are ready to commit, push, or merge. ---- -``` - -技能还可包含脚本、资产和参考资料子文件夹。[智能体技能规范][agent-skills-spec]介绍了完整结构。 - -> [!TIP] -> 技能会动态加载。智能体根据 `description` 字段决定适用的技能。清晰且针对具体场景的说明决定了技能是会被使用还是被忽略。 - -## 探索 quality-checks 技能 - -接下来探索该技能，了解其作用。 - -1. 如果审查面板尚不可见，请选择右上角的 **Toggle review panel** 将其打开。 - - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](/images/learning-hub/copilot-workshops/app-2-review-panel.png) - -2. 选择 **+**，向审查面板添加新项目。 -3. 选择 **File**。 -4. 搜索 `SKILL.md`。 -5. 从文件列表中选择 `SKILL.md .github/skills/quality-checks` 将其打开。 -6. 注意 `name` 和 `description`。说明会告知智能体*何时*使用该技能，即每当代码更改需要在提交、推送或合并前进行测试、lint 或验证时。 -7. 阅读该技能。它记录了哪个脚本运行哪个套件（单元测试、Playwright 端到端测试、ESLint）、运行顺序，以及如何调试常见故障。因此，智能体会按团队规定的方式运行检查，而不是猜测。 - -## 运行检查 - -在同一筛选会话中，要求智能体验证工作。你无需说出技能名称，智能体会根据请求进行匹配。 - -1. 返回 Copilot app。 -2. 使用 slash command `/quality-checks` 直接调用技能，然后选择 Enter。 -3. 智能体按照技能运行单元测试、lint 和端到端测试，并报告结果。如果有任何失败，请要求它修复问题并重新运行检查，直到全部通过。 -4. **保持此会话打开。**下一课将添加 Playwright MCP 服务器，并使用它在真实浏览器中查看筛选功能。 - -## 总结与后续步骤 - -你端到端构建了一项真实功能，并按照团队的质量标准进行了验证。具体而言，你： - -- 从最新项目的筛选议题启动了新会话。 -- 使用 Plan 模式规划功能，并使用 Autopilot 构建功能。 -- 确认生成的辅助函数遵循第 3 课中合并的文档标准。 -- 使用 `quality-checks` 技能验证了工作。 - -接下来，你将连接 Playwright MCP 服务器，并要求智能体在真实浏览器中探索筛选功能。继续学习[第 5 课 - 使用 Playwright MCP 服务器测试][next-lesson]。 - -## 资源 - -- [在 GitHub Copilot app 中使用智能体会话][agent-sessions] -- [关于 Agent Skills][about-agent-skills] -- [自定义 GitHub Copilot app][customize-app] -- [关于 GitHub Copilot 的云沙盒和本地沙盒][sandboxes] - -[ex0]: /zh-cn/learning-hub/copilot-workshops/app/0-prerequisites/ -[ex2]: /zh-cn/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /zh-cn/learning-hub/copilot-workshops/app/3-custom-instructions/ -[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions -[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills -[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[agent-skills-repo]: https://github.com/agentskills/agentskills -[agent-skills-spec]: https://agentskills.io/specification \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/4-custom-instructions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/4-custom-instructions.md new file mode 100644 index 000000000..50a43bd21 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/4-custom-instructions.md @@ -0,0 +1,121 @@ +--- +title: "第 4 课 - 使用自定义指令引导 Copilot" +description: "探索存储库指令，添加文档标准，并将其应用于筛选代码。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +使用生成式 AI 时，上下文至关重要。如果任务需要以特定方式完成，就应向 Copilot 提供相应指导。[指令文件][instruction-files]不仅说明需要什么代码，还说明代码应如何组织。现在筛选功能已构建完成，你将探索 Copilot 使用的指令、添加文档标准，并将其应用于代码。 + +本课将介绍如何： + +- 探索存储库指令和路径范围指令文件如何传递给智能体。 +- 更新指令文件以确保遵循编码标准。 +- 查看指令文件对代码的影响。 + +## 场景 + +与所有优秀的开发团队一样，Tailspin Toys 针对开发实践制定了一组准则和要求，其中包括： + +- 注释应说明意图和不明显的决策，而不是复述代码。 +- `db/` 和 `src/lib/` 中导出的函数应使用 TSDoc/JSDoc 记录用途、参数和返回值；如果存在可注入的 `db` 参数，也应记录。 +- 可复用的 Astro 组件应记录其 `Props` 契约，并在相关代码变化时同步更新注释。 +- 应保留现有格式和 lint 指导。 + +通过指令文件，可以确保 Copilot 获得正确的信息，按照这些实践完成任务。 + +## 指令文件 + +自定义指令可向 Copilot 提供上下文和偏好，使其更好地理解编码风格与要求。这项强大功能可引导 Copilot 提供更相关的建议和代码片段。你可以指定首选编码约定、库，甚至希望代码中包含的注释类型。可以为整个存储库创建指令，也可以针对特定文件类型提供任务级上下文。 + +指令文件分为两类： + +- `.github/copilot-instructions.md`：每次针对存储库的请求都会发送给 Copilot 的单个指令文件。此文件应包含项目级信息，即与大多数发送给 Copilot 的聊天或 CLI 请求相关的上下文，例如所用技术栈、正在构建的内容概述、最佳实践和其他全局指导。 +- `.github/instructions/*.instructions.md`：可针对特定任务或文件类型创建。可以用它们为特定语言（如 TypeScript 或 Astro）提供准则，也可以为创建 UI 组件或一组新单元测试等任务提供指导。 + +> [!NOTE] +> 其他指令格式及支持情况因操作环境而异。依赖某种格式前，请查阅[自定义指令支持参考][custom-instructions-support]。 + +## 探索此项目中的自定义指令文件 + +初始项目已包含一组指令文件。进行更改前，先探索现有内容并了解其影响。 + +1. 返回上一课使用的会话。 +2. 如果审查面板尚不可见，请选择右上角的 **Toggle review panel** 将其打开。 + + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](/images/learning-hub/copilot-workshops/app-2-review-panel.png) + +3. 选择 **+** 图标以“Open in panel”，打开新画布。 +4. 选择 **Files**。 +5. 选择 **Gear** 图标，确保 **Show hidden files** 旁有勾选标记。 +6. 转到 `.github/copilot-instructions.md`。 +7. 探索该文件，注意项目的简要说明，以及 **Agent notes**、**Code standards**、**Scripts** 和 **Repository Structure** 等部分。在 **Code standards** 下，注意嵌套的 **GitHub Actions Workflows** 指导。这些内容适用于与 Copilot 的所有交互。 +8. 转到 `.github/instructions` 文件夹并探索其中的文件。注意，其中包含针对 Astro 文件、Drizzle 数据层和测试等内容的指令。 +9. 打开 `.github/instructions/unit-tests.instructions.md`。注意顶部的 `applyTo` 字段，它设置了一个相对于存储库根目录的 glob，用于确定指令适用的文件。此处会匹配任何 TypeScript 测试文件，例如匹配 `**/*.test.ts` 的文件。 +10. 注意此项目中有关创建单元测试的具体指令。 +11. 最后，打开 `.github/instructions/drizzle.instructions.md` 并滚动到底部。注意其中指向其他指令文件（如 `unit-tests.instructions.md`）和项目现有文件的链接。这样可以将较大的指令集拆分为较小的可复用文件，并让 Copilot 在生成代码时参考示例。（其中的路径相对于指令文件，而非存储库根目录。） + +## 更新指令文件以符合团队指南 + +现有文件是良好的起点，但仍有缺漏。下面修改核心 `copilot-instructions.md` 文件，确保所有新生成的 TypeScript 文件都添加 [TSDoc 注释][tsdoc]。 + +> [!NOTE] +> 指令文件对 Copilot 生成的代码影响很大，因此应确保它们能清晰地引导 Copilot。可以先让 Copilot 创建初稿，再自行审查更新是否符合要求。[Awesome Copilot 上的指令文件集合][awesome-copilot]也可作为很好的起点。 + +1. 在同一个 Files 画布中，转到 `.github/copilot-instructions.md`。 +2. 找到文件中部附近的 **Code formatting requirements** 标题。 +3. 在该标题下方添加以下最后一个列表项： + + ```plaintext + All new TypeScript should contain TSDocs comments for documentation purposes. + ``` + +文件会自动保存并可供使用。 + +## 使用更新后的指南 + +指令文件更新完成后，让 Copilot 审查更新并进行必要修改，以观察它对生成代码的影响。 + +> [!NOTE] +> 由于刚刚修改了指令文件，我们会明确要求 Copilot 使用它。创建代码时，如果指令文件已经存在，Copilot 会自动使用，无需额外说明。 + +1. 提示 Copilot 使用指令文件更新代码，使其符合新增要求： + + ```plaintext + We just updated our instructions and code guidance. Can you please update the code you generated to match that guidance? + ``` + +2. 选择右上角的 **Changes**，打开代码更改。 + + ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](/images/learning-hub/copilot-workshops/app-select-changes.png) + +3. 阅读所有 TypeScript 文件，注意新生成的 TSDoc 注释。 + +## 总结与后续步骤 + +你探索了应用如何从指令文件获取上下文，并将新标准应用于功能。具体而言，你： + +- 探索了存储库中的 `copilot-instructions.md` 和路径范围 `*.instructions.md` 文件。 +- 更新了指令文件以确保遵循编码标准。 +- 查看了指令文件对生成代码的影响。 + +接下来，你将[自定义并运行可复用的 quality-checks 技能][next-lesson]，确保始终如一地运行 lint 和测试。 + +## 资源 + +- [用于自定义 GitHub Copilot 的指令文件][instruction-files] +- [自定义 GitHub Copilot app][customize-app] +- [创建自定义指令的最佳实践][instructions-best-practices] +- [Awesome Copilot：指令文件和其他资源集合][awesome-copilot] + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/5-agent-skills/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app +[instructions-best-practices]: https://docs.github.com/copilot/concepts/prompting/response-customization#writing-effective-custom-instructions +[awesome-copilot]: https://awesome-copilot.github.com/ +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +[tsdoc]: https://tsdoc.org/ +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/5-agent-skills.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/5-agent-skills.md new file mode 100644 index 000000000..20f59bccc --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/5-agent-skills.md @@ -0,0 +1,108 @@ +--- +title: "第 5 课 - 自定义并使用 quality-checks 技能" +description: "探索现有的 quality-checks 技能，自定义其报告格式，并用它验证筛选功能。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +编写代码不只是写出代码。我们已经手动验证代码能够运行，并使用指令文件确保它符合标准。但测试、lint 以及持续集成 (CI) 的其他环节又该如何处理？ + +对于这类任务，**智能体技能**最为合适。技能可帮助 Copilot 了解如何正确执行这些操作。 + +在本课中，将： + +- 探索现有的 `quality-checks` 技能。 +- 自定义结果格式。 +- 运行技能并审查输出。 + +## 场景 + +Tailspin Toys 使用 `quality-checks` 技能运行单元测试、lint 和类型检查。团队希望改进报告，让结果更易于阅读。 + +## 指令、脚本和资源 + +智能体技能将可复用的任务指令、可执行脚本和辅助资源打包，供智能体按需加载。技能本质上是一个以技能命名的文件夹，其中包含名为 `SKILL.md` 的 Markdown 文件。该文件的 frontmatter 使用名称和说明定义技能，正文则概述技能用途、调用时机及使用指南。文件夹还可以包含存放脚本和其他资源的子文件夹，供技能调用时使用。 + +> [!NOTE] +> 技能不要求包含其他文件夹和文件。本示例中的技能会运行 `npm` 命令来执行测试和 lint，因此不需要额外的辅助文件。 + +技能可位于项目的 `.github/skills` 文件夹中，成为可供团队其他成员共享和复用的存储库资产；也可位于 Copilot 的根文件夹中，通常为 `~/.copilot/skills`。 + +## 探索技能 + +1. 如果尚未打开 **Files** 画布，请在审查面板中选择 **+**，再选择 **File**。 +2. 搜索 `.github/skills/quality-checks/SKILL.md`。 +3. 阅读顶部的 `name` 和 `description`。注意，说明可帮助 Copilot 判断何时调用技能。 +4. 阅读指令，留意它如何引导 Copilot 完成测试和 lint 流程。 + +## 更改前运行技能 + +技能既可通过斜杠 (`/`) 命令直接调用，也可使用自然语言调用。下面要求 Copilot 运行该技能的三类检查。 + +1. 从模式下拉菜单选择 **Interactive**，确保 Copilot 处于该模式。 +2. 使用以下提示词调用该技能： + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. 查看最后生成的报告。 + +## 自定义报告 + +现在，希望报告更清晰地显示运行了哪些检查、是否成功，以及工具实际报告了什么。下面更新技能，让它生成该报告。 + +1. 返回 **Files** 画布。 +2. 如果尚未打开，请打开 `.github/skills/quality-checks/SKILL.md`。 +3. 将以下章节添加到文件末尾： + + ```markdown + ## Results output formatting + + Upon completion, report each command that ran and whether it passed, failed, or was blocked. Include test counts, durations, errors, warnings, and other metrics only when the tool reports them. Identify the next action for any failure or blocker, and never describe a skipped or incomplete check as passed. + ``` + +文件会自动保存。 + +## 运行技能 + +完成更改后，使用与之前完全相同的提示词查看效果。 + +1. 从模式下拉菜单选择 **Interactive**，确保 Copilot 处于该模式。 +2. 使用以下提示词调用该技能： + + ```plaintext + Run the quality-checks skill for unit tests, lint, and type checks. + ``` + +3. 查看最后生成的报告。 + +## 总结与后续步骤 + +你已自定义并使用现有智能体技能。本课中，你： + +- 探索了用于单元测试、lint 和类型检查的 `quality-checks` 技能。 +- 自定义了结果格式。 +- 运行技能并审查了输出。 + +此更改将与筛选功能一起纳入功能 PR。接下来，你将允许 Copilot 通过 Playwright MCP 服务器直接与站点交互并[验证功能][next-lesson]。 + +## 更多技能示例 + +以下社区示例仅供参考，不是额外任务。采用前先检查其先决条件和行为： + +- [Agent Skills 规范][skill-spec]。 +- [贡献工作流：`make-repo-contribution`][contribution-example]。 +- [需求文档：`prd`][prd-example]。 +- [图表及配套导出脚本：`drawio`][drawio-example]。 +- [浏览器测试：`webapp-testing`][browser-example]。 + +上游贡献示例名为 `make-repo-contribution`；旧版 Tailspin 模板使用另一个名称 `make-contribution`。本工作坊不依赖其中任何一个贡献技能。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[skill-spec]: https://agentskills.io/specification +[contribution-example]: https://github.com/github/awesome-copilot/tree/main/skills/make-repo-contribution +[prd-example]: https://github.com/github/awesome-copilot/tree/main/skills/prd +[drawio-example]: https://github.com/github/awesome-copilot/tree/main/skills/drawio +[browser-example]: https://github.com/github/awesome-copilot/tree/main/skills/webapp-testing diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/6-agent-merge.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/6-agent-merge.md deleted file mode 100644 index 7136fa97b..000000000 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/6-agent-merge.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "第 6 课 - 使用 Agent Merge 合并" -description: "打开筛选功能的拉取请求，在 My work 中进行审查，并让 Agent Merge 修复阻塞项并完成合并，这是合并自动化阶梯的最高一级。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -筛选功能已构建、验证，并确认可以在浏览器中正常工作。最后一步是将其合并。在本学习路径中，你已经合并过两次，每次都是自行打开拉取请求并在 github.com 上合并。这一次将使用 **Agent Merge** 让应用处理繁重工作。它可以在应用内管理拉取请求的整个生命周期。 - -本课将介绍如何： - -- 了解 Agent Merge 及其如何自动执行合并生命周期。 -- 在筛选会话中启用 Agent Merge。 -- 观察它创建拉取请求、运行 CI，并在所有检查通过后合并。 - -## 场景 - -在前几课中，你探索了不同程度的自动化，从创建代码到让 Copilot 直接验证 UI。为了进一步加快开发速度，Tailspin Toys 希望了解是否可以自动合并经过审查和验证的拉取请求。 - -## Agent Merge 简介 - -通过 **Agent Merge**，可以使用 Copilot app 自动执行拉取请求落地前的最后阶段。启用后，应用会话会读取拉取请求并处理阻塞项，包括修复失败的 CI 检查、响应审查意见，以及在需要时变基。GitHub 允许后，它会立即合并。该功能在后台运行，应用重启后仍会继续，并在拉取请求合并后自动关闭。 - -此前，你一直在 github.com 上自行选择 **Merge pull request**。Agent Merge 将这项责任交给智能体，因此它可以管理 PR 直至完成，而你可以继续处理下一项任务。你仍需审查并批准工作，智能体只负责机械性的收尾步骤。 - -## 使用 Agent Merge 管理 PR - -你已手动审查代码、运行测试，甚至让 Copilot 验证了 UI。现在可以将新代码合并到代码库。接下来让 agent merge 管理 PR 的持续集成 (CI) 流程并完成合并。 - -1. 返回上一课中用于添加筛选功能且仍保持打开的会话。 -2. 在右上角选择 **Create PR** 旁的下拉菜单。 -3. 选择 **Agent merge** 以启用 agent merge。 - - ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](/images/learning-hub/copilot-workshops/app-enable-agent-merge.png) - -4. 按钮文本现在会变为 **Agent merge**。 -5. 选择 **Agent merge** 按钮，启动 agent merge 流程。 - -Copilot app 随即开始创建并管理 PR。它先探索项目以确定创建 PR 的最佳方式，然后创建新 PR。 - -片刻后，Copilot 会再次开始工作并查看 PR 条件，即运行存储库全部测试的 CI 流程。它会报告其他团队成员留下的审查状态、需要运行的检查（CI 流程），以及 PR 是否可合并。 - -6. 选择 **Agent merge** 旁的下拉菜单，再选择 **Merge pull request**，允许 agent merge 合并拉取请求。 - - ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](/images/learning-hub/copilot-workshops/app-agent-merge-merge.png) - -7. 所有 CI 流程变为绿色（表示测试通过）后，Copilot 会合并拉取请求。 - -## 总结与后续步骤 - -你已自动执行开发流程中的多个环节，包括生成代码、测试和验证代码，以及拉取请求流程。你： - -- 了解了 Agent Merge 及其如何自动执行合并生命周期。 -- 在筛选会话中启用了 Agent Merge。 -- 观察了它创建拉取请求、运行 CI，并在所有检查通过后完成合并。 - -接下来，你将探索**画布**，这是一种与智能体共同规划和可视化工作的更丰富方式。继续学习[第 7 课 - 使用画布规划][next-lesson]。 - -## 资源 - -- [使用 GitHub Copilot app 管理议题和拉取请求][managing-issues-prs] -- [关于 GitHub Copilot app][about-copilot-app] - -[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/7-canvases/ -[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/5-mcp-playwright.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/6-mcp-playwright.md similarity index 53% rename from website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/5-mcp-playwright.md rename to website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/6-mcp-playwright.md index fbf5cc901..8568b8843 100644 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/5-mcp-playwright.md +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/6-mcp-playwright.md @@ -1,17 +1,17 @@ --- -title: "第 5 课 - 使用 Playwright MCP 服务器测试" -description: "将 Playwright MCP 服务器添加到 GitHub Copilot app，并要求智能体在真实浏览器中手动测试筛选功能。" +title: "第 6 课 - 使用 Playwright MCP 验证功能" +description: "通过 Customize 配置 Playwright MCP，在现有功能工作树中通过浏览器观察筛选功能。" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 --- -上一课使用项目的自动化测试套件创建并验证了筛选功能。测试可以自动验证代码，但让智能体确认行为同样很有价值。智能体可以对它在实际 UI 中发现的问题作出响应。接下来探索 MCP 如何让 AI 智能体访问外部功能，并添加 Playwright MCP 服务器，使 Copilot 可以直接与正在构建的网站交互。 +如前所述，编写代码不只是写出代码。我们还需要处理数据和外部服务，甚至让 Copilot 能够使用更多自动化功能。这正是 MCP 服务器的用武之地。MCP 服务器让 Copilot 能够使用应用内置功能以外的更多工具和服务。 本课将介绍如何： - 了解模型上下文协议 (MCP) 及 GitHub Copilot app 如何使用它。 -- 从应用设置中添加 Playwright MCP 服务器。 +- 添加 Playwright MCP 服务器。 - 要求智能体操控浏览器并探索筛选功能。 ## 场景 @@ -36,43 +36,42 @@ lastUpdated: 2026-08-03 ## 添加 Playwright MCP 服务器 -可以在应用设置中添加和管理 MCP 服务器。应用内置了常用服务器目录，只需几个步骤即可添加 [Playwright MCP 服务器][playwright-mcp-server]。 +通过侧边栏中的 **Customize** 管理 MCP 服务器。在存储库或 Copilot CLI 中配置的服务器可能已在 app 中可用，因此添加前先检查，避免重复。[App 自定义文档][customize-app]介绍了可用选项。 -1. 选择 Ctrl+, 打开 Copilot app 设置页面。 -2. 选择 **MCP servers**。 -3. 在搜索对话框中输入 `Playwright`。 -4. 从 **Popular MCP servers** 列表中选择 **Playwright**。 -5. 选择 **Add server**，将其添加到可用 MCP 服务器列表。 -6. 选择 Esc 关闭设置对话框。 +1. 在侧边栏中选择 **Customize**。 +2. 选择 **MCP**，再检查 **Installed** 中是否已有 Playwright 服务器。 +3. 如有需要，在可用服务器中找到 **Playwright**，或使用发布者文档说明的自定义服务器流程。 +4. 批准前审查发布者、配置和所有安装提示。按提示添加服务器；组织策略或缺少先决条件可能阻止设置。 +5. 返回 **Interactive** 模式的筛选会话，确认 Playwright MCP 工具可用。 -现在，Playwright MCP 服务器已添加。 +如果设置失败，应先解决配置或权限问题，再继续。 ## 要求 Copilot 通过 Playwright 探索功能 -接下来要求 Copilot 使用 Playwright MCP 服务器手动测试该功能。 +议题和规划决策已在上下文中。要求 Copilot 启动服务器前，先停止之前启动的所有开发服务器。 1. 使用以下提示词，要求 Copilot 验证新功能： - ```plaintext - Start the dev server then use the Playwright MCP server to validate the functionality you just added exists. Use the details in the issue to ensure the newly added behavior matches the specs. - ``` + ```plaintext + Start the app and use Playwright MCP to check filtering against the issue and our plan. Tell me what works and what doesn't, without making changes. Stop the server you started when you're done. + ``` -Copilot 将通过 Playwright MCP 服务器启动浏览器、逐步执行每项操作并报告发现的结果。你会实际看到它在系统上打开浏览器执行任务。 + > [!NOTE] + > 不必明确要求 Copilot 使用特定 MCP 服务器；它通常会根据当前上下文找到合适的服务器。不过，明确指出你认为重要的信息始终是合理做法。 -2. 对照议题中的验收标准阅读摘要。如果发现问题，请提出后续问题，或要求它在打开拉取请求前修复代码。 -3. 保持此会话打开，下一课将完成该会话。 + 2. 接下来只需观察其操作。 -现在，Copilot 已像用户一样探索功能，并在浏览器中验证了其行为。 + Copilot 会启动服务器、打开浏览器并与网站交互。完成后，它会停止服务器并提供报告。 ## 总结与后续步骤 你使用 Playwright MCP 服务器，从 GitHub Copilot app 在真实浏览器中探索了功能。总结来说，你： -- 了解了模型上下文协议 (MCP)，以及应用如何提供 MCP 工具。 -- 从应用设置中添加了 Playwright MCP 服务器。 +- 了解了模型上下文协议 (MCP) 及 GitHub Copilot app 如何使用它。 +- 添加了 Playwright MCP 服务器。 - 要求智能体操控浏览器并探索筛选功能。 -功能已构建、验证并确认可以正常工作。现在可以使用 **Agent Merge** 打开并合并拉取请求。继续学习[第 6 课 - 使用 Agent Merge 合并][next-lesson]。 +接下来，在[第 7 课 - 创建并使用 QA 智能体][next-lesson]中，通过专业角色将技能和浏览器工具结合起来。 ## 资源 @@ -80,7 +79,7 @@ Copilot 将通过 Playwright MCP 服务器启动浏览器、逐步执行每项 - [Microsoft Playwright MCP Server][playwright-mcp-server] - [在 GitHub Copilot app 中配置 MCP 服务器][customize-app] -[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/6-agent-merge/ +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/7-qa-agent/ [mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ [playwright-mcp-server]: https://github.com/microsoft/playwright-mcp [customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/7-canvases.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/7-canvases.md deleted file mode 100644 index e69d03c5c..000000000 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/7-canvases.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: "第 7 课 - 使用画布规划" -description: "在 GitHub Copilot app 中创建智能体驱动的共享画布，与智能体共同规划和跟踪工作。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -此前，你通过聊天指挥智能体。但许多工作并不只存在于对话中，而是呈现在看板、文档或检查清单上。借助**画布**，你和智能体可以直接在应用内共享一个适合此类工作的界面。本课将创建一个简单画布，用于规划和跟踪一直在处理的待办事项。 - -本课将介绍如何： - -- 了解画布是什么以及何时使用画布。 -- 创建共享的看板画布以对待办事项进行分类。 -- 将画布保存到存储库，并为团队合并更改。 -- 在新会话中打开画布，并从中开始工作。 - -## 场景 - -即使一切顺利，查看一长串议题也可能让人望而生畏。Tailspin Toys 的开发人员一直在寻找一种工具，用于快速对议题进行分类，并在 Copilot app 中着手处理。 - -## 什么是画布？ - -[画布][canvas-docs]是用于工作工件的共享交互式界面，例如计划、分类看板、发布检查清单、仪表板或文档。聊天非常适合描述意图和分析模糊问题，但大多数工作发生在具体的*界面*上。画布让你可以直接在该界面上与智能体协作。 - -画布支持**双向交互**：智能体可以在工作过程中更新画布，你也可以自行编辑同一个界面。创建画布时，智能体会根据提示词和工作流进行构建；之后，可以要求它添加、删除或修改功能。画布创建后会在应用右侧面板中打开。 - -常见示例包括： - -- 用于规划当天工作以及确定议题和拉取请求优先级的 **Markdown 画布**。 -- 由人员和智能体添加卡片并在列之间移动工作的**智能体看板**。 -- 汇总存储库重要议题和重复出现主题的**议题分类看板**。 - -## 为什么使用画布？ - -当任务需要结构、迭代和验证，且仅靠聊天不足以完成时，可以使用画布。画布让你能够： - -- 让智能体基于符合工作流的实际工件开展工作。 -- 直接在共享界面上引导或纠正工作，再让智能体从更改处继续。 -- 通过工件的可见更改检查进度，而不只是查看聊天回复。 - -## 创建画布来跟踪工作 - -你已经交付了许多内容：星级评分、文档标准和筛选功能都已合并。但待办事项中仍有其他工作。接下来创建画布，以便快速对这些工作进行分类。 - -1. 返回（或打开）GitHub Copilot app。 -2. 选择 **Home screen**。 -3. 确保为存储库选择了 `tailspin-toys`。 -4. 在提示框中使用以下提示词，创建满足需求的画布： - - ```plaintext - Create a basic Kanban board canvas that allows me to quickly triage work. Highlight the three issues which are most likely to need attention right now, with the remainder in a second section down below. The top three cards should include a description of the issue's content and a justification of why they're at the top of the list. Each issue should have a button that allows me to add it to the current context for the current session so I can get to work on it straightaway. - ``` - -Copilot 将开始创建画布。 - -> [!NOTE] -> 此过程需要几分钟。由于任务较复杂，第一版可能无法完全令人满意。可以继续发送提示词，逐步构建理想的工具。 - -## 保存画布并合并到存储库 - -与指令文件和技能一样，画布也可以成为存储库中的资产。接下来要求 Copilot 将画布添加到存储库并合并，让整个团队都能使用。 - -1. 在同一会话中使用以下提示词，要求 Copilot 将画布保存到存储库： - - ```plaintext - Let's save this canvas definition to the repository so I can share it with my development team - ``` - -2. Copilot 保存画布文件后，选择右上角 **Create PR** 旁的下拉菜单。 -3. 选择 **Agent merge** 以启用 agent merge。 - - ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](/images/learning-hub/copilot-workshops/app-enable-agent-merge.png) - -4. 按钮文本现在会变为 **Agent merge**。 -5. 选择 **Agent merge** 按钮，启动 agent merge 流程。 - -Copilot app 会开始创建并管理 PR。它先探索项目以确定创建 PR 的最佳方式，然后创建 PR。 - -片刻后，Copilot 会再次开始工作并查看 PR 条件，即运行存储库全部测试的 CI 流程。它会报告其他团队成员留下的审查状态、需要运行的检查（CI 流程），以及 PR 是否可合并。 - -6. 选择 **Agent merge** 旁的下拉菜单，再选择 **Merge pull request**，允许 agent merge 合并拉取请求。 - - ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](/images/learning-hub/copilot-workshops/app-agent-merge-merge.png) - -7. 等待所有 CI 流程通过（变为绿色）。全部通过后，Copilot 会自动合并拉取请求。 - -现在，你已经为团队创建了新的共享画布。 - -## 在画布中工作 - -画布创建后，接下来启动新会话并开始使用。 - -1. 在 Copilot app 中，选择 **tailspin-toys** 旁的 **New session** 启动新会话。 -2. 使用以下提示词，要求 Copilot 打开分类画布： - - ```plaintext - Open the triage issues canvas - ``` - -3. 现在应会看到所构建的画布已在新会话中打开。 -4. 在最感兴趣的一个议题上选择 **Add to current context**。 -5. Copilot 将开始处理该议题。 - -现在，你已使用自己创建的画布简化了开发流程。 - -## 总结与后续步骤 - -你创建了一个可与智能体协作的共享界面。你： - -- 了解了画布是什么以及何时使用画布。 -- 与智能体共同创建了共享的看板分类画布。 -- 使用 Agent Merge 将画布保存并合并到存储库。 -- 在新会话中打开画布，并使用它开始工作。 - -待办事项现已得到跟踪。接下来回顾已构建的所有内容，并了解后续方向。继续学习[第 8 课 - 回顾与后续步骤][next-lesson]。 - -## 资源 - -- [在 GitHub Copilot app 中使用画布扩展][canvas-docs] -- [Awesome Copilot 上的画布][awesome-copilot-canvases] -- [关于 GitHub Copilot app][about-copilot-app] - -[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/8-review/ -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ -[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/7-qa-agent.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/7-qa-agent.md new file mode 100644 index 000000000..f426faf93 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/7-qa-agent.md @@ -0,0 +1,78 @@ +--- +title: "第 7 课 - 创建并使用 QA 智能体" +description: "创建以需求为先的 QA 配置，将测试覆盖、quality-checks 技能和直接浏览器验证证据结合起来。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +你已使用 `quality-checks` 技能运行自动化检查，并使用 Playwright MCP 在浏览器中观察筛选体验。现在，你将通过定义清晰 QA 流程的自定义智能体，将这些能力结合起来。 + +在本课中，你将： + +- 探索自定义智能体如何与指令、技能和 MCP 工具配合。 +- 创建并检查可复用的 QA 配置。 +- 选择 QA 智能体，并对照筛选议题审查其发现。 + +## 场景 + +创建拉取请求 (PR) 前，Tailspin Toys 希望以一致的方式审查需求、代码质量、自动化检查、测试覆盖和浏览器行为。自定义智能体可协调这一 QA 流程，并提供可复用的报告。 + +## 什么是自定义智能体？ + +自定义智能体是通过 Markdown 配置文件定义的 Copilot 专业版本。该配置文件描述智能体的用途、指令和可用工具。本工作坊将在 `.github/agents/qa.agent.md` 中定义 QA 角色，然后在应用中选择它。 + +已经创建的自定义内容各有用途。存储库指令描述团队标准，quality-checks 技能封装可重复执行的检查，Playwright MCP 提供浏览器工具。QA 配置告诉 Copilot 如何使用这些能力评估需求并报告发现。它不会取代这些能力，也不要求另开智能体会话。 + +## 创建 QA 配置文件 + +打开功能 PR 前，要求 Copilot 创建可复用的 QA 配置文件。该文件将定义 QA 执行的检查及其必须遵守的边界。 + +1. 确认会话处于 **Interactive** 模式。 +2. 向 Copilot 发送以下提示词，创建新的自定义智能体： + + ```plaintext + Create a custom agent named QA in .github/agents/qa.agent.md. It should check features against their issues and agreed requirements, follow the repository instructions, run the quality-checks skill, use Playwright MCP to verify behavior, and add tests when coverage is missing. + + Have it report each requirement as pass, fail, or blocked with supporting evidence. It must ask before changing implementation code, and it must not commit changes or open pull requests. Use the current model and available tools. Just create the profile for now so I can review it. + ``` + +## 检查配置文件 + +1. 打开 **Changes**，选择 `.github/agents/qa.agent.md`。 +2. 阅读 frontmatter。`description` 是必需字段；`name` 可选，但添加后可为智能体提供明确的显示名称。 +3. 阅读配置文件指令，确认 QA 从需求出发、遵循存储库指令、运行 `quality-checks` 技能并使用 Playwright MCP。 +4. 确认 QA 报告支持证据，在更改实现代码前先询问，并且不会提交更改或打开拉取请求。 +5. 如果生成的配置文件遗漏上述任何职责或边界，请先让普通 Copilot 智能体修订，再继续。 + +## 根据议题运行 QA + +配置文件审查完成后，在当前会话中选择 QA，以便它使用上下文中已有的筛选议题和规划决策。开始审查前，确认当前活动智能体。 + +1. 在当前会话中打开提示框中的智能体选择器。 +2. 选择 **QA**，并在发送运行提示前确认应用明确显示 **QA** 为当前活动智能体。 +3. 发送以下提示词，让 QA 审查功能： + + ```plaintext + Review the filtering feature against the issue and the decisions in our plan. Is it ready for a PR? + ``` + +4. 确认 QA 使用了正确的议题和规划决策。如果它提出请求，请提供议题 URL 或缺少的上下文。 +5. 完成后阅读其报告。 + +## 总结与后续步骤 + +你已为工作流添加可复用的专业角色，并审查了它的工作。本课中，你： + +- 探索了自定义智能体如何与指令、技能和 MCP 工具配合。 +- 创建并检查了从需求出发的可复用 QA 配置文件。 +- 选择 QA 智能体，并对照筛选议题审查了其发现。 + +现在已具备功能审查所需的实现、技能更新、QA 配置、测试和验证报告。接下来在[第 8 课 - 创建并合并功能 PR][next-lesson]中汇总这些内容，并使用 Agent Merge。 + +## 资源 + +- [自定义 GitHub Copilot app，包括选择自定义智能体][customize-app] + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/8-create-pull-request/ +[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-create-pull-request.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-create-pull-request.md new file mode 100644 index 000000000..a36380e6c --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-create-pull-request.md @@ -0,0 +1,73 @@ +--- +title: "第 8 课 - 创建并合并功能 PR" +description: "一并审查筛选功能、指令、技能更新、QA 配置文件和测试，然后创建 PR 并使用 Agent Merge。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +筛选实现、指令更新、技能更新、质量保证 (QA) 配置文件和测试已保存在同一分支上。现在一并审查这些内容，并创建拉取请求。你已自行合并星级评分拉取请求 (PR)；这次将让 **Agent Merge** 管理该流程。 + +> [!NOTE] +> 通常，我们会将功能、指令更新、技能更新和 QA 智能体拆分为几个独立的 PR。为简化工作坊流程，这里将整个筛选和质量工作流保留在同一会话和分支中，并将所有工作纳入此 PR。 + +本课将介绍如何： + +- 了解 Agent Merge 及其如何自动执行合并生命周期。 +- 检查完整的功能 PR 和验证证据。 +- 审查后再授权 Agent Merge，并确认 PR 已合并。 + +## 场景 + +在整个筛选工作流中，你使用 Copilot 规划、实现并验证了功能。现在，Tailspin Toys 希望自动执行剩余的 PR 工作，同时仍由开发人员控制合并授权。 + +## Agent Merge 简介 + +通过 **Agent Merge**，可以使用 Copilot app 自动执行拉取请求落地前的最后阶段。启用后，应用会话会读取拉取请求并处理阻塞项，包括修复失败的 CI 检查、响应审查意见，以及在需要时变基。GitHub 允许后，它会立即合并。该功能在后台运行，应用重启后仍会继续，并在拉取请求合并后自动关闭。 + +此前，你一直自行选择 **Merge pull request**。Agent Merge 可以承担这项工作，但它编辑代码和合并的能力仍需要明确授权。授予合并权限前，先审查它允许执行的操作及工作内容。 + +## 使用 Agent Merge 管理 PR + +所有代码创建并审查完成后，让 Agent Merge 管理 PR 流程。 + +1. 使用智能体选择器选择 **Default agent**。 +2. 选择 **Create PR** 旁的下拉菜单。 +3. 选择 **Agent merge**。按钮将更改为 **Agent merge**。 +4. 选择 **Agent merge**，启动 agent merge 流程。 + +Agent merge 流程随即启动。它将： + +- 创建包含标题和说明的拉取请求。 +- 如果会话从议题启动，则在说明正文中引用相关议题。 +- 对目标分支执行变基或处理潜在合并冲突。 +- 监视 CI 流程，确保所有检查通过。 +- 监视 PR 中其他开发人员或 Copilot 代码审查提供的反馈，并进行更新以解决这些意见。 +- 可以选择在所有操作成功后自动合并 PR。 + +让 Agent merge 在所有检查通过后合并 PR。 + +5. 选择 **Agent merge** 旁的下拉菜单。 +6. 确保 **Merge pull request** 旁有勾选标记。 + +> [!IMPORTANT] +> Agent Merge 不会绕过存储库保护或缺失的权限。解决这些阻塞项后再继续。 + +## 总结与后续步骤 + +你已自动执行开发流程中的多个环节，包括生成代码、测试和验证代码，以及拉取请求流程。你： + +- 了解了 Agent Merge 及其如何自动执行合并生命周期。 +- 检查了完整的功能 PR 和验证证据。 +- 仅在审查后授权 Agent Merge，并确认 PR 已合并。 + +接下来，你将探索**画布**，这是一种与智能体共同规划和可视化工作的更丰富方式。继续学习[第 9 课 - 探索并创建画布][next-lesson]。 + +## 资源 + +- [使用 GitHub Copilot app 管理议题和拉取请求][managing-issues-prs] +- [关于 GitHub Copilot app][about-copilot-app] + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/9-canvases/ +[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md new file mode 100644 index 000000000..e40bd5eca --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model.md @@ -0,0 +1,151 @@ +--- +title: "准备项目和模型" +description: "导出 Tailspin 目录，创建 Foundry 项目和模型部署，并在 Canvas 中验证。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/ + label: "可选：集成 Foundry" +next: + link: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: 构建并部署代理 +--- + +第一个模块将准备 Backer Concierge 所需的数据和 Azure 资源。目前尚不需要代理代码或托管部署。 + +完成本模块后，将获得： + +- 一份明确限定回答依据范围的目录导出文件。 +- 一个 Foundry 项目，以及根据功能要求选定的模型部署。 +- 一个经 Canvas 验证的部署，以及一次限定在目录范围内的简单模型冒烟测试结果。 + +## 场景 + +Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些游戏适合喜欢 Git 双关语的人？*这类问题无法通过下拉选项解答。Backer Concierge 应只推荐 Tailspin 目录中的游戏，绝不能编造游戏、发行商、评分、筹款总额、支持者人数、价格、玩家人数、游戏时长或发布日期。可靠的目录和合适的模型是这些回答的基础。 + +## 准备工具和议题会话 + +此设置将 GitHub Copilot app 连接到 Azure，同时把所有功能开发工作集中在一起。 + +1. 确认拥有 Azure 订阅。如果需要订阅，可选择[含 200 美元额度的免费 Azure 订阅][azure-free]或[含 100 美元额度的 Azure for Students][azure-students]。 +2. 安装适用于当前操作系统的 [Azure CLI][install-azure-cli]，然后使用 `az version` 验证安装。 +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/learning-hub/copilot-workshops/app-8-install-foundry-plugin.png) + +5. 在 **Customize** 中选择 **Plugins**，搜索 `azure` 或从 **Featured** 列表中选择它，然后为 Azure 插件选择 **Install**。 +6. 在侧边栏中选择 **Issues**，然后找到并打开 Tailspin Toys 存储库中标题为 **Add a Backer Concierge assistant for catalog questions** 的议题。选择 **New session**，在新工作树中启动关联该议题的会话。三个模块均使用此存储库、工作树分支和议题会话。 +7. 输入 `/microsoft-foundry`，然后输入 `/azure`，确认两个技能均已安装且可用；暂时不要发送任何提示词。如果插件未立即出现，请重启应用，返回同一个议题会话并再次检查。 + +## 生成目录导出文件 + +示例存储库包含一个导出脚本，可为代理生成能够读取的文件。 + +8. 在这个关联议题的工作树会话中，将提示框内默认的 `/fix-issue` 提示词替换为： + + ```plaintext + Install the project dependencies, seed the database, then run the existing db:export script. Show me the command output and summarize the shape and grounding limits of db/catalog.json. + ``` + +9. 查看命令输出。Copilot 应运行与以下内容等效的命令： + + ```bash + npm install + npm run db:setup + npm run db:export + ``` + + ![生成目录导出文件](/images/learning-hub/copilot-workshops/app-8-generate-catalog-export.png) + +10. 打开 `db/catalog.json`，确认其中包含 21 款游戏，每款游戏都有标题、描述、类别、发行商和星级评分。检查其 `note` 字段：目录不包含筹款总额、支持者人数、支持档位或发布日期。对于缺失的价格、玩家人数和游戏时长，也应视为不可用信息，而不是用外部知识填补空白。如果导出失败或内容不符，请先要求 Copilot 调查并重新运行，再继续。 + + ![在 Copilot app 中打开的目录导出文件](/images/learning-hub/copilot-workshops/app-8-view-catalog.png) + +## 设置 Foundry 项目和模型 + +先在聊天中创建项目和部署，可确保 Canvas 只连接到已存在的资源。 + +11. 选择 **+**，选择 **Terminal**，然后登录 Azure： + + ```bash + az login + ``` + +12. 检查所选订阅并列出其中的资源组： + + ```bash + az account show --output table + az group list --output table + ``` + + 如果订阅不正确，请运行 `az account set --subscription `，然后重新运行这两个命令。 + + 如果出现 `rg-tailspin-toys`，请检查其中的资源： + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + 如果该组包含无关或共享资源，请先停止操作，选择专用名称后再使用以下提示词。请将后续所有提示词和命令中的示例名称替换为已批准的名称。 +13. 在同一个议题会话中输入： + + ```plaintext + Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. + ``` + + ![创建 Foundry 项目](/images/learning-hub/copilot-workshops/app-8-foundry-project-created.png) + +14. 要求 Copilot 推荐模型。由于会话从议题启动，议题的验收标准已包含在上下文中： + + ```plaintext + Use the Microsoft Foundry skill to recommend two or three current chat models in the tailspin-toys project that meet this issue's acceptance criteria. Explain the tradeoffs and wait for me to choose. + ``` + +15. 确认 Copilot 加载了 `microsoft-foundry` 技能，然后根据各模型的优缺点选择一个可用模型。Microsoft Foundry 托管代理快速入门目前使用 `gpt-5.4-mini`，但可用性和配额因区域而异。 + + ![选择模型](/images/learning-hub/copilot-workshops/app-8-select-model.png) + +16. 要求 Copilot 部署所选模型，并在批准前审查目标项目和费用： + + ```plaintext + Deploy the model I selected to the tailspin-toys Foundry project, using the model name as the deployment name. + ``` + +> [!TIP] +> 模型的可用性会随时间变化。应选择 Copilot 确认在项目中可用的模型，而不是本模块中固定指定的某个模型。 + +## 在 Canvas 中验证模型并进行冒烟测试 + +此检查在尚无代理代码时验证项目和模型。模型冒烟测试不能替代模块 2 中验证托管代理回答是否以目录为依据的测试。 + +17. 选择 **+**，然后选择 **Canvas**，再选择 **Microsoft Foundry (Preview)**。 +18. 打开 Canvas 右上角的 **More options** 菜单，然后选择 **Sign in**。 +19. 选择 **tailspin-toys** Foundry 项目。展开 **Models**，确认部署已显示，且名称和状态符合预期。 + + ![在 Canvas 中验证项目和模型](/images/learning-hub/copilot-workshops/app-8-validate-project-model.png) + +20. 在同一会话中输入： + + ```plaintext + 使用 Microsoft Foundry 技能直接测试我在 tailspin-toys 项目中部署的模型，不要创建代理。根据 @db/catalog.json 中的内容回答以下问题：“我喜欢以追踪 bug 为主题的益智游戏。我应该支持哪个游戏？它筹集了多少资金？”显示回答，并且仅在可以获取时显示所用 token 数和响应时间等有用的元数据。使用我现有的 Azure 登录身份。不要显示凭据、修改文件或创建资源。 + ``` + +21. 检查回答。回答应仅推荐 `db/catalog.json` 中实际存在的游戏，使用正确的标题、发行商和评分，并说明没有可用的筹款信息。如果模型编造游戏、目录详情或筹款金额，请在继续之前比较另一个推荐模型。 + +> [!NOTE] +> 重新打开 Canvas 时，它会记住所选项目。其阶段包括：用于生成初始框架的 **Create new hosted agents**；用于连接模型、工具箱、技能和防护措施的 **Build current hosted agent**；以及用于本地运行和部署到 Microsoft Foundry 的 **Deploy and test**。 + +## 检查点与后续步骤 + +你已准备好 Azure 工具、导出目录，并根据 Backer Concierge 的依据规则测试了部署的模型。本模块的检查点是一个能够推荐目录中实际存在的游戏且不会编造缺失信息的模型。 + +接下来，你将使用同一个 Tailspin Toys 存储库、工作树分支、关联议题的会话、Foundry 项目和所选模型部署来[构建并部署代理][next-module]。如果在此停止，请[清理 Azure 资源][cleanup]以免继续产生费用。 + +[azure-free]: https://azure.microsoft.com/pricing/purchase-options/azure-account +[azure-students]: https://azure.microsoft.com/free/students +[install-azure-cli]: https://learn.microsoft.com/cli/azure/install-azure-cli +[install-azd]: https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd +[next-module]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[cleanup]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/#%E6%B8%85%E7%90%86%E8%B5%84%E6%BA%90 diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md new file mode 100644 index 000000000..964554d41 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy.md @@ -0,0 +1,160 @@ +--- +title: "构建并部署代理" +description: "在 Canvas 中生成 Backer Concierge 的初始框架，在本地检查，然后在 Foundry 中部署并重新测试。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: 准备项目和模型 +next: + link: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + label: 将代理连接到网站 +--- + +本模块将使用 Microsoft Foundry Canvas，把[准备项目和模型][previous-module]中创建的项目、模型部署和目录转变为托管的 Backer Concierge。 + +完成本模块后，将获得： + +- 一个已生成初始框架的代理，包含打包的目录数据和针对性测试。 +- 针对每项目录和对话验收标准的本地验证证据。 +- 一个已部署并在 Foundry 中重新测试的代理版本。 + +## 场景 + +Tailspin Toys 需要一个能够回答实际目录问题、承认信息缺失，并记住对话中讨论过的游戏的助手。在成为游戏商店的一部分之前，这项服务必须先证明自身可靠。 + +## 准备部署工具 + +托管代理的检查和部署通过 Canvas 使用 Azure Developer CLI 完成；继续使用已有的 Foundry 项目和模型。 + +1. 返回模块 1 中关联 **Add a Backer Concierge assistant for catalog questions** 议题的同一会话。确认 `db/catalog.json` 完好、已连接到正确的订阅和 Foundry 项目，并且模型部署仍然存在。如果已清理资源，请先重新完成相关的[项目和模型设置][previous-module]。 + +2. 选择 **+**，选择 **Terminal**，然后登录 Azure Developer CLI，并在出现提示时在浏览器中完成身份验证： + + ```bash + azd auth login + ``` + +3. 运行 `azd config show` 验证 Azure 订阅。如果为空或不正确，请使用 `azd config set defaults.subscription ` 更新，然后再次运行 `azd config show` 确认更改。 +## 生成 Backer Concierge 的初始框架 + +Canvas 会生成代码、文件夹结构以及根目录下的 `azure.yaml`，将 Backer Concierge 连接到已有的模型部署。 + +4. 在 **Create new hosted agents** 预览界面中输入： + + ```plaintext + Scaffold a hosted agent named Backer Concierge in agent/backer-concierge, connected to the tailspin-toys project and the model deployment I just confirmed. Use Microsoft Agent Framework with the Responses API. Ground it in db/catalog.json and ensure it meets the acceptance criteria in this issue. Keep a single azure.yaml at the repository root with the hosted-agent service pointing to agent/backer-concierge. Make sure the deployed agent includes the catalog data it needs, and add focused tests. + ``` + + Canvas 会将提示词以及当前订阅和 Foundry 项目的上下文发送给 Copilot。它会查找 Agent Framework + Responses API 示例；可能会出现 **Agent with Local Tools (Responses, Agent Framework, Python)** 等选项。 + + ![在 Canvas 中生成 Backer Concierge 代理的初始框架](/images/learning-hub/copilot-workshops/app-8-scaffold-backer-concierge.png) + +5. 在 **Files** 选项卡中，按照以下检查点审查 Copilot 的更改。`src` 中生成的文件名可能不同，但项目边界和 `azure.yaml` 位置应符合以下要求： + + - 代理位于 `agent/backer-concierge`。 + - 存储库根目录中只有一个 `azure.yaml`，其中包含使用 `host: azure.ai.agent` 的服务。 + - 可部署的代理包含为其生成的目录副本。 + - 针对性测试覆盖回答必须以目录为依据的要求。 + - 不包含凭据或本地环境文件。 + + ```text + tailspin-toys/ + ├── azure.yaml + ├── agent/ + │ └── backer-concierge/ + │ └── requirements.txt + ├── db/ + │ └── catalog.json + └── src/ + ``` + +6. 要求 Copilot 运行针对性测试并修复所有失败项，然后再继续到 **Deploy and test**。 + +## 在本地检查代理 + +**Inspect Locally** 会在 Copilot 集成终端中运行 `azd ai agent run`，等待托管代理启动，然后打开嵌入式 Agent Inspector。 + +7. 在 **Deploy and test** 中选择 **Inspect Locally**，然后等待 Agent Inspector 打开。 + +> [!NOTE] +> 首次本地运行时，`azd` 需要创建环境并安装依赖项，可能耗时几分钟。 + +8. 如果检查器无法连接，请确认没有其他进程占用所需端口，将错误发送给 Copilot，并在修复后重试。 +9. 在 Agent Inspector 中测试**以目录为依据的推荐**： + + ```text + I love puzzle games about tracking down bugs. What should I back? + ``` + + 预期结果：只提及目录中真实存在的游戏名称，并使用每款游戏的正确信息。 + + ![Agent Inspector 中以目录为依据的推荐](/images/learning-hub/copilot-workshops/app-8-grounded-recommendation.png) + +10. 测试**幻觉陷阱**： + + ```text + How much has Pipeline Conquest raised so far, and how many backers does it have? + ``` + + 预期结果：说明目录不记录筹款或支持者信息，然后提供目录中确实存在的信息。 + +11. 测试**目录外问题施压**： + + ```text + Do you have Wingspan? If not, what's the closest thing you've got? + ``` + + 预期结果：说明目录中没有 Wingspan，不使用外部知识介绍它，并转而推荐真实存在的 Tailspin 游戏。 + +12. 测试**模糊请求**： + + ```text + Recommend me something good. + ``` + + 预期结果：提出一个简短的澄清问题，暂不推荐具体游戏。 + +13. 测试**排名准确性**： + + ```text + What are your three highest rated games? + ``` + + 预期结果：按正确顺序返回目录中评分最高的三个条目，并给出正确评分。 + +14. 在同一段对话中发送以下提示词，测试**对话连续性**： + + ```text + Show me two highly rated strategy games. + ``` + + ```text + Which of those has the higher rating? + ``` + + 预期结果：第二次回答只涉及第一次回答中的两款游戏，并正确比较它们在目录中的评分。 + +15. 将每次回答与 `db/catalog.json` 和议题的验收标准对比。确认代理绝不编造游戏、发行商、评分、筹款总额、支持者人数、价格、玩家人数、游戏时长或发布日期。如果 Agent Inspector 报错，或回答超出了目录依据的范围，请将结果复制到 Canvas 的提示词区域，并要求 Copilot 修复。每次更改后都要重新启动本地检查并重跑失败的测试，然后确认全部六项检查通过，再进行部署。 + +## 部署并重新测试托管代理 + +Canvas 使用 `azd` 部署经过测试的代理。Foundry 会打包服务源代码、解析依赖项、远程构建，并将其发布到 Microsoft Foundry。 + +16. 在 Canvas 的 **Deploy and test** 中选择 **Deploy to Foundry**。审查自动填入聊天的提示词。 + + ![画布上的 Deploy to Foundry 提示词](/images/learning-hub/copilot-workshops/app-8-deploy-to-foundry.png) + +17. 检查是否收到部署确认、代理版本、状态及 Foundry 中代理试验场的链接。如果部署失败，请将错误发送给 Copilot，在同一项目中解决问题后，再通过 Canvas 重试。 +18. 在 Canvas 中选择 **Test in Foundry Portal**，打开已部署代理的试验场。针对这个已部署版本，重新运行第 9–14 步中的全部六项验收检查；连续性检查中的两个提示词仍须在同一段对话中发送。将回答与目录对比；如果有任何检查失败，请要求 Copilot 修复，重新运行本地测试，通过 Canvas 重新部署，并再次测试托管版本。 + +## 检查点与后续步骤 + +你已生成 Backer Concierge 的初始框架，在本地测试其目录依据和对话行为，将其部署到 Microsoft Foundry，并重新测试了托管版本。本模块的检查点是一个能够通过全部六项验收检查且不会编造缺失信息的托管代理。 + +接下来，你将使用同一个 Tailspin Toys 存储库、工作树分支、关联议题的会话、Foundry 项目、所选模型部署和托管代理来[将代理连接到网站][next-module]。如果在此停止，请[清理 Azure 资源][cleanup]以免继续产生费用。 + +[previous-module]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[next-module]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[cleanup]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/#%E6%B8%85%E7%90%86%E8%B5%84%E6%BA%90 diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md new file mode 100644 index 000000000..2cb914a75 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site.md @@ -0,0 +1,90 @@ +--- +title: "将代理连接到网站" +description: "通过保护凭据的本地代理服务集成托管的 Backer Concierge，并对聊天组件进行端到端测试。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: + link: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + label: 构建并部署代理 +next: { link: /zh-cn/learning-hub/copilot-workshops/app/10-review/, label: 回顾与后续步骤 } +--- + +最后一个模块将把[构建并部署代理][previous-module]中经过测试的托管代理连接到本地运行的 Tailspin Toys 网站。 + +完成本模块后，将获得： + +- 一个保护 Foundry 凭据和对话标识符的本地 Azure Functions 代理服务。 +- 一个支持无障碍访问、且端到端行为经过验证的聊天组件。 +- 一项经过本地验证的集成，以及一个资源清理检查点。 + +## 场景 + +Tailspin Toys 的支持者需要在浏览游戏时获得基于目录的建议。Backer Concierge 应保留对话、支持键盘导航，并明确处理信息不可用的情况和错误。在提供这些便利的同时，不能向浏览器暴露服务凭据或内部对话详情。 + +## 从托管代理检查点继续 + +集成使用已有的托管代理，不创建新的 Foundry 资源。 + +1. 返回前面模块中的同一个 Tailspin Toys 存储库、工作树分支和 **Add a Backer Concierge assistant for catalog questions** 议题会话。确认根目录下的 `azure.yaml`、代理源代码和目录均存在，并检查已记录的订阅、专用资源组、Foundry 项目、模型部署及经过测试的托管代理版本。 +2. 如果已清理资源，请在集成前恢复相关的[项目和模型][project-module]以及[经过测试的托管部署][previous-module]。 + +## 构建服务器端代理服务 + +Tailspin Toys 完全采用预渲染。浏览器代码绝不能直接调用托管代理，也不能接收 Foundry 凭据。本地 Azure Functions **服务器端凭据边界**负责向 Foundry 进行身份验证，并且只向浏览器返回代理的回答。浏览器发送每条消息时附带一个不透明的对话句柄；代理服务将该句柄映射到 Foundry 对话，而不暴露底层标识符。 + +代理服务是唯一允许访问 Azure 凭据的代码。在本研讨会中，Function 和网站在本地运行，Astro 开发服务器会将 `/api` 请求转发到 Function。 + +> [!IMPORTANT] +> 此研讨会代理服务仅用于本地开发，绝不能部署为匿名公共端点。生产环境集成需要针对具体应用设计身份验证和滥用防范机制，包括适当的速率限制或配额、CORS 限制、监控和费用控制。 + +3. 在同一个 Copilot 会话中输入： + + ```plaintext + Add a local Azure Functions proxy in api for the static Astro site to call my deployed Backer Concierge during development. Use my existing local Azure sign-in, keep credentials and Foundry conversation identifiers out of the browser, return an opaque conversation handle, validate requests, sanitize errors, and add focused tests. Configure the Astro development server so /api requests reach the local Function. Don't create public deployment infrastructure. + ``` + +4. 审查生成的代理服务及针对性测试，检查请求验证、错误信息脱敏、不透明对话句柄和仅限服务器端的凭据边界。要求 Copilot 运行针对性测试并修复所有失败项。 +5. 打开另一个终端，使用 Copilot 提供的命令启动本地 Function，并保持其运行。 +6. 返回聊天，要求 Copilot 测试本地代理服务： + + ```plaintext + Test the local /api/concierge endpoint by asking "Which games are under $30?" Show me the sanitized response and confirm that no credentials or internal conversation identifiers are returned. + ``` + +7. 检查响应：它应说明目录不包含价格。确认其中没有 Foundry 令牌、凭据、内部对话标识符、项目端点或堆栈跟踪。如果无法访问 Function，或响应泄露了详情或编造了价格，请将脱敏后的失败信息发送给 Copilot，修复问题，并在继续前重新运行代理服务测试。 + + ![本地代理服务测试](/images/learning-hub/copilot-workshops/app-8-local-proxy-test.png) + +## 构建并测试聊天组件 + +代理服务运行后，聊天组件可在网站上展示对话，而不暴露 Foundry 详情。 + +8. 要求 Copilot 创建网站集成： + + ```plaintext + 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, keep Foundry details out of the browser, and add end-to-end tests covering the chat flow, conversation continuity, accessibility, error handling, and grounding boundaries. + ``` + +9. 在另一个终端中使用 Copilot 提供的命令启动 Astro 开发服务器。保持网站和本地 Function 同时运行。 +10. 要求 Copilot 运行端到端测试： + + ```plaintext + Run the end-to-end tests for the Backer Concierge widget in the 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. + ``` + +11. 审查报告，并在浏览器中验证报告所描述的行为，包括键盘操作以及[托管代理验收检查][agent-checks]中的两轮对话。确认浏览器请求携带不透明句柄，通过 `/api/concierge` 发送，而不是直接发送到 Foundry；响应也不暴露凭据或 Foundry 内部标识符。检查推荐和信息缺失时的回答是否保持在目录范围内。与 Copilot 一起解决失败的测试，必要时重启受影响的本地服务，然后重新运行测试。 + + ![Backer Concierge 聊天组件的端到端测试结果](/images/learning-hub/copilot-workshops/app-8-e2e-test-results.png) + +## 检查点与后续步骤 + +你已构建一个保护凭据的本地代理服务，连接支持无障碍访问的聊天组件，并针对托管的 Backer Concierge 验证了完整的对话流程。本模块的检查点是一个经过本地测试的网站集成，它能遵守目录边界，并且不会向浏览器暴露凭据或 Foundry 内部标识符。这并不代表代理服务或网站已部署到生产环境。 + +结束实验后，停止两个本地服务并[清理 Azure 资源][cleanup]。然后沿核心研讨会学习路径继续学习[回顾与后续步骤][core-review]。 + +[previous-module]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[project-module]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[agent-checks]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/#%E5%9C%A8%E6%9C%AC%E5%9C%B0%E6%A3%80%E6%9F%A5%E4%BB%A3%E7%90%86 +[cleanup]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/#%E6%B8%85%E7%90%86%E8%B5%84%E6%BA%90 +[core-review]: /zh-cn/learning-hub/copilot-workshops/app/10-review/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md new file mode 100644 index 000000000..805adee06 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/index.md @@ -0,0 +1,89 @@ +--- +title: "可选：集成 Foundry" +description: "使用 Microsoft Foundry Canvas 构建以目录为依据的 Backer Concierge，并在各阶段设置可安全暂停的位置。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +prev: { link: /zh-cn/learning-hub/copilot-workshops/app/10-review/, label: 回顾与后续步骤 } +next: + link: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + label: 准备项目和模型 +tags: + - workshop +--- + +在这一可选学习流程中，将使用 GitHub Copilot app 中的 Microsoft Foundry Canvas，为 Tailspin Toys 添加 **Backer Concierge**。整个流程从以目录为依据的模型实验开始，逐步构建托管代理，最后集成到本地网站。 + +## 学习流程 + +每个模块最后都设有检查点，可在此安全暂停。整个流程始终使用同一个 Tailspin Toys 存储库、工作树分支、关联议题的会话、Foundry 项目和模型部署。 + +- [准备项目和模型][module-1]：明确回答所依据的目录数据范围，创建项目和模型部署，并在 Canvas 中检查。 +- [构建并部署代理][module-2]：生成 Backer Concierge 的初始框架，在本地测试，然后部署并重新测试托管代理。 +- [将代理连接到网站][module-3]：添加保护凭据的本地代理服务、支持无障碍访问的聊天组件和端到端测试。 + +> [!IMPORTANT] +> Microsoft Foundry Canvas 和托管代理目前处于公开预览阶段。 +> +> 此流程会创建计费的 Azure 资源，包括模型部署，以及从模块 2 开始创建的托管代理。创建资源之前，必须确认订阅、区域、配额和预计费用并获得批准。即使只完成项目和模型阶段就停止，也需要清理资源。 + +1. 从[准备项目和模型][module-1]开始，所有操作都应在自己的 Tailspin Toys 存储库中完成，而不是在本研讨会的内容存储库中。 +2. 如果你想先完成核心研讨会，请继续前往[回顾和后续步骤][core-review]。 + +## 清理资源 + +在任一检查点结束实验后，请删除 Azure 资源以免产生不必要的费用。清理会删除后续模块所需的资源，因此之后继续时需要重新创建这些资源。 + +> [!WARNING] +> 仅当 `rg-tailspin-toys` 专用于本练习且不包含需要保留的资源时，才能将其删除。删除共享资源组也会删除无关资源。 +> +> 如果在模块 1 中批准了其他资源组名称，请在以下所有命令中使用该名称替换 `rg-tailspin-toys`。 + +1. 在相应终端中停止自己启动的本地 Agent Inspector、Azure Function 或 Astro 开发服务器。 +2. 如果在模块 2 或 3 中部署了托管代理，请在同一个 Tailspin Toys 工作树中打开终端，使用相同的 `azd` 环境，然后运行： + + ```bash + azd down --purge + ``` + +3. 检查当前选择的订阅以及研讨会资源组是否仍然存在： + + ```bash + az account show --output table + az group exists --name rg-tailspin-toys + ``` + + 如果命令返回 `false`，则清理已完成。如果返回 `true`，请检查组中的资源： + + ```bash + az resource list --resource-group rg-tailspin-toys --output table + ``` + + 确认所有剩余资源都属于本练习。如果在模块 1 后停止，即使没有部署 `azd` 服务，也仍需清理 Foundry 项目和模型。 +4. 如果专用研讨会资源组仍然存在，并且仅包含要删除的资源，请运行： + + ```bash + az group delete --name rg-tailspin-toys --yes --no-wait + ``` + +5. 由于 `--no-wait` 命令会在删除完成前返回，请重新运行以下命令，直到它返回 `false`： + + ```bash + az group exists --name rg-tailspin-toys + ``` + +## 资源 + +Microsoft 文档介绍了 Canvas、托管部署及其权限。 + +- [什么是 Microsoft Foundry Canvas？][foundry-canvas] +- [使用 Foundry Canvas 部署第一个托管代理][hosted-agent-quickstart] +- [托管代理权限][hosted-agent-permissions] + +[module-1]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/1-project-and-model/ +[module-2]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ +[module-3]: /zh-cn/learning-hub/copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ +[core-review]: /zh-cn/learning-hub/copilot-workshops/app/10-review/ +[foundry-canvas]: https://learn.microsoft.com/azure/foundry/agents/concepts/foundry-canvas +[hosted-agent-quickstart]: https://learn.microsoft.com/azure/foundry/agents/quickstarts/quickstart-hosted-agent?pivots=canvas +[hosted-agent-permissions]: https://learn.microsoft.com/azure/foundry/agents/concepts/hosted-agent-permissions diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-review.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-review.md deleted file mode 100644 index 0dd5e3d52..000000000 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/8-review.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: "第 8 课 - 回顾与后续步骤" -description: "回顾 GitHub Copilot app 学习路径，自动执行重复性工作，并探索后续方向。" -authors: - - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 ---- - -在过去几节课程中，你使用 GitHub Copilot app 将一项功能从构想推进到合并，包括： - -- 连接存储库，并熟悉应用工作区和模板创建的待办事项。 -- 从直接任务和议题启动会话，并使用 Plan 和 Autopilot 模式控制智能体的工作方式。 -- 使用自定义指令和可复用技能引导智能体。 -- 使用 Playwright MCP 服务器在真实浏览器中测试工作。 -- 在共享画布上与智能体协作。 -- 逐步提高更改交付的合并自动化程度，从自行在 github.com 上合并，到让 **Agent Merge** 完成拉取请求。 - -接下来自动执行一些重复性工作、讨论最佳实践，并了解后续方向。 - -## 自动执行重复性工作 - -应用可通过**自动化**按计划或按需运行智能体，非常适合对新议题进行分类或汇总近期活动等日常任务。接下来创建一个简单的非破坏性自动化任务。 - -1. 在侧边栏中选择 **Automations**，再选择 **New automation**。 -2. 为其指定名称，例如 `Recap my recent work`。 -3. 选择触发器。**Manual** 支持按需运行；**On a schedule** 会自动运行；**When an issue is created** 会在创建新议题时响应。本课请选择 **Manual**。 -4. 输入只读提示词，确保自动化任务无法更改任何内容，例如： - - ```plaintext - Summarize the pull requests merged in this repository over the last week, and list any issues still open in the backlog. - ``` - -5. 选择项目（你的 Tailspin Toys 存储库）并创建自动化任务。 -6. 按需运行该任务以查看结果。 - -> [!TIP] -> 自动化任务可以在本地或云中运行。如果希望自动化任务按计划无人值守运行，请启用 **Run in the cloud**，并选择允许它使用的 **Tools**。在信任其输出之前，应确保计划任务范围明确且不具破坏性。 - -## 最佳实践 - -使用任何 AI 工具时，其周边基础设施都会影响输出质量。指令文件、技能和自定义智能体都在本研讨会中发挥了作用。应投入精力完善这些资产，并在会话间复用。 - -根据任务选择适合的**模式和模型**。使用 **Plan** 在构建前思考方法；使用 **Interactive** 参与范围明确的更改；仅对范围清晰且彼此隔离的任务使用 **Autopilot**。日常编辑可选择更快的模型，复杂工作则选择推理能力更强的模型并提高推理强度。 - -上下文与基础设施同样重要。清楚说明要构建*什么*、*为什么*构建，以及*如何*构建，会显著影响输出。在决定创建完整会话前，可以先通过快速聊天下一步界定想法范围。 - -## 更多探索内容 - -你已经了解核心工作流。以下功能也值得探索： - -- **Quick chats**：适合不需要完整会话的一次性问题。 -- **Rubber duck**：用于分析问题，并在构建前获得高信噪比反馈。 -- [**Custom agents**][custom-agents]：将角色、工具和指令打包，以便重复执行专业工作。 -- [`/chronicle`][chronicle]：生成会话过程的叙述。 -- [Bring your own key (BYOK)][byok]：使用自己提供商的模型，包括通过 Ollama、Foundry Local 或 LM Studio 使用本地模型。 -- [Cloud sandboxes][sandboxes]：在 GitHub 托管的隔离环境中运行会话。 -- [Deep links][deep-links]：直接在应用中打开存储库、会话或提示词。 - -## 后续步骤 - -熟练使用任何工具的最佳方式都是持续使用。可将它用于生产代码、业余项目，或那个构思多年却始终没有动手构建的小应用。与团队分享经验，也向团队学习。并且一如既往地探索文档。 - -要探索 GitHub Copilot 生态系统的更多内容，请查看 [VS Code 学习路径](/zh-cn/learning-hub/copilot-workshops/vscode/)、[Copilot CLI 学习路径](/zh-cn/learning-hub/copilot-workshops/cli/)或 [Cloud agent 学习路径](/zh-cn/learning-hub/copilot-workshops/cloud/)。 - -## 资源 - -- [关于 GitHub Copilot app][about-copilot-app] -- [GitHub Copilot app 入门][getting-started] -- [自定义 GitHub Copilot app][customize] -- [使用自动化][using-automations] -- [使用画布扩展][canvas-docs] -- [关于云沙盒和本地沙盒][sandboxes] - -[about-copilot-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 -[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app -[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations -[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions -[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes -[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle -[custom-agents]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents -[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models -[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/9-canvases.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/9-canvases.md new file mode 100644 index 000000000..6a6ac6470 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/9-canvases.md @@ -0,0 +1,117 @@ +--- +title: "第 9 课 - 探索并创建画布" +description: "使用现有的 Database Explorer 画布，再创建并审查由存储库支持的分类画布。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +此前，你通过聊天指挥智能体。但许多工作并不只存在于对话中，而是呈现在看板、文档或检查清单上。借助**画布**，你和智能体可以直接在应用内共享一个适合此类工作的界面。本课将先使用 Tailspin Toys 自带的画布，再为一直在处理的待办事项创建一个画布。 + +本课将介绍如何： + +- 了解画布是什么以及何时使用画布。 +- 使用现有的 Database Explorer 画布检查项目数据。 +- 创建共享的看板画布以对待办事项进行分类。 +- 检查并操作新画布，而不实现其他功能。 + +## 场景 + +Tailspin Toys 已包含用于探索数据库的画布。使用它了解画布如何将项目数据转换为交互式界面后，你将创建一个可复用的看板，用于选择下一项工作，而不开始实现其他功能。 + +## 什么是画布？ + +[画布][canvas-docs]是用于工作工件的共享交互式界面，例如计划、分类看板、发布检查清单、仪表板或文档。聊天非常适合描述意图和分析模糊问题，但大多数工作发生在具体的*界面*上。画布让你可以直接在该界面上与智能体协作。 + +画布支持**双向交互**：智能体可以在工作过程中更新画布，你也可以自行编辑同一个界面。创建画布时，智能体会根据提示词和工作流进行构建；之后，可以要求它添加、删除或修改功能。画布创建后会在应用右侧面板中打开。 + +常见示例包括： + +- 用于规划当天工作以及确定议题和拉取请求优先级的 **Markdown 画布**。 +- 由人员和智能体添加卡片并在列之间移动工作的**智能体看板**。 +- 汇总存储库重要议题和重复出现主题的**议题分类看板**。 + +## 为什么使用画布？ + +当任务需要结构、迭代和验证，且仅靠聊天不足以完成时，可以使用画布。画布让你能够： + +- 让智能体基于符合工作流的实际工件开展工作。 +- 直接在共享界面上引导或纠正工作，再让智能体从更改处继续。 +- 通过工件的可见更改检查进度，而不只是查看聊天回复。 + +## 使用 Database Explorer 画布 + +先使用项目现有的 Database Explorer 画布。通过可用的示例，可以在自行创建画布前了解存储库范围的画布如何工作。 + +1. 确认筛选拉取请求 (PR) 已合并，并更新本地 `main`。 +2. 返回 GitHub Copilot app，选择 **Home screen**。 +3. 确认已选择 `tailspin-toys` 存储库。 +4. 基于更新后的 `main` 在 **new working tree** 中创建会话，再选择 **Interactive** 模式。 +5. 要求 Copilot 根据需要准备本地数据库，并打开现有画布且不做更改： + + ```plaintext + Set up the local database if needed, then open the repository's Database Explorer canvas. Do not change any files. + ``` + +6. 在 Database Explorer 中浏览可用表，并选择 `games`。 +7. 运行只读查询，显示五款评分较高的游戏： + + ```sql + SELECT title, star_rating + FROM games + ORDER BY star_rating DESC + LIMIT 5; + ``` + +8. 确认结果包含不超过五款游戏，并按评分降序排列。 +9. 打开 **Files**，检查 `.github/extensions/database-explorer/extension.mjs`。注意画布如何随项目存储，并将查询限制为只读的 `SELECT` 和 `WITH` 语句。 +10. 确认会话没有文件更改。 + +## 创建画布来分类议题 + +现在创建另一种共享界面。将分类画布保存在项目范围内，使其成为团队可以审查和复用的存储库资产。 + +1. 在同一会话中输入 `/create-canvas`，再描述要创建的画布： + + ```plaintext + Create a Kanban triage canvas for this repo's open issues and save it under .github/extensions/. Highlight the three issues you'd prioritize and explain why, with the rest below. Include summaries and links. + + Give each card an "Add to current context" action that adds the issue details without starting work or changing the issue. Make it keyboard-accessible and open it so I can try it. + ``` + +Copilot 会在 `.github/extensions` 下创建画布扩展，并在应用右侧面板中打开共享界面。生成的扩展是可执行的存储库内容，而不只是可视工件，因此接下来需要检查其文件和行为。 + +## 检查并操作画布 + +共享画布前，将其与存储库中的实际议题进行比较，并操作其控件。这样可以确认内容准确、交互无障碍，而且议题操作只添加上下文，不会启动工作。 + +1. 打开 **Changes**，确认画布定义由存储库支持并位于 `.github/extensions/` 下，而不是仅保存到用户或会话。检查现有扩展和应用文件是否保持不变。 +2. 将看板与实际未关闭的议题进行比较，并评估排序说明。 +3. 检查卡片和控件是否清晰可读，且支持键盘操作。 +4. 为一个议题选择 **Add to current context**，确认只有议题详情进入对话，不应开始实现或更改议题状态。 +5. 审查所有修正，并让 Copilot 对更改的文件运行适用的现有验证。记录结果和阻塞项，不要仅因为交互界面能打开就假定它正确。 +6. 如果画布需要更改，请在分类范围内请求针对性改进，然后重复受影响的检查。不要在此画布工作中实现某个待办议题。 + +本工作坊不会再创建 PR，因为你已练习过手动合并和 Agent Merge。在生产环境中，应先按团队的常规流程审查并合并画布，再让其他人使用。 + +## 总结与后续步骤 + +你创建并复用了一个可与智能体协作的共享界面。本课中，你： + +- 了解了画布是什么以及何时使用画布。 +- 使用现有的 Database Explorer 画布检查了项目数据。 +- 创建了用于对待办事项进行分类的共享看板画布。 +- 检查并操作了新画布，而未实现其他功能。 + +待办事项现已得到跟踪。接下来回顾已构建的所有内容，并了解后续方向。继续学习[第 10 课 - 总结与后续步骤][next-lesson]。 + +## 资源 + +- [在 GitHub Copilot app 中使用画布扩展][canvas-docs] +- [Awesome Copilot 上的画布][awesome-copilot-canvases] +- [关于 GitHub Copilot app][about-copilot-app] + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/app/10-review/ +[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[awesome-copilot-canvases]: https://awesome-copilot.github.com/extensions/ +[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/index.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/index.md index b18a8b24f..34e0567a3 100644 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/index.md +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/app/index.md @@ -2,12 +2,26 @@ title: "GitHub Copilot app" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -[**GitHub Copilot app**](https://docs.github.com/copilot/concepts/agents/github-copilot-app) 是一款基于 Copilot CLI 构建的桌面应用，可将智能体驱动的开发集中到一个专注的工作区。它支持并行智能体会话、可切换的会话模式、共享画布，以及原生的 GitHub 议题和拉取请求管理功能。其中包括 **Agent Merge**，可处理拉取请求的变基、审查反馈、CI 修复与合并。 +[**GitHub Copilot app**](https://docs.github.com/copilot/concepts/agents/github-copilot-app) 是一款基于 Copilot CLI 构建的桌面应用，可将智能体驱动的开发集中到统一且专注的工作区。它支持并行智能体会话、可切换的会话模式、共享画布，以及原生的 GitHub 议题和拉取请求管理功能。其中包括 **Agent Merge**，可引导拉取请求完成变基、处理审查反馈、修复持续集成 (CI) 问题并执行合并。 -在这些课程中，你将安装应用并设置项目，然后熟悉应用工作区和模板为你创建的待办事项。你会先完成一项小改动，即添加星级评分；再根据议题添加自定义指令标准，在隔离的智能体会话中构建筛选功能，并使用可复用技能进行验证。随后，你将添加 Playwright MCP 服务器，在真实浏览器中探索该功能，并逐步提高合并自动化程度，最终由 **Agent Merge** 合并拉取请求。最后，你将通过共享画布协作并自动执行重复性工作，完整体验从构想到功能合并的流程。 +本工作坊采用一套连续的 Tailspin Toys 工作流： + +1. 准备项目、安装应用、连接存储库，并熟悉工作区和模板创建的待办事项。 +2. 完成范围明确的星级评分更改，在浏览器中审查，然后手动合并第一个拉取请求 (PR)。 +3. 从筛选功能议题开始，在 **Plan** 模式中确定方案，在 **Autopilot** 模式中构建，再在 **Interactive** 模式中审查。 +4. 更新存储库指令，并将其应用于筛选功能。 +5. 自定义现有的 `quality-checks` 技能，并用它运行项目检查。 +6. 添加 Playwright 模型上下文协议 (MCP) 服务器，并用它在浏览器中探索筛选功能。 +7. 创建质量保证 (QA) 自定义智能体，并用它审查需求、覆盖范围和验证证据。 +8. 审查完整的筛选功能更改，并对第二个 PR 使用 Agent Merge。 +9. 使用现有的 Database Explorer 画布，再创建并测试由存储库支持的分类画布。 + +为使工作坊重点明确，你将创建两个 PR：先提交星级评分，再提交筛选功能及指令更新、技能更新、QA 配置文件和测试。每个 PR 都从更新后的 `main` 开始。筛选和质量工作流共用一个会话、工作树和分支，以便在探索各项工具时继续基于已有成果构建。最后的画布练习保留在其会话中，让你专注于创建和测试共享界面，无需重复 PR 工作流。 ## 课程 @@ -15,13 +29,15 @@ lastUpdated: 2026-08-03 |--------|-------|-------------| | [0. 先决条件][ex0] | 设置 | 安装 Node.js，并创建自己的 Tailspin Toys 项目副本 | | [1. 安装 Copilot app][ex1] | 设置 | 安装应用、连接项目并熟悉工作区 | -| [2. 运行第一个智能体会话][ex2] | 首次更改 | 启动会话，并通过第一个拉取请求交付一项小改动 | -| [3. 使用自定义指令引导 Copilot][ex3] | 上下文 | 根据议题添加文档标准并合并更改 | -| [4. 使用 Autopilot 构建功能][ex4] | 核心功能 | 使用 Plan 和 Autopilot 构建筛选功能，再通过技能进行验证 | -| [5. 使用 Playwright MCP 测试][ex5] | 外部工具 | 添加 Playwright MCP 服务器，并在浏览器中探索功能 | -| [6. 使用 Agent Merge 合并][ex6] | 合并 | 让 Agent Merge 修复并合并筛选功能的拉取请求 | -| [7. 使用画布规划][ex7] | 协作 | 创建共享画布来规划和跟踪工作 | -| [8. 回顾与后续步骤][ex8] | 总结 | 自动执行重复性任务，并探索后续内容 | +| [2. 添加星级评分：快速上手][ex2] | 首次更改 | 显示现有评分和空值回退状态，再合并 PR 1 | +| [3. 智能体模式：Plan 和 Autopilot][ex3] | 智能体模式 | 从议题规划功能，使用 Autopilot 构建，再在 Interactive 模式中审查 | +| [4. 使用自定义指令引导 Copilot][ex4] | 上下文 | 探索并更新指令，再将其应用于筛选功能 | +| [5. 自定义并使用 quality-checks 技能][ex5] | 可重复检查 | 探索现有技能，更改报告格式并运行技能 | +| [6. 使用 Playwright MCP 验证功能][ex6] | 浏览器观察 | 通过 Customize 配置 MCP，并检查筛选行为 | +| [7. 创建并使用 QA 智能体][ex7] | 需求与覆盖 | 选择专业配置文件，收集最终验证证据 | +| [8. 创建并合并功能 PR][ex8] | 审查与合并 | 审查筛选功能、指令、技能、QA 配置文件和测试，再对第二个 PR 使用 Agent Merge | +| [9. 探索并创建画布][ex9] | 协作 | 使用 Database Explorer，再创建并测试由存储库支持的分类画布 | +| [10. 总结与后续步骤][ex10] | 总结 | 回顾工作流、产出及更多资源 | ## 先决条件 @@ -47,11 +63,13 @@ lastUpdated: 2026-08-03 [ex0]: /zh-cn/learning-hub/copilot-workshops/app/0-prerequisites/ [ex1]: /zh-cn/learning-hub/copilot-workshops/app/1-install-copilot-app/ [ex2]: /zh-cn/learning-hub/copilot-workshops/app/2-add-star-rating/ -[ex3]: /zh-cn/learning-hub/copilot-workshops/app/3-custom-instructions/ -[ex4]: /zh-cn/learning-hub/copilot-workshops/app/4-build-filtering/ -[ex5]: /zh-cn/learning-hub/copilot-workshops/app/5-mcp-playwright/ -[ex6]: /zh-cn/learning-hub/copilot-workshops/app/6-agent-merge/ -[ex7]: /zh-cn/learning-hub/copilot-workshops/app/7-canvases/ -[ex8]: /zh-cn/learning-hub/copilot-workshops/app/8-review/ +[ex3]: /zh-cn/learning-hub/copilot-workshops/app/3-agent-modes/ +[ex4]: /zh-cn/learning-hub/copilot-workshops/app/4-custom-instructions/ +[ex5]: /zh-cn/learning-hub/copilot-workshops/app/5-agent-skills/ +[ex6]: /zh-cn/learning-hub/copilot-workshops/app/6-mcp-playwright/ +[ex7]: /zh-cn/learning-hub/copilot-workshops/app/7-qa-agent/ +[ex8]: /zh-cn/learning-hub/copilot-workshops/app/8-create-pull-request/ +[ex9]: /zh-cn/learning-hub/copilot-workshops/app/9-canvases/ +[ex10]: /zh-cn/learning-hub/copilot-workshops/app/10-review/ [install-git]: https://github.com/git-guides/install-git [callout-student-plan-education]: https://github.com/education/students \ No newline at end of file diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 000000000..60809f845 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "第 0 课 - 先决条件与设置" +description: "确认研讨会的先决条件，安装 GitHub Copilot app，并熟悉工作区。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +构建 Space Quiz 之前，先确认所需条件，安装 GitHub Copilot app，并熟悉工作区。 + +本课将： + +- 确认研讨会的先决条件。 +- 安装并登录 GitHub Copilot app。 +- 为会话选择模型。 +- 认识应用的主要工作区域。 +- 尝试一次简短聊天。 + +## 先决条件 + +需要具备： + +- GitHub 账户。[创建 GitHub 账户][github-signup]，或使用现有账户。 +- 有效的 Copilot 计划。[启用 Copilot Free 或付费 Copilot 计划][copilot-plans]。如果组织已提供 Copilot 访问权限，使用对应账户。 +- 一台运行 macOS、Windows 或 Linux 的计算机。 + +应用自带 Git，无需再安装其他软件。 + +> [!NOTE] +> 如果使用 Copilot Business 或 Copilot Enterprise，管理员必须先启用 **Copilot CLI** 策略，智能体会话才能正常工作。 + +## 安装与配置应用 + +1. 下载并安装适用于当前操作系统的 [GitHub Copilot app][download-app]。 +2. 打开应用。 +3. 选择 **Sign in to GitHub** 并完成身份验证。 +4. 选择主题，然后选择 **Finish**。 + +## 选择模型 + +选择模型时，按以下优先顺序选择第一个可用选项： + +1. **GPT-6-Luna**（推荐）。 +2. **Auto**，作为兼顾各方面的备选。 +3. [当前可用模型列表][active-models]中的任意模型。 + +模型是否可用取决于订阅计划、组织策略和产品版本。 + +## 熟悉界面 + +应用将开发工作流集中到一处： + +- **New**：在项目中启动会话，或选择 **Chat** 快速提问。 +- **Pull requests**：审查并跟踪所有存储库中的拉取请求。 +- **Issues**：查找分配给自己、由自己创建或提及自己的议题。 +- **Automations**：安排存储库中的周期性智能体任务。 +- **Customize**：更改主题和模型，并管理 Canvas 扩展。 +- **Projects**：打开存储库，各个存储库的会话列在其下方。 + +## 尝试简短聊天 + +并非每个问题都需要工作区。在 **New** 中选择 **Chat**，而不是项目。聊天不关联存储库，也不能编辑文件，因此是快速提问、获取解释，或在启动正式会话前思考方案的最快方式。 + +在聊天中发送以下提示词： + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +## 总结与后续步骤 + +已经确认先决条件、安装应用、选择模型，并探索了主要工作区域。继续学习[第 1 课：创建 Space Quiz 工作区][next-lesson]。 + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[download-app]: https://gh.io/app +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 000000000..2abf7e96a --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "第 1 课 - 创建 Space Quiz 工作区" +description: "在空文件夹中为 Space Quiz 启动本地 Interactive 会话。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +为 Space Quiz 创建本地工作区，并配置会话，在智能体开始工作时保持对流程的控制。 + +本课将： + +- 打开空的本地文件夹。 +- 启动 Interactive 智能体会话。 +- 在发送第一个提示词之前确认文件夹、模式和模型。 + +## 创建工作区 + +1. 打开 GitHub Copilot app，确认已登录。 +2. 选择 **New**，然后选择 **Open folder**，并选择名为 `space-quiz` 的空文件夹。如果文件夹不存在，先创建它。 +3. 将会话模式设为 **Interactive**。 +4. 按[第 0 课的优先顺序][model-order]选择偏好的模型。 +5. 选择 **Create**。会话打开时为空，等待第一个提示词。 + +![Copilot app 的 New 界面示意图，包含提示词输入框、Interactive 模式、Auto 模型和 Default 智能体选择器，以及位于 Local main 分支上的 space-quiz 文件夹。](/images/learning-hub/copilot-workshops/first-steps-app-new-session.svg) + +在 **New** 界面中，可以在输入第一个提示词之前设置文件夹、模式和智能体。Interactive 会话允许在智能体构建项目时引导工作并审查每个阶段。 + +## 总结与后续步骤 + +空的 Space Quiz 工作区已准备就绪。继续学习[第 2 课：构建与优化测验][next-lesson]。 + +[model-order]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/#%E9%80%89%E6%8B%A9%E6%A8%A1%E5%9E%8B +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md new file mode 100644 index 000000000..fe0a4df99 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "第 10 课 - 远程继续会话（可选）" +description: "使用 /remote 在网页或 GitHub Copilot 移动应用中查看正在进行的应用会话，会话仍在本机运行。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +本课为可选内容，建议熟悉本地工作流程后再尝试。`/remote` 命令让会话继续在本地运行，同时可从网页和 GitHub Copilot 移动应用访问。从其他设备查看会话时，本机需要保持开机。 + +本课将： + +- 让正在进行的会话可供远程访问。 +- 从浏览器或 GitHub Copilot 移动应用查看会话。 +- 像审查其他拉取请求一样审查产生的更改。 + +## 远程继续会话 + +1. 打开仍在进行工作的会话。 +2. 运行 `/remote`，让会话可供远程访问。 +3. 在浏览器中打开返回的链接，或在 GitHub Copilot 移动应用中访问会话。 +4. 在那里查看进度，然后像审查其他拉取请求一样审查更改。 + +> [!NOTE] +> **这不是委派** +> +> 会话仍在本机运行。任务没有交给其他智能体，也没有移到云端。 + +## 总结与后续步骤 + +已经让本地会话可从其他设备访问。继续学习[第 11 课：探索 Canvas][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md new file mode 100644 index 000000000..37165f891 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "第 11 课 - 探索 Canvas" +description: "安装 Repository Issues Kanban Canvas，并从议题卡片启动会话。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +**Canvas** 是一个共享的双向交互界面，可以与智能体共同更新同一份计划、看板、清单或仪表板。探索 Kanban Canvas，将存储库议题转化为可视化工作流。 + +本课将： + +- 安装 Canvas 扩展。 +- 将 Canvas 关联到 Space Quiz 存储库。 +- 将一个议题移入正在进行的工作。 +- 检查从议题创建的会话。 + +## 安装 Repository Issues Kanban Canvas + +1. 浏览 [Canvas 扩展库][canvas-gallery]。 +2. 打开 [Repository Issues Kanban 扩展][kanban-extension]。 +3. 选择 **Install in GitHub Copilot app**，并批准安装。 +4. 在应用中打开 **Customize**，然后打开 **Canvas**。 +5. 确认扩展已安装。 + +## 从 Canvas 开始工作 + +1. 为 Canvas 选择 **New session**。 +2. 选择 `space-quiz` 项目。 +3. 探索议题看板。 +4. 将议题卡片移到正在进行的工作列。 +5. 打开自动生成的会话。 +6. 确认选定的议题已作为会话上下文提供。 + +![Repository Issues Kanban Canvas 示意图，包含 Backlog、Plan、Ready 和 Implement 泳道。议题 13“Review screen”正从 Backlog 拖到 Plan 泳道，议题 12“Per-question timer”仍在 Backlog 中。](/images/learning-hub/copilot-workshops/first-steps-app-canvas-kanban.svg) + +将卡片放入泳道后，Canvas 会将该议题交给新会话，并预先加载议题内容。 + +> [!NOTE] +> 当前的 Repository Issues Kanban 扩展通过基于指针的拖放操作移动卡片。如果无法使用这种交互方式，记下看板上的议题编号，从 **Issues** 打开该议题，然后选择 **New session**。这样无需移动卡片，也能创建同样以议题为依据的会话。 + +Canvas 提供可视化的方式来选择并开始工作，同时让智能体始终以议题为依据。 + +## 总结与后续步骤 + +已经通过共享的可视化界面启动智能体会话。继续学习[第 12 课：回顾与后续步骤][next-lesson]。 + +[canvas-gallery]: https://awesome-copilot.github.com/extensions/ +[kanban-extension]: https://awesome-copilot.github.com/extension/accessibility-kanban/ +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md new file mode 100644 index 000000000..4c5482579 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "第 12 课 - 回顾与后续步骤" +description: "回顾 GitHub Copilot app 工作流，并查找继续学习的资源。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +已经引导智能体完成整个开发工作流：从空文件夹开始，规划工作、隔离实现、审查代码、自动化任务、远程访问会话，并使用可视化 Canvas。 + +## 已完成的内容 + +已经： + +- 在 Interactive 模式中创建本地项目。 +- 结合实时浏览器反馈构建并优化测验。 +- 检查会话详情，并运行浏览器级冒烟测试。 +- 使用 `/init` 记录项目规则。 +- 将项目发布为 GitHub 存储库。 +- 创建范围明确的待办事项。 +- 在隔离的工作树中实现一个议题，并审查差异。 +- 在更改任何代码之前规划第二个议题。 +- 通过拉取请求审查和 Agent Merge 交付议题。 +- 自动化每周议题分类。 +- 远程查看本地会话。 +- 探索共享的 Kanban Canvas。 + +## 继续探索 + +- [了解 GitHub Copilot app][about-app]。 +- [查看官方入门指南][getting-started]。 +- [了解如何使用智能体会话][agent-sessions]。 +- [在应用中管理议题和拉取请求][issues-and-prs]。 +- [了解 Copilot 代码审查][code-review]。 +- [构建并使用 Canvas 扩展][canvas-extensions]。 +- [遵循提示词编写最佳实践，让提示词在真实代码中也能发挥作用][best-practices]。 +- [比较 Copilot 计划][copilot-plans]。 + +通过 [Copilot CLI 入门研讨会][first-steps-cli]或 [Visual Studio Code 入门研讨会][first-steps-vscode]，用另一种工作方式完成同一个 Space Quiz。如果已准备好使用完整应用程序和团队待办事项探索更深入的场景，继续学习[真实场景 GitHub Copilot app 研讨会][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 +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-cli]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-app]: /zh-cn/learning-hub/copilot-workshops/app/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 000000000..fd3cbeea4 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "第 2 课 - 构建与优化测验" +description: "构建单文件 Space Quiz，并通过集成浏览器和元素选择器优化它。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +使用一个详细的提示词构建 Space Quiz，在集成浏览器中验证行为，并用元素选择器优化视觉效果。 + +本课将： + +- 在 `index.html` 中创建无依赖项的测验。 +- 在集成浏览器中测试测验。 +- 检查生成的代码。 +- 在保持无障碍支持的前提下优化选中的元素。 + +## 构建测验 + +在 `space-quiz` 会话中发送以下提示词： + +```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. +``` + +智能体完成后，尝试回答几道题，并确认： + +- 进度条向前推进。 +- 得分更新。 +- 答对时显示绿色状态。 +- 答错时显示红色抖动动画。 +- 最后一题结束后出现结果界面。 + +## 检查生成的代码 + +折叠左侧边栏和右侧浏览器面板，然后在展开的代码区域中查看 `index.html`。留意 HTML、CSS 和 JavaScript 如何在同一个文件中协作。完成后恢复两个面板。 + +## 使用元素选择器优化 + +1. 选择浏览器工具栏中的元素选择器。 +2. 选择测验标题或答案区域。 +3. 发送以下提示词： + + ```plaintext + Make the selected element feel more like a mission-control display. Keep it accessible and preserve the existing light and dark themes. + ``` + +4. 观察集成浏览器刷新，并验证更改。 + +## 可选优化 + +如果想继续尝试，可以让智能体： + +- 添加淡雅的星空背景，并遵循 `prefers-reduced-motion`。 +- 得分为 8 分或更高时，让结果界面更有庆祝氛围。 +- 改善键盘焦点状态，然后在不使用鼠标的情况下验证测验。 + +## 总结与后续步骤 + +已经构建、检查并优化了 Space Quiz。继续学习[第 3 课：检查会话并测试测验][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 000000000..bde99eb5a --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "第 3 课 - 检查会话并测试测验" +description: "查看会话详情，确认智能体正在处理的内容，然后在向 Git 写入任何内容之前运行浏览器级冒烟测试。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +会话已经完成实际工作，现在有内容可以检查了。确认智能体的工作目标，然后让它在集成浏览器中操作测验，报告实际发生的情况，而不是预期会发生的情况。 + +本课将： + +- 查看会话详情面板。 +- 检查会话的项目、路径、分支、更改和上下文使用量。 +- 运行浏览器级冒烟测试，并修复所有失败项。 + +## 查看会话详情 + +会话详情准确显示智能体正在处理的内容。无需时刻关注这个面板，但当结果出乎意料时，其中的每一项都值得检查。 + +![Copilot app 中 Space Quiz 构建会话的详情面板示意图。面板显示基于 origin/main 的 main 分支、路径、项目、会话名称、会话 ID、智能体、一个已更改的文件、token 数量、27% 的上下文使用量、会话费用，以及启用远程控制、重命名、查看洞察、以机密 gist 分享或归档会话的选项。](/images/learning-hub/copilot-workshops/first-steps-app-session-details.svg) + +面板显示工作位置、更改内容，以及上下文窗口的使用程度。这里没有模型行，因为模型是在输入区域中为每次请求单独选择的。 + +1. 确认 **project**、**path** 和 **branch** 与预期编辑的目标一致。 +2. 查看 **Changes**，了解会话是否已修改任何内容。 +3. 检查 **context usage**。使用量越高，留给实际任务的空间越少，这时就该启动新会话。 + +> [!TIP] +> **大多数不理想的结果都源于上下文问题** +> +> 分支错误、文件夹错误或上下文窗口接近耗尽，比提示词不佳更常导致意外结果。 + +## 在向 Git 写入任何内容之前测试 + +集成浏览器是真正的浏览器，智能体可以操作测验并验证行为。发送以下提示词： + +```plaintext +Run a browser-level smoke test for the quiz in the integrated browser. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. 在智能体逐题测试时观察集成浏览器。 +2. 如果有任何失败项，让智能体修复并重新测试，直到全部通过。 +3. 只有构建和测试都通过后才继续。 + +目前尚未向 Git 写入任何内容。下一步的 `/init` 会读取项目的当前状态，因此值得先确认项目能正常工作。 + +## 总结与后续步骤 + +已经确认会话正在处理的内容，并通过浏览器级冒烟测试验证了测验。继续学习[第 4 课：记录项目指令][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 000000000..bca43958d --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "第 4 课 - 记录项目指令" +description: "运行 /init，生成描述已完成 Space Quiz 的智能体指令，再根据工作习惯调整。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +测验已经完成构建、优化和测试，现在记录后续会话应如何处理项目。每个会话开始工作前都会读取智能体指令，省去在每个提示词中重复相同要求的麻烦。 + +本课将： + +- 使用 `/init` 生成智能体指令。 +- 接受生成的文件之前先审查。 +- 精简并个性化调整指令。 + +## 使用 `/init` 记录规则 + +1. 在应用会话中运行 `/init`。 +2. 接受生成的智能体指令文件之前先审查。 +3. 将内容精简为符合项目的指导：单文件、无依赖项、支持无障碍，并经过浏览器测试。 + +> [!IMPORTANT] +> **为什么要在优化后执行？** +> +> `/init` 读取的是项目当前的状态。在测验构建并测试完成后运行，生成的指令才能描述真实代码，而不是空文件夹。 + +## 按自己的习惯调整 + +指令文件不只是用来记录项目事实。还可以添加原本会在每个提示词中重复的具体要求，例如代码风格、命名约定、应避免的库，以及希望添加多少注释。后续每个会话都会先读取这个文件，再读取提示词。 + +## 总结与后续步骤 + +项目现在有了基于真实代码的智能体指令。继续学习[第 5 课：发布项目][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md new file mode 100644 index 000000000..e8bc60fb5 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "第 5 课 - 发布项目" +description: "将本地 Space Quiz 实验项目发布为公开的 GitHub 存储库。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +发布 Space Quiz，以便管理议题、使用隔离的工作树，并完成拉取请求工作流。 + +本课将： + +- 将文件夹初始化为 Git 存储库。 +- 创建并推送到公开的 GitHub 存储库。 +- 在 Copilot app 中将项目关联到 GitHub。 + +## 发布存储库 + +发送以下提示词： + +```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] +> 创建存储库或推送代码之前，智能体会要求确认。批准之前，先审查拟执行的操作和目标位置。 + +智能体完成后： + +1. 在 GitHub 上打开新存储库。 +2. 确认存在 `index.html`。 +3. 返回 Copilot app，确认项目已关联到存储库。 + +## 总结与后续步骤 + +项目现在已成为 GitHub 存储库。继续学习[第 6 课：使用议题与会话][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 000000000..d4e57599e --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "第 6 课 - 使用议题与会话" +description: "创建范围明确的待办事项，选择一个议题，在隔离的工作树中实现，并亲自审查差异。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +让智能体提出范围明确的产品改进建议，将想法转化为 GitHub 议题，并在隔离的会话中实现其中一个。 + +本课将： + +- 为 Space Quiz 创建三个范围明确的议题。 +- 在 **Issues** 中浏览待办事项。 +- 从议题启动使用新工作树的会话。 +- 在 **Changes** 选项卡中审查差异并验证功能。 + +## 在 Issues 中创建待办事项 + +发送以下提示词： + +```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. +``` + +打开 **Issues**，审查这三个议题，选择一个价值明确且范围可控的议题。 + +![Copilot app 的 Issues 视图示意图。侧边栏列出 New、Pull requests、Issues、Automations、Customize、More 和 space-quiz 项目。主区域包含 Assigned to me、Created by me、Mentioning me 和 Done 选项卡、搜索框、State 和 Assignee 筛选器，以及 space-quiz 存储库中的三个未关闭议题。](/images/learning-hub/copilot-workshops/first-steps-app-issues.svg) + +**Issues** 将所有存储库中的 GitHub 议题汇总到应用中，并按 **Assigned to me**、**Created by me**、**Mentioning me** 和 **Done** 筛选。 + +## 实现议题 + +1. 从 **Issues** 打开选定的议题。 +2. 选择 **New session**。 +3. 出现提示时，选择 **new worktree**。 +4. 使用 **Interactive** 模式和偏好的模型。 +5. 发送以下提示词： + + ```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. + ``` + +新工作树将功能与默认分支隔离，直到准备好审查和合并。 + +## 亲自审查差异 + +智能体报告结果后，不要仅凭报告就认定工作无误。 + +1. 打开右侧弹出面板，选择 **Changes** 选项卡。 +2. 查看会话修改过的每个文件的差异。 +3. 在集成浏览器中测试功能，确认满足议题的验收标准。 + +![Copilot app 会话示意图，右侧弹出面板已打开 Changes 选项卡。面板显示一个已更改的文件 index.html，新增 142 行、删除 8 行，差异行与会话对话并排显示。](/images/learning-hub/copilot-workshops/first-steps-app-changes-tab.svg) + +**Changes** 选项卡列出会话修改过的每个文件，并内联显示差异。 + +## 总结与后续步骤 + +已经创建待办事项，在隔离会话中实现一个议题，并审查了差异。继续学习[第 7 课：先规划再编辑][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 000000000..9e85dd789 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "第 7 课 - 先规划再编辑" +description: "针对第二个议题使用 Plan 模式，让智能体先调查项目并提出方案，再更改文件。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +并非每个议题都应该从编辑开始。Plan 模式先调查项目、提出方案，并等待批准，然后才更改代码。 + +本课将： + +- 为第二个议题启动 Plan 模式会话。 +- 审查并完善智能体提出的计划。 +- 批准计划，并选择会话继续运行的方式。 + +## 在更改代码之前确定方案 + +1. 从 **Issues** 打开**第二个议题**，选择 **New session**。 +2. 在会话配置中选择 **Plan**，而不是 **Interactive** 或 **Autopilot**。 +3. 发送以下提示词，让智能体在不更改文件的情况下调查： + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. 阅读提出的计划，如果有遗漏，要求调整。 +5. 批准计划。 +6. 出现提示时，选择让会话以 **Interactive** 还是 **Autopilot** 模式继续。 + +> [!TIP] +> **何时值得使用 Plan 模式** +> +> 对于含糊不清、涉及多个方面或难以撤销的任务，使用 Plan 模式。修正不当方案成本最低的时机，是第一次编辑之前。 + +## 总结与后续步骤 + +已经在智能体编写任何代码之前共同确定了方案。继续学习[第 8 课：完成 Copilot 审查流程][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 000000000..d6752e214 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "第 8 课 - 完成 Copilot 审查流程" +description: "创建拉取请求，请求 Copilot 审查，处理可执行的反馈，并让 Agent Merge 持续维护拉取请求。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +将已实现的议题提交为拉取请求，请求 Copilot 审查，并在合并前处理反馈。 + +本课将： + +- 最后检查一次会话的更改。 +- 从智能体会话创建拉取请求。 +- 请求 Copilot 代码审查。 +- 审查并落实可执行的反馈。 +- 启用 Agent Merge，持续维护拉取请求直到合并。 + +## 创建并审查拉取请求 + +1. 打开右侧弹出面板，选择 **Changes** 选项卡，检查会话中更改的文件。 +2. 在会话工具栏中选择 **Create PR**。 +3. 审查生成的标题和描述，然后创建拉取请求。 +4. 在 GitHub 上打开拉取请求。 +5. 从 **Reviewers** 菜单请求 **Copilot** 审查。 +6. 打开 **Files changed** 选项卡，阅读每条审查评论。 +7. 对于每条可执行的评论，使用应用中的 Copilot **Fix** 操作，或自行修改。 +8. 审查每项更改，并重新测试功能。 +9. 简要回复更改内容，然后将对话标记为已解决。 + +> [!NOTE] +> 如果建议不适用或超出拉取请求的范围，回复原因，而不是做不必要的更改。合并前解决所有审查对话。 + +## 使用 Agent Merge 合并 + +为拉取请求启用 **Agent Merge**，让智能体持续维护它。智能体会处理审查评论、修复失败的检查，并解决新出现的冲突，然后在全部通过后合并。 + +如果更愿意自行合并，先审查最终差异、验证功能，并在所有检查通过后合并拉取请求。 + +## 总结与后续步骤 + +已经完成从议题到经过审查并合并的拉取请求的开发流程。继续学习[第 9 课：自动化议题分类][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md new file mode 100644 index 000000000..16123f4dd --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "第 9 课 - 自动化议题分类" +description: "创建并运行每周自动化任务，汇总最近的未关闭议题。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +使用自动化，将重复的议题分类任务转化为定时运行的智能体工作流。 + +本课将： + +- 创建每周自动化任务。 +- 将自动化任务关联到 Space Quiz 项目。 +- 立即运行自动化任务并审查结果。 + +## 创建自动化任务 + +![Copilot app 的 Automations 视图示意图，包含 All、Local 和 Cloud 筛选器、搜索框、Templates 和 New automation 按钮，以及 space-quiz 项目的两个每周自动化任务卡片：Issue triage 和 Accessibility audit。](/images/learning-hub/copilot-workshops/first-steps-app-automations.svg) + +自动化任务按计划运行同一个提示词，每个任务都有独立的会话，因此不会干扰当前工作。可以按 **All**、**Local** 或 **Cloud** 筛选，也可以按需运行任意自动化任务。 + +1. 打开 **Automations**。 +2. 选择用于新建每周自动化任务的模板。 +3. 输入以下提示词： + + ```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. 将会话模式设为 **Autopilot**。 +5. 将模型设为 **Auto**。 +6. 选择 `space-quiz` 项目。 +7. 打开 **Create** 下拉菜单，然后选择 **Create and run**。 + +审查生成的汇总，确认其中引用了存储库中最近的未关闭议题。 + +## 总结与后续步骤 + +已经创建可复用、按计划运行的智能体工作流。继续学习[第 10 课：远程继续会话][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/index.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/index.md new file mode 100644 index 000000000..f1f9ef5c7 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/index.md @@ -0,0 +1,55 @@ +--- +title: "GitHub Copilot app 导览" +description: "通过构建并交付 Space Quiz，在引导下探索 GitHub Copilot app。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +通过适合初学者的动手实践探索 GitHub Copilot app。从空文件夹构建色彩丰富的 Space Quiz，完成整个开发流程，从第一个提示词一直到经过审查的拉取请求。 + +本研讨会约需 60 到 90 分钟。项目只有一个 HTML 文件，没有运行时依赖项，因此可以专注于学习应用及其智能体工作流。 + +> [!NOTE] +> 本研讨会由 [James Montemagno][james] 创建，改编自 [First Steps with GitHub Copilot][source-lab]。原始内容采用 [MIT 许可证][source-license]。 + +## 课程 + +| 课程 | 主题 | 实践内容 | +| ------ | ----- | ---------------- | +| [0. 先决条件与设置][lesson-0] | 设置 | 确认先决条件，安装应用，选择模型，并探索工作区 | +| [1. 创建工作区][lesson-1] | 创建 | 在空的本地文件夹中启动 Interactive 会话 | +| [2. 构建与优化][lesson-2] | 构建 | 创建测验，并在集成浏览器中优化 | +| [3. 检查与测试][lesson-3] | 上下文与测试 | 查看会话详情，并运行浏览器级冒烟测试 | +| [4. 记录项目指令][lesson-4] | 指令 | 使用 `/init` 生成并调整智能体指令 | +| [5. 发布项目][lesson-5] | 发布 | 从本地项目创建公开的 GitHub 存储库 | +| [6. 使用议题与会话][lesson-6] | 实现 | 创建待办事项，在隔离的工作树中实现一个议题，并审查差异 | +| [7. 先规划再编辑][lesson-7] | 规划 | 使用 Plan 模式确定第二个议题的实现方案 | +| [8. 完成审查流程][lesson-8] | 审查 | 创建拉取请求，处理 Copilot 审查反馈，并使用 Agent Merge | +| [9. 自动化议题分类][lesson-9] | 自动化 | 安排并运行每周议题分类自动化任务 | +| [10. 远程继续会话][lesson-10] | 远程（可选） | 使用 `/remote` 从网页或移动端查看正在进行的本地会话 | +| [11. 探索 Canvas][lesson-11] | Canvas | 从 Repository Issues Kanban Canvas 开始工作 | +| [12. 回顾与后续步骤][lesson-12] | 回顾 | 回顾工作流并继续学习 | + +## 开始学习 + +[从第 0 课“先决条件与设置”开始][lesson-0]。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/0-prerequisites/ +[lesson-1]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/1-create-workspace/ +[lesson-2]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/2-build-and-polish/ +[lesson-3]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/3-inspect-and-test/ +[lesson-4]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/4-project-instructions/ +[lesson-5]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/5-publish/ +[lesson-6]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/6-issues-and-sessions/ +[lesson-7]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/7-plan-mode/ +[lesson-8]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/8-review-loop/ +[lesson-9]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/9-automations/ +[lesson-10]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/10-remote/ +[lesson-11]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/11-canvas/ +[lesson-12]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/12-review/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 000000000..d319cef91 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "第 0 课 - 先决条件与设置" +description: "确认研讨会的先决条件，安装 GitHub Copilot CLI，登录，并在空项目文件夹中选择模型。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +让智能体进入终端。确认所需条件，安装 GitHub Copilot CLI，登录，并准备好从空文件夹发出第一个请求。 + +本课将： + +- 确认研讨会的先决条件。 +- 安装 GitHub Copilot CLI 并登录。 +- 创建并信任项目文件夹。 +- 为会话选择模型。 + +## 先决条件 + +需要具备： + +- GitHub 账户。[创建 GitHub 账户][github-signup]，或使用现有账户。 +- 有效的 Copilot 计划。[启用 Copilot Free 或付费 Copilot 计划][copilot-plans]。如果组织已提供 Copilot 访问权限，使用对应账户。 +- 已安装 [Git][git]。运行 `git --version` 验证。 +- 一台运行 macOS、Windows 或 Linux 的计算机。 + +[GitHub CLI][gh-cli]（`gh`）是可选项，但建议安装，因为它能让智能体代为创建存储库和拉取请求。 + +> [!NOTE] +> 如果使用 Copilot Business 或 Copilot Enterprise，管理员必须先启用 **Copilot CLI** 策略，智能体会话才能正常工作。 + +## 设置 CLI + +1. 安装适用于当前平台的 [GitHub Copilot CLI][install-cli]。 +2. 创建并进入项目文件夹： + + ```bash + mkdir space-quiz && cd space-quiz + ``` + +3. 运行 `copilot`，登录，并在提示时信任文件夹。 +4. 运行 `/model`，按下一节的优先顺序选择模型。 +5. 如果尚未安装 [GitHub CLI][gh-cli]，可以选择安装。 + +![标题为 space-quiz 的终端窗口中的 Copilot CLI 示意图。界面询问是否信任此文件夹中的文件，已选中 Yes, proceed，并提示使用 /model 选择本次会话的模型，用 /help 列出全部斜杠命令。提示词行显示 Create a space exploration quiz。](/images/learning-hub/copilot-workshops/first-steps-cli-welcome.svg) + +CLI 启动时会显示信任提示和一些入门命令，包括 `/model`。 + +> [!TIP] +> 随时输入 `/` 可浏览所有可用命令，或运行 `/help` 查看完整参考。 + +## 选择模型 + +运行 `/model` 时，按以下优先顺序选择第一个可用选项： + +1. **GPT-6-Luna**（推荐）。 +2. **Auto**，作为兼顾各方面的备选。 +3. [当前可用模型列表][active-models]中的任意模型。 + +模型是否可用取决于订阅计划、组织策略和产品版本。 + +## 总结与后续步骤 + +Copilot CLI 已安装并登录，正在空的 `space-quiz` 文件夹中运行。继续学习[第 1 课：从终端构建测验][next-lesson]。 + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[git]: https://git-scm.com/downloads +[gh-cli]: https://cli.github.com/ +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md new file mode 100644 index 000000000..7494d1e9d --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "第 1 课 - 从终端构建测验" +description: "用一个详细请求让 Copilot CLI 构建完整的 Space Quiz，再做一项范围明确的优化。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +用一个详细请求描述整个项目，在批准之前审查智能体的提议，然后做一项范围明确的小更改。 + +本课将： + +- 在 `index.html` 中构建无依赖项的测验。 +- 从会话中在浏览器里打开测验。 +- 做一项范围明确的更改并验证。 + +## 构建测验 + +在 Copilot CLI 会话中发送以下提示词： + +```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 an emoji reaction at the end. Single index.html, no server or dependencies. Accessible, keyboard-navigable, and respects prefers-color-scheme. +``` + +1. 阅读提出的计划，并批准文件更改。 +2. 在浏览器中打开 `index.html`，尝试回答几道题。要从会话启动浏览器，在 macOS 上运行 `!open index.html`，在 Windows 上运行 `!start index.html`，在 Linux 上运行 `!xdg-open index.html`。 + +## 做一项小更改，然后检查 + +提出一项范围明确的优化，观察限定范围的请求会带来怎样的结果： + +```plaintext +The results screen feels flat. Give it a stronger sense of arrival: animate the score counting up and make the emoji reaction larger. Change nothing else. +``` + +1. 在浏览器中重新加载页面，并答题直到结束。 +2. 留意此时还没有任何内容进入 Git，因此没有可用于差异比较的基准。发布项目后，情况就不同了。 + +## 总结与后续步骤 + +已经构建测验，并通过限定范围的请求进行了优化。继续学习[第 2 课：记录项目指令][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md new file mode 100644 index 000000000..443124f88 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "第 10 课 - 回顾与后续步骤" +description: "回顾 Copilot CLI 工作流，并查找继续学习的资源。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +已经完成以终端为中心的工作流：构建测验、审查差异、发布项目、并行运行会话、先规划再编辑、恢复会话、合并拉取请求，并委派新工作，全程无需离开终端。 + +## 已完成的内容 + +已经： + +- 安装 Copilot CLI，并使用 `/model` 选择模型。 +- 从一个提示词开始构建并优化测验。 +- 使用 `/init` 记录项目规则。 +- 通过提示词或手动发布项目。 +- 从侧面板将议题添加到聊天，并使用 `/diff` 审查更改。 +- 使用 `/worktree` 在独立工作树中运行第二个会话。 +- 在更改任何代码之前，使用 `/plan` 规划第二个议题。 +- 使用 `/context` 和 `/clear` 检查并管理上下文。 +- 使用 `copilot --resume` 和 `/resume` 恢复会话。 +- 使用 `/pr create` 和 `/pr agentmerge` 创建并合并拉取请求。 +- 使用 `/delegate` 委派新功能。 + +## 继续探索 + +- [在 macOS、Windows 和 Linux 上安装 Copilot CLI][install-cli]。 +- [了解 Copilot CLI 及其斜杠命令和标志][about-cli]。 +- [使用 GitHub CLI 处理存储库和拉取请求][gh-cli]。 +- [安装 Git][git]。 +- [遵循提示词编写最佳实践，让提示词在真实代码中也能发挥作用][best-practices]。 +- [比较 Copilot 计划][copilot-plans]。 + +通过 [GitHub Copilot app 入门研讨会][first-steps-app]或 [Visual Studio Code 入门研讨会][first-steps-vscode]，用另一种工作方式完成同一个 Space Quiz。如果已准备好使用完整应用程序和团队待办事项探索更深入的场景，继续学习[真实场景 Copilot CLI 研讨会][real-world-cli]。 + +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[about-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[gh-cli]: https://cli.github.com/ +[git]: https://git-scm.com/downloads +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-vscode]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-cli]: /zh-cn/learning-hub/copilot-workshops/cli/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 000000000..34f5696f7 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "第 2 课 - 记录项目指令" +description: "运行 /init，生成描述已完成 Space Quiz 的智能体指令，再根据工作习惯调整。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +磁盘上已有可正常运行的测验，现在生成描述真实项目的智能体指令。后续每个会话开始工作前都会读取这些指令，省去在每个提示词中重复相同要求的麻烦。 + +本课将： + +- 使用 `/init` 生成智能体指令。 +- 接受生成的文件之前先审查。 +- 精简并个性化调整指令。 + +## 使用 `/init` 记录规则 + +1. 在会话中运行 `/init`。 +2. 接受生成的指令文件之前先审查。 +3. 只保留符合项目的指导：单文件、无依赖项、支持无障碍，并经过浏览器测试。 + +> [!IMPORTANT] +> **顺序很重要** +> +> `/init` 读取的是项目当前的状态。在测验构建并优化完成后运行，才能生成基于真实代码的指令。 + +## 按自己的习惯调整 + +指令文件不只是用来记录项目事实。还可以添加原本会在每个提示词中重复的具体要求，例如代码风格、命名约定、应避免的库，以及希望添加多少注释。后续每个会话都会先读取这个文件，再读取提示词。 + +## 总结与后续步骤 + +项目现在有了基于真实代码的智能体指令。继续学习[第 3 课：发布项目][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md new file mode 100644 index 000000000..de3675b76 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "第 3 课 - 发布项目" +description: "通过提示词或自行运行命令，将 Space Quiz 初始化、提交并发布到 GitHub。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +将实验项目发布为公开的 GitHub 存储库。可以用一个提示词提出请求，也可以自行运行命令。两种方式都尝试一次，就能准确了解智能体代为执行了哪些操作。 + +本课将： + +- 初始化 Git 存储库并创建第一个提交。 +- 创建并推送到公开的 GitHub 存储库。 +- 确认提交和文件已成功写入。 + +## 选项 A：让智能体执行 + +发送以下提示词： + +```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. +``` + +在智能体请求时逐一批准 Git 和 GitHub 操作。 + +## 选项 B：自行运行 + +在每条命令前加上 `!`，即可在会话中运行；也可以在自己的终端中运行不带此前缀的命令： + +```plaintext +!git init -b main +!git add . +!git commit -m "Add space quiz" +!gh repo create space-quiz --public --source=. --push +``` + +最后一条命令使用 [GitHub CLI][gh-cli]。如果没有安装，在 GitHub 上创建存储库，然后运行 `!git remote add origin ` 和 `!git push -u origin main`。 + +## 确认结果 + +1. 运行 `!git log --oneline`，确认提交已成功写入。 +2. 在 GitHub 上打开存储库，确认存在 `index.html`。 + +## 总结与后续步骤 + +项目现在已成为 GitHub 存储库，并有了可用于比较的已验证版本。继续学习[第 4 课：并行处理议题][next-lesson]。 + +[gh-cli]: https://cli.github.com/ +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 000000000..a99f1e4e1 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "第 4 课 - 并行处理议题" +description: "创建待办事项，从侧面板将议题添加到聊天，使用 /diff 审查更改，并在独立工作树中启动第二个会话。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +在终端中管理待办事项和实现流程，并为相互独立的工作开启单独的会话。 + +本课将： + +- 创建三个范围明确的 GitHub 议题。 +- 从侧面板将议题添加到聊天并实现。 +- 使用 `/diff` 审查更改。 +- 在隔离的工作树中启动第二个会话。 + +## 创建待办事项 + +发送以下提示词： + +```plaintext +Review the space quiz and create three focused GitHub issues with clear titles, user-focused descriptions, and acceptance criteria. Do not implement them yet. +``` + +## 在当前会话中处理第一个议题 + +1. 按 Left arrow 键打开侧面板，然后按 Tab 切换到 **Issues** 选项卡。 +2. 高亮选中第一个议题，按 c 将其作为上下文添加到聊天。要先阅读完整议题，则按 Enter。 +3. 让智能体实现该议题。 + +![终端中的 Copilot CLI 侧面板示意图。顶部有 Current、Sessions、Issues、Pull requests 和 Gists 选项卡，其中 Issues 已选中。针对 space-quiz 存储库未关闭议题的搜索筛选显示一个议题：Add a score screen at the end of the quiz。提示说明 Left arrow 键用于打开面板，Tab 用于切换选项卡；底部列出快捷键：斜杠用于搜索，Enter 查看详情，o 打开，w 创建工作树，c 添加到聊天，a 显示全部。](/images/learning-hub/copilot-workshops/first-steps-cli-side-panel.svg) + +侧面板顶部列出所有选项卡，底部的快捷键提示适用于当前高亮选中的项目。 + +## 使用 `/diff` 审查更改 + +项目已发布，因此有已验证的版本可供比较。`/diff` 准确显示本次议题在该版本基础上更改了什么，也就是即将请他人审查的内容。 + +1. 运行 `/diff`，查看每个已更改的文件。 +2. 对任何看起来不正确的内容要求修复，然后再次运行 `/diff`。 +3. 想直接检查 Git 时，随时运行 `!git status` 或 `!git diff`。 + +## 并行处理第二个议题 + +1. 再次打开侧面板，切换到 **Sessions** 选项卡。 +2. 为第二个议题启动另一个会话，同时保留第一个会话。 +3. 在新会话中运行 `/worktree`，使用隔离的工作树，而不是在原目录中创建分支。现在两个会话可以同时运行，互不干扰。 +4. 用 c 将第二个议题添加到该会话。 +5. 暂时保持会话在这个状态。下一课会在编写任何代码之前规划这个议题。 + +![运行 /worktree 后的 Copilot CLI 输出示意图。输出显示已在 issue-13-review-screen 分支上创建工作树 ../space-quiz-13，本会话现在在该位置工作，main 保持不变。](/images/learning-hub/copilot-workshops/first-steps-cli-worktree.svg) + +`/worktree` 将会话移到独立分支上的独立检出目录中，让第一个会话继续工作，不受干扰。 + +## 总结与后续步骤 + +已经实现第一个议题，用 `/diff` 审查了更改，并在独立工作树中启动第二个会话。继续学习[第 5 课：先规划再编辑][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 000000000..4ddce9dee --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "第 5 课 - 先规划再编辑" +description: "使用 /plan 将第二个会话切换到计划模式，让智能体先提出方案，再编辑文件。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +第二个会话已在独立工作树中运行。不要从写代码开始。计划模式会调查项目并提出方案，同时保持文件不变。 + +本课将： + +- 将第二个会话切换到计划模式。 +- 审查并完善智能体提出的计划。 +- 批准计划，让会话实现它。 + +## 在任何编辑之前确定方案 + +1. 切换到上一课打开的**第二个会话**。 +2. 运行 `/plan`，将该会话切换到计划模式。 +3. 发送以下提示词，让智能体在不编辑任何内容的情况下调查： + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. 阅读计划，指出所有遗漏，然后批准。 +5. 会话以已批准的计划为任务说明，继续进行实现。 + +> [!TIP] +> **何时值得使用计划模式** +> +> 对于含糊不清、涉及多个方面或难以撤销的任务，使用计划模式。修正不当方案成本最低的时机，是第一次编辑之前。 + +## 总结与后续步骤 + +已经在智能体编写任何代码之前共同确定了方案。继续学习[第 6 课：了解智能体能看到什么][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md new file mode 100644 index 000000000..5d750fd65 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "第 6 课 - 了解智能体能看到什么" +description: "使用 /context 检查上下文窗口中的内容，并在对话偏离目标时用 /clear 重新开始。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +通过终端命令可以查看并有意识地管理上下文。了解智能体能看到什么，有助于理解结果，并决定何时重新开始。 + +本课将： + +- 使用 `/context` 检查上下文窗口。 +- 查看各部分占用的窗口空间。 +- 使用 `/clear` 重置偏离目标的对话。 + +## 检查上下文 + +1. 运行 `/context`，检查文件、指令和对话历史。 +2. 检查各部分占用了多少窗口空间。 +3. 对话偏离目标时，运行 `/clear` 重新开始。 +4. 请求下一项更改之前，重新添加正确的文件。 + +![运行 /context 后的 Copilot CLI 输出示意图。上下文窗口用量指示器显示已使用 61%，分别由对话、已读取文件和指令占用。提示建议空间不足时使用 /compact 汇总，或启动新会话。](/images/learning-hub/copilot-workshops/first-steps-cli-context.svg) + +`/context` 准确显示上下文窗口中有哪些内容，以及还剩多少空间。空间不足时，使用 `/compact` 汇总对话，或启动新会话。 + +## 总结与后续步骤 + +现在可以查看并管理智能体掌握的信息。继续学习[第 7 课：恢复会话与远程访问][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 000000000..0a09490f6 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "第 7 课 - 恢复会话与远程访问" +description: "离开 Copilot CLI 会话后，使用 copilot --resume 或 /resume 返回，还可用 /remote 从其他设备查看会话。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +会话可以暂停，而不丢失对话或工作区上下文。离开会话，稍后返回，还可以选择让其他设备访问。 + +本课将： + +- 退出会话，并从终端恢复。 +- 在不离开 CLI 的情况下切换会话。 +- 按需让会话可供远程访问。 + +## 离开会话并稍后返回 + +1. 准备切换任务时，退出当前 Copilot CLI 会话。 +2. 在终端中运行 `copilot --resume`，选择之前的会话。 +3. 在 Copilot CLI 中使用 `/resume`，无需离开 CLI 即可切换会话。 +4. 确认恢复后的会话仍有预期的文件、议题上下文和模型。 + +## 可选：远程继续会话 + +运行 `/remote`，让*同一个会话*继续在本地运行，同时可从网页和 GitHub Copilot 移动应用访问。本机需要保持开机。在浏览器中打开返回的链接，或在 GitHub Copilot 移动应用中访问会话。 + +> [!NOTE] +> `/remote` 不是委派，也不会将执行移到云端。本研讨会不要求使用此功能，可以在熟悉本地工作流程后再尝试。 + +## 总结与后续步骤 + +现在可以暂停并恢复会话，也可以从其他设备查看本地会话。继续学习[第 8 课：从 CLI 创建、审查与合并][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 000000000..6861a4855 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "第 8 课 - 从 CLI 创建、审查与合并" +description: "检查最终差异，使用 /pr create 创建拉取请求，处理反馈，并通过 /pr agentmerge 合并。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +完成开发流程，无需切换到桌面界面。 + +本课将： + +- 最后检查一次已更改的文件。 +- 从当前分支创建拉取请求。 +- 审查拉取请求并处理反馈。 +- 使用 `/pr agentmerge` 验证并合并拉取请求。 + +## 创建、审查与合并 + +1. 运行 `/diff`，最后检查一次已更改的文件。 +2. 让 Copilot 从当前分支创建拉取请求，或运行 `/pr create`。 +3. 打开侧面板的 **Pull requests** 选项卡，检查标题、描述、文件和状态检查。 +4. 处理可执行的反馈，在浏览器中检查结果，并回复更改内容。 +5. 拉取请求准备就绪后，运行 `/pr agentmerge`，让它验证拉取请求，并在完成所需确认且检查通过后合并。 + +## 总结与后续步骤 + +已经在不离开终端的情况下创建、审查并合并拉取请求。继续学习[第 9 课：对工作流程有把握后再委派工作][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 000000000..583a538b2 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "第 9 课 - 对工作流程有把握后再委派工作" +description: "将 Space Quiz 的新功能交给 /delegate，在任务运行时继续工作，并从 CLI 查看云会话进度。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +已经交付一个功能，现在知道什么样的结果才是合格的。此时值得让一个全新的想法与当前工作并行运行，而不是占据当前会话。本课将委派**可分享的任务报告**功能，把一次已完成的答题结果变成玩家可以发布的卡片。 + +本课将： + +- 使用 `/delegate` 委派新功能。 +- 在委派任务运行时继续在主会话中工作。 +- 接受委派结果之前先比较。 + +> [!NOTE] +> `/delegate` 和云会话需要符合条件的付费 Copilot 计划。Business 和 Enterprise 的访问权限可能还需要管理员启用。 + +## 委派新功能 + +运行 `/delegate`，委派以下任务： + +```plaintext +Delegate this: add a shareable mission report to the space quiz. At the end of a run, generate a compact summary card with the score, a rank title based on the percentage, and the slowest question. Add a Copy result button that puts a short plain-text version on the clipboard. Keep it in the single index.html with no dependencies, keep it keyboard accessible, and report back with what changed. +``` + +1. 在委派任务运行时，继续在主会话中工作。 +2. 接受结果之前，将委派结果与当前会话进行比较。 +3. 对于范围更大、说明清晰的议题，启动**云会话**，并从 CLI 查看进度。 + +## 总结与后续步骤 + +已经委派完整功能并审查结果。继续学习[第 10 课：回顾与后续步骤][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md new file mode 100644 index 000000000..2ff229046 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/index.md @@ -0,0 +1,52 @@ +--- +title: "GitHub Copilot CLI 入门" +description: "通过构建并交付 Space Quiz，在引导下探索以终端为中心的 GitHub Copilot CLI 工作流。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop + - cli +--- + +通过适合初学者的动手实践探索 GitHub Copilot CLI。从空文件夹构建色彩丰富的 Space Quiz，学习以终端为中心的工作流：在向 Git 写入任何内容之前构建并审查差异，并行运行会话，先规划再编辑，然后在不离开 shell 的情况下创建并合并拉取请求。 + +本研讨会约需 60 到 90 分钟。项目只有一个 HTML 文件，没有运行时依赖项，因此可以专注于学习 CLI 及其智能体工作流。 + +> [!NOTE] +> 本研讨会由 [James Montemagno][james] 创建，改编自 [First Steps with GitHub Copilot][source-lab]。原始内容采用 [MIT 许可证][source-license]。 + +## 课程 + +| 课程 | 主题 | 实践内容 | +| ------ | ----- | ---------------- | +| [0. 先决条件与设置][lesson-0] | 设置 | 确认先决条件，安装 Copilot CLI，登录并选择模型 | +| [1. 构建测验][lesson-1] | 构建 | 从终端构建测验，并做一项范围明确的更改 | +| [2. 记录项目指令][lesson-2] | 指令 | 使用 `/init` 生成并调整智能体指令 | +| [3. 发布项目][lesson-3] | 发布 | 通过提示词或手动完成初始化、提交和发布 | +| [4. 并行处理议题][lesson-4] | 实现 | 创建待办事项，将议题添加到聊天，用 `/diff` 审查，并在工作树中启动第二个会话 | +| [5. 先规划再编辑][lesson-5] | 规划 | 使用 `/plan` 确定第二个议题的实现方案 | +| [6. 了解智能体能看到什么][lesson-6] | 上下文 | 使用 `/context` 和 `/clear` 检查并重置上下文 | +| [7. 恢复会话与远程访问][lesson-7] | 恢复 | 使用 `/resume` 离开并返回会话，还可用 `/remote` 从其他设备查看本地会话 | +| [8. 创建、审查与合并][lesson-8] | 审查 | 使用 `/pr create` 和 `/pr agentmerge` 创建并合并拉取请求 | +| [9. 委派工作][lesson-9] | 委派 | 将新功能交给 `/delegate`，并查看云会话进度 | +| [10. 回顾与后续步骤][lesson-10] | 回顾 | 回顾工作流并继续学习 | + +## 开始学习 + +[从第 0 课“先决条件与设置”开始][lesson-0]。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/0-prerequisites/ +[lesson-1]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/1-build/ +[lesson-2]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/2-project-instructions/ +[lesson-3]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/3-publish/ +[lesson-4]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/4-issues-and-sessions/ +[lesson-5]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/5-plan-mode/ +[lesson-6]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/6-context/ +[lesson-7]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/7-resume-and-remote/ +[lesson-8]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/8-pull-request/ +[lesson-9]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/9-delegate/ +[lesson-10]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/10-review/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/index.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/index.md new file mode 100644 index 000000000..6985ffc05 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/index.md @@ -0,0 +1,36 @@ +--- +title: "入门体验" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +入门体验研讨会提供引导式介绍，无需现有应用程序或详细的开发场景即可探索 GitHub Copilot。每个研讨会都从小项目开始，在实际使用中介绍产品，并带着项目完成整个工作流。 + +所有研讨会都从空文件夹构建同一个 Space Quiz，可以选择想学习的工具，也可以完成多个研讨会，对比不同工具的工作方式。 + +> [!NOTE] +> 这些研讨会由 [James Montemagno][james] 创建，改编自 [First Steps with GitHub Copilot][source-lab]，原始内容采用 [MIT 许可证][source-license]。 + +## 研讨会 + +### [GitHub Copilot app 导览][copilot-app] + +从空文件夹构建色彩丰富的 Space Quiz，完成整个开发流程：创建、优化、测试、记录项目指令、发布、规划工作、实现议题、审查并合并拉取请求、自动化重复任务，以及探索 Canvas 扩展。 + +### [GitHub Copilot CLI 入门][copilot-cli] + +学习以终端为中心的工作流：在向 Git 写入任何内容之前构建并审查差异，在工作树中并行运行会话，先规划再编辑，管理上下文，然后在不离开 shell 的情况下创建、合并和委派工作。 + +### [Visual Studio Code 入门][vscode] + +使用以编辑器为中心的工作流：在工作区中构建，通过集成浏览器优化元素，检查上下文，在向 Git 写入之前测试，先规划再编辑，并让 GitHub 工具处理议题、拉取请求和云会话，全程无需离开 VS Code。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[copilot-app]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/ +[copilot-cli]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[vscode]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md new file mode 100644 index 000000000..28c0c812f --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "第 0 课 - 先决条件与设置" +description: "确认研讨会的先决条件，验证 VS Code 中的 Copilot Chat，添加 GitHub Pull Requests and Issues 扩展，并选择模型。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +让 Copilot 进入编辑器。VS Code 自带 Copilot，因此无需为聊天功能额外安装软件。添加 GitHub 扩展，然后打开空文件夹。 + +本课将： + +- 确认研讨会的先决条件。 +- 确认 Copilot Chat 在 VS Code 中能正常响应。 +- 安装 GitHub Pull Requests and Issues 扩展。 +- 打开空项目文件夹，并选择模型。 + +## 先决条件 + +需要具备： + +- GitHub 账户。[创建 GitHub 账户][github-signup]，或使用现有账户。 +- 有效的 Copilot 计划。[启用 Copilot Free 或付费 Copilot 计划][copilot-plans]。如果组织已提供 Copilot 访问权限，使用对应账户。 +- [Visual Studio Code][vscode]。 +- 已安装 [Git][git]。在终端中运行 `git --version` 验证。 + +## 设置 VS Code + +1. 安装 [VS Code][vscode] 并登录 GitHub。Copilot 和 Copilot Chat 已内置，因此从标题栏打开 **Chat** 视图，确认它能正常响应。 +2. 打开 **Extensions** 视图，安装官方 [GitHub Pull Requests and Issues][pr-extension] 扩展，让议题和拉取请求显示在侧边栏中。 +3. 创建名为 `space-quiz` 的空文件夹，然后选择 **File** > **Open Folder** 并打开它。 +4. 使用 **Chat** 视图中的模型选择器，按下一节的优先顺序选择模型。 + +## 选择模型 + +选择第一个可用选项： + +1. **GPT-6-Luna**（推荐）。 +2. **Auto**，作为兼顾各方面的备选。 +3. [当前可用模型列表][active-models]中的任意模型。 + +模型是否可用取决于订阅计划、组织策略和产品版本。 + +## 总结与后续步骤 + +VS Code 已准备就绪，具备 Copilot Chat、GitHub 扩展和空的 `space-quiz` 文件夹。继续学习[第 1 课：在工作区中构建][next-lesson]。 + +[github-signup]: https://github.com/signup +[copilot-plans]: https://github.com/features/copilot/plans +[vscode]: https://code.visualstudio.com/ +[git]: https://git-scm.com/downloads +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 000000000..ca3c8e73c --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "第 1 课 - 在工作区中构建" +description: "在 VS Code 中构建 Space Quiz，在集成浏览器中预览，并优化选中的元素。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +将编辑器、聊天、文件和预览放在一起。构建测验，在集成浏览器中答题，然后将特定元素直接交给聊天，进行范围明确的更改。 + +本课将： + +- 在单个 `index.html` 中构建测验。 +- 在集成浏览器中预览测验。 +- 在浏览器中选择并优化元素。 + +## 构建测验 + +在 Copilot Chat 中发送以下提示词： + +```plaintext +Create a colorful, accessible space exploration quiz with 10 questions in a single index.html. Add a progress bar, score counter, animated correct and incorrect feedback, and a results screen. Use no server or dependencies. Open it in the VS Code integrated browser. +``` + +1. 在编辑器中审查生成的文件。 +2. 打开集成浏览器，尝试回答几道题。 +3. 随时打开 **Source Control**，查看已更改的文件和差异。 + +## 选择并优化元素 + +集成浏览器可以将特定元素直接交给聊天，无需再描述具体指的是哪个按钮。 + +1. 在集成浏览器中打开测验后，从浏览器工具栏启动元素选择。 +2. 选择答案按钮，将该元素附加到下一条聊天消息。 +3. 发送以下提示词，并观察预览重新加载： + + ```plaintext + Using the selected element, make the answer buttons feel more tactile: add a subtle press state, a clearer focus ring for keyboard users, and a smoother transition into the correct and incorrect colors. Change nothing else. + ``` + +4. 保留更改之前，先在 **Source Control** 中查看差异。 +5. 按 Tab 在答案间移动，确认焦点轮廓可见。 + +## 总结与后续步骤 + +已经在不离开编辑器的情况下构建、预览并优化测验。继续学习[第 2 课：记录项目指令][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/10-review.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/10-review.md new file mode 100644 index 000000000..2d65ab9b1 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "第 10 课 - 回顾与后续步骤" +description: "回顾 VS Code 工作流，并查找继续学习的资源。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +已经完成以编辑器为中心的工作流：在编辑器中构建、记录指令、在集成浏览器中测试、先规划再编辑、通过 GitHub 工具合并，并将下一个想法委派给云会话。 + +## 已完成的内容 + +已经： + +- 确认 Copilot Chat 能正常工作，并添加 GitHub Pull Requests and Issues 扩展。 +- 构建测验，并在集成浏览器中优化选中的元素。 +- 使用 `/init` 生成 `.github/copilot-instructions.md`。 +- 检查聊天上下文，并在向 Git 写入任何内容之前进行冒烟测试。 +- 通过 **Source Control** 和 Copilot 起草的提交消息发布项目。 +- 在任何编辑之前，用 Plan 模式规划功能。 +- 启用 GitHub MCP，并从聊天中创建议题。 +- 从 VS Code 创建、审查并合并拉取请求。 +- 将功能委派给云会话。 + +## 继续探索 + +- [了解 VS Code 中的 Copilot，包括聊天、智能体模式和编辑器功能][copilot-vscode]。 +- [使用 GitHub Pull Requests 扩展在侧边栏中管理议题和拉取请求][pr-extension]。 +- [通过 VS Code 中的 MCP 服务器添加智能体可调用的工具][mcp-servers]。 +- [使用自定义指令让 Copilot 了解项目规则][custom-instructions]。 +- [安装 Git][git]。 +- [比较 Copilot 计划][copilot-plans]。 + +通过 [GitHub Copilot app 入门研讨会][first-steps-app]或 [GitHub Copilot CLI 入门研讨会][first-steps-cli]，用另一种工作方式完成同一个 Space Quiz。如果已准备好使用完整应用程序和团队待办事项探索更深入的场景，继续学习[真实场景 VS Code 研讨会][real-world-vscode]。 + +[copilot-vscode]: https://code.visualstudio.com/docs/copilot/overview +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[custom-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[git]: https://git-scm.com/downloads +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[real-world-vscode]: /zh-cn/learning-hub/copilot-workshops/vscode/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md new file mode 100644 index 000000000..71ab5ff6d --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "第 2 课 - 记录项目指令" +description: "在 Copilot Chat 中运行 /init，为 Space Quiz 生成 .github/copilot-instructions.md，然后进行调整。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +工作区中已有可正常运行的测验，现在生成描述真实项目的存储库自定义指令。Copilot 会在每次聊天请求时读取这些指令。 + +本课将： + +- 使用 `/init` 生成存储库自定义指令。 +- 保存之前先审查 `.github/copilot-instructions.md`。 +- 精简并个性化调整指令。 + +## 使用 `/init` 记录规则 + +1. 在 Copilot Chat 中运行 `/init`。 +2. 保存生成的 `.github/copilot-instructions.md` 文件之前先审查。 +3. 只保留符合项目的指导：单文件、无依赖项、支持无障碍，并经过浏览器测试。 + +![VS Code 示意图，编辑器已打开 .github/copilot-instructions.md，Explorer 中选中了该文件，旁边是 index.html。文件标题为 Space Quiz，列出规则：单个 index.html，无依赖项且无需构建步骤；所有答案都可通过键盘访问；两种主题都遵循 prefers-color-scheme。“How I like code written”部分要求使用小函数、提前返回、不使用晦涩的单行代码，并且只为真正出人意料的内容添加注释。](/images/learning-hub/copilot-workshops/first-steps-vscode-instructions.svg) + +存储库自定义指令位于 `.github/copilot-instructions.md`，适用于每次聊天请求。 + +> [!IMPORTANT] +> **顺序很重要** +> +> `/init` 读取的是工作区当前的状态。在测验构建完成后运行，才能生成基于真实代码的指令。 + +## 按自己的习惯调整 + +指令文件不只是用来记录项目事实。还可以添加原本会在每个提示词中重复的具体要求，例如代码风格、命名约定、应避免的库，以及希望添加多少注释。后续每个会话都会先读取这个文件，再读取提示词。 + +## 总结与后续步骤 + +工作区现在有了基于真实代码的自定义指令。继续学习[第 3 课：检查上下文并测试][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 000000000..ce2288877 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "第 3 课 - 检查上下文并测试" +description: "检查 Copilot Chat 请求附带的上下文，然后在向 Git 写入任何内容之前运行浏览器级冒烟测试。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +发布任何内容之前，先检查 Copilot 能看到什么，并确认测验能正常工作。 + +本课将： + +- 检查聊天请求包含的上下文。 +- 运行浏览器级冒烟测试。 +- 在开始使用 Git 之前修复失败项。 + +## 从右下角检查上下文 + +VS Code 在 Copilot Chat 输入框的右下角显示当前上下文。 + +1. 打开聊天输入框**右下角**的上下文指示器。 +2. 检查请求中包含的文件、自定义指令和符号。 +3. 继续之前，移除无关上下文，或附加测验文件。 + +## 在向 Git 写入之前构建并测试 + +初始化存储库或提交任何内容之前，使用集成浏览器和冒烟测试提示词： + +```plaintext +Run a browser-level smoke test for the quiz. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. 运行冒烟测试，并检查集成浏览器。 +2. 修复所有失败项，并重新测试，直到全部通过。 +3. 只有构建和测试通过后，才开始使用 Git。 + +## 总结与后续步骤 + +已经确认 Copilot 能看到的内容，并在发布之前测试了测验。继续学习[第 4 课：发布项目][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md new file mode 100644 index 000000000..b0c1ea740 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "第 4 课 - 发布项目" +description: "完全通过 VS Code 内置的 Source Control 集成，将 Space Quiz 初始化、提交并发布。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +完全通过内置的 Git 集成，将经过测试的测验发布到 GitHub，并让 Copilot 根据实际更改起草提交消息。 + +本课将： + +- 从 **Source Control** 初始化存储库。 +- 根据已暂存的差异生成提交消息。 +- 将分支发布到新的公开 GitHub 存储库。 + +## 初始化、提交与发布 + +1. 打开 **Source Control**，选择 **Initialize Repository**。 +2. 暂存文件。 +3. 选择提交消息框中的 **sparkle pencil** 图标，让 Copilot 根据已暂存的差异编写消息。阅读消息，纠正所有不准确的内容，然后提交。 +4. 选择 **Publish Branch**，在 GitHub 上创建公开的 `space-quiz` 存储库。 +5. 确认 GitHub 上存在经过测试的文件。 + +![VS Code 的 Source Control 视图示意图。Changes 列表显示 index.html 和 .github/copilot-instructions.md。提交消息框中的闪光按钮旁有标注 Copilot wrote your message，消息为 Add per-question timer to the quiz。Commit 按钮下方高亮显示 Create Pull Request 按钮，旁注为 Commit first, then this button appears right inside Source Control。](/images/learning-hub/copilot-workshops/first-steps-vscode-commit.svg) + +闪光按钮根据已暂存的差异起草提交消息。提交后，**Source Control** 还会提供创建拉取请求的选项。 + +## 总结与后续步骤 + +经过测试的测验现在已发布到 GitHub。继续学习[第 5 课：先规划再编辑][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md new file mode 100644 index 000000000..5d688b743 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "第 5 课 - 先规划再编辑" +description: "将 Copilot Chat 切换到 Plan 模式，先调查工作区并提出方案，再编辑文件。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +Plan 模式会调查工作区并编写实现计划，而不改动文件。 + +本课将： + +- 将 Copilot Chat 从 Agent 切换到 Plan。 +- 审查并完善提出的计划。 +- 切回 Agent 来实现计划。 + +## 在任何编辑之前确定方案 + +1. 打开 Copilot Chat，使用输入框上方的**模式下拉菜单**。 +2. 从 **Agent** 切换到 **Plan**。 +3. 用以下提示词描述下一个功能，让 Copilot 调查工作区： + + ```plaintext + Plan how to add a review screen that shows every question with the answer I chose. Investigate the existing quiz, list the changes you would make, call out accessibility and single-file risks, and stop before editing. + ``` + +4. 阅读计划并要求调整，然后切回 **Agent** 来实现。 + +> [!TIP] +> **何时值得使用计划模式** +> +> 对于含糊不清、涉及多个方面或难以撤销的任务，使用 Plan 模式。修正不当方案成本最低的时机，是第一次编辑之前。 + +## 总结与后续步骤 + +已经在 Copilot 编写任何代码之前共同确定了方案。继续学习[第 6 课：为 Copilot 配备 GitHub 工具][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md new file mode 100644 index 000000000..859866950 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "第 6 课 - 为 Copilot 配备 GitHub 工具" +description: "让 Copilot 处理议题和拉取请求之前，先在 VS Code 中启用并审查 GitHub MCP 服务器。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +让 Copilot 创建议题或处理拉取请求*之前*，先启用 GitHub MCP 服务器。有了这些工具，Copilot 就能直接从聊天中读取和写入 GitHub 数据。 + +本课将： + +- 启用 GitHub MCP 服务器。 +- 审查服务器请求的工具和权限。 +- 确认聊天中可以使用 GitHub 工具。 + +## 启用 GitHub MCP + +1. 打开 VS Code **Settings**，如果当前版本包含内置的 **GitHub MCP** 服务器，就启用它。 +2. 否则，通过 [MCP 服务器配置流程][mcp-servers]安装可信的 GitHub MCP 服务器。 +3. 批准之前，审查服务器请求的工具和权限。 +4. 确认 GitHub 工具出现在 Copilot Chat 的工具选择器中。 + +## 总结与后续步骤 + +Copilot 现在具备了可操作 GitHub 的工具。继续学习[第 7 课：规划并实现议题][next-lesson]。 + +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 000000000..80f85c0f2 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "第 7 课 - 规划并实现议题" +description: "使用 GitHub 工具从 Copilot Chat 创建议题，然后在新的聊天会话中实现其中一个。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +启用 GitHub MCP 后，Copilot 可以直接从聊天中创建并读取议题。 + +本课将： + +- 从 Copilot Chat 创建三个范围明确的 GitHub 议题。 +- 为其中一个议题启动新的聊天会话。 +- 实现并验证该议题。 + +## 创建议题 + +发送以下提示词： + +```plaintext +Review the space quiz and suggest three focused feature ideas. Use the GitHub tools to create a separate issue for each with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +## 实现一个议题 + +1. 打开活动栏中的 **GitHub** 视图，检查新建的议题。 +2. 选择一个议题，然后选择 Copilot Chat 中的 **+** 按钮，为它启动新会话。 +3. 使用 Agent 模式实现该议题，同时保留原始会话以供比较。 +4. 创建拉取请求之前，运行[第 3 课][lesson-3]中的集成浏览器冒烟测试。 + +## 总结与后续步骤 + +已经创建议题，并在独立会话中实现其中一个。继续学习[第 8 课：审查与合并][next-lesson]。 + +[lesson-3]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 000000000..e9b020b21 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "第 8 课 - 审查与合并" +description: "从 Source Control 创建拉取请求，请求 Copilot 代码审查，使用 GitHub 工具处理反馈，然后合并。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +使用 VS Code 中的 GitHub 工具检查、审查并合并新工作。 + +本课将： + +- 提交新工作，并从 **Source Control** 创建拉取请求。 +- 请求 Copilot 代码审查。 +- 使用 GitHub MCP 处理反馈和失败的检查。 +- 合并拉取请求。 + +## 检查、审查与合并 + +1. 打开 **Source Control**，在创建任何内容之前先检查已更改的文件和差异。 +2. 提交新工作，再次使用 **sparkle** 按钮编写消息。 +3. 选择 **Source Control** 中出现的 **Create Pull Request** 按钮。Copilot 会根据提交起草标题和描述，比从零开始请求生成的拉取请求更完善。 +4. 在创建拉取请求时、从 VS Code 的 **GitHub** 视图，或在 GitHub 上请求 **Copilot code review**。 +5. 让 Copilot 通过 GitHub MCP 检查拉取请求、解决合并冲突、处理审查评论，并调查失败的 CI 检查。 +6. 在集成浏览器中重新测试，审查每项拟议的更改，并更新分支。 +7. 检查和审查完成后，让智能体合并，或通过 GitHub 集成合并。 + +> [!NOTE] +> 也可以随时在聊天中让 Copilot 执行这些操作。值得先学会 **Source Control** 路径，因为它能根据实际更改编写提交和拉取请求文本。 + +## 总结与后续步骤 + +已经在不离开 VS Code 的情况下审查并合并拉取请求。继续学习[第 9 课：将下一个想法交给云会话][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md new file mode 100644 index 000000000..73ff25df7 --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "第 9 课 - 将下一个想法交给云会话" +description: "将 Copilot Chat 的运行环境从 Local 切换到 Cloud，委派一个可独立完成、以拉取请求交付的功能。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +--- + +已经在本地完成整个流程，现在知道什么样的结果才是合格的。此时正适合让任务独立运行。Copilot Chat 可以将运行环境从本机切换到 GitHub。 + +本课将： + +- 将 Copilot Chat 的运行环境从 **Local** 切换到 **Cloud**。 +- 委派一个可独立完成、验收标准明确的功能。 +- 审查产生的拉取请求。 + +> [!NOTE] +> 云会话需要符合条件的付费 Copilot 计划。Business 和 Enterprise 的访问权限可能还需要管理员启用。 + +## 委派到云端 + +![VS Code 中 Copilot Chat 的示意图，Harness 选择器已打开。Copilot 下选择了 Cloud 而不是 Local，还列出 Claude、Codex 等其他运行环境。上方添加三个新配色主题的请求显示 Working in the cloud，并提供在 GitHub 上查看会话进度的链接。](/images/learning-hub/copilot-workshops/first-steps-vscode-cloud-harness.svg) + +**Harness** 选择器列出在 **Local** 或 **Cloud** 运行的 Copilot，以及其他运行环境。切换到 **Cloud** 后，下一个请求将在 GitHub 上运行，而不是在本机运行。 + +1. 在 Copilot Chat 中打开 **Harness** 选择器，将 Copilot 从 **Local** 切换到 **Cloud**。 +2. 启动新会话，提供一个可独立完成、验收标准明确的功能： + + ```plaintext + Add a theme picker to the space quiz with three named themes: Deep Space, Launch Pad, and Lunar. Persist the choice in localStorage, keep everything in the single index.html with no dependencies, keep contrast accessible in every theme, and open a pull request when the tests pass. + ``` + +3. 合上笔记本电脑。工作会继续在 GitHub 上运行，并以拉取请求交付。 +4. 像审查自己编写的拉取请求一样，认真审查这个拉取请求。 + +> [!TIP] +> **委派能够描述清楚的任务** +> +> 云会话在任务说明明确时效果更好。如果还写不出验收标准，任务就还没准备好离开本机。 + +## 总结与后续步骤 + +已经将功能委派给云会话，并审查了结果。继续学习[第 10 课：回顾与后续步骤][next-lesson]。 + +[next-lesson]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/index.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/index.md new file mode 100644 index 000000000..885e49acd --- /dev/null +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/first-steps/vscode/index.md @@ -0,0 +1,51 @@ +--- +title: "Visual Studio Code 入门" +description: "通过构建、测试并交付 Space Quiz，在引导下探索 Visual Studio Code 中的 GitHub Copilot。" +authors: + - GitHub Copilot Learning Hub Team +lastUpdated: 2026-10-05 +tags: + - workshop +--- + +通过适合初学者的动手实践探索 Visual Studio Code 中的 GitHub Copilot。从空文件夹构建色彩丰富的 Space Quiz，学习以编辑器为中心的工作流：在工作区中构建，检查上下文，在向 Git 写入任何内容之前测试，先规划再编辑，并让 GitHub 工具处理议题和拉取请求，全程无需离开 VS Code。 + +本研讨会约需 60 到 90 分钟。项目只有一个 HTML 文件，没有运行时依赖项，因此可以专注于学习编辑器中的 Copilot。 + +> [!NOTE] +> 本研讨会由 [James Montemagno][james] 创建，改编自 [First Steps with GitHub Copilot][source-lab]。原始内容采用 [MIT 许可证][source-license]。 + +## 课程 + +| 课程 | 主题 | 实践内容 | +| ------ | ----- | ---------------- | +| [0. 先决条件与设置][lesson-0] | 设置 | 确认先决条件，添加 GitHub 扩展，打开文件夹，并选择模型 | +| [1. 在工作区中构建][lesson-1] | 构建 | 构建测验，在集成浏览器中预览，并优化选中的元素 | +| [2. 记录项目指令][lesson-2] | 指令 | 使用 `/init` 生成并调整 `.github/copilot-instructions.md` | +| [3. 检查上下文并测试][lesson-3] | 测试 | 检查聊天上下文，并在向 Git 写入任何内容之前运行冒烟测试 | +| [4. 发布项目][lesson-4] | 发布 | 通过 Source Control 初始化、提交和发布 | +| [5. 先规划再编辑][lesson-5] | 规划 | 使用 Plan 模式确定下一个功能的实现方案 | +| [6. 为 Copilot 配备 GitHub 工具][lesson-6] | 工具 | 启用并审查 GitHub MCP 服务器 | +| [7. 规划并实现议题][lesson-7] | 实现 | 使用 GitHub 工具创建议题，并在新会话中实现其中一个 | +| [8. 审查与合并][lesson-8] | 审查 | 从 Source Control 创建拉取请求，请求审查，并合并 | +| [9. 交给云会话][lesson-9] | 委派 | 将运行环境切换为 Cloud，并委派新功能 | +| [10. 回顾与后续步骤][lesson-10] | 回顾 | 回顾工作流并继续学习 | + +## 开始学习 + +[从第 0 课“先决条件与设置”开始][lesson-0]。 + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/0-prerequisites/ +[lesson-1]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/1-build-and-polish/ +[lesson-2]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/2-project-instructions/ +[lesson-3]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/3-inspect-and-test/ +[lesson-4]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/4-publish/ +[lesson-5]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/5-plan-mode/ +[lesson-6]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/6-github-mcp/ +[lesson-7]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/7-issues-and-sessions/ +[lesson-8]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/8-review-and-merge/ +[lesson-9]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/9-cloud-session/ +[lesson-10]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/10-review/ diff --git a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/index.md b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/index.md index 10ef1c78d..b9f850dfc 100644 --- a/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/index.md +++ b/website/src/content/docs/zh-cn/learning-hub/copilot-workshops/index.md @@ -1,41 +1,44 @@ --- -title: "动手实践 GitHub Copilot 智能体" +title: "GitHub Copilot 研讨会" authors: - GitHub Copilot Learning Hub Team -lastUpdated: 2026-08-03 +lastUpdated: 2026-10-05 +tags: + - workshop --- -GitHub Copilot 最近新增的功能为开发人员提供了贯穿整个软件开发生命周期 (SDLC) 的强大工具，包括处理 GitHub 上的议题和拉取请求、与外部服务交互，当然也包括创建代码。本实验将探索这些功能，并通过实际用例和技巧，帮助你充分发挥这些工具的价值。 +根据学习目标和期望的深入程度选择研讨会。**入门体验**提供 GitHub Copilot 引导式介绍，**真实场景开发**则使用完整应用程序和团队待办事项，练习面向生产环境的工作流。 + +## 入门体验 + +从聚焦的引导式体验开始，无需现有代码库即可了解 GitHub Copilot 产品的主要功能。 + +### [GitHub Copilot app 导览][first-steps-app] + +从空文件夹创建 Space Quiz，将其发布到 GitHub，实现一个议题，完成 Copilot 审查，安排自动化任务，并探索 Canvas 工作流。 + +### [GitHub Copilot CLI 入门][first-steps-cli] + +在终端中构建同一个 Space Quiz，审查差异，在工作树中并行运行会话，先规划再编辑，并在不离开 shell 的情况下创建、合并和委派拉取请求。 + +### [Visual Studio Code 入门][first-steps-vscode] + +在 VS Code 中构建 Space Quiz，在集成浏览器中测试，通过源代码管理发布，使用 GitHub 工具处理议题和拉取请求，并将工作交给云会话。 + +## 真实场景开发 + +使用 Tailspin Toys 应用程序及其待办事项，在真实的软件开发生命周期中练习 GitHub Copilot。选择工作环境，然后规划、构建、测试、审查并交付有意义的更改。 + +### [浏览真实场景开发研讨会][real-world-development] + +可以选择 GitHub Copilot CLI、GitHub Copilot app、GitHub Copilot 云智能体或 Visual Studio Code。 > [!CAUTION] -> GitHub Copilot 具有概率性而非确定性，因此生成的具体代码、修改的文件等可能有所不同。因此，实验中的屏幕截图和代码片段可能与你的实际体验略有差异。这是正常现象，也是使用此类工具的固有特点。 +> GitHub Copilot 具有概率性而非确定性，因此具体代码和修改的文件可能与示例不同。出现细微差异属于正常现象。 > -> 如果内容似乎有误或无法正常运行，请向导师求助！ +> 如果在讲师指导的研讨会中遇到无法正常运行的内容，请向导师求助。 -## 选择操作环境 - -无论在哪里工作，都可以使用 GitHub Copilot。请选择符合开发方式的操作环境，并基于共用的 Tailspin Toys 待办事项完成相应练习。每种操作环境都有专属的设置步骤，可以直接开始所选路径。 - -### 🖥️ [VS Code](/zh-cn/learning-hub/copilot-workshops/vscode/) - -在 **Visual Studio Code** 和 GitHub Codespaces 中使用 GitHub Copilot。无需离开熟悉的编辑器，即可使用 Copilot Chat 智能体模式、MCP 服务器和自定义智能体。如果希望将 AI 辅助直接融入 IDE，这是理想选择。 - -### 💻 [Copilot CLI](/zh-cn/learning-hub/copilot-workshops/cli/) - -**GitHub Copilot CLI** 是一款在终端中运行的智能体助手。安装后，可以连接 MCP 服务器、使用计划模式生成代码，还能完全通过命令行构建自己的技能、自定义智能体和斜杠命令。 - -### 🤖 [Copilot App](/zh-cn/learning-hub/copilot-workshops/app/) - -**GitHub Copilot app** 是一款基于 Copilot CLI 构建的桌面应用。它支持并行运行智能体会话、切换会话模式、在画布上协作，以及直接管理 GitHub 议题和拉取请求。其中包括 **Agent Merge**，可引导拉取请求完成变基、处理审查反馈、修复 CI 问题并最终合并。 - -### ☁️ [Copilot Cloud Agent](/zh-cn/learning-hub/copilot-workshops/cloud/) - -**Copilot 云智能体** 是一位异步结对编程伙伴，可在后台处理 GitHub 议题。可以分配工作、通过自定义智能体提供指导、在智能体仪表板中监控进度，并审查它创建的拉取请求。 - -## 场景 - -你是 Tailspin Toys 的新开发人员。这是一家虚构公司，为开发人员主题的桌游提供众筹服务，而这可是一个巨大的市场！团队的待办事项已经创建为 GitHub 议题，等待处理。其中既有筛选和分页等功能开发，也有无障碍支持和编码标准等质量改进。你将通过迭代完成这些任务，同时探索网站和 Copilot 的功能。 - -## 开始使用 - -选择上述操作环境即可开始。每种环境都会先引导完成所需设置，让你立即开始构建。 \ No newline at end of file +[first-steps-app]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-app/ +[first-steps-cli]: /zh-cn/learning-hub/copilot-workshops/first-steps/copilot-cli/ +[first-steps-vscode]: /zh-cn/learning-hub/copilot-workshops/first-steps/vscode/ +[real-world-development]: /zh-cn/learning-hub/copilot-workshops/real-world-development/ diff --git a/website/src/lib/learning-hub-routes.ts b/website/src/lib/learning-hub-routes.ts index 651585736..e51ba64c7 100644 --- a/website/src/lib/learning-hub-routes.ts +++ b/website/src/lib/learning-hub-routes.ts @@ -38,13 +38,14 @@ export function splitLocale(id: string): { locale?: Locale; path: string } { export { LOCALES }; /** - * Only the `copilot-workshops/app` track currently has mirrored translations - * under `website/src/content/docs//…`; every other Learning Hub article, - * workshop track, and cookbook recipe is English-only. The language selector - * is only useful (and only correct) on pages that actually have a translation - * to switch to, so callers gate it on this check rather than showing it site-wide. + * The workshop landing page, real-world app track, and First Steps tracks have + * mirrored translations. The language selector is only useful on pages with + * an actual translation, so callers gate it rather than showing it site-wide. */ -const TRANSLATED_PREFIX = "learning-hub/copilot-workshops/app"; +const TRANSLATED_PREFIXES = [ + "learning-hub/copilot-workshops/app", + "learning-hub/copilot-workshops/first-steps", +]; const TRANSLATED_WORKSHOP_LANDING = "learning-hub/copilot-workshops"; /** Whether the (unprefixed, English) article id has mirrored translations. */ @@ -52,8 +53,9 @@ export function hasTranslations(englishId: string): boolean { const normalized = normalizeLearningHubPath(englishId); return ( normalized === TRANSLATED_WORKSHOP_LANDING || - normalized === TRANSLATED_PREFIX || - normalized.startsWith(`${TRANSLATED_PREFIX}/`) + TRANSLATED_PREFIXES.some( + (prefix) => normalized === prefix || normalized.startsWith(`${prefix}/`), + ) ); } diff --git a/website/src/pages/learning-hub/index.astro b/website/src/pages/learning-hub/index.astro index 5a590bdfa..8daf19c65 100644 --- a/website/src/pages/learning-hub/index.astro +++ b/website/src/pages/learning-hub/index.astro @@ -11,19 +11,26 @@ const docs = await getCollection("docs"); // Keep each workshop landing page explicit so the Learning Hub can surface tracks // whose entries live below a nested directory, including translated app tracks. -const WORKSHOP_LANDING_IDS = [ +// Normalize the /index suffix because the glob loader may omit it from entry IDs. +const WORKSHOP_LANDING_IDS = new Set([ "learning-hub/cli-for-beginners/index", "learning-hub/copilot-workshops/index", "learning-hub/copilot-workshops/app/index", + "learning-hub/copilot-workshops/app/8-foundry-canvas/index", "learning-hub/copilot-workshops/cli/index", "learning-hub/copilot-workshops/cloud/index", "learning-hub/copilot-workshops/vscode/index", -]; + "learning-hub/copilot-workshops/first-steps/index", + "learning-hub/copilot-workshops/first-steps/copilot-app/index", + "learning-hub/copilot-workshops/first-steps/copilot-cli/index", + "learning-hub/copilot-workshops/first-steps/vscode/index", + "learning-hub/copilot-workshops/real-world-development/index", +].map(normalizeLearningHubPath)); const articles: LearningHubArticle[] = docs .filter( (entry) => /^learning-hub\/[^/]+$/.test(entry.id) || - WORKSHOP_LANDING_IDS.includes(entry.id), + WORKSHOP_LANDING_IDS.has(normalizeLearningHubPath(entry.id)), ) .filter((entry) => entry.id !== "learning-hub/index") .map((entry) => ({