Skip to content

Commit 172969d

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Split workshop README into .lab/ multi-file structure
Reorganize the single monolithic README.md into the .lab/ folder structure used by agent-lab repos for easier maintenance and consumption. - Slim down README.md to overview, lab guide table, and quick start - Add .lab/GUIDE.md as quick reference with links and task summary - Add .lab/00-overview.md through .lab/08-tips-and-resources.md - Add .lab/.ignored-by-agents marker - Each exercise file has consistent header/footer navigation Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 744d7d4 commit 172969d

12 files changed

Lines changed: 763 additions & 405 deletions

‎.lab/.ignored-by-agents‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Agents MUST ignore this folder for code suggestions.

‎.lab/00-overview.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# 🎮 GitHub Copilot for Xcode Workshop
2+
3+
[📚 Lab Guide](GUIDE.md) • [← README](../README.md)
4+
5+
---
6+
7+
> **Level:** Beginner to Intermediate
8+
> **Stack:** Swift / SwiftUI / Xcode
9+
10+
Welcome to the **Landmarks** workshop — a hands-on lab where you'll learn to use **GitHub Copilot for Xcode** through practical exercises with a real SwiftUI app.
11+
12+
---
13+
14+
## 📋 Quick Checklist
15+
16+
Before you begin, verify:
17+
18+
- [ ] **Xcode 15 or later** installed
19+
- [ ] **GitHub Copilot for Xcode** extension installed
20+
- [ ] Signed in to **GitHub Copilot** in Xcode
21+
- [ ] Copilot Chat panel open and ready
22+
23+
---
24+
25+
## 🎯 What You'll Learn
26+
27+
| # | Skill | Description |
28+
|---|-------|-------------|
29+
| 1 | **Code Completion** | Get intelligent inline suggestions as you type |
30+
| 2 | **Copilot Chat** | Ask questions about your codebase and get instant answers |
31+
| 3 | **Agent Mode** | Multi-file refactoring and complex code generation |
32+
| 4 | **Plan Agent** | Break down complex tasks into actionable steps |
33+
| 5 | **MCP Servers** | Extend Copilot with GitHub integration |
34+
| 6 | **Copilot Vision** | UI-aware code generation (optional) |
35+
36+
---
37+
38+
## 📚 Lab Parts
39+
40+
| Part | Title | Description |
41+
|------|-------|-------------|
42+
| [**01**](01-setup.md) | Prerequisites & Setup | Install and configure GitHub Copilot for Xcode |
43+
| [**02**](02-chat.md) | Understanding Code with Copilot Chat | Explore codebases with AI assistance |
44+
| [**03**](03-completion.md) | Code Completion | AI-powered inline suggestions |
45+
| [**04**](04-agent-mode.md) | Agent Mode | Multi-file refactoring |
46+
| [**05**](05-plan-agent.md) | Plan Agent | Decompose complex features |
47+
| [**06**](06-mcp.md) | MCP Server Integration | GitHub tools in Copilot |
48+
| [**07**](07-vision.md) | Copilot Vision (Optional) | Generate code from UI designs |
49+
50+
---
51+
52+
## ✅ Workshop Completion Checklist
53+
54+
After completing this workshop, you should be able to:
55+
56+
- [ ] Use Copilot Chat to understand and explore codebases
57+
- [ ] Accept and use inline code suggestions effectively
58+
- [ ] Apply Agent Mode for multi-file refactoring
59+
- [ ] Break down complex features with Plan Agent
60+
- [ ] Set up and use MCP servers (GitHub integration)
61+
- [ ] (Optional) Generate code from UI mockups with Copilot Vision
62+
- [ ] Write better prompts for more accurate suggestions
63+
64+
---
65+
66+
## 💡 Pro Tips
67+
68+
1. **Keep the Preview Canvas open** — Watch live UI updates as you code
69+
2. **Commit often** — Save working states frequently
70+
3. **Use Cmd + Z** — Revert unexpected changes quickly
71+
4. **📌 Pin this guide** — Keep it visible while you work
72+
73+
---
74+
75+
## 🚀 Ready?
76+
77+
👉 **[Start with Part 1: Prerequisites & Setup](01-setup.md)**
78+
79+
---
80+
81+
[📚 Lab Guide](GUIDE.md) • [← README](../README.md)

‎.lab/01-setup.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Part 1: Prerequisites & Setup
2+
3+
[📚 Lab Guide](GUIDE.md) • [← Overview](00-overview.md)
4+
5+
---
6+
7+
Before starting the workshop, ensure you have:
8+
9+
- **Xcode 15 or later** installed
10+
- **GitHub Copilot for Xcode** extension ([Download here](https://github.com/github/CopilotForXcode/releases))
11+
- Signed in to **GitHub Copilot** in Xcode with your GitHub account
12+
13+
---
14+
15+
## 🔧 Installation & Setup
16+
17+
### Step 1: Install GitHub Copilot for Xcode
18+
19+
Download the latest `.dmg` from the [releases page](https://github.com/github/CopilotForXcode/releases) and drag the app into **Applications**.
20+
21+
### Step 2: Background Item
22+
23+
A background item will be added to enable the GitHub Copilot for Xcode extension app to connect to the host app. This permission is usually automatically added when first launching the app.
24+
25+
### Step 3: Grant Required Permissions
26+
27+
Grant the required permissions: **Background**, **Accessibility**, and **Xcode Source Editor Extension**.
28+
29+
- **Background**: Done in the previous step.
30+
- **Accessibility**: The first time the application runs, a permission prompt will appear.
31+
- **Xcode Source Editor Extension**: This must be enabled manually. Click **Extension Permission** from the GitHub Copilot for Xcode application settings to open the System Preferences to the Extensions panel. Select **Xcode Source Editor** and enable **GitHub Copilot**.
32+
33+
### Step 4: Sign In to GitHub Copilot
34+
35+
**Option A (menu bar)**
36+
1. Click the **Copilot** icon in the macOS menu bar
37+
2. Choose **Sign in to GitHub Account**
38+
3. Authorize in the browser when prompted
39+
40+
**Option B (app → chat panel)**
41+
1. Run the **GitHub Copilot for Xcode** app
42+
2. In the Copilot Chat panel that appears, click **Sign in**
43+
3. Authorize in the browser when prompted
44+
45+
### Step 5: Open This Workshop Project
46+
47+
Clone this repository and open in Xcode:
48+
49+
```bash
50+
git clone https://github.com/copilot-dev-days/xcode-workshop.git
51+
cd xcode-workshop
52+
open Landmarks.xcodeproj
53+
```
54+
55+
### Step 6: Open Copilot Chat
56+
57+
The Copilot Chat panel should already be open by default. If you don't see it, you can open it in two ways:
58+
- **Via Xcode menu**: Xcode → Editor → GitHub Copilot → Open Chat
59+
- **Via GitHub Copilot app menu**: Click the menu bar icon → Open Chat
60+
61+
---
62+
63+
## ✅ Part 1 Complete!
64+
65+
You've set up:
66+
- GitHub Copilot for Xcode extension
67+
- Required permissions (Background, Accessibility, Source Editor)
68+
- GitHub authentication
69+
- The workshop project in Xcode with Copilot Chat open
70+
71+
---
72+
73+
[📚 Lab Guide](GUIDE.md) • [← Overview](00-overview.md)
74+
75+
👉 **[Continue to Part 2: Understanding Code with Copilot Chat →](02-chat.md)**

‎.lab/02-chat.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Part 2: Understanding Code with Copilot Chat
2+
3+
[📚 Lab Guide](GUIDE.md) • [← Setup](01-setup.md)
4+
5+
---
6+
7+
**Goal**: Learn how to select a model and use Copilot Chat to explore codebases.
8+
9+
---
10+
11+
## Steps
12+
13+
1. Open the Landmarks project in Xcode
14+
2. Navigate to **ContentView.swift**
15+
Path: `Landmarks/Views/ContentView.swift`
16+
3. Open the **Copilot Chat** panel (see [Setup](01-setup.md) step 6)
17+
4. **Select a model**: In the chat input area, look for the model selector (to the right of the wrench/settings icon), click it and choose the model you want. If **GPT-5 mini** is available, you can try that first.
18+
- Different models may provide different response styles and capabilities
19+
- You can experiment with different models to see which works best for you
20+
5. Select **Ask** mode using the mode toggle
21+
6. Try these prompts:
22+
- `Explain what this file does`
23+
- `What SwiftUI components are used in this view?`
24+
25+
---
26+
27+
## Expected Result
28+
29+
Copilot provides clear explanations of the code structure and functionality.
30+
31+
---
32+
33+
## 💡 Tips
34+
35+
- You can ask follow-up questions to dive deeper
36+
- Use `@workspace` to query across the entire project
37+
- Reference specific code by selecting it before asking
38+
- Try switching between different models to compare their responses
39+
40+
---
41+
42+
## ✅ Part 2 Complete!
43+
44+
You've learned how to:
45+
- Select and switch between AI models
46+
- Use Ask mode to explore codebases
47+
- Ask follow-up questions for deeper understanding
48+
- Use `@workspace` for project-wide queries
49+
50+
---
51+
52+
[📚 Lab Guide](GUIDE.md) • [← Setup](01-setup.md)
53+
54+
👉 **[Continue to Part 3: Code Completion →](03-completion.md)**

‎.lab/03-completion.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Part 3: Code Completion with Inline Suggestions
2+
3+
[📚 Lab Guide](GUIDE.md) • [← Chat](02-chat.md)
4+
5+
---
6+
7+
**Goal**: Experience AI-powered code completion while writing Swift code.
8+
9+
**Scenario**: Add a description field to the landmark row display.
10+
11+
---
12+
13+
## Steps
14+
15+
1. Open **LandmarkRow.swift**
16+
Path: `Landmarks/Views/Landmarks/LandmarkRow.swift`
17+
2. Locate the `HStack` containing the landmark name (around line 14)
18+
3. Below the landmark name `Text` view, add this comment:
19+
20+
```swift
21+
// Display the landmark description in one line; show full description on hover
22+
```
23+
24+
4. Press **Enter** and wait for Copilot to suggest code
25+
5. You should see a suggestion like:
26+
27+
```swift
28+
Text(landmark.description)
29+
.font(.caption)
30+
.foregroundColor(.secondary)
31+
.lineLimit(1)
32+
```
33+
34+
6. Press **Tab** to accept the suggestion
35+
36+
---
37+
38+
## Try More
39+
40+
- Add a comment for a date formatter
41+
- Write a comment to create a computed property for landmark categories
42+
- Start typing a function name and let Copilot complete the implementation
43+
44+
---
45+
46+
## ✅ Part 3 Complete!
47+
48+
You've learned how to:
49+
- Trigger inline code suggestions with comments
50+
- Accept suggestions with Tab
51+
- Guide Copilot with descriptive comments
52+
53+
---
54+
55+
[📚 Lab Guide](GUIDE.md) • [← Chat](02-chat.md)
56+
57+
👉 **[Continue to Part 4: Agent Mode →](04-agent-mode.md)**

‎.lab/04-agent-mode.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Part 4: Agent Mode — Multi-File Refactoring
2+
3+
[📚 Lab Guide](GUIDE.md) • [← Completion](03-completion.md)
4+
5+
---
6+
7+
**Goal**: Use Agent Mode to make changes across multiple files automatically.
8+
9+
**Scenario**: Update the favorite indicator throughout the app to use heart icons.
10+
11+
---
12+
13+
## Steps
14+
15+
1. Open **LandmarkList.swift**
16+
Path: `Landmarks/Views/Landmarks/LandmarkList.swift`
17+
2. Open the **Preview Canvas** to see the current UI (Cmd + Option + Enter)
18+
3. Switch to **Agent** mode in the Copilot Chat panel
19+
4. Enter this prompt:
20+
21+
```
22+
Update all favorite buttons to use heart-shaped icons (filled heart for favorited,
23+
outline heart for not favorited) across all views in the project.
24+
```
25+
26+
5. Copilot will analyze the codebase and propose changes to multiple files
27+
6. Review the proposed changes in the diff view
28+
7. Check the Preview Canvas to see the updated UI
29+
30+
---
31+
32+
## What Happened?
33+
34+
- Agent Mode identified all files with favorite functionality
35+
- It updated icons consistently across `LandmarkRow`, `LandmarkDetail`, and other views
36+
- Changes were made simultaneously across multiple files
37+
38+
---
39+
40+
## Try More Complex Tasks (Optional)
41+
42+
- `Add a rating system (1-5 stars) to landmarks with mock data`
43+
- `Implement a dark mode toggle in the settings view`
44+
- `Add categories filter chips at the top of the landmark list`
45+
46+
---
47+
48+
## ✅ Part 4 Complete!
49+
50+
You've learned how to:
51+
- Use Agent Mode for multi-file refactoring
52+
- Review proposed changes in the diff view
53+
- Verify changes with the Preview Canvas
54+
55+
---
56+
57+
[📚 Lab Guide](GUIDE.md) • [← Completion](03-completion.md)
58+
59+
👉 **[Continue to Part 5: Plan Agent →](05-plan-agent.md)**

‎.lab/05-plan-agent.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Part 5: Plan Agent — Breaking Down Complex Tasks
2+
3+
[📚 Lab Guide](GUIDE.md) • [← Agent Mode](04-agent-mode.md)
4+
5+
---
6+
7+
**Goal**: Use Plan Agent to decompose large features into manageable steps.
8+
9+
**Scenario**: Add user authentication to the app.
10+
11+
---
12+
13+
## Steps
14+
15+
1. Open the Copilot Chat panel
16+
2. In the Copilot Chat panel, use the mode dropdown to select **Plan**
17+
3. Enter this prompt:
18+
19+
```
20+
I want to add user authentication to this app. Users should be able to:
21+
- Sign up with email and password
22+
- Log in and log out
23+
- See personalized favorite landmarks
24+
Create a plan for implementing this feature.
25+
```
26+
27+
4. Copilot will generate a step-by-step implementation plan:
28+
- Create User model and authentication service
29+
- Add login/signup views
30+
- Implement session management
31+
- Update data models to associate favorites with users
32+
- Add authentication state to the app
33+
34+
5. Review the plan and ask for clarification if needed
35+
6. Execute the plan step by step, or ask Copilot to implement specific steps
36+
37+
---
38+
39+
## Benefits of Plan Agent
40+
41+
- Breaks down complex features into actionable steps
42+
- Helps you understand the architecture before coding
43+
- Identifies dependencies and potential issues early
44+
- Provides a roadmap you can follow incrementally
45+
46+
---
47+
48+
## ✅ Part 5 Complete!
49+
50+
You've learned how to:
51+
- Use Plan mode to decompose complex features
52+
- Review and refine AI-generated plans
53+
- Execute plans step by step
54+
55+
---
56+
57+
[📚 Lab Guide](GUIDE.md) • [← Agent Mode](04-agent-mode.md)
58+
59+
👉 **[Continue to Part 6: MCP Server Integration →](06-mcp.md)**

0 commit comments

Comments
 (0)