|
1 | | -<p align="center"> |
2 | | - <picture> |
3 | | - <source media="(prefers-color-scheme: dark)" srcset="images/flai-logo-dark.svg?v=2" /> |
4 | | - <source media="(prefers-color-scheme: light)" srcset="images/flai-logo-light.svg?v=2" /> |
5 | | - <img width="180" alt="flAI Logo" src="images/flai-logo-dark.svg?v=2" /> |
6 | | -</picture> |
7 | | - <br/> |
8 | | - <br/> |
9 | | - <a href="https://flai.gh.nos.pt/">https://flai.gh.nos.pt</a> |
10 | | -</p> |
| 1 | +# Build Applications with GitHub Copilot Agent Mode |
11 | 2 |
|
12 | | -# Build applications with GitHub Copilot agent mode |
| 3 | +<img src="https://octodex.github.com/images/Professortocat_v2.png" align="right" height="200px" /> |
13 | 4 |
|
14 | | -<!--  --> |
15 | | -<img src="https://github.com/user-attachments/assets/1b3ea5df-f18d-4ed8-9ae6-f96dc1861818" alt="octofit-tracker" width="300"/> |
| 5 | +Hey edu1982! |
16 | 6 |
|
17 | | -_Build an application with GitHub Copilot agent mode in less than an hour._ |
| 7 | +Mona here. I'm done preparing your exercise. Hope you enjoy! 💚 |
18 | 8 |
|
19 | | -## Welcome |
| 9 | +Remember, it's self-paced so feel free to take a break! ☕️ |
20 | 10 |
|
21 | | -People love how GitHub Copilot helps them write code faster and with fewer errors. |
22 | | -But what if GitHub could create a multi-tier application with a presentation, logic, and data layers based on requirements written in natural language? |
23 | | -In this exercise, we will prompt GitHub Copilot agent mode to create a complete application. |
24 | | - |
25 | | -- **Who is this for**: Intermediate developers familiar with GitHub Copilot, basic GitHub, and basic web development |
26 | | -- **What you'll learn**: We'll introduce GitHub Copilot agent mode and how to use it for application development. |
27 | | -- **What you'll build**: You'll use GitHub Copilot agent mode to create a fitness application as the gym teacher of a high school. |
28 | | -- **Prerequisites**: Skills Exercise: <a href="https://github.com/nosportugal/flai-workshop-github-copilot-100">Getting Started with GitHub Copilot</a>. |
29 | | -- **How long**: This course takes less than one hour to complete. |
30 | | - |
31 | | -## Application Architecture |
32 | | - |
33 | | -```mermaid |
34 | | -%%{init: {'theme': 'neutral', 'themeVariables': { 'primaryColor': '#4a90d9', 'primaryTextColor': '#fff', 'primaryBorderColor': '#2d5a87', 'lineColor': '#5c6bc0', 'secondaryColor': '#81c784', 'tertiaryColor': '#fff3e0'}, 'flowchart': {'nodeSpacing': 50, 'rankSpacing': 80, 'padding': 40}}}%% |
35 | | -flowchart LR |
36 | | - User((👤 User)) |
37 | | - |
38 | | - subgraph Codespaces [☁️ GitHub Codespaces] |
39 | | - subgraph App [🏋️ OctoFit Tracker App] |
40 | | - Frontend[⚛️ React<br/>Frontend] |
41 | | - Backend[🐍 Django<br/>Backend] |
42 | | - Database[(🍃 MongoDB<br/>Database)] |
43 | | - end |
44 | | - end |
45 | | - |
46 | | - User --> Frontend |
47 | | - Frontend <--> Backend |
48 | | - Backend <--> Database |
49 | | - |
50 | | - style User stroke-width:3px |
51 | | - style Frontend stroke-width:3px,fill:#b3e5fc,color:#000 |
52 | | - style Backend stroke-width:3px,fill:#c8e6c9,color:#000 |
53 | | - style Database stroke-width:3px,fill:#ffe0b2,color:#000 |
54 | | - style Codespaces stroke-width:3px |
55 | | - style App stroke-width:3px,stroke:#ff6b35 |
56 | | - |
57 | | - linkStyle default stroke-width:3px |
58 | | -``` |
59 | | - |
60 | | -In this exercise, you will: |
61 | | - |
62 | | -1. Start up a preconfigured development environment for making a multi-tier application. |
63 | | -1. Prompt in GitHub Copilot Chat and select the edit tab and select agent mode from the edit/agent drop-down. |
64 | | -1. In this exercise I primarily used the latest default LLM. |
65 | | -1. Try other LLM models to see other output. |
66 | | -1. For each step open up a new Copilot Chat session by hitting the plus `+` icon in the Copilot Chat pane. |
67 | | - |
68 | | -### How to start this exercise |
69 | | - |
70 | | -Simply copy the exercise to your account, then give your favorite Octocat (Mona) **about 20 seconds** to prepare the first lesson, then **refresh the page**. |
71 | | - |
72 | | -[](https://github.com/new?template_owner=nosportugal&template_name=flai-workshop-github-copilot-800&owner=%40me&name=flai-workshop-github-copilot-800&description=Exercise:+Build+applications+with+GitHub+Copilot+agent+mode&visibility=public) |
73 | | - |
74 | | -<details> |
75 | | -<summary>Having trouble? 🤷</summary><br/> |
76 | | - |
77 | | -When copying the exercise, we recommend the following settings: |
78 | | - |
79 | | -- For owner, choose your personal account or an organization to host the repository. |
80 | | - |
81 | | -- We recommend creating a public repository, since private repositories will use Actions minutes. |
82 | | - |
83 | | -If the exercise isn't ready in 20 seconds, please check the "Actions" tab of your repository (or visit `https://github.com/<YOUR-USERNAME>/<YOUR-REPO>/actions`). |
84 | | - |
85 | | -- Check to see if a job is running. Sometimes it simply takes a bit longer. |
86 | | - |
87 | | -- If the page shows a failed job, please submit an issue. Nice, you found a bug! 🐛 |
88 | | - |
89 | | -</details> |
| 11 | +[](https://github.com/edu1982/flai-workshop-github-copilot-800/issues/1) |
90 | 12 |
|
91 | 13 | --- |
92 | 14 |
|
93 | 15 | © 2025 GitHub • [Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) • [MIT License](https://gh.io/mit) |
| 16 | + |
0 commit comments