From 2fb1f3cd293cc999293308d1ff17ee82ebca3c5c Mon Sep 17 00:00:00 2001 From: James Montemagno Date: Mon, 5 Oct 2026 12:36:41 -0700 Subject: [PATCH] docs: localize First Steps workshops in five languages Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- docs/es-es/README.md | 6 +- docs/es-es/first-steps/README.md | 35 ++ .../copilot-app/0-prerequisites.md | 78 +++ .../copilot-app/1-create-workspace.md | 34 ++ .../first-steps/copilot-app/10-remote.md | 33 ++ .../first-steps/copilot-app/11-canvas.md | 50 ++ .../first-steps/copilot-app/12-review.md | 51 ++ .../copilot-app/2-build-and-polish.md | 62 +++ .../copilot-app/3-inspect-and-test.md | 52 ++ .../copilot-app/4-project-instructions.md | 36 ++ .../first-steps/copilot-app/5-publish.md | 38 ++ .../copilot-app/6-issues-and-sessions.md | 62 +++ .../first-steps/copilot-app/7-plan-mode.md | 40 ++ .../first-steps/copilot-app/8-review-loop.md | 44 ++ .../first-steps/copilot-app/9-automations.md | 42 ++ docs/es-es/first-steps/copilot-app/README.md | 54 ++ .../copilot-cli/0-prerequisites.md | 72 +++ docs/es-es/first-steps/copilot-cli/1-build.md | 43 ++ .../first-steps/copilot-cli/10-review.md | 46 ++ .../copilot-cli/2-project-instructions.md | 36 ++ .../first-steps/copilot-cli/3-publish.md | 50 ++ .../copilot-cli/4-issues-and-sessions.md | 60 +++ .../first-steps/copilot-cli/5-plan-mode.md | 39 ++ .../first-steps/copilot-cli/6-context.md | 32 ++ .../copilot-cli/7-resume-and-remote.md | 35 ++ .../first-steps/copilot-cli/8-pull-request.md | 30 ++ .../first-steps/copilot-cli/9-delegate.md | 36 ++ docs/es-es/first-steps/copilot-cli/README.md | 50 ++ .../first-steps/vscode/0-prerequisites.md | 54 ++ .../first-steps/vscode/1-build-and-polish.md | 48 ++ docs/es-es/first-steps/vscode/10-review.md | 44 ++ .../vscode/2-project-instructions.md | 40 ++ .../first-steps/vscode/3-inspect-and-test.md | 41 ++ docs/es-es/first-steps/vscode/4-publish.md | 33 ++ docs/es-es/first-steps/vscode/5-plan-mode.md | 38 ++ docs/es-es/first-steps/vscode/6-github-mcp.md | 29 ++ .../vscode/7-issues-and-sessions.md | 37 ++ .../first-steps/vscode/8-review-and-merge.md | 35 ++ .../first-steps/vscode/9-cloud-session.md | 45 ++ docs/es-es/first-steps/vscode/README.md | 50 ++ docs/ja-jp/README.md | 6 +- docs/ja-jp/first-steps/README.md | 35 ++ .../copilot-app/0-prerequisites.md | 78 +++ .../copilot-app/1-create-workspace.md | 34 ++ .../first-steps/copilot-app/10-remote.md | 33 ++ .../first-steps/copilot-app/11-canvas.md | 50 ++ .../first-steps/copilot-app/12-review.md | 51 ++ .../copilot-app/2-build-and-polish.md | 62 +++ .../copilot-app/3-inspect-and-test.md | 52 ++ .../copilot-app/4-project-instructions.md | 36 ++ .../first-steps/copilot-app/5-publish.md | 38 ++ .../copilot-app/6-issues-and-sessions.md | 62 +++ .../first-steps/copilot-app/7-plan-mode.md | 40 ++ .../first-steps/copilot-app/8-review-loop.md | 44 ++ .../first-steps/copilot-app/9-automations.md | 42 ++ docs/ja-jp/first-steps/copilot-app/README.md | 54 ++ .../copilot-cli/0-prerequisites.md | 72 +++ docs/ja-jp/first-steps/copilot-cli/1-build.md | 43 ++ .../first-steps/copilot-cli/10-review.md | 46 ++ .../copilot-cli/2-project-instructions.md | 36 ++ .../first-steps/copilot-cli/3-publish.md | 50 ++ .../copilot-cli/4-issues-and-sessions.md | 60 +++ .../first-steps/copilot-cli/5-plan-mode.md | 39 ++ .../first-steps/copilot-cli/6-context.md | 32 ++ .../copilot-cli/7-resume-and-remote.md | 35 ++ .../first-steps/copilot-cli/8-pull-request.md | 30 ++ .../first-steps/copilot-cli/9-delegate.md | 36 ++ docs/ja-jp/first-steps/copilot-cli/README.md | 50 ++ .../first-steps/vscode/0-prerequisites.md | 54 ++ .../first-steps/vscode/1-build-and-polish.md | 48 ++ docs/ja-jp/first-steps/vscode/10-review.md | 44 ++ .../vscode/2-project-instructions.md | 40 ++ .../first-steps/vscode/3-inspect-and-test.md | 41 ++ docs/ja-jp/first-steps/vscode/4-publish.md | 33 ++ docs/ja-jp/first-steps/vscode/5-plan-mode.md | 38 ++ docs/ja-jp/first-steps/vscode/6-github-mcp.md | 29 ++ .../vscode/7-issues-and-sessions.md | 37 ++ .../first-steps/vscode/8-review-and-merge.md | 35 ++ .../first-steps/vscode/9-cloud-session.md | 45 ++ docs/ja-jp/first-steps/vscode/README.md | 50 ++ docs/ko-kr/README.md | 6 +- docs/ko-kr/first-steps/README.md | 35 ++ .../copilot-app/0-prerequisites.md | 78 +++ .../copilot-app/1-create-workspace.md | 34 ++ .../first-steps/copilot-app/10-remote.md | 33 ++ .../first-steps/copilot-app/11-canvas.md | 50 ++ .../first-steps/copilot-app/12-review.md | 51 ++ .../copilot-app/2-build-and-polish.md | 62 +++ .../copilot-app/3-inspect-and-test.md | 52 ++ .../copilot-app/4-project-instructions.md | 36 ++ .../first-steps/copilot-app/5-publish.md | 38 ++ .../copilot-app/6-issues-and-sessions.md | 62 +++ .../first-steps/copilot-app/7-plan-mode.md | 40 ++ .../first-steps/copilot-app/8-review-loop.md | 44 ++ .../first-steps/copilot-app/9-automations.md | 42 ++ docs/ko-kr/first-steps/copilot-app/README.md | 54 ++ .../copilot-cli/0-prerequisites.md | 72 +++ docs/ko-kr/first-steps/copilot-cli/1-build.md | 43 ++ .../first-steps/copilot-cli/10-review.md | 46 ++ .../copilot-cli/2-project-instructions.md | 36 ++ .../first-steps/copilot-cli/3-publish.md | 50 ++ .../copilot-cli/4-issues-and-sessions.md | 60 +++ .../first-steps/copilot-cli/5-plan-mode.md | 39 ++ .../first-steps/copilot-cli/6-context.md | 32 ++ .../copilot-cli/7-resume-and-remote.md | 35 ++ .../first-steps/copilot-cli/8-pull-request.md | 30 ++ .../first-steps/copilot-cli/9-delegate.md | 36 ++ docs/ko-kr/first-steps/copilot-cli/README.md | 50 ++ .../first-steps/vscode/0-prerequisites.md | 54 ++ .../first-steps/vscode/1-build-and-polish.md | 48 ++ docs/ko-kr/first-steps/vscode/10-review.md | 44 ++ .../vscode/2-project-instructions.md | 40 ++ .../first-steps/vscode/3-inspect-and-test.md | 41 ++ docs/ko-kr/first-steps/vscode/4-publish.md | 33 ++ docs/ko-kr/first-steps/vscode/5-plan-mode.md | 38 ++ docs/ko-kr/first-steps/vscode/6-github-mcp.md | 29 ++ .../vscode/7-issues-and-sessions.md | 37 ++ .../first-steps/vscode/8-review-and-merge.md | 35 ++ .../first-steps/vscode/9-cloud-session.md | 45 ++ docs/ko-kr/first-steps/vscode/README.md | 50 ++ docs/pt-br/README.md | 6 +- docs/pt-br/first-steps/README.md | 35 ++ .../copilot-app/0-prerequisites.md | 78 +++ .../copilot-app/1-create-workspace.md | 34 ++ .../first-steps/copilot-app/10-remote.md | 33 ++ .../first-steps/copilot-app/11-canvas.md | 50 ++ .../first-steps/copilot-app/12-review.md | 51 ++ .../copilot-app/2-build-and-polish.md | 62 +++ .../copilot-app/3-inspect-and-test.md | 52 ++ .../copilot-app/4-project-instructions.md | 36 ++ .../first-steps/copilot-app/5-publish.md | 38 ++ .../copilot-app/6-issues-and-sessions.md | 62 +++ .../first-steps/copilot-app/7-plan-mode.md | 40 ++ .../first-steps/copilot-app/8-review-loop.md | 44 ++ .../first-steps/copilot-app/9-automations.md | 42 ++ docs/pt-br/first-steps/copilot-app/README.md | 54 ++ .../copilot-cli/0-prerequisites.md | 72 +++ docs/pt-br/first-steps/copilot-cli/1-build.md | 43 ++ .../first-steps/copilot-cli/10-review.md | 46 ++ .../copilot-cli/2-project-instructions.md | 36 ++ .../first-steps/copilot-cli/3-publish.md | 50 ++ .../copilot-cli/4-issues-and-sessions.md | 60 +++ .../first-steps/copilot-cli/5-plan-mode.md | 39 ++ .../first-steps/copilot-cli/6-context.md | 32 ++ .../copilot-cli/7-resume-and-remote.md | 35 ++ .../first-steps/copilot-cli/8-pull-request.md | 30 ++ .../first-steps/copilot-cli/9-delegate.md | 36 ++ docs/pt-br/first-steps/copilot-cli/README.md | 50 ++ .../first-steps/vscode/0-prerequisites.md | 54 ++ .../first-steps/vscode/1-build-and-polish.md | 48 ++ docs/pt-br/first-steps/vscode/10-review.md | 44 ++ .../vscode/2-project-instructions.md | 40 ++ .../first-steps/vscode/3-inspect-and-test.md | 41 ++ docs/pt-br/first-steps/vscode/4-publish.md | 33 ++ docs/pt-br/first-steps/vscode/5-plan-mode.md | 38 ++ docs/pt-br/first-steps/vscode/6-github-mcp.md | 29 ++ .../vscode/7-issues-and-sessions.md | 37 ++ .../first-steps/vscode/8-review-and-merge.md | 35 ++ .../first-steps/vscode/9-cloud-session.md | 45 ++ docs/pt-br/first-steps/vscode/README.md | 50 ++ docs/zh-cn/README.md | 6 +- docs/zh-cn/first-steps/README.md | 35 ++ .../copilot-app/0-prerequisites.md | 78 +++ .../copilot-app/1-create-workspace.md | 34 ++ .../first-steps/copilot-app/10-remote.md | 33 ++ .../first-steps/copilot-app/11-canvas.md | 50 ++ .../first-steps/copilot-app/12-review.md | 51 ++ .../copilot-app/2-build-and-polish.md | 62 +++ .../copilot-app/3-inspect-and-test.md | 52 ++ .../copilot-app/4-project-instructions.md | 36 ++ .../first-steps/copilot-app/5-publish.md | 38 ++ .../copilot-app/6-issues-and-sessions.md | 62 +++ .../first-steps/copilot-app/7-plan-mode.md | 40 ++ .../first-steps/copilot-app/8-review-loop.md | 44 ++ .../first-steps/copilot-app/9-automations.md | 42 ++ docs/zh-cn/first-steps/copilot-app/README.md | 54 ++ .../copilot-cli/0-prerequisites.md | 72 +++ docs/zh-cn/first-steps/copilot-cli/1-build.md | 43 ++ .../first-steps/copilot-cli/10-review.md | 46 ++ .../copilot-cli/2-project-instructions.md | 36 ++ .../first-steps/copilot-cli/3-publish.md | 50 ++ .../copilot-cli/4-issues-and-sessions.md | 60 +++ .../first-steps/copilot-cli/5-plan-mode.md | 39 ++ .../first-steps/copilot-cli/6-context.md | 32 ++ .../copilot-cli/7-resume-and-remote.md | 35 ++ .../first-steps/copilot-cli/8-pull-request.md | 30 ++ .../first-steps/copilot-cli/9-delegate.md | 36 ++ docs/zh-cn/first-steps/copilot-cli/README.md | 50 ++ .../first-steps/vscode/0-prerequisites.md | 54 ++ .../first-steps/vscode/1-build-and-polish.md | 48 ++ docs/zh-cn/first-steps/vscode/10-review.md | 44 ++ .../vscode/2-project-instructions.md | 40 ++ .../first-steps/vscode/3-inspect-and-test.md | 41 ++ docs/zh-cn/first-steps/vscode/4-publish.md | 33 ++ docs/zh-cn/first-steps/vscode/5-plan-mode.md | 38 ++ docs/zh-cn/first-steps/vscode/6-github-mcp.md | 29 ++ .../vscode/7-issues-and-sessions.md | 37 ++ .../first-steps/vscode/8-review-and-merge.md | 35 ++ .../first-steps/vscode/9-cloud-session.md | 45 ++ docs/zh-cn/first-steps/vscode/README.md | 50 ++ website/astro.config.mjs | 475 ++++++++++++++++-- 201 files changed, 9121 insertions(+), 54 deletions(-) create mode 100644 docs/es-es/first-steps/README.md create mode 100644 docs/es-es/first-steps/copilot-app/0-prerequisites.md create mode 100644 docs/es-es/first-steps/copilot-app/1-create-workspace.md create mode 100644 docs/es-es/first-steps/copilot-app/10-remote.md create mode 100644 docs/es-es/first-steps/copilot-app/11-canvas.md create mode 100644 docs/es-es/first-steps/copilot-app/12-review.md create mode 100644 docs/es-es/first-steps/copilot-app/2-build-and-polish.md create mode 100644 docs/es-es/first-steps/copilot-app/3-inspect-and-test.md create mode 100644 docs/es-es/first-steps/copilot-app/4-project-instructions.md create mode 100644 docs/es-es/first-steps/copilot-app/5-publish.md create mode 100644 docs/es-es/first-steps/copilot-app/6-issues-and-sessions.md create mode 100644 docs/es-es/first-steps/copilot-app/7-plan-mode.md create mode 100644 docs/es-es/first-steps/copilot-app/8-review-loop.md create mode 100644 docs/es-es/first-steps/copilot-app/9-automations.md create mode 100644 docs/es-es/first-steps/copilot-app/README.md create mode 100644 docs/es-es/first-steps/copilot-cli/0-prerequisites.md create mode 100644 docs/es-es/first-steps/copilot-cli/1-build.md create mode 100644 docs/es-es/first-steps/copilot-cli/10-review.md create mode 100644 docs/es-es/first-steps/copilot-cli/2-project-instructions.md create mode 100644 docs/es-es/first-steps/copilot-cli/3-publish.md create mode 100644 docs/es-es/first-steps/copilot-cli/4-issues-and-sessions.md create mode 100644 docs/es-es/first-steps/copilot-cli/5-plan-mode.md create mode 100644 docs/es-es/first-steps/copilot-cli/6-context.md create mode 100644 docs/es-es/first-steps/copilot-cli/7-resume-and-remote.md create mode 100644 docs/es-es/first-steps/copilot-cli/8-pull-request.md create mode 100644 docs/es-es/first-steps/copilot-cli/9-delegate.md create mode 100644 docs/es-es/first-steps/copilot-cli/README.md create mode 100644 docs/es-es/first-steps/vscode/0-prerequisites.md create mode 100644 docs/es-es/first-steps/vscode/1-build-and-polish.md create mode 100644 docs/es-es/first-steps/vscode/10-review.md create mode 100644 docs/es-es/first-steps/vscode/2-project-instructions.md create mode 100644 docs/es-es/first-steps/vscode/3-inspect-and-test.md create mode 100644 docs/es-es/first-steps/vscode/4-publish.md create mode 100644 docs/es-es/first-steps/vscode/5-plan-mode.md create mode 100644 docs/es-es/first-steps/vscode/6-github-mcp.md create mode 100644 docs/es-es/first-steps/vscode/7-issues-and-sessions.md create mode 100644 docs/es-es/first-steps/vscode/8-review-and-merge.md create mode 100644 docs/es-es/first-steps/vscode/9-cloud-session.md create mode 100644 docs/es-es/first-steps/vscode/README.md create mode 100644 docs/ja-jp/first-steps/README.md create mode 100644 docs/ja-jp/first-steps/copilot-app/0-prerequisites.md create mode 100644 docs/ja-jp/first-steps/copilot-app/1-create-workspace.md create mode 100644 docs/ja-jp/first-steps/copilot-app/10-remote.md create mode 100644 docs/ja-jp/first-steps/copilot-app/11-canvas.md create mode 100644 docs/ja-jp/first-steps/copilot-app/12-review.md create mode 100644 docs/ja-jp/first-steps/copilot-app/2-build-and-polish.md create mode 100644 docs/ja-jp/first-steps/copilot-app/3-inspect-and-test.md create mode 100644 docs/ja-jp/first-steps/copilot-app/4-project-instructions.md create mode 100644 docs/ja-jp/first-steps/copilot-app/5-publish.md create mode 100644 docs/ja-jp/first-steps/copilot-app/6-issues-and-sessions.md create mode 100644 docs/ja-jp/first-steps/copilot-app/7-plan-mode.md create mode 100644 docs/ja-jp/first-steps/copilot-app/8-review-loop.md create mode 100644 docs/ja-jp/first-steps/copilot-app/9-automations.md create mode 100644 docs/ja-jp/first-steps/copilot-app/README.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/0-prerequisites.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/1-build.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/10-review.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/2-project-instructions.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/3-publish.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/4-issues-and-sessions.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/5-plan-mode.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/6-context.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/7-resume-and-remote.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/8-pull-request.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/9-delegate.md create mode 100644 docs/ja-jp/first-steps/copilot-cli/README.md create mode 100644 docs/ja-jp/first-steps/vscode/0-prerequisites.md create mode 100644 docs/ja-jp/first-steps/vscode/1-build-and-polish.md create mode 100644 docs/ja-jp/first-steps/vscode/10-review.md create mode 100644 docs/ja-jp/first-steps/vscode/2-project-instructions.md create mode 100644 docs/ja-jp/first-steps/vscode/3-inspect-and-test.md create mode 100644 docs/ja-jp/first-steps/vscode/4-publish.md create mode 100644 docs/ja-jp/first-steps/vscode/5-plan-mode.md create mode 100644 docs/ja-jp/first-steps/vscode/6-github-mcp.md create mode 100644 docs/ja-jp/first-steps/vscode/7-issues-and-sessions.md create mode 100644 docs/ja-jp/first-steps/vscode/8-review-and-merge.md create mode 100644 docs/ja-jp/first-steps/vscode/9-cloud-session.md create mode 100644 docs/ja-jp/first-steps/vscode/README.md create mode 100644 docs/ko-kr/first-steps/README.md create mode 100644 docs/ko-kr/first-steps/copilot-app/0-prerequisites.md create mode 100644 docs/ko-kr/first-steps/copilot-app/1-create-workspace.md create mode 100644 docs/ko-kr/first-steps/copilot-app/10-remote.md create mode 100644 docs/ko-kr/first-steps/copilot-app/11-canvas.md create mode 100644 docs/ko-kr/first-steps/copilot-app/12-review.md create mode 100644 docs/ko-kr/first-steps/copilot-app/2-build-and-polish.md create mode 100644 docs/ko-kr/first-steps/copilot-app/3-inspect-and-test.md create mode 100644 docs/ko-kr/first-steps/copilot-app/4-project-instructions.md create mode 100644 docs/ko-kr/first-steps/copilot-app/5-publish.md create mode 100644 docs/ko-kr/first-steps/copilot-app/6-issues-and-sessions.md create mode 100644 docs/ko-kr/first-steps/copilot-app/7-plan-mode.md create mode 100644 docs/ko-kr/first-steps/copilot-app/8-review-loop.md create mode 100644 docs/ko-kr/first-steps/copilot-app/9-automations.md create mode 100644 docs/ko-kr/first-steps/copilot-app/README.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/0-prerequisites.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/1-build.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/10-review.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/2-project-instructions.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/3-publish.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/4-issues-and-sessions.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/5-plan-mode.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/6-context.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/7-resume-and-remote.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/8-pull-request.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/9-delegate.md create mode 100644 docs/ko-kr/first-steps/copilot-cli/README.md create mode 100644 docs/ko-kr/first-steps/vscode/0-prerequisites.md create mode 100644 docs/ko-kr/first-steps/vscode/1-build-and-polish.md create mode 100644 docs/ko-kr/first-steps/vscode/10-review.md create mode 100644 docs/ko-kr/first-steps/vscode/2-project-instructions.md create mode 100644 docs/ko-kr/first-steps/vscode/3-inspect-and-test.md create mode 100644 docs/ko-kr/first-steps/vscode/4-publish.md create mode 100644 docs/ko-kr/first-steps/vscode/5-plan-mode.md create mode 100644 docs/ko-kr/first-steps/vscode/6-github-mcp.md create mode 100644 docs/ko-kr/first-steps/vscode/7-issues-and-sessions.md create mode 100644 docs/ko-kr/first-steps/vscode/8-review-and-merge.md create mode 100644 docs/ko-kr/first-steps/vscode/9-cloud-session.md create mode 100644 docs/ko-kr/first-steps/vscode/README.md create mode 100644 docs/pt-br/first-steps/README.md create mode 100644 docs/pt-br/first-steps/copilot-app/0-prerequisites.md create mode 100644 docs/pt-br/first-steps/copilot-app/1-create-workspace.md create mode 100644 docs/pt-br/first-steps/copilot-app/10-remote.md create mode 100644 docs/pt-br/first-steps/copilot-app/11-canvas.md create mode 100644 docs/pt-br/first-steps/copilot-app/12-review.md create mode 100644 docs/pt-br/first-steps/copilot-app/2-build-and-polish.md create mode 100644 docs/pt-br/first-steps/copilot-app/3-inspect-and-test.md create mode 100644 docs/pt-br/first-steps/copilot-app/4-project-instructions.md create mode 100644 docs/pt-br/first-steps/copilot-app/5-publish.md create mode 100644 docs/pt-br/first-steps/copilot-app/6-issues-and-sessions.md create mode 100644 docs/pt-br/first-steps/copilot-app/7-plan-mode.md create mode 100644 docs/pt-br/first-steps/copilot-app/8-review-loop.md create mode 100644 docs/pt-br/first-steps/copilot-app/9-automations.md create mode 100644 docs/pt-br/first-steps/copilot-app/README.md create mode 100644 docs/pt-br/first-steps/copilot-cli/0-prerequisites.md create mode 100644 docs/pt-br/first-steps/copilot-cli/1-build.md create mode 100644 docs/pt-br/first-steps/copilot-cli/10-review.md create mode 100644 docs/pt-br/first-steps/copilot-cli/2-project-instructions.md create mode 100644 docs/pt-br/first-steps/copilot-cli/3-publish.md create mode 100644 docs/pt-br/first-steps/copilot-cli/4-issues-and-sessions.md create mode 100644 docs/pt-br/first-steps/copilot-cli/5-plan-mode.md create mode 100644 docs/pt-br/first-steps/copilot-cli/6-context.md create mode 100644 docs/pt-br/first-steps/copilot-cli/7-resume-and-remote.md create mode 100644 docs/pt-br/first-steps/copilot-cli/8-pull-request.md create mode 100644 docs/pt-br/first-steps/copilot-cli/9-delegate.md create mode 100644 docs/pt-br/first-steps/copilot-cli/README.md create mode 100644 docs/pt-br/first-steps/vscode/0-prerequisites.md create mode 100644 docs/pt-br/first-steps/vscode/1-build-and-polish.md create mode 100644 docs/pt-br/first-steps/vscode/10-review.md create mode 100644 docs/pt-br/first-steps/vscode/2-project-instructions.md create mode 100644 docs/pt-br/first-steps/vscode/3-inspect-and-test.md create mode 100644 docs/pt-br/first-steps/vscode/4-publish.md create mode 100644 docs/pt-br/first-steps/vscode/5-plan-mode.md create mode 100644 docs/pt-br/first-steps/vscode/6-github-mcp.md create mode 100644 docs/pt-br/first-steps/vscode/7-issues-and-sessions.md create mode 100644 docs/pt-br/first-steps/vscode/8-review-and-merge.md create mode 100644 docs/pt-br/first-steps/vscode/9-cloud-session.md create mode 100644 docs/pt-br/first-steps/vscode/README.md create mode 100644 docs/zh-cn/first-steps/README.md create mode 100644 docs/zh-cn/first-steps/copilot-app/0-prerequisites.md create mode 100644 docs/zh-cn/first-steps/copilot-app/1-create-workspace.md create mode 100644 docs/zh-cn/first-steps/copilot-app/10-remote.md create mode 100644 docs/zh-cn/first-steps/copilot-app/11-canvas.md create mode 100644 docs/zh-cn/first-steps/copilot-app/12-review.md create mode 100644 docs/zh-cn/first-steps/copilot-app/2-build-and-polish.md create mode 100644 docs/zh-cn/first-steps/copilot-app/3-inspect-and-test.md create mode 100644 docs/zh-cn/first-steps/copilot-app/4-project-instructions.md create mode 100644 docs/zh-cn/first-steps/copilot-app/5-publish.md create mode 100644 docs/zh-cn/first-steps/copilot-app/6-issues-and-sessions.md create mode 100644 docs/zh-cn/first-steps/copilot-app/7-plan-mode.md create mode 100644 docs/zh-cn/first-steps/copilot-app/8-review-loop.md create mode 100644 docs/zh-cn/first-steps/copilot-app/9-automations.md create mode 100644 docs/zh-cn/first-steps/copilot-app/README.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/0-prerequisites.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/1-build.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/10-review.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/2-project-instructions.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/3-publish.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/4-issues-and-sessions.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/5-plan-mode.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/6-context.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/7-resume-and-remote.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/8-pull-request.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/9-delegate.md create mode 100644 docs/zh-cn/first-steps/copilot-cli/README.md create mode 100644 docs/zh-cn/first-steps/vscode/0-prerequisites.md create mode 100644 docs/zh-cn/first-steps/vscode/1-build-and-polish.md create mode 100644 docs/zh-cn/first-steps/vscode/10-review.md create mode 100644 docs/zh-cn/first-steps/vscode/2-project-instructions.md create mode 100644 docs/zh-cn/first-steps/vscode/3-inspect-and-test.md create mode 100644 docs/zh-cn/first-steps/vscode/4-publish.md create mode 100644 docs/zh-cn/first-steps/vscode/5-plan-mode.md create mode 100644 docs/zh-cn/first-steps/vscode/6-github-mcp.md create mode 100644 docs/zh-cn/first-steps/vscode/7-issues-and-sessions.md create mode 100644 docs/zh-cn/first-steps/vscode/8-review-and-merge.md create mode 100644 docs/zh-cn/first-steps/vscode/9-cloud-session.md create mode 100644 docs/zh-cn/first-steps/vscode/README.md diff --git a/docs/es-es/README.md b/docs/es-es/README.md index 1b079d78..9c134a42 100644 --- a/docs/es-es/README.md +++ b/docs/es-es/README.md @@ -37,7 +37,7 @@ Elige entre GitHub Copilot CLI, la aplicación GitHub Copilot, el agente de GitH > > Si algo parece no funcionar correctamente durante un taller dirigido por un instructor, pide ayuda a un mentor. -[first-steps-app]: ../first-steps/copilot-app/ -[first-steps-cli]: ../first-steps/copilot-cli/ -[first-steps-vscode]: ../first-steps/vscode/ +[first-steps-app]: first-steps/copilot-app/ +[first-steps-cli]: first-steps/copilot-cli/ +[first-steps-vscode]: first-steps/vscode/ [real-world-development]: ../real-world-development/ diff --git a/docs/es-es/first-steps/README.md b/docs/es-es/first-steps/README.md new file mode 100644 index 00000000..98b94ebb --- /dev/null +++ b/docs/es-es/first-steps/README.md @@ -0,0 +1,35 @@ +--- +title: "Primeros pasos" +slug: es-es/first-steps +authors: + - geektrainer +lastUpdated: 2026-09-28 +--- + +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]: copilot-app/ +[copilot-cli]: copilot-cli/ +[vscode]: vscode/ diff --git a/docs/es-es/first-steps/copilot-app/0-prerequisites.md b/docs/es-es/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 00000000..18923aa8 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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]: ../1-create-workspace/ diff --git a/docs/es-es/first-steps/copilot-app/1-create-workspace.md b/docs/es-es/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 00000000..8bd2b858 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../0-prerequisites/#elige-un-modelo +[next-lesson]: ../2-build-and-polish/ diff --git a/docs/es-es/first-steps/copilot-app/10-remote.md b/docs/es-es/first-steps/copilot-app/10-remote.md new file mode 100644 index 00000000..79bb0d53 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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]: ../11-canvas/ diff --git a/docs/es-es/first-steps/copilot-app/11-canvas.md b/docs/es-es/first-steps/copilot-app/11-canvas.md new file mode 100644 index 00000000..9472a6a0 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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/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]: ../12-review/ diff --git a/docs/es-es/first-steps/copilot-app/12-review.md b/docs/es-es/first-steps/copilot-app/12-review.md new file mode 100644 index 00000000..25c19b39 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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]: ../../copilot-cli/ +[first-steps-vscode]: ../../vscode/ +[real-world-app]: ../../../real-world-development/app/ diff --git a/docs/es-es/first-steps/copilot-app/2-build-and-polish.md b/docs/es-es/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 00000000..d2128e50 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-inspect-and-test/ diff --git a/docs/es-es/first-steps/copilot-app/3-inspect-and-test.md b/docs/es-es/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 00000000..b6f271ed --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../4-project-instructions/ diff --git a/docs/es-es/first-steps/copilot-app/4-project-instructions.md b/docs/es-es/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 00000000..bb9b90ee --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../5-publish/ diff --git a/docs/es-es/first-steps/copilot-app/5-publish.md b/docs/es-es/first-steps/copilot-app/5-publish.md new file mode 100644 index 00000000..13c8a805 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-issues-and-sessions/ diff --git a/docs/es-es/first-steps/copilot-app/6-issues-and-sessions.md b/docs/es-es/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 00000000..4abf0327 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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/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/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]: ../7-plan-mode/ diff --git a/docs/es-es/first-steps/copilot-app/7-plan-mode.md b/docs/es-es/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 00000000..5ce6c9a7 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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]: ../8-review-loop/ diff --git a/docs/es-es/first-steps/copilot-app/8-review-loop.md b/docs/es-es/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 00000000..4c407dda --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-automations/ diff --git a/docs/es-es/first-steps/copilot-app/9-automations.md b/docs/es-es/first-steps/copilot-app/9-automations.md new file mode 100644 index 00000000..19c8d10b --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../10-remote/ diff --git a/docs/es-es/first-steps/copilot-app/README.md b/docs/es-es/first-steps/copilot-app/README.md new file mode 100644 index 00000000..748fd97c --- /dev/null +++ b/docs/es-es/first-steps/copilot-app/README.md @@ -0,0 +1,54 @@ +--- +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." +slug: es-es/first-steps/copilot-app +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +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]: 0-prerequisites/ +[lesson-1]: 1-create-workspace/ +[lesson-2]: 2-build-and-polish/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-project-instructions/ +[lesson-5]: 5-publish/ +[lesson-6]: 6-issues-and-sessions/ +[lesson-7]: 7-plan-mode/ +[lesson-8]: 8-review-loop/ +[lesson-9]: 9-automations/ +[lesson-10]: 10-remote/ +[lesson-11]: 11-canvas/ +[lesson-12]: 12-review/ diff --git a/docs/es-es/first-steps/copilot-cli/0-prerequisites.md b/docs/es-es/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 00000000..264c4703 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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/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]: ../1-build/ diff --git a/docs/es-es/first-steps/copilot-cli/1-build.md b/docs/es-es/first-steps/copilot-cli/1-build.md new file mode 100644 index 00000000..452bdf98 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../2-project-instructions/ diff --git a/docs/es-es/first-steps/copilot-cli/10-review.md b/docs/es-es/first-steps/copilot-cli/10-review.md new file mode 100644 index 00000000..d7817628 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../../copilot-app/ +[first-steps-vscode]: ../../vscode/ +[real-world-cli]: ../../../real-world-development/cli/ diff --git a/docs/es-es/first-steps/copilot-cli/2-project-instructions.md b/docs/es-es/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 00000000..142acc3f --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-publish/ diff --git a/docs/es-es/first-steps/copilot-cli/3-publish.md b/docs/es-es/first-steps/copilot-cli/3-publish.md new file mode 100644 index 00000000..66c53699 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../4-issues-and-sessions/ diff --git a/docs/es-es/first-steps/copilot-cli/4-issues-and-sessions.md b/docs/es-es/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 00000000..22858d16 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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/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]: ../5-plan-mode/ diff --git a/docs/es-es/first-steps/copilot-cli/5-plan-mode.md b/docs/es-es/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 00000000..46811406 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-context/ diff --git a/docs/es-es/first-steps/copilot-cli/6-context.md b/docs/es-es/first-steps/copilot-cli/6-context.md new file mode 100644 index 00000000..c830b658 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../7-resume-and-remote/ diff --git a/docs/es-es/first-steps/copilot-cli/7-resume-and-remote.md b/docs/es-es/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 00000000..018c9de6 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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]: ../8-pull-request/ diff --git a/docs/es-es/first-steps/copilot-cli/8-pull-request.md b/docs/es-es/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 00000000..568ee33f --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-delegate/ diff --git a/docs/es-es/first-steps/copilot-cli/9-delegate.md b/docs/es-es/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 00000000..c65cebe1 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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]: ../10-review/ diff --git a/docs/es-es/first-steps/copilot-cli/README.md b/docs/es-es/first-steps/copilot-cli/README.md new file mode 100644 index 00000000..c2edd45e --- /dev/null +++ b/docs/es-es/first-steps/copilot-cli/README.md @@ -0,0 +1,50 @@ +--- +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." +slug: es-es/first-steps/copilot-cli +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +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]: 0-prerequisites/ +[lesson-1]: 1-build/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-publish/ +[lesson-4]: 4-issues-and-sessions/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-context/ +[lesson-7]: 7-resume-and-remote/ +[lesson-8]: 8-pull-request/ +[lesson-9]: 9-delegate/ +[lesson-10]: 10-review/ diff --git a/docs/es-es/first-steps/vscode/0-prerequisites.md b/docs/es-es/first-steps/vscode/0-prerequisites.md new file mode 100644 index 00000000..f68aa251 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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]: ../1-build-and-polish/ diff --git a/docs/es-es/first-steps/vscode/1-build-and-polish.md b/docs/es-es/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 00000000..1e1c5f66 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../2-project-instructions/ diff --git a/docs/es-es/first-steps/vscode/10-review.md b/docs/es-es/first-steps/vscode/10-review.md new file mode 100644 index 00000000..6915cb52 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../../copilot-app/ +[first-steps-cli]: ../../copilot-cli/ +[real-world-vscode]: ../../../real-world-development/vscode/ diff --git a/docs/es-es/first-steps/vscode/2-project-instructions.md b/docs/es-es/first-steps/vscode/2-project-instructions.md new file mode 100644 index 00000000..4e518f71 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../3-inspect-and-test/ diff --git a/docs/es-es/first-steps/vscode/3-inspect-and-test.md b/docs/es-es/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 00000000..90d43826 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../4-publish/ diff --git a/docs/es-es/first-steps/vscode/4-publish.md b/docs/es-es/first-steps/vscode/4-publish.md new file mode 100644 index 00000000..4959f2ec --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../5-plan-mode/ diff --git a/docs/es-es/first-steps/vscode/5-plan-mode.md b/docs/es-es/first-steps/vscode/5-plan-mode.md new file mode 100644 index 00000000..77589cb8 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-github-mcp/ diff --git a/docs/es-es/first-steps/vscode/6-github-mcp.md b/docs/es-es/first-steps/vscode/6-github-mcp.md new file mode 100644 index 00000000..f691ab0a --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../7-issues-and-sessions/ diff --git a/docs/es-es/first-steps/vscode/7-issues-and-sessions.md b/docs/es-es/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 00000000..08eefb34 --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-inspect-and-test/ +[next-lesson]: ../8-review-and-merge/ diff --git a/docs/es-es/first-steps/vscode/8-review-and-merge.md b/docs/es-es/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 00000000..f7cc5a8a --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-cloud-session/ diff --git a/docs/es-es/first-steps/vscode/9-cloud-session.md b/docs/es-es/first-steps/vscode/9-cloud-session.md new file mode 100644 index 00000000..d4322a2e --- /dev/null +++ b/docs/es-es/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: + - jamesmontemagno +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/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]: ../10-review/ diff --git a/docs/es-es/first-steps/vscode/README.md b/docs/es-es/first-steps/vscode/README.md new file mode 100644 index 00000000..1269ebfe --- /dev/null +++ b/docs/es-es/first-steps/vscode/README.md @@ -0,0 +1,50 @@ +--- +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." +slug: es-es/first-steps/vscode +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: 0-prerequisites/ +[lesson-1]: 1-build-and-polish/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-publish/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-github-mcp/ +[lesson-7]: 7-issues-and-sessions/ +[lesson-8]: 8-review-and-merge/ +[lesson-9]: 9-cloud-session/ +[lesson-10]: 10-review/ diff --git a/docs/ja-jp/README.md b/docs/ja-jp/README.md index 9cef4061..0ecc9e3c 100644 --- a/docs/ja-jp/README.md +++ b/docs/ja-jp/README.md @@ -37,7 +37,7 @@ GitHub Copilot CLI、GitHub Copilot app、GitHub Copilot cloud agent、Visual St > > 講師が進行するワークショップで正しく動作しない場合は、メンターに相談してください。 -[first-steps-app]: ../first-steps/copilot-app/ -[first-steps-cli]: ../first-steps/copilot-cli/ -[first-steps-vscode]: ../first-steps/vscode/ +[first-steps-app]: first-steps/copilot-app/ +[first-steps-cli]: first-steps/copilot-cli/ +[first-steps-vscode]: first-steps/vscode/ [real-world-development]: ../real-world-development/ diff --git a/docs/ja-jp/first-steps/README.md b/docs/ja-jp/first-steps/README.md new file mode 100644 index 00000000..07dbba9c --- /dev/null +++ b/docs/ja-jp/first-steps/README.md @@ -0,0 +1,35 @@ +--- +title: "はじめの一歩" +slug: ja-jp/first-steps +authors: + - geektrainer +lastUpdated: 2026-09-28 +--- + +「はじめの一歩」のワークショップは、既存のアプリケーションや詳細な開発シナリオを用意せずに 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]: copilot-app/ +[copilot-cli]: copilot-cli/ +[vscode]: vscode/ diff --git a/docs/ja-jp/first-steps/copilot-app/0-prerequisites.md b/docs/ja-jp/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 00000000..3ea76b7b --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "レッスン 0 - 前提条件とセットアップ" +description: "ワークショップの前提条件を確認し、GitHub Copilot app をインストールして、そのワークスペースに慣れます。" +authors: + - jamesmontemagno +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]: ../1-create-workspace/ diff --git a/docs/ja-jp/first-steps/copilot-app/1-create-workspace.md b/docs/ja-jp/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 00000000..3ce357ec --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "レッスン 1 - Space Quiz のワークスペースの作成" +description: "空のフォルダーで、Space Quiz 用のローカルの Interactive セッションを開始します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/first-steps-app-new-session.svg) + +**New** 画面では、最初のプロンプトを入力する前に、フォルダー、モード、エージェントを設定します。Interactive セッションでは、エージェントがプロジェクトを構築する間、作業を指示し、各段階をレビューできます。 + +## まとめと次のステップ + +空の Space Quiz ワークスペースの準備ができました。[レッスン 2: クイズの構築と仕上げ][next-lesson]に進みます。 + +[model-order]: ../0-prerequisites/#モデルを選ぶ +[next-lesson]: ../2-build-and-polish/ diff --git a/docs/ja-jp/first-steps/copilot-app/10-remote.md b/docs/ja-jp/first-steps/copilot-app/10-remote.md new file mode 100644 index 00000000..7bc8c64e --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "レッスン 10 - リモートからセッションを続ける (オプション)" +description: "/remote を使い、コンピューター上で動作し続ける進行中のアプリセッションを、Web または GitHub Copilot mobile app から確認します。" +authors: + - jamesmontemagno +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]: ../11-canvas/ diff --git a/docs/ja-jp/first-steps/copilot-app/11-canvas.md b/docs/ja-jp/first-steps/copilot-app/11-canvas.md new file mode 100644 index 00000000..d9d8b812 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "レッスン 11 - Canvas を試す" +description: "Repository Issues Kanban Canvas をインストールし、Issue カードからセッションを開始します。" +authors: + - jamesmontemagno +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/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]: ../12-review/ diff --git a/docs/ja-jp/first-steps/copilot-app/12-review.md b/docs/ja-jp/first-steps/copilot-app/12-review.md new file mode 100644 index 00000000..3b43184c --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "レッスン 12 - 振り返りと次のステップ" +description: "GitHub Copilot app のワークフローを振り返り、学習を続けるためのリソースを確認します。" +authors: + - jamesmontemagno +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]: ../../copilot-cli/ +[first-steps-vscode]: ../../vscode/ +[real-world-app]: ../../../real-world-development/app/ diff --git a/docs/ja-jp/first-steps/copilot-app/2-build-and-polish.md b/docs/ja-jp/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 00000000..053b2c00 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "レッスン 2 - クイズの構築と仕上げ" +description: "単一ファイルの Space Quiz を構築し、統合ブラウザーと要素ピッカーで改善します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-inspect-and-test/ diff --git a/docs/ja-jp/first-steps/copilot-app/3-inspect-and-test.md b/docs/ja-jp/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 00000000..21c51a16 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "レッスン 3 - セッションの確認とクイズのテスト" +description: "セッションの詳細を読んでエージェントの作業対象を確認し、Git に変更を記録する前にブラウザーレベルのスモークテストを実行します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +セッションで実際に作業を行ったので、確認する内容ができました。エージェントがどこを作業対象にしているかを確認し、その後、統合ブラウザーでクイズを操作してもらいます。意図したことではなく、実際に起きたことを報告してもらいましょう。 + +このレッスンでは、次の内容を学習します。 + +- セッションの詳細パネルを読む。 +- セッションのプロジェクト、パス、ブランチ、変更、コンテキストの使用率を確認する。 +- ブラウザーレベルのスモークテストを実行し、問題があれば修正する。 + +## セッションの詳細を読む + +セッションの詳細は、エージェントが何に取り組んでいるかを正確に示します。このパネルを常に見ている必要はありませんが、予想外の結果が出たときには、どの情報も重要です。 + +![Space Quiz の構築セッションの Copilot app 詳細パネルの図。origin/main を基にした main ブランチ、パス、プロジェクト、セッション名、セッション ID、エージェント、変更された 1 つのファイル、トークン数、27 パーセントのコンテキスト使用率、セッションの費用を表示しています。リモート操作の有効化、名前の変更、インサイトの表示、secret gist としての共有、セッションのアーカイブのオプションもあります。](../../../_images/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]: ../4-project-instructions/ diff --git a/docs/ja-jp/first-steps/copilot-app/4-project-instructions.md b/docs/ja-jp/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 00000000..7a58b88a --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "レッスン 4 - プロジェクトの指示の記録" +description: "/init を実行して完成した Space Quiz を説明するエージェントへの指示を生成し、自分の作業方法に合わせて調整します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +クイズの構築、仕上げ、テストが済んだので、今後のセッションでこのプロジェクトをどう扱うべきかを記録します。どのセッションも作業を始める前にエージェントへの指示を読むため、同じ方針を毎回プロンプトに書く必要がなくなります。 + +このレッスンでは、次の内容を学習します。 + +- `/init` でエージェントへの指示を生成する。 +- 生成されたファイルを受け入れる前にレビューする。 +- 指示を整理し、自分に合わせて調整する。 + +## `/init` でルールを記録する + +1. アプリのセッションで `/init` を実行します。 +2. 生成されたエージェントへの指示ファイルを受け入れる前にレビューします。 +3. このプロジェクトを反映する指示に絞ります。単一ファイルであること、依存関係がないこと、アクセシブルであること、ブラウザーでテストすることが該当します。 + +> [!IMPORTANT] +> **仕上げた後に実行する理由** +> +> `/init` は、現時点のプロジェクトを読み取ります。クイズを構築してテストした後に実行すると、空のフォルダーではなく実際のコードを説明する指示が生成されます。 + +## 自分の作業方法に合わせる + +指示ファイルには、プロジェクトに関する事実だけでなく、毎回プロンプトで繰り返すような具体的な方針も追加します。たとえば、好みのコードの書き方、命名規則、避けたいライブラリ、コメントをどの程度書いてほしいかなどです。今後のすべてのセッションは、プロンプトを読む前にこのファイルを読みます。 + +## まとめと次のステップ + +プロジェクトに、実際のコードに基づくエージェントへの指示が加わりました。[レッスン 5: プロジェクトの公開][next-lesson]に進みます。 + +[next-lesson]: ../5-publish/ diff --git a/docs/ja-jp/first-steps/copilot-app/5-publish.md b/docs/ja-jp/first-steps/copilot-app/5-publish.md new file mode 100644 index 00000000..1e33204a --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "レッスン 5 - プロジェクトの公開" +description: "ローカルで試作した Space Quiz を GitHub のパブリックリポジトリにします。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-issues-and-sessions/ diff --git a/docs/ja-jp/first-steps/copilot-app/6-issues-and-sessions.md b/docs/ja-jp/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 00000000..ff7805f5 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "レッスン 6 - Issue とセッションの活用" +description: "範囲を絞ったバックログを作成し、Issue を選んで分離された worktree で実装し、自分で差分をレビューします。" +authors: + - jamesmontemagno +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/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/first-steps-app-changes-tab.svg) + +**Changes** タブは、セッションが変更したすべてのファイルを一覧にし、差分をインラインで表示します。 + +## まとめと次のステップ + +バックログを作成し、分離されたセッションで 1 つの Issue を実装して、差分をレビューしました。[レッスン 7: 編集前の計画][next-lesson]に進みます。 + +[next-lesson]: ../7-plan-mode/ diff --git a/docs/ja-jp/first-steps/copilot-app/7-plan-mode.md b/docs/ja-jp/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 00000000..47f6e39f --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "レッスン 7 - 編集前の計画" +description: "2 つ目の Issue で Plan モードを使い、ファイルを変更する前にエージェントにプロジェクトを調査し、アプローチを提案してもらいます。" +authors: + - jamesmontemagno +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]: ../8-review-loop/ diff --git a/docs/ja-jp/first-steps/copilot-app/8-review-loop.md b/docs/ja-jp/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 00000000..4f101f12 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "レッスン 8 - Copilot のレビューの流れの完了" +description: "プルリクエストを作成し、Copilot にレビューを依頼して対応すべきフィードバックを修正し、Agent Merge にプルリクエストをマージ可能な状態に保ってもらいます。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +実装した 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]: ../9-automations/ diff --git a/docs/ja-jp/first-steps/copilot-app/9-automations.md b/docs/ja-jp/first-steps/copilot-app/9-automations.md new file mode 100644 index 00000000..340d276a --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "レッスン 9 - Issue のトリアージの自動化" +description: "最近の未解決 Issue を要約する、毎週の自動化を作成して実行します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +自動化を使い、繰り返し行う Issue のトリアージを、スケジュールに従って実行するエージェントのワークフローにします。 + +このレッスンでは、次の内容を学習します。 + +- 毎週実行する自動化を作成する。 +- 自動化を Space Quiz プロジェクトに接続する。 +- 自動化をすぐに実行して結果をレビューする。 + +## 自動化を作成する + +![Copilot app の Automations ビューの図。All、Local、Cloud のフィルター、検索ボックス、Templates と New automation のボタンがあり、space-quiz プロジェクトの毎週の自動化カードとして Issue triage と Accessibility audit の 2 つが表示されています。](../../../_images/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]: ../10-remote/ diff --git a/docs/ja-jp/first-steps/copilot-app/README.md b/docs/ja-jp/first-steps/copilot-app/README.md new file mode 100644 index 00000000..9cbc70ca --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-app/README.md @@ -0,0 +1,54 @@ +--- +title: "GitHub Copilot app を体験する" +description: "Space Quiz を構築して公開しながら、GitHub Copilot app をガイド付きコースで体験します。" +slug: ja-jp/first-steps/copilot-app +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +初心者向けのハンズオンで 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]: 0-prerequisites/ +[lesson-1]: 1-create-workspace/ +[lesson-2]: 2-build-and-polish/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-project-instructions/ +[lesson-5]: 5-publish/ +[lesson-6]: 6-issues-and-sessions/ +[lesson-7]: 7-plan-mode/ +[lesson-8]: 8-review-loop/ +[lesson-9]: 9-automations/ +[lesson-10]: 10-remote/ +[lesson-11]: 11-canvas/ +[lesson-12]: 12-review/ diff --git a/docs/ja-jp/first-steps/copilot-cli/0-prerequisites.md b/docs/ja-jp/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 00000000..bbb1bea3 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "レッスン 0 - 前提条件とセットアップ" +description: "ワークショップの前提条件を確認し、GitHub Copilot CLI をインストールしてサインインし、空のプロジェクトフォルダーでモデルを選びます。" +authors: + - jamesmontemagno +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/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]: ../1-build/ diff --git a/docs/ja-jp/first-steps/copilot-cli/1-build.md b/docs/ja-jp/first-steps/copilot-cli/1-build.md new file mode 100644 index 00000000..50d53fdd --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "レッスン 1 - ターミナルからのクイズの構築" +description: "詳細なリクエストを 1 回送って Space Quiz 全体を Copilot CLI に作成してもらい、その後、範囲を絞った改善を 1 つ加えます。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +詳細なリクエストを 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]: ../2-project-instructions/ diff --git a/docs/ja-jp/first-steps/copilot-cli/10-review.md b/docs/ja-jp/first-steps/copilot-cli/10-review.md new file mode 100644 index 00000000..dcf82e7b --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "レッスン 10 - 振り返りと次のステップ" +description: "Copilot CLI のワークフローを振り返り、学習を続けるためのリソースを確認します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +ターミナル中心の開発の流れを完了しました。ターミナルを離れずに、クイズの構築、差分のレビュー、公開、セッションの並行実行、編集前の計画、セッションの再開、プルリクエストのマージ、新しい作業の委任を行いました。 + +## 完了した内容 + +次の作業を完了しました。 + +- 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]: ../../copilot-app/ +[first-steps-vscode]: ../../vscode/ +[real-world-cli]: ../../../real-world-development/cli/ diff --git a/docs/ja-jp/first-steps/copilot-cli/2-project-instructions.md b/docs/ja-jp/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 00000000..2d734a1d --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "レッスン 2 - プロジェクトの指示の記録" +description: "/init を実行して完成した Space Quiz を説明するエージェントへの指示を生成し、自分の作業方法に合わせて調整します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +動作するクイズがディスクに保存されたので、実際のプロジェクトを説明するエージェントへの指示を生成します。今後のすべてのセッションは作業を始める前にこれらの指示を読むため、同じ方針を毎回プロンプトに書く必要がなくなります。 + +このレッスンでは、次の内容を学習します。 + +- `/init` でエージェントへの指示を生成する。 +- 生成されたファイルを受け入れる前にレビューする。 +- 指示を整理し、自分に合わせて調整する。 + +## `/init` でルールを記録する + +1. セッションで `/init` を実行します。 +2. 生成された指示ファイルを受け入れる前にレビューします。 +3. このプロジェクトに合う指示だけを残します。単一ファイルであること、依存関係がないこと、アクセシブルであること、ブラウザーでテストすることが該当します。 + +> [!IMPORTANT] +> **順序が重要です** +> +> `/init` は、現時点のプロジェクトを読み取ります。クイズを構築して仕上げた後に実行すると、実際のコードに基づく指示が生成されます。 + +## 自分の作業方法に合わせる + +指示ファイルには、プロジェクトに関する事実だけでなく、毎回プロンプトで繰り返すような具体的な方針も追加します。たとえば、好みのコードの書き方、命名規則、避けたいライブラリ、コメントをどの程度書いてほしいかなどです。今後のすべてのセッションは、プロンプトを読む前にこのファイルを読みます。 + +## まとめと次のステップ + +プロジェクトに、実際のコードに基づくエージェントへの指示が加わりました。[レッスン 3: プロジェクトの公開][next-lesson]に進みます。 + +[next-lesson]: ../3-publish/ diff --git a/docs/ja-jp/first-steps/copilot-cli/3-publish.md b/docs/ja-jp/first-steps/copilot-cli/3-publish.md new file mode 100644 index 00000000..91c562ca --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "レッスン 3 - プロジェクトの公開" +description: "プロンプトまたは自分で実行するコマンドで、Space Quiz を初期化し、コミットして GitHub に公開します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +試作したプロジェクトを 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]: ../4-issues-and-sessions/ diff --git a/docs/ja-jp/first-steps/copilot-cli/4-issues-and-sessions.md b/docs/ja-jp/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 00000000..c98c4ca7 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "レッスン 4 - Issue の並行作業" +description: "バックログを作成し、サイドパネルから Issue をチャットに追加して /diff で変更をレビューし、専用の worktree で 2 つ目のセッションを開始します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +バックログと実装の流れをターミナルで管理し、独立した作業には別々のセッションを開きます。 + +このレッスンでは、次の内容を学習します。 + +- 範囲を絞った 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/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/first-steps-cli-worktree.svg) + +`/worktree` は、専用のブランチとチェックアウトにセッションを移すため、最初のセッションは影響を受けずに作業を続けられます。 + +## まとめと次のステップ + +最初の Issue を実装して `/diff` でレビューし、専用の worktree で 2 つ目のセッションを開始しました。[レッスン 5: 編集前の計画][next-lesson]に進みます。 + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/ja-jp/first-steps/copilot-cli/5-plan-mode.md b/docs/ja-jp/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 00000000..84b367d1 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "レッスン 5 - 編集前の計画" +description: "/plan で 2 つ目のセッションを計画モードに切り替え、ファイルを編集する前にエージェントにアプローチを提案してもらいます。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +すでに専用の 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]: ../6-context/ diff --git a/docs/ja-jp/first-steps/copilot-cli/6-context.md b/docs/ja-jp/first-steps/copilot-cli/6-context.md new file mode 100644 index 00000000..07fb074b --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "レッスン 6 - エージェントが参照できる情報の把握" +description: "/context でコンテキストウィンドウを占める情報を確認し、会話が脱線したときは /clear で新しく始めます。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +ターミナルのコマンドを使うと、コンテキストを可視化して意図的に管理できます。エージェントが参照できる情報を把握すると、結果を理解しやすくなり、新しく始めるタイミングも判断できます。 + +このレッスンでは、次の内容を学習します。 + +- `/context` でコンテキストウィンドウを確認する。 +- 各部分がウィンドウをどれだけ使用しているかを確認する。 +- `/clear` で脱線した会話をリセットする。 + +## コンテキストを確認する + +1. `/context` を実行し、ファイル、指示、会話履歴を確認します。 +2. 各部分がウィンドウをどれだけ使用しているかを確認します。 +3. 会話が脱線したら、`/clear` を実行して新しく始めます。 +4. 次の変更を依頼する前に、適切なファイルをもう一度追加します。 + +![Copilot CLI で /context を実行した後の出力の図。コンテキストウィンドウのメーターは使用率 61 パーセントを示し、会話、読み取ったファイル、指示に分かれています。空きが少なくなったら /compact で要約するか、新しいセッションを開始するよう案内されています。](../../../_images/first-steps-cli-context.svg) + +`/context` は、コンテキストウィンドウを占めている情報と残りの容量を正確に表示します。空きが少なくなったら、`/compact` で会話を要約するか、新しいセッションを開始します。 + +## まとめと次のステップ + +エージェントが把握している情報を確認し、管理できるようになりました。[レッスン 7: セッションの再開とリモートアクセス][next-lesson]に進みます。 + +[next-lesson]: ../7-resume-and-remote/ diff --git a/docs/ja-jp/first-steps/copilot-cli/7-resume-and-remote.md b/docs/ja-jp/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 00000000..12322da3 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "レッスン 7 - セッションの再開とリモートアクセス" +description: "Copilot CLI のセッションを離れ、copilot --resume または /resume で後から戻ります。必要に応じて /remote で別のデバイスから進行を確認します。" +authors: + - jamesmontemagno +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]: ../8-pull-request/ diff --git a/docs/ja-jp/first-steps/copilot-cli/8-pull-request.md b/docs/ja-jp/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 00000000..c6ba392e --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "レッスン 8 - CLI からの作成、レビュー、マージ" +description: "最終的な差分を確認し、/pr create でプルリクエストを作成してフィードバックに対応し、/pr agentmerge でマージします。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +デスクトップの UI に切り替えずに、開発の流れを完了します。 + +このレッスンでは、次の内容を学習します。 + +- 変更されたファイルを最後にもう一度確認する。 +- 現在のブランチからプルリクエストを作成する。 +- プルリクエストをレビューし、フィードバックに対応する。 +- `/pr agentmerge` でプルリクエストを検証してマージする。 + +## 作成、レビュー、マージ + +1. `/diff` を実行し、変更されたファイルを最後にもう一度確認します。 +2. 現在のブランチからプルリクエストを作成するよう Copilot に依頼するか、`/pr create` を実行します。 +3. サイドパネルの **Pull requests** タブを開き、タイトル、説明、ファイル、ステータスチェックを確認します。 +4. 対応すべきフィードバックを修正し、ブラウザーで結果を確認して、変更内容を返信します。 +5. プルリクエストの準備が整ったら `/pr agentmerge` を実行し、検証します。必要な確認とチェックに合格した後でマージします。 + +## まとめと次のステップ + +ターミナルを離れずにプルリクエストを作成し、レビューしてマージしました。[レッスン 9: 開発の流れを信頼できたら作業を委任する][next-lesson]に進みます。 + +[next-lesson]: ../9-delegate/ diff --git a/docs/ja-jp/first-steps/copilot-cli/9-delegate.md b/docs/ja-jp/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 00000000..04c2508c --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "レッスン 9 - 開発の流れを信頼できたら作業を委任する" +description: "Space Quiz の新機能を /delegate に任せ、実行中も作業を続けながら、CLI からクラウドセッションの進行を確認します。" +authors: + - jamesmontemagno +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]: ../10-review/ diff --git a/docs/ja-jp/first-steps/copilot-cli/README.md b/docs/ja-jp/first-steps/copilot-cli/README.md new file mode 100644 index 00000000..a0e0e453 --- /dev/null +++ b/docs/ja-jp/first-steps/copilot-cli/README.md @@ -0,0 +1,50 @@ +--- +title: "GitHub Copilot CLI のはじめの一歩" +description: "Space Quiz を構築して公開しながら、GitHub Copilot CLI をターミナル中心のガイド付きコースで体験します。" +slug: ja-jp/first-steps/copilot-cli +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +初心者向けのハンズオンで 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]: 0-prerequisites/ +[lesson-1]: 1-build/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-publish/ +[lesson-4]: 4-issues-and-sessions/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-context/ +[lesson-7]: 7-resume-and-remote/ +[lesson-8]: 8-pull-request/ +[lesson-9]: 9-delegate/ +[lesson-10]: 10-review/ diff --git a/docs/ja-jp/first-steps/vscode/0-prerequisites.md b/docs/ja-jp/first-steps/vscode/0-prerequisites.md new file mode 100644 index 00000000..9bb22c8d --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "レッスン 0 - 前提条件とセットアップ" +description: "ワークショップの前提条件を確認し、VS Code の Copilot Chat の動作を確認して GitHub Pull Requests and Issues 拡張機能を追加し、モデルを選びます。" +authors: + - jamesmontemagno +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]: ../1-build-and-polish/ diff --git a/docs/ja-jp/first-steps/vscode/1-build-and-polish.md b/docs/ja-jp/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 00000000..e5a2fb97 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "レッスン 1 - ワークスペースでの構築" +description: "VS Code で Space Quiz を構築し、統合ブラウザーでプレビューして、選んだ要素を仕上げます。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +エディター、チャット、ファイル、プレビューをまとめて使います。クイズを構築して統合ブラウザーで回答し、特定の要素を直接チャットに渡して、範囲を絞った変更を加えます。 + +このレッスンでは、次の内容を学習します。 + +- 単一の `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]: ../2-project-instructions/ diff --git a/docs/ja-jp/first-steps/vscode/10-review.md b/docs/ja-jp/first-steps/vscode/10-review.md new file mode 100644 index 00000000..829aae38 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "レッスン 10 - 振り返りと次のステップ" +description: "VS Code のワークフローを振り返り、学習を続けるためのリソースを確認します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +エディター中心の開発の流れを完了しました。エディターでの構築、指示の記録、統合ブラウザーでのテスト、編集前の計画、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]: ../../copilot-app/ +[first-steps-cli]: ../../copilot-cli/ +[real-world-vscode]: ../../../real-world-development/vscode/ diff --git a/docs/ja-jp/first-steps/vscode/2-project-instructions.md b/docs/ja-jp/first-steps/vscode/2-project-instructions.md new file mode 100644 index 00000000..f10326e5 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "レッスン 2 - プロジェクトの指示の記録" +description: "Copilot Chat で /init を実行して Space Quiz 用の .github/copilot-instructions.md を生成し、調整します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +ワークスペースに動作するクイズができたので、実際のプロジェクトを説明するリポジトリのカスタム指示を生成します。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/first-steps-vscode-instructions.svg) + +リポジトリのカスタム指示は `.github/copilot-instructions.md` に保存され、チャットのすべてのリクエストに適用されます。 + +> [!IMPORTANT] +> **順序が重要です** +> +> `/init` は、現時点のワークスペースを読み取ります。クイズを構築した後に実行すると、実際のコードに基づく指示が生成されます。 + +## 自分の作業方法に合わせる + +指示ファイルには、プロジェクトに関する事実だけでなく、毎回プロンプトで繰り返すような具体的な方針も追加します。たとえば、好みのコードの書き方、命名規則、避けたいライブラリ、コメントをどの程度書いてほしいかなどです。今後のすべてのセッションは、プロンプトを読む前にこのファイルを読みます。 + +## まとめと次のステップ + +ワークスペースに、実際のコードに基づくカスタム指示が加わりました。[レッスン 3: コンテキストの確認とテスト][next-lesson]に進みます。 + +[next-lesson]: ../3-inspect-and-test/ diff --git a/docs/ja-jp/first-steps/vscode/3-inspect-and-test.md b/docs/ja-jp/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 00000000..5290b495 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "レッスン 3 - コンテキストの確認とテスト" +description: "Copilot Chat のリクエストに添付されたコンテキストを確認し、Git に変更を記録する前にブラウザーレベルのスモークテストを実行します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +公開する前に、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]: ../4-publish/ diff --git a/docs/ja-jp/first-steps/vscode/4-publish.md b/docs/ja-jp/first-steps/vscode/4-publish.md new file mode 100644 index 00000000..dc5923e4 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "レッスン 4 - プロジェクトの公開" +description: "VS Code に組み込まれた Source Control の統合機能だけを使い、Space Quiz を初期化、コミット、公開します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +組み込みの 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/first-steps-vscode-commit.svg) + +きらめきボタンは、ステージングされた差分からコミットメッセージの下書きを作成します。コミットすると、**Source Control** からプルリクエストの作成も提案されます。 + +## まとめと次のステップ + +テスト済みのクイズを GitHub に公開しました。[レッスン 5: 編集前の計画][next-lesson]に進みます。 + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/ja-jp/first-steps/vscode/5-plan-mode.md b/docs/ja-jp/first-steps/vscode/5-plan-mode.md new file mode 100644 index 00000000..76609214 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "レッスン 5 - 編集前の計画" +description: "Copilot Chat を Plan モードに切り替え、ファイルを編集する前にワークスペースを調査してアプローチを提案してもらいます。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-github-mcp/ diff --git a/docs/ja-jp/first-steps/vscode/6-github-mcp.md b/docs/ja-jp/first-steps/vscode/6-github-mcp.md new file mode 100644 index 00000000..be41a201 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "レッスン 6 - Copilot に GitHub を扱うツールを提供する" +description: "Copilot に Issue やプルリクエストの操作を依頼する前に、VS Code の GitHub MCP サーバーを有効にしてレビューします。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../7-issues-and-sessions/ diff --git a/docs/ja-jp/first-steps/vscode/7-issues-and-sessions.md b/docs/ja-jp/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 00000000..5a300023 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "レッスン 7 - Issue の計画と実装" +description: "GitHub のツールを使って Copilot Chat から Issue を作成し、新しいチャットセッションで 1 つ実装します。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-inspect-and-test/ +[next-lesson]: ../8-review-and-merge/ diff --git a/docs/ja-jp/first-steps/vscode/8-review-and-merge.md b/docs/ja-jp/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 00000000..83468264 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "レッスン 8 - レビューとマージ" +description: "Source Control からプルリクエストを作成し、Copilot にコードレビューを依頼して GitHub のツールでフィードバックに対応し、マージします。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-cloud-session/ diff --git a/docs/ja-jp/first-steps/vscode/9-cloud-session.md b/docs/ja-jp/first-steps/vscode/9-cloud-session.md new file mode 100644 index 00000000..4c053ebb --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "レッスン 9 - 次のアイデアをクラウドセッションに任せる" +description: "Copilot Chat のハーネスを Local から Cloud に切り替え、単独で完結する機能の作成を委任して、プルリクエストとして受け取ります。" +authors: + - jamesmontemagno +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/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]: ../10-review/ diff --git a/docs/ja-jp/first-steps/vscode/README.md b/docs/ja-jp/first-steps/vscode/README.md new file mode 100644 index 00000000..07fd9e97 --- /dev/null +++ b/docs/ja-jp/first-steps/vscode/README.md @@ -0,0 +1,50 @@ +--- +title: "Visual Studio Code のはじめの一歩" +description: "Space Quiz を構築、テスト、公開しながら、Visual Studio Code の GitHub Copilot をガイド付きコースで体験します。" +slug: ja-jp/first-steps/vscode +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +初心者向けのハンズオンで、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]: 0-prerequisites/ +[lesson-1]: 1-build-and-polish/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-publish/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-github-mcp/ +[lesson-7]: 7-issues-and-sessions/ +[lesson-8]: 8-review-and-merge/ +[lesson-9]: 9-cloud-session/ +[lesson-10]: 10-review/ diff --git a/docs/ko-kr/README.md b/docs/ko-kr/README.md index 7aa0c15c..f2bd7d80 100644 --- a/docs/ko-kr/README.md +++ b/docs/ko-kr/README.md @@ -37,7 +37,7 @@ GitHub Copilot CLI, GitHub Copilot 앱, GitHub Copilot 클라우드 에이전트 > > 강사가 진행하는 워크숍에서 무언가 제대로 작동하지 않는다면 멘토에게 문의하십시오. -[first-steps-app]: ../first-steps/copilot-app/ -[first-steps-cli]: ../first-steps/copilot-cli/ -[first-steps-vscode]: ../first-steps/vscode/ +[first-steps-app]: first-steps/copilot-app/ +[first-steps-cli]: first-steps/copilot-cli/ +[first-steps-vscode]: first-steps/vscode/ [real-world-development]: ../real-world-development/ diff --git a/docs/ko-kr/first-steps/README.md b/docs/ko-kr/first-steps/README.md new file mode 100644 index 00000000..fd0de81e --- /dev/null +++ b/docs/ko-kr/first-steps/README.md @@ -0,0 +1,35 @@ +--- +title: "첫걸음" +slug: ko-kr/first-steps +authors: + - geektrainer +lastUpdated: 2026-09-28 +--- + +첫걸음 워크숍은 기존 애플리케이션이나 구체적인 개발 시나리오 없이도 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]: copilot-app/ +[copilot-cli]: copilot-cli/ +[vscode]: vscode/ diff --git a/docs/ko-kr/first-steps/copilot-app/0-prerequisites.md b/docs/ko-kr/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 00000000..809cccce --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "레슨 0 - 사전 준비 및 설정" +description: "워크숍의 사전 준비 사항을 확인하고, GitHub Copilot app을 설치하고, 워크스페이스에 익숙해집니다." +authors: + - jamesmontemagno +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]: ../1-create-workspace/ diff --git a/docs/ko-kr/first-steps/copilot-app/1-create-workspace.md b/docs/ko-kr/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 00000000..a6a1e1ea --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "레슨 1 - Space Quiz 워크스페이스 만들기" +description: "빈 폴더에서 Space Quiz용 로컬 Interactive 세션을 시작합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/first-steps-app-new-session.svg) + +**New** 화면에서는 첫 프롬프트를 입력하기 전에 폴더, 모드, 에이전트를 설정합니다. Interactive 세션에서는 에이전트가 프로젝트를 만드는 동안 작업을 지시하고 각 단계를 검토할 수 있습니다. + +## 요약 및 다음 단계 + +빈 Space Quiz 워크스페이스가 준비되었습니다. [레슨 2: 퀴즈 만들고 다듬기][next-lesson]를 계속 진행합니다. + +[model-order]: ../0-prerequisites/#모델-선택 +[next-lesson]: ../2-build-and-polish/ diff --git a/docs/ko-kr/first-steps/copilot-app/10-remote.md b/docs/ko-kr/first-steps/copilot-app/10-remote.md new file mode 100644 index 00000000..dc05d2a7 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "레슨 10 - 원격으로 세션 이어가기(선택 사항)" +description: "/remote를 사용하여 컴퓨터에서 계속 실행 중인 앱 세션을 웹이나 GitHub Copilot mobile app에서 확인합니다." +authors: + - jamesmontemagno +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]: ../11-canvas/ diff --git a/docs/ko-kr/first-steps/copilot-app/11-canvas.md b/docs/ko-kr/first-steps/copilot-app/11-canvas.md new file mode 100644 index 00000000..2f236c40 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "레슨 11 - Canvas 살펴보기" +description: "Repository Issues Kanban Canvas를 설치하고 이슈 카드에서 세션을 시작합니다." +authors: + - jamesmontemagno +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/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]: ../12-review/ diff --git a/docs/ko-kr/first-steps/copilot-app/12-review.md b/docs/ko-kr/first-steps/copilot-app/12-review.md new file mode 100644 index 00000000..5f153539 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "레슨 12 - 복습 및 다음 단계" +description: "GitHub Copilot app 워크플로를 돌아보고 학습을 이어갈 리소스를 찾습니다." +authors: + - jamesmontemagno +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]: ../../copilot-cli/ +[first-steps-vscode]: ../../vscode/ +[real-world-app]: ../../../real-world-development/app/ diff --git a/docs/ko-kr/first-steps/copilot-app/2-build-and-polish.md b/docs/ko-kr/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 00000000..7e64c409 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "레슨 2 - 퀴즈 만들고 다듬기" +description: "단일 파일로 Space Quiz를 만들고 통합 브라우저와 요소 선택 도구로 다듬습니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +하나의 상세한 프롬프트로 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]: ../3-inspect-and-test/ diff --git a/docs/ko-kr/first-steps/copilot-app/3-inspect-and-test.md b/docs/ko-kr/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 00000000..399b7f95 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "레슨 3 - 세션 살펴보기 및 퀴즈 테스트" +description: "세션 세부 정보에서 에이전트의 작업 대상을 확인한 다음, Git에 기록하기 전에 브라우저 수준의 스모크 테스트를 실행합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +이제 세션에서 실제 작업을 수행했으므로 살펴볼 내용이 있습니다. 에이전트의 작업 대상을 확인한 다음, 통합 브라우저에서 퀴즈를 조작하고 의도한 결과가 아니라 실제로 일어난 결과를 보고하게 합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 세션 세부 정보 패널을 읽습니다. +- 세션의 프로젝트, 경로, 브랜치, 변경 사항, 컨텍스트 사용량을 확인합니다. +- 브라우저 수준의 스모크 테스트(Smoke test)를 실행하고 실패한 부분을 수정합니다. + +## 세션 세부 정보 읽기 + +세션 세부 정보는 에이전트가 정확히 무엇을 작업하는지 알려 줍니다. 이 패널을 계속 지켜볼 필요는 없지만, 예상과 다른 결과가 나오면 패널의 모든 정보가 중요합니다. + +![Space Quiz 빌드 세션의 Copilot app 세션 세부 정보 패널 일러스트레이션. origin/main에서 시작한 main 브랜치, 경로, 프로젝트, 세션 이름, 세션 ID 및 에이전트, 변경된 파일 1개, 토큰 수, 컨텍스트 사용량 27%, 세션 비용, 원격 제어 활성화, 이름 변경, 인사이트 보기, 비밀 gist로 공유, 세션 보관 옵션이 표시되어 있습니다.](../../../_images/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]: ../4-project-instructions/ diff --git a/docs/ko-kr/first-steps/copilot-app/4-project-instructions.md b/docs/ko-kr/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 00000000..b0b9a3e9 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "레슨 4 - 프로젝트 지침 작성" +description: "/init을 실행하여 완성된 Space Quiz를 설명하는 에이전트 지침을 생성한 다음, 작업 방식에 맞게 조정합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +이제 퀴즈를 만들고 다듬고 테스트했으므로, 이후 세션에서 이 프로젝트를 어떻게 다뤄야 하는지 기록합니다. 모든 세션이 작업을 시작하기 전에 에이전트 지침을 읽으므로, 프롬프트마다 같은 안내를 반복할 필요가 없습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/init`으로 에이전트 지침을 생성합니다. +- 생성된 파일을 수락하기 전에 검토합니다. +- 지침을 간결하게 정리하고 맞춤 설정합니다. + +## `/init`으로 규칙 기록하기 + +1. 앱 세션에서 `/init`을 실행합니다. +2. 생성된 에이전트 지침 파일을 수락하기 전에 검토합니다. +3. 단일 파일, 의존성 없음, 접근성, 브라우저 테스트 등 이 프로젝트에 맞는 안내만 남깁니다. + +> [!IMPORTANT] +> **다듬은 뒤에 실행하는 이유** +> +> `/init`은 현재 상태의 프로젝트를 읽습니다. 퀴즈를 만들고 테스트한 뒤 실행하면 빈 폴더가 아니라 실제 코드를 설명하는 지침을 생성합니다. + +## 작업 방식에 맞게 조정하기 + +지침 파일에는 프로젝트에 관한 사실만 적는 것이 아닙니다. 선호하는 코드 작성 방식, 명명 규칙, 사용하지 않을 라이브러리, 원하는 주석의 양처럼 프롬프트마다 반복할 구체적인 사항을 추가합니다. 이후 모든 세션은 프롬프트를 읽기 전에 이 파일을 읽습니다. + +## 요약 및 다음 단계 + +이제 프로젝트에 실제 코드를 바탕으로 작성한 에이전트 지침이 있습니다. [레슨 5: 프로젝트 게시][next-lesson]를 계속 진행합니다. + +[next-lesson]: ../5-publish/ diff --git a/docs/ko-kr/first-steps/copilot-app/5-publish.md b/docs/ko-kr/first-steps/copilot-app/5-publish.md new file mode 100644 index 00000000..f01dc4d2 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "레슨 5 - 프로젝트 게시" +description: "로컬 Space Quiz 실험 프로젝트를 공개 GitHub 리포지토리로 전환합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-issues-and-sessions/ diff --git a/docs/ko-kr/first-steps/copilot-app/6-issues-and-sessions.md b/docs/ko-kr/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 00000000..1cf4277a --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "레슨 6 - 이슈 및 세션으로 작업하기" +description: "범위가 명확한 백로그를 만들고, 이슈를 선택하고, 격리된 워크트리에서 구현한 뒤 변경 사항을 직접 검토합니다." +authors: + - jamesmontemagno +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/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/first-steps-app-changes-tab.svg) + +**Changes** 탭에는 세션에서 수정한 모든 파일과 인라인 변경 사항이 나열됩니다. + +## 요약 및 다음 단계 + +백로그를 만들고, 격리된 세션에서 이슈 하나를 구현하고, 변경 사항을 검토했습니다. [레슨 7: 편집 전에 계획하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: ../7-plan-mode/ diff --git a/docs/ko-kr/first-steps/copilot-app/7-plan-mode.md b/docs/ko-kr/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 00000000..ca2cd42f --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "레슨 7 - 편집 전에 계획하기" +description: "두 번째 이슈에 Plan 모드를 사용하여 에이전트가 파일을 변경하기 전에 프로젝트를 조사하고 접근 방식을 제안하게 합니다." +authors: + - jamesmontemagno +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]: ../8-review-loop/ diff --git a/docs/ko-kr/first-steps/copilot-app/8-review-loop.md b/docs/ko-kr/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 00000000..e2ecc338 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "레슨 8 - Copilot 검토 사이클 완료" +description: "풀 리퀘스트를 만들고, Copilot 검토를 요청하고, 반영할 수 있는 피드백을 처리하고, Agent Merge가 풀 리퀘스트를 병합 가능한 상태로 유지하게 합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +구현한 이슈를 풀 리퀘스트(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]: ../9-automations/ diff --git a/docs/ko-kr/first-steps/copilot-app/9-automations.md b/docs/ko-kr/first-steps/copilot-app/9-automations.md new file mode 100644 index 00000000..3cf15126 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "레슨 9 - 이슈 분류 자동화" +description: "최근 열린 이슈를 요약하는 주간 자동화를 만들고 실행합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +자동화를 사용하여 반복되는 이슈 분류 작업을 예약된 에이전트 워크플로로 전환합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 주간 자동화를 만듭니다. +- 자동화를 Space Quiz 프로젝트에 연결합니다. +- 자동화를 즉시 실행하고 결과를 검토합니다. + +## 자동화 만들기 + +![All, Local, Cloud 필터, 검색란, Templates 및 New automation 버튼, space-quiz 프로젝트의 주간 자동화 카드 2개인 Issue triage와 Accessibility audit가 표시된 Copilot app의 Automations 화면 일러스트레이션.](../../../_images/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]: ../10-remote/ diff --git a/docs/ko-kr/first-steps/copilot-app/README.md b/docs/ko-kr/first-steps/copilot-app/README.md new file mode 100644 index 00000000..3057e85f --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-app/README.md @@ -0,0 +1,54 @@ +--- +title: "GitHub Copilot app 둘러보기" +description: "Space Quiz를 만들고 출시하면서 GitHub Copilot app을 단계별로 살펴봅니다." +slug: ko-kr/first-steps/copilot-app +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +초보자도 쉽게 따라 할 수 있는 실습으로 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]: 0-prerequisites/ +[lesson-1]: 1-create-workspace/ +[lesson-2]: 2-build-and-polish/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-project-instructions/ +[lesson-5]: 5-publish/ +[lesson-6]: 6-issues-and-sessions/ +[lesson-7]: 7-plan-mode/ +[lesson-8]: 8-review-loop/ +[lesson-9]: 9-automations/ +[lesson-10]: 10-remote/ +[lesson-11]: 11-canvas/ +[lesson-12]: 12-review/ diff --git a/docs/ko-kr/first-steps/copilot-cli/0-prerequisites.md b/docs/ko-kr/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 00000000..da8f1d61 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "레슨 0 - 사전 준비 및 설정" +description: "워크숍의 사전 준비 사항을 확인하고, GitHub Copilot CLI를 설치하고, 로그인하고, 빈 프로젝트 폴더에서 모델을 선택합니다." +authors: + - jamesmontemagno +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/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]: ../1-build/ diff --git a/docs/ko-kr/first-steps/copilot-cli/1-build.md b/docs/ko-kr/first-steps/copilot-cli/1-build.md new file mode 100644 index 00000000..56120a1c --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "레슨 1 - 터미널에서 퀴즈 만들기" +description: "하나의 상세한 요청으로 Copilot CLI에 전체 Space Quiz를 만들도록 한 다음, 범위를 한정하여 한 가지를 개선합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +하나의 상세한 요청으로 전체 프로젝트를 만들도록 하고, 승인 전에 에이전트의 제안을 검토한 다음 범위를 한정하여 작은 변경을 한 가지 적용합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 의존성이 없는 퀴즈를 `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]: ../2-project-instructions/ diff --git a/docs/ko-kr/first-steps/copilot-cli/10-review.md b/docs/ko-kr/first-steps/copilot-cli/10-review.md new file mode 100644 index 00000000..0ce716c8 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "레슨 10 - 복습 및 다음 단계" +description: "Copilot CLI 워크플로를 돌아보고 학습을 이어갈 리소스를 찾습니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +터미널 중심의 작업 사이클을 완료했습니다. 터미널을 벗어나지 않고 퀴즈를 만들고, 변경 사항을 검토하고, 게시하고, 세션을 병렬로 실행하고, 편집 전에 계획을 세우고, 세션을 재개하고, 풀 리퀘스트(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]: ../../copilot-app/ +[first-steps-vscode]: ../../vscode/ +[real-world-cli]: ../../../real-world-development/cli/ diff --git a/docs/ko-kr/first-steps/copilot-cli/2-project-instructions.md b/docs/ko-kr/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 00000000..0fa7b0ce --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "레슨 2 - 프로젝트 지침 작성" +description: "/init을 실행하여 완성된 Space Quiz를 설명하는 에이전트 지침을 생성한 다음, 작업 방식에 맞게 조정합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +디스크에 정상적으로 작동하는 퀴즈가 있으므로 실제 프로젝트를 설명하는 에이전트 지침을 생성합니다. 이후 모든 세션은 작업을 시작하기 전에 이 지침을 읽으므로, 프롬프트마다 같은 안내를 반복할 필요가 없습니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/init`으로 에이전트 지침을 생성합니다. +- 생성된 파일을 수락하기 전에 검토합니다. +- 지침을 간결하게 정리하고 맞춤 설정합니다. + +## `/init`으로 규칙 기록하기 + +1. 세션에서 `/init`을 실행합니다. +2. 생성된 지침 파일을 수락하기 전에 검토합니다. +3. 단일 파일, 의존성 없음, 접근성, 브라우저 테스트 등 이 프로젝트에 맞는 안내만 남깁니다. + +> [!IMPORTANT] +> **순서가 중요합니다** +> +> `/init`은 현재 상태의 프로젝트를 읽습니다. 퀴즈를 만들고 다듬은 뒤 실행하면 실제 코드를 바탕으로 하는 지침을 생성합니다. + +## 작업 방식에 맞게 조정하기 + +지침 파일에는 프로젝트에 관한 사실만 적는 것이 아닙니다. 선호하는 코드 작성 방식, 명명 규칙, 사용하지 않을 라이브러리, 원하는 주석의 양처럼 프롬프트마다 반복할 구체적인 사항을 추가합니다. 이후 모든 세션은 프롬프트를 읽기 전에 이 파일을 읽습니다. + +## 요약 및 다음 단계 + +이제 프로젝트에 실제 코드를 바탕으로 작성한 에이전트 지침이 있습니다. [레슨 3: 프로젝트 게시][next-lesson]를 계속 진행합니다. + +[next-lesson]: ../3-publish/ diff --git a/docs/ko-kr/first-steps/copilot-cli/3-publish.md b/docs/ko-kr/first-steps/copilot-cli/3-publish.md new file mode 100644 index 00000000..5dbe7225 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "레슨 3 - 프로젝트 게시" +description: "프롬프트로 요청하거나 직접 명령을 실행하여 Space Quiz를 초기화하고 커밋하고 GitHub에 게시합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +실험 프로젝트를 공개 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]: ../4-issues-and-sessions/ diff --git a/docs/ko-kr/first-steps/copilot-cli/4-issues-and-sessions.md b/docs/ko-kr/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 00000000..667bbda1 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "레슨 4 - 이슈를 병렬로 작업하기" +description: "백로그를 만들고, 사이드 패널에서 채팅에 이슈를 추가하고, /diff로 변경 사항을 검토하고, 별도의 워크트리에서 두 번째 세션을 시작합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +터미널에서 백로그와 구현 사이클을 관리하고, 독립적인 작업을 위해 별도의 세션을 엽니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 범위가 명확한 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/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/first-steps-cli-worktree.svg) + +`/worktree`는 세션을 별도 브랜치의 별도 체크아웃으로 옮기므로 첫 번째 세션은 방해받지 않고 계속 작업합니다. + +## 요약 및 다음 단계 + +첫 번째 이슈를 구현하고, `/diff`로 검토하고, 별도의 워크트리에서 두 번째 세션을 시작했습니다. [레슨 5: 편집 전에 계획하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/ko-kr/first-steps/copilot-cli/5-plan-mode.md b/docs/ko-kr/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 00000000..444c7d8d --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "레슨 5 - 편집 전에 계획하기" +description: "/plan으로 두 번째 세션을 계획 모드로 전환하여 에이전트가 파일을 편집하기 전에 접근 방식을 제안하게 합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +이미 별도의 워크트리(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]: ../6-context/ diff --git a/docs/ko-kr/first-steps/copilot-cli/6-context.md b/docs/ko-kr/first-steps/copilot-cli/6-context.md new file mode 100644 index 00000000..5392110e --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "레슨 6 - 에이전트가 볼 수 있는 내용 파악하기" +description: "/context로 컨텍스트 윈도우를 채우는 내용을 살펴보고, 대화가 주제에서 벗어나면 /clear로 새로 시작합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +터미널 명령으로 컨텍스트를 확인하고 의도적으로 관리할 수 있습니다. 에이전트가 볼 수 있는 내용을 알면 결과를 이해하고 언제 새로 시작할지 판단하는 데 도움이 됩니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- `/context`로 컨텍스트 윈도우(Context window)를 살펴봅니다. +- 각 부분이 윈도우에서 차지하는 공간을 확인합니다. +- `/clear`로 주제에서 벗어난 대화를 초기화합니다. + +## 컨텍스트 살펴보기 + +1. `/context`를 실행하여 파일, 지침, 대화 기록을 살펴봅니다. +2. 각 부분이 윈도우에서 얼마나 많은 공간을 사용하는지 확인합니다. +3. 대화가 주제에서 벗어나면 `/clear`를 실행하여 새로 시작합니다. +4. 다른 변경을 요청하기 전에 적절한 파일을 다시 추가합니다. + +![Copilot CLI에서 /context를 실행한 뒤의 출력 일러스트레이션. 컨텍스트 윈도우 사용량은 61%로 표시되며 대화, 읽은 파일, 지침으로 나뉩니다. 남은 공간이 적으면 /compact로 요약하거나 새 세션을 시작하라는 안내가 있습니다.](../../../_images/first-steps-cli-context.svg) + +`/context`는 컨텍스트 윈도우를 정확히 무엇이 채우는지, 공간이 얼마나 남았는지 보여 줍니다. 남은 공간이 적으면 `/compact`로 대화를 요약하거나 새 세션을 시작합니다. + +## 요약 및 다음 단계 + +이제 에이전트가 아는 내용을 확인하고 관리할 수 있습니다. [레슨 7: 세션 재개 및 원격 이용][next-lesson]을 계속 진행합니다. + +[next-lesson]: ../7-resume-and-remote/ diff --git a/docs/ko-kr/first-steps/copilot-cli/7-resume-and-remote.md b/docs/ko-kr/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 00000000..15fd090d --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "레슨 7 - 세션 재개 및 원격 이용" +description: "Copilot CLI 세션을 나갔다가 나중에 copilot --resume 또는 /resume으로 돌아오고, 선택적으로 /remote로 다른 기기에서 확인합니다." +authors: + - jamesmontemagno +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]: ../8-pull-request/ diff --git a/docs/ko-kr/first-steps/copilot-cli/8-pull-request.md b/docs/ko-kr/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 00000000..bcfdfd60 --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "레슨 8 - CLI에서 생성, 검토, 병합" +description: "최종 변경 사항을 살펴보고, /pr create로 풀 리퀘스트를 만들고, 피드백을 처리하고, /pr agentmerge로 병합합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +데스크톱 사용자 인터페이스로 전환하지 않고 개발 사이클을 마무리합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 변경된 파일을 마지막으로 살펴봅니다. +- 현재 브랜치에서 풀 리퀘스트(Pull request)를 만듭니다. +- 풀 리퀘스트를 검토하고 피드백을 처리합니다. +- `/pr agentmerge`로 풀 리퀘스트를 검증하고 병합합니다. + +## 생성, 검토, 병합 + +1. `/diff`를 실행하여 변경된 파일을 마지막으로 살펴봅니다. +2. Copilot에 현재 브랜치에서 풀 리퀘스트를 만들도록 요청하거나 `/pr create`를 실행합니다. +3. 사이드 패널의 **Pull requests** 탭을 열고 제목, 설명, 파일, 상태 검사를 확인합니다. +4. 반영할 수 있는 피드백에 따라 수정하고, 브라우저에서 결과를 확인하고, 변경한 내용을 답글로 남깁니다. +5. 풀 리퀘스트가 준비되면 `/pr agentmerge`를 실행하여 검증하고, 필요한 확인과 검사를 통과한 뒤 병합합니다. + +## 요약 및 다음 단계 + +터미널을 벗어나지 않고 풀 리퀘스트를 만들고 검토하고 병합했습니다. [레슨 9: 작업 사이클을 신뢰하게 된 뒤 위임하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: ../9-delegate/ diff --git a/docs/ko-kr/first-steps/copilot-cli/9-delegate.md b/docs/ko-kr/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 00000000..2e2f922e --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "레슨 9 - 작업 사이클을 신뢰하게 된 뒤 위임하기" +description: "새 Space Quiz 기능을 /delegate에 맡기고, 실행되는 동안 계속 작업하고, CLI에서 클라우드 세션을 확인합니다." +authors: + - jamesmontemagno +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]: ../10-review/ diff --git a/docs/ko-kr/first-steps/copilot-cli/README.md b/docs/ko-kr/first-steps/copilot-cli/README.md new file mode 100644 index 00000000..05cca68d --- /dev/null +++ b/docs/ko-kr/first-steps/copilot-cli/README.md @@ -0,0 +1,50 @@ +--- +title: "GitHub Copilot CLI 첫걸음" +description: "Space Quiz를 만들고 출시하면서 터미널 중심으로 GitHub Copilot CLI를 단계별로 살펴봅니다." +slug: ko-kr/first-steps/copilot-cli +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +초보자도 쉽게 따라 할 수 있는 실습으로 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]: 0-prerequisites/ +[lesson-1]: 1-build/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-publish/ +[lesson-4]: 4-issues-and-sessions/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-context/ +[lesson-7]: 7-resume-and-remote/ +[lesson-8]: 8-pull-request/ +[lesson-9]: 9-delegate/ +[lesson-10]: 10-review/ diff --git a/docs/ko-kr/first-steps/vscode/0-prerequisites.md b/docs/ko-kr/first-steps/vscode/0-prerequisites.md new file mode 100644 index 00000000..139ce369 --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "레슨 0 - 사전 준비 및 설정" +description: "워크숍의 사전 준비 사항을 확인하고, VS Code의 Copilot Chat을 확인하고, GitHub Pull Requests and Issues 확장을 추가하고, 모델을 선택합니다." +authors: + - jamesmontemagno +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]: ../1-build-and-polish/ diff --git a/docs/ko-kr/first-steps/vscode/1-build-and-polish.md b/docs/ko-kr/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 00000000..d48eb027 --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "레슨 1 - 워크스페이스에서 만들기" +description: "VS Code에서 Space Quiz를 만들고, 통합 브라우저에서 미리 보고, 선택한 요소를 다듬습니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +편집기, 채팅, 파일, 미리 보기를 한곳에서 사용합니다. 퀴즈를 만들고 통합 브라우저에서 풀어 본 다음, 특정 요소를 채팅에 바로 전달하여 범위를 한정한 변경을 적용합니다. + +이 레슨에서는 다음 작업을 수행합니다. + +- 단일 `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]: ../2-project-instructions/ diff --git a/docs/ko-kr/first-steps/vscode/10-review.md b/docs/ko-kr/first-steps/vscode/10-review.md new file mode 100644 index 00000000..fa7e665d --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "레슨 10 - 복습 및 다음 단계" +description: "VS Code 워크플로를 돌아보고 학습을 이어갈 리소스를 찾습니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +편집기 중심의 작업 사이클을 완료했습니다. 편집기에서 퀴즈를 만들고, 지침을 기록하고, 통합 브라우저에서 테스트하고, 편집 전에 계획을 세우고, 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]: ../../copilot-app/ +[first-steps-cli]: ../../copilot-cli/ +[real-world-vscode]: ../../../real-world-development/vscode/ diff --git a/docs/ko-kr/first-steps/vscode/2-project-instructions.md b/docs/ko-kr/first-steps/vscode/2-project-instructions.md new file mode 100644 index 00000000..ae05205e --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "레슨 2 - 프로젝트 지침 작성" +description: "Copilot Chat에서 /init을 실행하여 Space Quiz의 .github/copilot-instructions.md를 생성한 다음 조정합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +워크스페이스에 정상적으로 작동하는 퀴즈가 있으므로 실제 프로젝트를 설명하는 리포지토리 커스텀 지침을 생성합니다. 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/first-steps-vscode-instructions.svg) + +리포지토리 커스텀 지침은 `.github/copilot-instructions.md`에 저장되며 모든 채팅 요청에 적용됩니다. + +> [!IMPORTANT] +> **순서가 중요합니다** +> +> `/init`은 현재 상태의 워크스페이스를 읽습니다. 퀴즈를 만든 뒤 실행하면 실제 코드를 바탕으로 하는 지침을 생성합니다. + +## 작업 방식에 맞게 조정하기 + +지침 파일에는 프로젝트에 관한 사실만 적는 것이 아닙니다. 선호하는 코드 작성 방식, 명명 규칙, 사용하지 않을 라이브러리, 원하는 주석의 양처럼 프롬프트마다 반복할 구체적인 사항을 추가합니다. 이후 모든 세션은 프롬프트를 읽기 전에 이 파일을 읽습니다. + +## 요약 및 다음 단계 + +이제 워크스페이스에 실제 코드를 바탕으로 작성한 커스텀 지침이 있습니다. [레슨 3: 컨텍스트 확인 및 테스트][next-lesson]를 계속 진행합니다. + +[next-lesson]: ../3-inspect-and-test/ diff --git a/docs/ko-kr/first-steps/vscode/3-inspect-and-test.md b/docs/ko-kr/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 00000000..c4a91eda --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "레슨 3 - 컨텍스트 확인 및 테스트" +description: "Copilot Chat 요청에 첨부된 컨텍스트를 살펴본 다음, Git에 기록하기 전에 브라우저 수준의 스모크 테스트를 실행합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +게시하기 전에 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]: ../4-publish/ diff --git a/docs/ko-kr/first-steps/vscode/4-publish.md b/docs/ko-kr/first-steps/vscode/4-publish.md new file mode 100644 index 00000000..a30c182a --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "레슨 4 - 프로젝트 게시" +description: "VS Code에 내장된 Source Control 통합만으로 Space Quiz를 초기화하고 커밋하고 게시합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +내장 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/first-steps-vscode-commit.svg) + +반짝이는 버튼은 스테이징된 변경 사항을 바탕으로 커밋 메시지 초안을 작성합니다. 커밋하면 **Source Control**에서 풀 리퀘스트(Pull request) 생성도 제안합니다. + +## 요약 및 다음 단계 + +이제 테스트를 마친 퀴즈가 GitHub에 게시되었습니다. [레슨 5: 편집 전에 계획하기][next-lesson]를 계속 진행합니다. + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/ko-kr/first-steps/vscode/5-plan-mode.md b/docs/ko-kr/first-steps/vscode/5-plan-mode.md new file mode 100644 index 00000000..546c05ee --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "레슨 5 - 편집 전에 계획하기" +description: "Copilot Chat을 Plan 모드로 전환하여 파일을 편집하기 전에 워크스페이스를 조사하고 접근 방식을 제안하게 합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-github-mcp/ diff --git a/docs/ko-kr/first-steps/vscode/6-github-mcp.md b/docs/ko-kr/first-steps/vscode/6-github-mcp.md new file mode 100644 index 00000000..721d3705 --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "레슨 6 - Copilot에 GitHub 연동 도구 제공" +description: "Copilot에 이슈와 풀 리퀘스트 작업을 요청하기 전에 VS Code에서 GitHub MCP 서버를 활성화하고 검토합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../7-issues-and-sessions/ diff --git a/docs/ko-kr/first-steps/vscode/7-issues-and-sessions.md b/docs/ko-kr/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 00000000..bd12be55 --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "레슨 7 - 이슈 계획 및 구현" +description: "GitHub 도구를 사용하여 Copilot Chat에서 이슈를 만든 다음, 새 채팅 세션에서 하나를 구현합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-inspect-and-test/ +[next-lesson]: ../8-review-and-merge/ diff --git a/docs/ko-kr/first-steps/vscode/8-review-and-merge.md b/docs/ko-kr/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 00000000..462d22a2 --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "레슨 8 - 검토 및 병합" +description: "Source Control에서 풀 리퀘스트를 만들고, Copilot 코드 검토를 요청하고, GitHub 도구로 피드백을 처리하고, 병합합니다." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-cloud-session/ diff --git a/docs/ko-kr/first-steps/vscode/9-cloud-session.md b/docs/ko-kr/first-steps/vscode/9-cloud-session.md new file mode 100644 index 00000000..277344d4 --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "레슨 9 - 다음 아이디어를 클라우드 세션에 맡기기" +description: "Copilot Chat 하네스를 Local에서 Cloud로 전환하고, 풀 리퀘스트로 전달되는 독립적인 기능을 위임합니다." +authors: + - jamesmontemagno +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/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]: ../10-review/ diff --git a/docs/ko-kr/first-steps/vscode/README.md b/docs/ko-kr/first-steps/vscode/README.md new file mode 100644 index 00000000..76e29a62 --- /dev/null +++ b/docs/ko-kr/first-steps/vscode/README.md @@ -0,0 +1,50 @@ +--- +title: "Visual Studio Code 첫걸음" +description: "Space Quiz를 만들고 테스트하고 출시하면서 Visual Studio Code의 GitHub Copilot을 단계별로 살펴봅니다." +slug: ko-kr/first-steps/vscode +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +초보자도 쉽게 따라 할 수 있는 실습으로 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]: 0-prerequisites/ +[lesson-1]: 1-build-and-polish/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-publish/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-github-mcp/ +[lesson-7]: 7-issues-and-sessions/ +[lesson-8]: 8-review-and-merge/ +[lesson-9]: 9-cloud-session/ +[lesson-10]: 10-review/ diff --git a/docs/pt-br/README.md b/docs/pt-br/README.md index 2a1c0f6a..14ad835e 100644 --- a/docs/pt-br/README.md +++ b/docs/pt-br/README.md @@ -37,7 +37,7 @@ Escolha entre o GitHub Copilot CLI, o aplicativo GitHub Copilot, o agente de nuv > > Se algo não funcionar corretamente durante um workshop conduzido por uma pessoa instrutora, peça ajuda a uma pessoa mentora. -[first-steps-app]: ../first-steps/copilot-app/ -[first-steps-cli]: ../first-steps/copilot-cli/ -[first-steps-vscode]: ../first-steps/vscode/ +[first-steps-app]: first-steps/copilot-app/ +[first-steps-cli]: first-steps/copilot-cli/ +[first-steps-vscode]: first-steps/vscode/ [real-world-development]: ../real-world-development/ diff --git a/docs/pt-br/first-steps/README.md b/docs/pt-br/first-steps/README.md new file mode 100644 index 00000000..03a29717 --- /dev/null +++ b/docs/pt-br/first-steps/README.md @@ -0,0 +1,35 @@ +--- +title: "Primeiros passos" +slug: pt-br/first-steps +authors: + - geektrainer +lastUpdated: 2026-09-28 +--- + +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]: copilot-app/ +[copilot-cli]: copilot-cli/ +[vscode]: vscode/ diff --git a/docs/pt-br/first-steps/copilot-app/0-prerequisites.md b/docs/pt-br/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 00000000..22c2a69e --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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]: ../1-create-workspace/ diff --git a/docs/pt-br/first-steps/copilot-app/1-create-workspace.md b/docs/pt-br/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 00000000..373e840e --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../0-prerequisites/#escolher-um-modelo +[next-lesson]: ../2-build-and-polish/ diff --git a/docs/pt-br/first-steps/copilot-app/10-remote.md b/docs/pt-br/first-steps/copilot-app/10-remote.md new file mode 100644 index 00000000..1aaba77e --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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]: ../11-canvas/ diff --git a/docs/pt-br/first-steps/copilot-app/11-canvas.md b/docs/pt-br/first-steps/copilot-app/11-canvas.md new file mode 100644 index 00000000..32a83638 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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/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]: ../12-review/ diff --git a/docs/pt-br/first-steps/copilot-app/12-review.md b/docs/pt-br/first-steps/copilot-app/12-review.md new file mode 100644 index 00000000..75d79691 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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]: ../../copilot-cli/ +[first-steps-vscode]: ../../vscode/ +[real-world-app]: ../../../real-world-development/app/ diff --git a/docs/pt-br/first-steps/copilot-app/2-build-and-polish.md b/docs/pt-br/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 00000000..85fe4a51 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-inspect-and-test/ diff --git a/docs/pt-br/first-steps/copilot-app/3-inspect-and-test.md b/docs/pt-br/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 00000000..5a68fc23 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../4-project-instructions/ diff --git a/docs/pt-br/first-steps/copilot-app/4-project-instructions.md b/docs/pt-br/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 00000000..6fbd8828 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../5-publish/ diff --git a/docs/pt-br/first-steps/copilot-app/5-publish.md b/docs/pt-br/first-steps/copilot-app/5-publish.md new file mode 100644 index 00000000..3f87ea39 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-issues-and-sessions/ diff --git a/docs/pt-br/first-steps/copilot-app/6-issues-and-sessions.md b/docs/pt-br/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 00000000..a5b647b3 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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/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/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]: ../7-plan-mode/ diff --git a/docs/pt-br/first-steps/copilot-app/7-plan-mode.md b/docs/pt-br/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 00000000..d8f7a325 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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]: ../8-review-loop/ diff --git a/docs/pt-br/first-steps/copilot-app/8-review-loop.md b/docs/pt-br/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 00000000..b9427735 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-automations/ diff --git a/docs/pt-br/first-steps/copilot-app/9-automations.md b/docs/pt-br/first-steps/copilot-app/9-automations.md new file mode 100644 index 00000000..5c131852 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../10-remote/ diff --git a/docs/pt-br/first-steps/copilot-app/README.md b/docs/pt-br/first-steps/copilot-app/README.md new file mode 100644 index 00000000..95481005 --- /dev/null +++ b/docs/pt-br/first-steps/copilot-app/README.md @@ -0,0 +1,54 @@ +--- +title: "Tour do aplicativo GitHub Copilot" +description: "Faça um tour guiado pelo aplicativo GitHub Copilot criando e entregando um Space Quiz." +slug: pt-br/first-steps/copilot-app +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +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]: 0-prerequisites/ +[lesson-1]: 1-create-workspace/ +[lesson-2]: 2-build-and-polish/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-project-instructions/ +[lesson-5]: 5-publish/ +[lesson-6]: 6-issues-and-sessions/ +[lesson-7]: 7-plan-mode/ +[lesson-8]: 8-review-loop/ +[lesson-9]: 9-automations/ +[lesson-10]: 10-remote/ +[lesson-11]: 11-canvas/ +[lesson-12]: 12-review/ diff --git a/docs/pt-br/first-steps/copilot-cli/0-prerequisites.md b/docs/pt-br/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 00000000..d2b04967 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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/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]: ../1-build/ diff --git a/docs/pt-br/first-steps/copilot-cli/1-build.md b/docs/pt-br/first-steps/copilot-cli/1-build.md new file mode 100644 index 00000000..4817734c --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../2-project-instructions/ diff --git a/docs/pt-br/first-steps/copilot-cli/10-review.md b/docs/pt-br/first-steps/copilot-cli/10-review.md new file mode 100644 index 00000000..09b0d121 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../../copilot-app/ +[first-steps-vscode]: ../../vscode/ +[real-world-cli]: ../../../real-world-development/cli/ diff --git a/docs/pt-br/first-steps/copilot-cli/2-project-instructions.md b/docs/pt-br/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 00000000..5aeb4c34 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-publish/ diff --git a/docs/pt-br/first-steps/copilot-cli/3-publish.md b/docs/pt-br/first-steps/copilot-cli/3-publish.md new file mode 100644 index 00000000..63a5fb1e --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../4-issues-and-sessions/ diff --git a/docs/pt-br/first-steps/copilot-cli/4-issues-and-sessions.md b/docs/pt-br/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 00000000..2830d75f --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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/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]: ../5-plan-mode/ diff --git a/docs/pt-br/first-steps/copilot-cli/5-plan-mode.md b/docs/pt-br/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 00000000..eed72d2e --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-context/ diff --git a/docs/pt-br/first-steps/copilot-cli/6-context.md b/docs/pt-br/first-steps/copilot-cli/6-context.md new file mode 100644 index 00000000..86961e8f --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../7-resume-and-remote/ diff --git a/docs/pt-br/first-steps/copilot-cli/7-resume-and-remote.md b/docs/pt-br/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 00000000..fbc715ff --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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]: ../8-pull-request/ diff --git a/docs/pt-br/first-steps/copilot-cli/8-pull-request.md b/docs/pt-br/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 00000000..f8b58642 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-delegate/ diff --git a/docs/pt-br/first-steps/copilot-cli/9-delegate.md b/docs/pt-br/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 00000000..130f4396 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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]: ../10-review/ diff --git a/docs/pt-br/first-steps/copilot-cli/README.md b/docs/pt-br/first-steps/copilot-cli/README.md new file mode 100644 index 00000000..86ebd67f --- /dev/null +++ b/docs/pt-br/first-steps/copilot-cli/README.md @@ -0,0 +1,50 @@ +--- +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." +slug: pt-br/first-steps/copilot-cli +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +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]: 0-prerequisites/ +[lesson-1]: 1-build/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-publish/ +[lesson-4]: 4-issues-and-sessions/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-context/ +[lesson-7]: 7-resume-and-remote/ +[lesson-8]: 8-pull-request/ +[lesson-9]: 9-delegate/ +[lesson-10]: 10-review/ diff --git a/docs/pt-br/first-steps/vscode/0-prerequisites.md b/docs/pt-br/first-steps/vscode/0-prerequisites.md new file mode 100644 index 00000000..d183992e --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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]: ../1-build-and-polish/ diff --git a/docs/pt-br/first-steps/vscode/1-build-and-polish.md b/docs/pt-br/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 00000000..767b9c65 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../2-project-instructions/ diff --git a/docs/pt-br/first-steps/vscode/10-review.md b/docs/pt-br/first-steps/vscode/10-review.md new file mode 100644 index 00000000..56bfa7da --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../../copilot-app/ +[first-steps-cli]: ../../copilot-cli/ +[real-world-vscode]: ../../../real-world-development/vscode/ diff --git a/docs/pt-br/first-steps/vscode/2-project-instructions.md b/docs/pt-br/first-steps/vscode/2-project-instructions.md new file mode 100644 index 00000000..95ae5f21 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../3-inspect-and-test/ diff --git a/docs/pt-br/first-steps/vscode/3-inspect-and-test.md b/docs/pt-br/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 00000000..1269f7d1 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../4-publish/ diff --git a/docs/pt-br/first-steps/vscode/4-publish.md b/docs/pt-br/first-steps/vscode/4-publish.md new file mode 100644 index 00000000..9bbd7bd5 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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/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]: ../5-plan-mode/ diff --git a/docs/pt-br/first-steps/vscode/5-plan-mode.md b/docs/pt-br/first-steps/vscode/5-plan-mode.md new file mode 100644 index 00000000..2c1ac8f0 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-github-mcp/ diff --git a/docs/pt-br/first-steps/vscode/6-github-mcp.md b/docs/pt-br/first-steps/vscode/6-github-mcp.md new file mode 100644 index 00000000..7b669c21 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../7-issues-and-sessions/ diff --git a/docs/pt-br/first-steps/vscode/7-issues-and-sessions.md b/docs/pt-br/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 00000000..fb8afa80 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../3-inspect-and-test/ +[next-lesson]: ../8-review-and-merge/ diff --git a/docs/pt-br/first-steps/vscode/8-review-and-merge.md b/docs/pt-br/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 00000000..83911380 --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../9-cloud-session/ diff --git a/docs/pt-br/first-steps/vscode/9-cloud-session.md b/docs/pt-br/first-steps/vscode/9-cloud-session.md new file mode 100644 index 00000000..e1e14d2d --- /dev/null +++ b/docs/pt-br/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: + - jamesmontemagno +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/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]: ../10-review/ diff --git a/docs/pt-br/first-steps/vscode/README.md b/docs/pt-br/first-steps/vscode/README.md new file mode 100644 index 00000000..d7e4f35e --- /dev/null +++ b/docs/pt-br/first-steps/vscode/README.md @@ -0,0 +1,50 @@ +--- +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." +slug: pt-br/first-steps/vscode +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: 0-prerequisites/ +[lesson-1]: 1-build-and-polish/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-publish/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-github-mcp/ +[lesson-7]: 7-issues-and-sessions/ +[lesson-8]: 8-review-and-merge/ +[lesson-9]: 9-cloud-session/ +[lesson-10]: 10-review/ diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index 33869e0d..5307c57d 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -37,7 +37,7 @@ lastUpdated: 2026-09-28 > > 如果在讲师指导的研讨会中遇到无法正常运行的内容，请向导师求助。 -[first-steps-app]: ../first-steps/copilot-app/ -[first-steps-cli]: ../first-steps/copilot-cli/ -[first-steps-vscode]: ../first-steps/vscode/ +[first-steps-app]: first-steps/copilot-app/ +[first-steps-cli]: first-steps/copilot-cli/ +[first-steps-vscode]: first-steps/vscode/ [real-world-development]: ../real-world-development/ diff --git a/docs/zh-cn/first-steps/README.md b/docs/zh-cn/first-steps/README.md new file mode 100644 index 00000000..6cf5a2ae --- /dev/null +++ b/docs/zh-cn/first-steps/README.md @@ -0,0 +1,35 @@ +--- +title: "入门体验" +slug: zh-cn/first-steps +authors: + - geektrainer +lastUpdated: 2026-09-28 +--- + +入门体验研讨会提供引导式介绍，无需现有应用程序或详细的开发场景即可探索 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]: copilot-app/ +[copilot-cli]: copilot-cli/ +[vscode]: vscode/ diff --git a/docs/zh-cn/first-steps/copilot-app/0-prerequisites.md b/docs/zh-cn/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 00000000..605a6595 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,78 @@ +--- +title: "第 0 课 - 先决条件与设置" +description: "确认研讨会的先决条件，安装 GitHub Copilot app，并熟悉工作区。" +authors: + - jamesmontemagno +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]: ../1-create-workspace/ diff --git a/docs/zh-cn/first-steps/copilot-app/1-create-workspace.md b/docs/zh-cn/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 00000000..02655db5 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "第 1 课 - 创建 Space Quiz 工作区" +description: "在空文件夹中为 Space Quiz 启动本地 Interactive 会话。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +为 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/first-steps-app-new-session.svg) + +在 **New** 界面中，可以在输入第一个提示词之前设置文件夹、模式和智能体。Interactive 会话允许在智能体构建项目时引导工作并审查每个阶段。 + +## 总结与后续步骤 + +空的 Space Quiz 工作区已准备就绪。继续学习[第 2 课：构建与优化测验][next-lesson]。 + +[model-order]: ../0-prerequisites/#选择模型 +[next-lesson]: ../2-build-and-polish/ diff --git a/docs/zh-cn/first-steps/copilot-app/10-remote.md b/docs/zh-cn/first-steps/copilot-app/10-remote.md new file mode 100644 index 00000000..2ac81a4b --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "第 10 课 - 远程继续会话（可选）" +description: "使用 /remote 在网页或 GitHub Copilot 移动应用中查看正在进行的应用会话，会话仍在本机运行。" +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +本课为可选内容，建议熟悉本地工作流程后再尝试。`/remote` 命令让会话继续在本地运行，同时可从网页和 GitHub Copilot 移动应用访问。从其他设备查看会话时，本机需要保持开机。 + +本课将： + +- 让正在进行的会话可供远程访问。 +- 从浏览器或 GitHub Copilot 移动应用查看会话。 +- 像审查其他拉取请求一样审查产生的更改。 + +## 远程继续会话 + +1. 打开仍在进行工作的会话。 +2. 运行 `/remote`，让会话可供远程访问。 +3. 在浏览器中打开返回的链接，或在 GitHub Copilot 移动应用中访问会话。 +4. 在那里查看进度，然后像审查其他拉取请求一样审查更改。 + +> [!NOTE] +> **这不是委派** +> +> 会话仍在本机运行。任务没有交给其他智能体，也没有移到云端。 + +## 总结与后续步骤 + +已经让本地会话可从其他设备访问。继续学习[第 11 课：探索 Canvas][next-lesson]。 + +[next-lesson]: ../11-canvas/ diff --git a/docs/zh-cn/first-steps/copilot-app/11-canvas.md b/docs/zh-cn/first-steps/copilot-app/11-canvas.md new file mode 100644 index 00000000..45ed3ef2 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "第 11 课 - 探索 Canvas" +description: "安装 Repository Issues Kanban Canvas，并从议题卡片启动会话。" +authors: + - jamesmontemagno +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/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]: ../12-review/ diff --git a/docs/zh-cn/first-steps/copilot-app/12-review.md b/docs/zh-cn/first-steps/copilot-app/12-review.md new file mode 100644 index 00000000..55265e2a --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "第 12 课 - 回顾与后续步骤" +description: "回顾 GitHub Copilot app 工作流，并查找继续学习的资源。" +authors: + - jamesmontemagno +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]: ../../copilot-cli/ +[first-steps-vscode]: ../../vscode/ +[real-world-app]: ../../../real-world-development/app/ diff --git a/docs/zh-cn/first-steps/copilot-app/2-build-and-polish.md b/docs/zh-cn/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 00000000..757aa9fd --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "第 2 课 - 构建与优化测验" +description: "构建单文件 Space Quiz，并通过集成浏览器和元素选择器优化它。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +使用一个详细的提示词构建 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]: ../3-inspect-and-test/ diff --git a/docs/zh-cn/first-steps/copilot-app/3-inspect-and-test.md b/docs/zh-cn/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 00000000..07b3a157 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "第 3 课 - 检查会话并测试测验" +description: "查看会话详情，确认智能体正在处理的内容，然后在向 Git 写入任何内容之前运行浏览器级冒烟测试。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +会话已经完成实际工作，现在有内容可以检查了。确认智能体的工作目标，然后让它在集成浏览器中操作测验，报告实际发生的情况，而不是预期会发生的情况。 + +本课将： + +- 查看会话详情面板。 +- 检查会话的项目、路径、分支、更改和上下文使用量。 +- 运行浏览器级冒烟测试，并修复所有失败项。 + +## 查看会话详情 + +会话详情准确显示智能体正在处理的内容。无需时刻关注这个面板，但当结果出乎意料时，其中的每一项都值得检查。 + +![Copilot app 中 Space Quiz 构建会话的详情面板示意图。面板显示基于 origin/main 的 main 分支、路径、项目、会话名称、会话 ID、智能体、一个已更改的文件、token 数量、27% 的上下文使用量、会话费用，以及启用远程控制、重命名、查看洞察、以机密 gist 分享或归档会话的选项。](../../../_images/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]: ../4-project-instructions/ diff --git a/docs/zh-cn/first-steps/copilot-app/4-project-instructions.md b/docs/zh-cn/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 00000000..0202fffe --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "第 4 课 - 记录项目指令" +description: "运行 /init，生成描述已完成 Space Quiz 的智能体指令，再根据工作习惯调整。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +测验已经完成构建、优化和测试，现在记录后续会话应如何处理项目。每个会话开始工作前都会读取智能体指令，省去在每个提示词中重复相同要求的麻烦。 + +本课将： + +- 使用 `/init` 生成智能体指令。 +- 接受生成的文件之前先审查。 +- 精简并个性化调整指令。 + +## 使用 `/init` 记录规则 + +1. 在应用会话中运行 `/init`。 +2. 接受生成的智能体指令文件之前先审查。 +3. 将内容精简为符合项目的指导：单文件、无依赖项、支持无障碍，并经过浏览器测试。 + +> [!IMPORTANT] +> **为什么要在优化后执行？** +> +> `/init` 读取的是项目当前的状态。在测验构建并测试完成后运行，生成的指令才能描述真实代码，而不是空文件夹。 + +## 按自己的习惯调整 + +指令文件不只是用来记录项目事实。还可以添加原本会在每个提示词中重复的具体要求，例如代码风格、命名约定、应避免的库，以及希望添加多少注释。后续每个会话都会先读取这个文件，再读取提示词。 + +## 总结与后续步骤 + +项目现在有了基于真实代码的智能体指令。继续学习[第 5 课：发布项目][next-lesson]。 + +[next-lesson]: ../5-publish/ diff --git a/docs/zh-cn/first-steps/copilot-app/5-publish.md b/docs/zh-cn/first-steps/copilot-app/5-publish.md new file mode 100644 index 00000000..159fca10 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "第 5 课 - 发布项目" +description: "将本地 Space Quiz 实验项目发布为公开的 GitHub 存储库。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +发布 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]: ../6-issues-and-sessions/ diff --git a/docs/zh-cn/first-steps/copilot-app/6-issues-and-sessions.md b/docs/zh-cn/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 00000000..803c7cad --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "第 6 课 - 使用议题与会话" +description: "创建范围明确的待办事项，选择一个议题，在隔离的工作树中实现，并亲自审查差异。" +authors: + - jamesmontemagno +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/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/first-steps-app-changes-tab.svg) + +**Changes** 选项卡列出会话修改过的每个文件，并内联显示差异。 + +## 总结与后续步骤 + +已经创建待办事项，在隔离会话中实现一个议题，并审查了差异。继续学习[第 7 课：先规划再编辑][next-lesson]。 + +[next-lesson]: ../7-plan-mode/ diff --git a/docs/zh-cn/first-steps/copilot-app/7-plan-mode.md b/docs/zh-cn/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 00000000..d7997ee9 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "第 7 课 - 先规划再编辑" +description: "针对第二个议题使用 Plan 模式，让智能体先调查项目并提出方案，再更改文件。" +authors: + - jamesmontemagno +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]: ../8-review-loop/ diff --git a/docs/zh-cn/first-steps/copilot-app/8-review-loop.md b/docs/zh-cn/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 00000000..01795ec3 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "第 8 课 - 完成 Copilot 审查流程" +description: "创建拉取请求，请求 Copilot 审查，处理可执行的反馈，并让 Agent Merge 持续维护拉取请求。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +将已实现的议题提交为拉取请求，请求 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]: ../9-automations/ diff --git a/docs/zh-cn/first-steps/copilot-app/9-automations.md b/docs/zh-cn/first-steps/copilot-app/9-automations.md new file mode 100644 index 00000000..334ad62c --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "第 9 课 - 自动化议题分类" +description: "创建并运行每周自动化任务，汇总最近的未关闭议题。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +使用自动化，将重复的议题分类任务转化为定时运行的智能体工作流。 + +本课将： + +- 创建每周自动化任务。 +- 将自动化任务关联到 Space Quiz 项目。 +- 立即运行自动化任务并审查结果。 + +## 创建自动化任务 + +![Copilot app 的 Automations 视图示意图，包含 All、Local 和 Cloud 筛选器、搜索框、Templates 和 New automation 按钮，以及 space-quiz 项目的两个每周自动化任务卡片：Issue triage 和 Accessibility audit。](../../../_images/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]: ../10-remote/ diff --git a/docs/zh-cn/first-steps/copilot-app/README.md b/docs/zh-cn/first-steps/copilot-app/README.md new file mode 100644 index 00000000..a586d0e2 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-app/README.md @@ -0,0 +1,54 @@ +--- +title: "GitHub Copilot app 导览" +description: "通过构建并交付 Space Quiz，在引导下探索 GitHub Copilot app。" +slug: zh-cn/first-steps/copilot-app +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +通过适合初学者的动手实践探索 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]: 0-prerequisites/ +[lesson-1]: 1-create-workspace/ +[lesson-2]: 2-build-and-polish/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-project-instructions/ +[lesson-5]: 5-publish/ +[lesson-6]: 6-issues-and-sessions/ +[lesson-7]: 7-plan-mode/ +[lesson-8]: 8-review-loop/ +[lesson-9]: 9-automations/ +[lesson-10]: 10-remote/ +[lesson-11]: 11-canvas/ +[lesson-12]: 12-review/ diff --git a/docs/zh-cn/first-steps/copilot-cli/0-prerequisites.md b/docs/zh-cn/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 00000000..24761686 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "第 0 课 - 先决条件与设置" +description: "确认研讨会的先决条件，安装 GitHub Copilot CLI，登录，并在空项目文件夹中选择模型。" +authors: + - jamesmontemagno +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/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]: ../1-build/ diff --git a/docs/zh-cn/first-steps/copilot-cli/1-build.md b/docs/zh-cn/first-steps/copilot-cli/1-build.md new file mode 100644 index 00000000..1d76cfc8 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "第 1 课 - 从终端构建测验" +description: "用一个详细请求让 Copilot CLI 构建完整的 Space Quiz，再做一项范围明确的优化。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +用一个详细请求描述整个项目，在批准之前审查智能体的提议，然后做一项范围明确的小更改。 + +本课将： + +- 在 `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]: ../2-project-instructions/ diff --git a/docs/zh-cn/first-steps/copilot-cli/10-review.md b/docs/zh-cn/first-steps/copilot-cli/10-review.md new file mode 100644 index 00000000..be18f960 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "第 10 课 - 回顾与后续步骤" +description: "回顾 Copilot CLI 工作流，并查找继续学习的资源。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +已经完成以终端为中心的工作流：构建测验、审查差异、发布项目、并行运行会话、先规划再编辑、恢复会话、合并拉取请求，并委派新工作，全程无需离开终端。 + +## 已完成的内容 + +已经： + +- 安装 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]: ../../copilot-app/ +[first-steps-vscode]: ../../vscode/ +[real-world-cli]: ../../../real-world-development/cli/ diff --git a/docs/zh-cn/first-steps/copilot-cli/2-project-instructions.md b/docs/zh-cn/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 00000000..e752d5e0 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "第 2 课 - 记录项目指令" +description: "运行 /init，生成描述已完成 Space Quiz 的智能体指令，再根据工作习惯调整。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +磁盘上已有可正常运行的测验，现在生成描述真实项目的智能体指令。后续每个会话开始工作前都会读取这些指令，省去在每个提示词中重复相同要求的麻烦。 + +本课将： + +- 使用 `/init` 生成智能体指令。 +- 接受生成的文件之前先审查。 +- 精简并个性化调整指令。 + +## 使用 `/init` 记录规则 + +1. 在会话中运行 `/init`。 +2. 接受生成的指令文件之前先审查。 +3. 只保留符合项目的指导：单文件、无依赖项、支持无障碍，并经过浏览器测试。 + +> [!IMPORTANT] +> **顺序很重要** +> +> `/init` 读取的是项目当前的状态。在测验构建并优化完成后运行，才能生成基于真实代码的指令。 + +## 按自己的习惯调整 + +指令文件不只是用来记录项目事实。还可以添加原本会在每个提示词中重复的具体要求，例如代码风格、命名约定、应避免的库，以及希望添加多少注释。后续每个会话都会先读取这个文件，再读取提示词。 + +## 总结与后续步骤 + +项目现在有了基于真实代码的智能体指令。继续学习[第 3 课：发布项目][next-lesson]。 + +[next-lesson]: ../3-publish/ diff --git a/docs/zh-cn/first-steps/copilot-cli/3-publish.md b/docs/zh-cn/first-steps/copilot-cli/3-publish.md new file mode 100644 index 00000000..847d4d2e --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "第 3 课 - 发布项目" +description: "通过提示词或自行运行命令，将 Space Quiz 初始化、提交并发布到 GitHub。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +将实验项目发布为公开的 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]: ../4-issues-and-sessions/ diff --git a/docs/zh-cn/first-steps/copilot-cli/4-issues-and-sessions.md b/docs/zh-cn/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 00000000..44ef2d20 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "第 4 课 - 并行处理议题" +description: "创建待办事项，从侧面板将议题添加到聊天，使用 /diff 审查更改，并在独立工作树中启动第二个会话。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +在终端中管理待办事项和实现流程，并为相互独立的工作开启单独的会话。 + +本课将： + +- 创建三个范围明确的 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/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/first-steps-cli-worktree.svg) + +`/worktree` 将会话移到独立分支上的独立检出目录中，让第一个会话继续工作，不受干扰。 + +## 总结与后续步骤 + +已经实现第一个议题，用 `/diff` 审查了更改，并在独立工作树中启动第二个会话。继续学习[第 5 课：先规划再编辑][next-lesson]。 + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/zh-cn/first-steps/copilot-cli/5-plan-mode.md b/docs/zh-cn/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 00000000..02b3cf45 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "第 5 课 - 先规划再编辑" +description: "使用 /plan 将第二个会话切换到计划模式，让智能体先提出方案，再编辑文件。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +第二个会话已在独立工作树中运行。不要从写代码开始。计划模式会调查项目并提出方案，同时保持文件不变。 + +本课将： + +- 将第二个会话切换到计划模式。 +- 审查并完善智能体提出的计划。 +- 批准计划，让会话实现它。 + +## 在任何编辑之前确定方案 + +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]: ../6-context/ diff --git a/docs/zh-cn/first-steps/copilot-cli/6-context.md b/docs/zh-cn/first-steps/copilot-cli/6-context.md new file mode 100644 index 00000000..a62e42c4 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "第 6 课 - 了解智能体能看到什么" +description: "使用 /context 检查上下文窗口中的内容，并在对话偏离目标时用 /clear 重新开始。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +通过终端命令可以查看并有意识地管理上下文。了解智能体能看到什么，有助于理解结果，并决定何时重新开始。 + +本课将： + +- 使用 `/context` 检查上下文窗口。 +- 查看各部分占用的窗口空间。 +- 使用 `/clear` 重置偏离目标的对话。 + +## 检查上下文 + +1. 运行 `/context`，检查文件、指令和对话历史。 +2. 检查各部分占用了多少窗口空间。 +3. 对话偏离目标时，运行 `/clear` 重新开始。 +4. 请求下一项更改之前，重新添加正确的文件。 + +![运行 /context 后的 Copilot CLI 输出示意图。上下文窗口用量指示器显示已使用 61%，分别由对话、已读取文件和指令占用。提示建议空间不足时使用 /compact 汇总，或启动新会话。](../../../_images/first-steps-cli-context.svg) + +`/context` 准确显示上下文窗口中有哪些内容，以及还剩多少空间。空间不足时，使用 `/compact` 汇总对话，或启动新会话。 + +## 总结与后续步骤 + +现在可以查看并管理智能体掌握的信息。继续学习[第 7 课：恢复会话与远程访问][next-lesson]。 + +[next-lesson]: ../7-resume-and-remote/ diff --git a/docs/zh-cn/first-steps/copilot-cli/7-resume-and-remote.md b/docs/zh-cn/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 00000000..6d8e52ff --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "第 7 课 - 恢复会话与远程访问" +description: "离开 Copilot CLI 会话后，使用 copilot --resume 或 /resume 返回，还可用 /remote 从其他设备查看会话。" +authors: + - jamesmontemagno +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]: ../8-pull-request/ diff --git a/docs/zh-cn/first-steps/copilot-cli/8-pull-request.md b/docs/zh-cn/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 00000000..02070f04 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "第 8 课 - 从 CLI 创建、审查与合并" +description: "检查最终差异，使用 /pr create 创建拉取请求，处理反馈，并通过 /pr agentmerge 合并。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +完成开发流程，无需切换到桌面界面。 + +本课将： + +- 最后检查一次已更改的文件。 +- 从当前分支创建拉取请求。 +- 审查拉取请求并处理反馈。 +- 使用 `/pr agentmerge` 验证并合并拉取请求。 + +## 创建、审查与合并 + +1. 运行 `/diff`，最后检查一次已更改的文件。 +2. 让 Copilot 从当前分支创建拉取请求，或运行 `/pr create`。 +3. 打开侧面板的 **Pull requests** 选项卡，检查标题、描述、文件和状态检查。 +4. 处理可执行的反馈，在浏览器中检查结果，并回复更改内容。 +5. 拉取请求准备就绪后，运行 `/pr agentmerge`，让它验证拉取请求，并在完成所需确认且检查通过后合并。 + +## 总结与后续步骤 + +已经在不离开终端的情况下创建、审查并合并拉取请求。继续学习[第 9 课：对工作流程有把握后再委派工作][next-lesson]。 + +[next-lesson]: ../9-delegate/ diff --git a/docs/zh-cn/first-steps/copilot-cli/9-delegate.md b/docs/zh-cn/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 00000000..dc243d3b --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,36 @@ +--- +title: "第 9 课 - 对工作流程有把握后再委派工作" +description: "将 Space Quiz 的新功能交给 /delegate，在任务运行时继续工作，并从 CLI 查看云会话进度。" +authors: + - jamesmontemagno +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]: ../10-review/ diff --git a/docs/zh-cn/first-steps/copilot-cli/README.md b/docs/zh-cn/first-steps/copilot-cli/README.md new file mode 100644 index 00000000..b71aa768 --- /dev/null +++ b/docs/zh-cn/first-steps/copilot-cli/README.md @@ -0,0 +1,50 @@ +--- +title: "GitHub Copilot CLI 入门" +description: "通过构建并交付 Space Quiz，在引导下探索以终端为中心的 GitHub Copilot CLI 工作流。" +slug: zh-cn/first-steps/copilot-cli +authors: + - jamesmontemagno +lastUpdated: 2026-10-05 +--- + +通过适合初学者的动手实践探索 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]: 0-prerequisites/ +[lesson-1]: 1-build/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-publish/ +[lesson-4]: 4-issues-and-sessions/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-context/ +[lesson-7]: 7-resume-and-remote/ +[lesson-8]: 8-pull-request/ +[lesson-9]: 9-delegate/ +[lesson-10]: 10-review/ diff --git a/docs/zh-cn/first-steps/vscode/0-prerequisites.md b/docs/zh-cn/first-steps/vscode/0-prerequisites.md new file mode 100644 index 00000000..ef4f5191 --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,54 @@ +--- +title: "第 0 课 - 先决条件与设置" +description: "确认研讨会的先决条件，验证 VS Code 中的 Copilot Chat，添加 GitHub Pull Requests and Issues 扩展，并选择模型。" +authors: + - jamesmontemagno +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]: ../1-build-and-polish/ diff --git a/docs/zh-cn/first-steps/vscode/1-build-and-polish.md b/docs/zh-cn/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 00000000..d7f7a5d1 --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "第 1 课 - 在工作区中构建" +description: "在 VS Code 中构建 Space Quiz，在集成浏览器中预览，并优化选中的元素。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +将编辑器、聊天、文件和预览放在一起。构建测验，在集成浏览器中答题，然后将特定元素直接交给聊天，进行范围明确的更改。 + +本课将： + +- 在单个 `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]: ../2-project-instructions/ diff --git a/docs/zh-cn/first-steps/vscode/10-review.md b/docs/zh-cn/first-steps/vscode/10-review.md new file mode 100644 index 00000000..022929fe --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "第 10 课 - 回顾与后续步骤" +description: "回顾 VS Code 工作流，并查找继续学习的资源。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +已经完成以编辑器为中心的工作流：在编辑器中构建、记录指令、在集成浏览器中测试、先规划再编辑、通过 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]: ../../copilot-app/ +[first-steps-cli]: ../../copilot-cli/ +[real-world-vscode]: ../../../real-world-development/vscode/ diff --git a/docs/zh-cn/first-steps/vscode/2-project-instructions.md b/docs/zh-cn/first-steps/vscode/2-project-instructions.md new file mode 100644 index 00000000..8a1ff2b3 --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "第 2 课 - 记录项目指令" +description: "在 Copilot Chat 中运行 /init，为 Space Quiz 生成 .github/copilot-instructions.md，然后进行调整。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +工作区中已有可正常运行的测验，现在生成描述真实项目的存储库自定义指令。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/first-steps-vscode-instructions.svg) + +存储库自定义指令位于 `.github/copilot-instructions.md`，适用于每次聊天请求。 + +> [!IMPORTANT] +> **顺序很重要** +> +> `/init` 读取的是工作区当前的状态。在测验构建完成后运行，才能生成基于真实代码的指令。 + +## 按自己的习惯调整 + +指令文件不只是用来记录项目事实。还可以添加原本会在每个提示词中重复的具体要求，例如代码风格、命名约定、应避免的库，以及希望添加多少注释。后续每个会话都会先读取这个文件，再读取提示词。 + +## 总结与后续步骤 + +工作区现在有了基于真实代码的自定义指令。继续学习[第 3 课：检查上下文并测试][next-lesson]。 + +[next-lesson]: ../3-inspect-and-test/ diff --git a/docs/zh-cn/first-steps/vscode/3-inspect-and-test.md b/docs/zh-cn/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 00000000..4fccd7d1 --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "第 3 课 - 检查上下文并测试" +description: "检查 Copilot Chat 请求附带的上下文，然后在向 Git 写入任何内容之前运行浏览器级冒烟测试。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +发布任何内容之前，先检查 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]: ../4-publish/ diff --git a/docs/zh-cn/first-steps/vscode/4-publish.md b/docs/zh-cn/first-steps/vscode/4-publish.md new file mode 100644 index 00000000..850f60ff --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "第 4 课 - 发布项目" +description: "完全通过 VS Code 内置的 Source Control 集成，将 Space Quiz 初始化、提交并发布。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +完全通过内置的 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/first-steps-vscode-commit.svg) + +闪光按钮根据已暂存的差异起草提交消息。提交后，**Source Control** 还会提供创建拉取请求的选项。 + +## 总结与后续步骤 + +经过测试的测验现在已发布到 GitHub。继续学习[第 5 课：先规划再编辑][next-lesson]。 + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/zh-cn/first-steps/vscode/5-plan-mode.md b/docs/zh-cn/first-steps/vscode/5-plan-mode.md new file mode 100644 index 00000000..a3afd90c --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "第 5 课 - 先规划再编辑" +description: "将 Copilot Chat 切换到 Plan 模式，先调查工作区并提出方案，再编辑文件。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +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]: ../6-github-mcp/ diff --git a/docs/zh-cn/first-steps/vscode/6-github-mcp.md b/docs/zh-cn/first-steps/vscode/6-github-mcp.md new file mode 100644 index 00000000..05501aff --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "第 6 课 - 为 Copilot 配备 GitHub 工具" +description: "让 Copilot 处理议题和拉取请求之前，先在 VS Code 中启用并审查 GitHub MCP 服务器。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +让 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]: ../7-issues-and-sessions/ diff --git a/docs/zh-cn/first-steps/vscode/7-issues-and-sessions.md b/docs/zh-cn/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 00000000..3dd52568 --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "第 7 课 - 规划并实现议题" +description: "使用 GitHub 工具从 Copilot Chat 创建议题，然后在新的聊天会话中实现其中一个。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +启用 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]: ../3-inspect-and-test/ +[next-lesson]: ../8-review-and-merge/ diff --git a/docs/zh-cn/first-steps/vscode/8-review-and-merge.md b/docs/zh-cn/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 00000000..5f66d605 --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "第 8 课 - 审查与合并" +description: "从 Source Control 创建拉取请求，请求 Copilot 代码审查，使用 GitHub 工具处理反馈，然后合并。" +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +使用 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]: ../9-cloud-session/ diff --git a/docs/zh-cn/first-steps/vscode/9-cloud-session.md b/docs/zh-cn/first-steps/vscode/9-cloud-session.md new file mode 100644 index 00000000..3c61974c --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,45 @@ +--- +title: "第 9 课 - 将下一个想法交给云会话" +description: "将 Copilot Chat 的运行环境从 Local 切换到 Cloud，委派一个可独立完成、以拉取请求交付的功能。" +authors: + - jamesmontemagno +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/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]: ../10-review/ diff --git a/docs/zh-cn/first-steps/vscode/README.md b/docs/zh-cn/first-steps/vscode/README.md new file mode 100644 index 00000000..2608b325 --- /dev/null +++ b/docs/zh-cn/first-steps/vscode/README.md @@ -0,0 +1,50 @@ +--- +title: "Visual Studio Code 入门" +description: "通过构建、测试并交付 Space Quiz，在引导下探索 Visual Studio Code 中的 GitHub Copilot。" +slug: zh-cn/first-steps/vscode +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +通过适合初学者的动手实践探索 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]: 0-prerequisites/ +[lesson-1]: 1-build-and-polish/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-publish/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-github-mcp/ +[lesson-7]: 7-issues-and-sessions/ +[lesson-8]: 8-review-and-merge/ +[lesson-9]: 9-cloud-session/ +[lesson-10]: 10-review/ diff --git a/website/astro.config.mjs b/website/astro.config.mjs index a6d2d209..e32ffe8b 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -54,59 +54,456 @@ export default defineConfig({ { label: 'Home', link: '/' }, { label: 'First steps', + translations: { + 'es-ES': 'Primeros pasos', + 'ja-JP': 'はじめの一歩', + 'ko-KR': '첫 단계', + 'pt-BR': 'Primeiros passos', + 'zh-CN': '入门体验', + }, items: [ - { label: 'Overview', link: '/first-steps/' }, + { + label: 'Overview', + link: '/first-steps/', + translations: { + 'es-ES': 'Descripción general', + 'ja-JP': '概要', + 'ko-KR': '개요', + 'pt-BR': 'Visão geral', + 'zh-CN': '概述', + }, + }, { label: 'GitHub Copilot app', items: [ - { label: 'Overview', link: '/first-steps/copilot-app/' }, - { label: '0. Prerequisites and setup', link: '/first-steps/copilot-app/0-prerequisites/' }, - { label: '1. Create the workspace', link: '/first-steps/copilot-app/1-create-workspace/' }, - { label: '2. Build and polish', link: '/first-steps/copilot-app/2-build-and-polish/' }, - { label: '3. Inspect and test', link: '/first-steps/copilot-app/3-inspect-and-test/' }, - { label: '4. Project instructions', link: '/first-steps/copilot-app/4-project-instructions/' }, - { label: '5. Publish the project', link: '/first-steps/copilot-app/5-publish/' }, - { label: '6. Issues and sessions', link: '/first-steps/copilot-app/6-issues-and-sessions/' }, - { label: '7. Plan before you edit', link: '/first-steps/copilot-app/7-plan-mode/' }, - { label: '8. Complete the review loop', link: '/first-steps/copilot-app/8-review-loop/' }, - { label: '9. Automate issue triage', link: '/first-steps/copilot-app/9-automations/' }, - { label: '10. Continue remotely (optional)', link: '/first-steps/copilot-app/10-remote/' }, - { label: '11. Explore a Canvas', link: '/first-steps/copilot-app/11-canvas/' }, - { label: '12. Review and next steps', link: '/first-steps/copilot-app/12-review/' }, + { + label: 'Overview', + link: '/first-steps/copilot-app/', + translations: { + 'es-ES': 'Descripción general', + 'ja-JP': '概要', + 'ko-KR': '개요', + 'pt-BR': 'Visão geral', + 'zh-CN': '概述', + }, + }, + { + label: '0. Prerequisites and setup', + link: '/first-steps/copilot-app/0-prerequisites/', + translations: { + 'es-ES': '0. Requisitos previos y configuración', + 'ja-JP': '0. 前提条件とセットアップ', + 'ko-KR': '0. 사전 준비 및 설정', + 'pt-BR': '0. Pré-requisitos e configuração', + 'zh-CN': '0. 先决条件与设置', + }, + }, + { + label: '1. Create the workspace', + link: '/first-steps/copilot-app/1-create-workspace/', + translations: { + 'es-ES': '1. Crea el espacio de trabajo', + 'ja-JP': '1. ワークスペースを作成する', + 'ko-KR': '1. 작업 영역 만들기', + 'pt-BR': '1. Crie o espaço de trabalho', + 'zh-CN': '1. 创建工作区', + }, + }, + { + label: '2. Build and polish', + link: '/first-steps/copilot-app/2-build-and-polish/', + translations: { + 'es-ES': '2. Crea y mejora', + 'ja-JP': '2. 作成して仕上げる', + 'ko-KR': '2. 만들고 다듬기', + 'pt-BR': '2. Crie e aprimore', + 'zh-CN': '2. 构建与完善', + }, + }, + { + label: '3. Inspect and test', + link: '/first-steps/copilot-app/3-inspect-and-test/', + translations: { + 'es-ES': '3. Inspecciona y prueba', + 'ja-JP': '3. 確認してテストする', + 'ko-KR': '3. 살펴보고 테스트하기', + 'pt-BR': '3. Inspecione e teste', + 'zh-CN': '3. 检查与测试', + }, + }, + { + label: '4. Project instructions', + link: '/first-steps/copilot-app/4-project-instructions/', + translations: { + 'es-ES': '4. Instrucciones del proyecto', + 'ja-JP': '4. プロジェクトの指示', + 'ko-KR': '4. 프로젝트 지침', + 'pt-BR': '4. Instruções do projeto', + 'zh-CN': '4. 项目指令', + }, + }, + { + label: '5. Publish the project', + link: '/first-steps/copilot-app/5-publish/', + translations: { + 'es-ES': '5. Publica el proyecto', + 'ja-JP': '5. プロジェクトを公開する', + 'ko-KR': '5. 프로젝트 게시하기', + 'pt-BR': '5. Publique o projeto', + 'zh-CN': '5. 发布项目', + }, + }, + { + label: '6. Issues and sessions', + link: '/first-steps/copilot-app/6-issues-and-sessions/', + translations: { + 'es-ES': '6. Incidencias y sesiones', + 'ja-JP': '6. Issue とセッション', + 'ko-KR': '6. 이슈와 세션', + 'pt-BR': '6. Issues e sessões', + 'zh-CN': '6. 议题与会话', + }, + }, + { + label: '7. Plan before you edit', + link: '/first-steps/copilot-app/7-plan-mode/', + translations: { + 'es-ES': '7. Planifica antes de editar', + 'ja-JP': '7. 編集前に計画する', + 'ko-KR': '7. 편집 전에 계획하기', + 'pt-BR': '7. Planeje antes de editar', + 'zh-CN': '7. 先规划再编辑', + }, + }, + { + label: '8. Complete the review loop', + link: '/first-steps/copilot-app/8-review-loop/', + translations: { + 'es-ES': '8. Completa el ciclo de revisión', + 'ja-JP': '8. レビューのサイクルを完了する', + 'ko-KR': '8. 검토 과정 완료하기', + 'pt-BR': '8. Conclua o ciclo de revisão', + 'zh-CN': '8. 完成审查流程', + }, + }, + { + label: '9. Automate issue triage', + link: '/first-steps/copilot-app/9-automations/', + translations: { + 'es-ES': '9. Automatiza la clasificación de incidencias', + 'ja-JP': '9. Issue のトリアージを自動化する', + 'ko-KR': '9. 이슈 분류 자동화하기', + 'pt-BR': '9. Automatize a triagem de issues', + 'zh-CN': '9. 自动化议题分类', + }, + }, + { + label: '10. Continue remotely (optional)', + link: '/first-steps/copilot-app/10-remote/', + translations: { + 'es-ES': '10. Continúa de forma remota (opcional)', + 'ja-JP': '10. リモートで続ける (省略可能)', + 'ko-KR': '10. 원격으로 계속하기 (선택 사항)', + 'pt-BR': '10. Continue remotamente (opcional)', + 'zh-CN': '10. 远程继续工作（可选）', + }, + }, + { + label: '11. Explore a Canvas', + link: '/first-steps/copilot-app/11-canvas/', + translations: { + 'es-ES': '11. Explora un Canvas', + 'ja-JP': '11. Canvas を体験する', + 'ko-KR': '11. Canvas 살펴보기', + 'pt-BR': '11. Explore um Canvas', + 'zh-CN': '11. 探索 Canvas', + }, + }, + { + label: '12. Review and next steps', + link: '/first-steps/copilot-app/12-review/', + translations: { + 'es-ES': '12. Repaso y próximos pasos', + 'ja-JP': '12. 振り返りと次のステップ', + 'ko-KR': '12. 복습 및 다음 단계', + 'pt-BR': '12. Revisão e próximos passos', + 'zh-CN': '12. 回顾与后续步骤', + }, + }, ], }, { label: 'GitHub Copilot CLI', items: [ - { label: 'Overview', link: '/first-steps/copilot-cli/' }, - { label: '0. Prerequisites and setup', link: '/first-steps/copilot-cli/0-prerequisites/' }, - { label: '1. Build the quiz', link: '/first-steps/copilot-cli/1-build/' }, - { label: '2. Project instructions', link: '/first-steps/copilot-cli/2-project-instructions/' }, - { label: '3. Publish the project', link: '/first-steps/copilot-cli/3-publish/' }, - { label: '4. Issues in parallel', link: '/first-steps/copilot-cli/4-issues-and-sessions/' }, - { label: '5. Plan before you edit', link: '/first-steps/copilot-cli/5-plan-mode/' }, - { label: '6. Manage context', link: '/first-steps/copilot-cli/6-context/' }, - { label: '7. Resume and go remote', link: '/first-steps/copilot-cli/7-resume-and-remote/' }, - { label: '8. Create and merge a PR', link: '/first-steps/copilot-cli/8-pull-request/' }, - { label: '9. Delegate work', link: '/first-steps/copilot-cli/9-delegate/' }, - { label: '10. Review and next steps', link: '/first-steps/copilot-cli/10-review/' }, + { + label: 'Overview', + link: '/first-steps/copilot-cli/', + translations: { + 'es-ES': 'Descripción general', + 'ja-JP': '概要', + 'ko-KR': '개요', + 'pt-BR': 'Visão geral', + 'zh-CN': '概述', + }, + }, + { + label: '0. Prerequisites and setup', + link: '/first-steps/copilot-cli/0-prerequisites/', + translations: { + 'es-ES': '0. Requisitos previos y configuración', + 'ja-JP': '0. 前提条件とセットアップ', + 'ko-KR': '0. 사전 준비 및 설정', + 'pt-BR': '0. Pré-requisitos e configuração', + 'zh-CN': '0. 先决条件与设置', + }, + }, + { + label: '1. Build the quiz', + link: '/first-steps/copilot-cli/1-build/', + translations: { + 'es-ES': '1. Crea el cuestionario', + 'ja-JP': '1. クイズを作成する', + 'ko-KR': '1. 퀴즈 만들기', + 'pt-BR': '1. Crie o quiz', + 'zh-CN': '1. 构建测验', + }, + }, + { + label: '2. Project instructions', + link: '/first-steps/copilot-cli/2-project-instructions/', + translations: { + 'es-ES': '2. Instrucciones del proyecto', + 'ja-JP': '2. プロジェクトの指示', + 'ko-KR': '2. 프로젝트 지침', + 'pt-BR': '2. Instruções do projeto', + 'zh-CN': '2. 项目指令', + }, + }, + { + label: '3. Publish the project', + link: '/first-steps/copilot-cli/3-publish/', + translations: { + 'es-ES': '3. Publica el proyecto', + 'ja-JP': '3. プロジェクトを公開する', + 'ko-KR': '3. 프로젝트 게시하기', + 'pt-BR': '3. Publique o projeto', + 'zh-CN': '3. 发布项目', + }, + }, + { + label: '4. Issues in parallel', + link: '/first-steps/copilot-cli/4-issues-and-sessions/', + translations: { + 'es-ES': '4. Incidencias en paralelo', + 'ja-JP': '4. Issue を並行して処理する', + 'ko-KR': '4. 이슈 병렬 처리하기', + 'pt-BR': '4. Issues em paralelo', + 'zh-CN': '4. 并行处理议题', + }, + }, + { + label: '5. Plan before you edit', + link: '/first-steps/copilot-cli/5-plan-mode/', + translations: { + 'es-ES': '5. Planifica antes de editar', + 'ja-JP': '5. 編集前に計画する', + 'ko-KR': '5. 편집 전에 계획하기', + 'pt-BR': '5. Planeje antes de editar', + 'zh-CN': '5. 先规划再编辑', + }, + }, + { + label: '6. Manage context', + link: '/first-steps/copilot-cli/6-context/', + translations: { + 'es-ES': '6. Gestiona el contexto', + 'ja-JP': '6. コンテキストを管理する', + 'ko-KR': '6. 컨텍스트 관리하기', + 'pt-BR': '6. Gerencie o contexto', + 'zh-CN': '6. 管理上下文', + }, + }, + { + label: '7. Resume and go remote', + link: '/first-steps/copilot-cli/7-resume-and-remote/', + translations: { + 'es-ES': '7. Reanuda y continúa de forma remota', + 'ja-JP': '7. 再開してリモートで続ける', + 'ko-KR': '7. 재개하고 원격으로 작업하기', + 'pt-BR': '7. Retome e continue remotamente', + 'zh-CN': '7. 恢复会话并远程工作', + }, + }, + { + label: '8. Create and merge a PR', + link: '/first-steps/copilot-cli/8-pull-request/', + translations: { + 'es-ES': '8. Crea y combina una solicitud de incorporación de cambios', + 'ja-JP': '8. プル リクエストを作成してマージする', + 'ko-KR': '8. 끌어오기 요청 만들기 및 병합하기', + 'pt-BR': '8. Crie e mescle um pull request', + 'zh-CN': '8. 创建并合并拉取请求', + }, + }, + { + label: '9. Delegate work', + link: '/first-steps/copilot-cli/9-delegate/', + translations: { + 'es-ES': '9. Delega trabajo', + 'ja-JP': '9. 作業を委任する', + 'ko-KR': '9. 작업 위임하기', + 'pt-BR': '9. Delegue trabalho', + 'zh-CN': '9. 委派工作', + }, + }, + { + label: '10. Review and next steps', + link: '/first-steps/copilot-cli/10-review/', + translations: { + 'es-ES': '10. Repaso y próximos pasos', + 'ja-JP': '10. 振り返りと次のステップ', + 'ko-KR': '10. 복습 및 다음 단계', + 'pt-BR': '10. Revisão e próximos passos', + 'zh-CN': '10. 回顾与后续步骤', + }, + }, ], }, { label: 'Visual Studio Code', items: [ - { label: 'Overview', link: '/first-steps/vscode/' }, - { label: '0. Prerequisites and setup', link: '/first-steps/vscode/0-prerequisites/' }, - { label: '1. Build and polish', link: '/first-steps/vscode/1-build-and-polish/' }, - { label: '2. Project instructions', link: '/first-steps/vscode/2-project-instructions/' }, - { label: '3. Inspect context and test', link: '/first-steps/vscode/3-inspect-and-test/' }, - { label: '4. Publish the project', link: '/first-steps/vscode/4-publish/' }, - { label: '5. Plan before you edit', link: '/first-steps/vscode/5-plan-mode/' }, - { label: '6. GitHub MCP', link: '/first-steps/vscode/6-github-mcp/' }, - { label: '7. Issues and sessions', link: '/first-steps/vscode/7-issues-and-sessions/' }, - { label: '8. Review and merge', link: '/first-steps/vscode/8-review-and-merge/' }, - { label: '9. Cloud session', link: '/first-steps/vscode/9-cloud-session/' }, - { label: '10. Review and next steps', link: '/first-steps/vscode/10-review/' }, + { + label: 'Overview', + link: '/first-steps/vscode/', + translations: { + 'es-ES': 'Descripción general', + 'ja-JP': '概要', + 'ko-KR': '개요', + 'pt-BR': 'Visão geral', + 'zh-CN': '概述', + }, + }, + { + label: '0. Prerequisites and setup', + link: '/first-steps/vscode/0-prerequisites/', + translations: { + 'es-ES': '0. Requisitos previos y configuración', + 'ja-JP': '0. 前提条件とセットアップ', + 'ko-KR': '0. 사전 준비 및 설정', + 'pt-BR': '0. Pré-requisitos e configuração', + 'zh-CN': '0. 先决条件与设置', + }, + }, + { + label: '1. Build and polish', + link: '/first-steps/vscode/1-build-and-polish/', + translations: { + 'es-ES': '1. Crea y mejora', + 'ja-JP': '1. 作成して仕上げる', + 'ko-KR': '1. 만들고 다듬기', + 'pt-BR': '1. Crie e aprimore', + 'zh-CN': '1. 构建与完善', + }, + }, + { + label: '2. Project instructions', + link: '/first-steps/vscode/2-project-instructions/', + translations: { + 'es-ES': '2. Instrucciones del proyecto', + 'ja-JP': '2. プロジェクトの指示', + 'ko-KR': '2. 프로젝트 지침', + 'pt-BR': '2. Instruções do projeto', + 'zh-CN': '2. 项目指令', + }, + }, + { + label: '3. Inspect context and test', + link: '/first-steps/vscode/3-inspect-and-test/', + translations: { + 'es-ES': '3. Inspecciona el contexto y prueba', + 'ja-JP': '3. コンテキストを確認してテストする', + 'ko-KR': '3. 컨텍스트 확인 및 테스트하기', + 'pt-BR': '3. Inspecione o contexto e teste', + 'zh-CN': '3. 检查上下文并测试', + }, + }, + { + label: '4. Publish the project', + link: '/first-steps/vscode/4-publish/', + translations: { + 'es-ES': '4. Publica el proyecto', + 'ja-JP': '4. プロジェクトを公開する', + 'ko-KR': '4. 프로젝트 게시하기', + 'pt-BR': '4. Publique o projeto', + 'zh-CN': '4. 发布项目', + }, + }, + { + label: '5. Plan before you edit', + link: '/first-steps/vscode/5-plan-mode/', + translations: { + 'es-ES': '5. Planifica antes de editar', + 'ja-JP': '5. 編集前に計画する', + 'ko-KR': '5. 편집 전에 계획하기', + 'pt-BR': '5. Planeje antes de editar', + 'zh-CN': '5. 先规划再编辑', + }, + }, + { + label: '6. GitHub MCP', + link: '/first-steps/vscode/6-github-mcp/', + translations: { + 'es-ES': '6. GitHub MCP', + 'ja-JP': '6. GitHub MCP', + 'ko-KR': '6. GitHub MCP', + 'pt-BR': '6. GitHub MCP', + 'zh-CN': '6. GitHub MCP', + }, + }, + { + label: '7. Issues and sessions', + link: '/first-steps/vscode/7-issues-and-sessions/', + translations: { + 'es-ES': '7. Incidencias y sesiones', + 'ja-JP': '7. Issue とセッション', + 'ko-KR': '7. 이슈와 세션', + 'pt-BR': '7. Issues e sessões', + 'zh-CN': '7. 议题与会话', + }, + }, + { + label: '8. Review and merge', + link: '/first-steps/vscode/8-review-and-merge/', + translations: { + 'es-ES': '8. Revisa y combina', + 'ja-JP': '8. レビューしてマージする', + 'ko-KR': '8. 검토 및 병합하기', + 'pt-BR': '8. Revise e mescle', + 'zh-CN': '8. 审查与合并', + }, + }, + { + label: '9. Cloud session', + link: '/first-steps/vscode/9-cloud-session/', + translations: { + 'es-ES': '9. Sesión en la nube', + 'ja-JP': '9. クラウド セッション', + 'ko-KR': '9. 클라우드 세션', + 'pt-BR': '9. Sessão na nuvem', + 'zh-CN': '9. 云会话', + }, + }, + { + label: '10. Review and next steps', + link: '/first-steps/vscode/10-review/', + translations: { + 'es-ES': '10. Repaso y próximos pasos', + 'ja-JP': '10. 振り返りと次のステップ', + 'ko-KR': '10. 복습 및 다음 단계', + 'pt-BR': '10. Revisão e próximos passos', + 'zh-CN': '10. 回顾与后续步骤', + }, + }, ], }, ],