You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Instructions/Concepts/3-Examine the vibe coding process.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@
38
38
Give the AI tool your PRD and a prompt to create wireframe diagrams for the application. The AI tool will generate low-fidelity wireframe diagrams (text-based layouts) that represent the user interface and help to define the user experience.
39
39
40
40
- You can use M365 Copilot to create images of wireframe diagrams
41
-
- Here is a GitHub Copilot Agent project for wireframe diagrams: (https://github.com/agoldbe/wireframer)
41
+
- Here is a GitHub Copilot Agent project for wireframe diagrams: [https://github.com/agoldbe/wireframer](https://github.com/agoldbe/wireframer)
42
42
- You can use a tool like Figma to create high-fidelity wireframe diagrams, or you can use tools like Miro or draw.io to create medium-fidelity wireframe diagrams.
43
43
44
44
1. Agent uses the PRD and wireframe diagrams to develop a prototype
Copy file name to clipboardExpand all lines: Instructions/Labs/LAB_AK_06_vibe_coding_prototype_ecommerce_app.md
+17-41Lines changed: 17 additions & 41 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,50 +9,26 @@ lab:
9
9
10
10
Vibe coding is an approach to programming that uses AI tools, such as GitHub Copilot Agent, to generate software. Instead of manually writing code, a user provides a natural language description of their intended app, and the AI generates the corresponding code. This shifts the programmer's role from traditional coding to guiding, testing, and refining the AI-generated output.
11
11
12
-
In this exercise, you use a vide coding process and GitHub Copilot Agent to create a prototype version of an online shopping app. Your prototype app includes the following pages: products, product details, shopping cart, and checkout. The app includes basic navigation between pages and a limited dataset that helps to demonstrate app features. The prototype doesn't include any backend functionality, such as user authentication, payment processing, or database integration.
12
+
In this exercise, you use a vibe coding process and GitHub Copilot Agent to create a prototype version of an online shopping app. Your prototype app includes the following pages: products, product details, shopping cart, and checkout. The app includes basic navigation between pages and a limited dataset that helps to demonstrate app features. The prototype doesn't include any backend functionality, such as user authentication, payment processing, or database integration.
13
13
14
14
This exercise should take approximately **30** minutes to complete.
15
15
16
16
> **IMPORTANT**: To complete this exercise, you must provide your own GitHub account and GitHub Copilot subscription. If you don't have a GitHub account, you can <ahref="https://github.com/"target="_blank">sign up</a> for a free individual account and use a GitHub Copilot Free plan to complete the exercise. If you have access to a GitHub Copilot Pro, GitHub Copilot Pro+, GitHub Copilot Business, or GitHub Copilot Enterprise subscription from within your lab environment, you can use your existing GitHub Copilot subscription to complete this exercise.
17
17
18
18
## Before you start
19
19
20
-
Your lab environment must include the following: Git 2.48 or later, .NET SDK 9.0 or later, Visual Studio Code with the C# Dev Kit extension, and access to a GitHub account with GitHub Copilot enabled.
20
+
Your lab environment must include the following: Visual Studio Code and access to a GitHub account with GitHub Copilot enabled.
21
21
22
-
If you're using a local PC as a lab environment for this exercise:
22
+
If you're using a local PC as your lab environment for this exercise:
23
23
24
-
-For help configuring your local PC as your lab environment, open the following link in a browser: <ahref="https://go.microsoft.com/fwlink/?linkid=2320147"target="_blank">Configure your lab environment resources</a>.
24
+
-If you need to install Visual Studio Code, you can download it using the following URL: <ahref="https://code.visualstudio.com/download"target="_blank">Download Visual Studio Code</a>.
25
25
26
26
- For help enabling your GitHub Copilot subscription in Visual Studio Code, open the following link in a browser: <ahref="https://go.microsoft.com/fwlink/?linkid=2320158"target="_blank">Enable GitHub Copilot within Visual Studio Code</a>.
27
27
28
-
If you're using a hosted lab environment for this exercise:
28
+
If you're using a hosted lab environment that supports this exercise:
29
29
30
30
- For help enabling your GitHub Copilot subscription in Visual Studio Code, paste the following URL into a browser's site navigation bar: <ahref="https://go.microsoft.com/fwlink/?linkid=2320158"target="_blank">Enable GitHub Copilot within Visual Studio Code</a>.
31
31
32
-
- Open a command terminal and then run the following commands:
33
-
34
-
To ensure that Visual Studio Code is configured to use the correct version of .NET, run the following command:
You're an entrepreneur who wants to use a vibe coding process to create a prototype shopping app. Your initial prototype needs to demonstrate the basic capabilities that a user expects from an online shopping app and specific features that you've envisioned.
@@ -75,11 +51,11 @@ This exercise includes the following tasks:
75
51
76
52
## Define product requirements
77
53
78
-
For an AI agent to develop your envisioned app, it needs to understand your product requirements and the intended user experience. You can communicate your intensions to the GitHub Copilot Agent using either of the following processes:
54
+
For an AI agent to develop your envisioned app, it needs to understand your product requirements and the intended user experience. You can communicate your intentions to the GitHub Copilot Agent using either of the following processes:
79
55
80
-
- Code first and iterate to define requirements. This approach starts the coding process using only high-level base specifications. You then begin an iterative development process where your products evolves toward you intended/envisioned product requirements and end user experience. This approach risks deviating from your original vision, for better or for worse, as you explore features implemented by the AI. The iterating-to-define-requirements process can be time-consuming and may not yield the desired results. This is especially true when the initial specifications vague or open-ended.
56
+
- Code first and iterate to define requirements. This approach starts the coding process using only high-level base specifications. You then begin an iterative development process where your app evolves toward your intended/envisioned product requirements and end user experience. This approach risks deviating from your original vision, for better or for worse, as you explore features implemented by the AI. The iterating-to-define-requirements process can be time-consuming and may not yield the desired results. This is especially true when the initial specifications are vague or open-ended.
81
57
82
-
- Explore requirements before coding. This approach involves working with the AI to create a Product Requirements Document (PRD) that contains a detailed description of the app you want to create before coding starts. A PRD includes information about the app's purpose, target audience, features, and technical requirements. By defining the requirements upfront, you can ensure that the AI agent has a clear understanding of your vision for the app.
58
+
- Explore requirements before coding. This approach involves working with the AI to create a Product Requirements Document (PRD) that contains a detailed description of the app you want to create before any code is written. A PRD includes information about the app's purpose, target audience, features, and technical requirements. By defining the requirements upfront, you can ensure that the AI agent has a clear understanding of your vision for the app.
83
59
84
60
In this task, you use GitHub Copilot to review your base specifications and create a product requirements document for your prototype app.
85
61
@@ -89,7 +65,7 @@ Use the following steps to complete this section of the exercise:
89
65
90
66
1. On the File menu, select **Add folder to Workspace**.
91
67
92
-
1. In the **Add Folder to Workspace** dialog, navigate to an easy to find folder location, create a new folder named **VibeCoding-PrototypeApp**, and then select select **Add**.
68
+
1. In the **Add Folder to Workspace** dialog, navigate to an easy-to-find folder location, create a new folder named **VibeCoding-PrototypeApp**, and then select **Add**.
93
69
94
70
The folder location should be outside of any existing Git repository and should be easy to find. After completing this lab exercise, you may want to archive or delete the project.
95
71
@@ -103,7 +79,7 @@ Use the following steps to complete this section of the exercise:
103
79
104
80
The Set Mode dropdown menu is located in the bottom-left corner of the Chat view.
105
81
106
-
Although their capabilities overlap, each of the chat modes is optimized for a specific purpose:
82
+
Although their capabilities overlap, each of the chat modes (ask, Edit, and Agent) is optimized for a specific purpose:
107
83
108
84
-**Ask**: Use this mode to ask GitHub Copilot questions about your codebase. You can use Ask mode to explain code, suggest changes, or provide information about the codebase.
109
85
-**Edit**: Use this mode to edit specific code files in your workspace. You can use Edit mode to refactor code, add comments, implement tests, or add new features to your apps.
@@ -166,7 +142,7 @@ Use the following steps to complete this section of the exercise:
166
142
167
143
A well-defined PRD helps ensure that GitHub Copilot Agent has a clear understanding of your vision for the app. The PRD should provide enough detail to enable the Agent to create a prototype app that meets your requirements and intended user experience. Your PRD should build upon the base specifications listed earlier in the exercise.
168
144
169
-
If you're not sure about what information to include in a specific section, you can ask GitHub Copilot Agent to help you generate the content for that section. For example, you can ask GitHub Copilot Agent to help you define the target audience, core features, or technical requirements for your app.
145
+
If you're not sure about what information to include in a specific section, you can ask GitHub Copilot Agent to help you generate the content for that section. For example, you can ask GitHub Copilot for ideas about what to include in the 'Core Features' or 'Use Cases' sections.
170
146
171
147
> **Tip**: You can provide a natural language description of your app's requirements and have GitHub Copilot format that information as a PRD. You can also use GitHub Copilot to help you review and update the PRD, and to ensure that it provides the level of detail required for GitHub Copilot Agent to create the prototype.
172
148
@@ -182,7 +158,7 @@ Use the following steps to complete this section of the exercise:
182
158
- A navigation menu on the left side of the screen that allows users to navigate between the Products, ProductDetails, ShoppingCart, and Checkout pages.
183
159
- Basic styling that makes the user interface visually appealing, but it doesn't need to be fully responsive or polished.
184
160
185
-
The prototype app won't include any backend functionality, such as user authentication, payment processing, or database integration. It will be a static prototype that demonstrates the basic concepts of an eCommerce app.
161
+
The prototype app won't include any backend functionality, such as user authentication, payment processing, or database integration. It will be a static prototype that demonstrates the basic concepts.
186
162
187
163
Here's a description of the user interface:
188
164
@@ -353,7 +329,7 @@ Use the following steps to complete this section of the exercise:
353
329
354
330
Adding these files to the chat context tells GitHub Copilot Agent to reference them when generating a response.
355
331
356
-
You can add files to the chat context by dragging and dropping them from the EXPLORER view onto the Chat view, or by using the **Add Context** button located in the bottom'left area of the Chat view.
332
+
You can add files to the chat context by dragging and dropping them from the EXPLORER view onto the Chat view, or by using the **Add Context** button located in the bottom-left area of the Chat view.
357
333
358
334
1. In the EXPLORER view, select the **ShoppingApp** folder.
359
335
@@ -426,7 +402,7 @@ Use the following steps to complete this section of the exercise:
426
402
427
403
## Update the prototype app
428
404
429
-
Your initial prototype app should already provide a basic implementation of the product requirements. However, it can probably be refined and improved, and it may not fully achieve the intended user experience and functionality.
405
+
Your initial prototype app should already provide a basic implementation of the product requirements. However, it can probably be refined and improved, and it may not fully achieve the intended user experience.
430
406
431
407
In this task, you use GitHub Copilot Agent to refine the features and behavior of your prototype app.
432
408
@@ -464,7 +440,7 @@ Use the following steps to complete this section of the exercise:
464
440
465
441
1. Review the response from GitHub Copilot Agent.
466
442
467
-
Identify three or more suggested improvements that you'ld like to implement.
443
+
Identify three or more suggested improvements that you'd like to implement.
468
444
469
445
1. Create a prompt that describes the improvements that you want to implement.
470
446
@@ -477,7 +453,7 @@ Use the following steps to complete this section of the exercise:
477
453
- Add a confirmation/thank you message after processing an order.
478
454
- Add a visual indicator (badge) for the number of items in the cart on the nav bar.
479
455
480
-
Ensure that the copilot-instructions.md file is updated to reflect any changes to the product features, technical requirements, user experience, or other measurable characteristic.
456
+
Ensure that the copilot-instructions.md file is updated to reflect any changes to the product features, technical requirements, user experience, or other measurable characteristics.
481
457
482
458
```
483
459
@@ -489,4 +465,4 @@ In this exercise, you learned how to use GitHub Copilot Agent to create a protot
489
465
490
466
## Clean up
491
467
492
-
Now that you've finished the exercise, take a minute to ensure that you haven't made changes to your GitHub account or GitHub Copilot subscription that you don't want to keep. If you made any changes, revert them now. If you're using a local PC as your lab environment, you can archive or delete the prototype app folder that you created for this exercise.
468
+
Now that you've finished the exercise, take a minute to ensure that you haven't made changes to your GitHub account or GitHub Copilot subscription that you don't want to keep. If you made any changes, revert them as needed. If you're using a local PC as your lab environment, you can archive or delete the prototype app folder that you created for this exercise.
0 commit comments