Skip to content

Commit ea8abd7

Browse files
committed
spelling and grammar updates
1 parent 2940ba1 commit ea8abd7

2 files changed

Lines changed: 18 additions & 42 deletions

File tree

Instructions/Concepts/3-Examine the vibe coding process.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
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.
3939

4040
- 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)
4242
- 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.
4343

4444
1. Agent uses the PRD and wireframe diagrams to develop a prototype

Instructions/Labs/LAB_AK_06_vibe_coding_prototype_ecommerce_app.md

Lines changed: 17 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,50 +9,26 @@ lab:
99

1010
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.
1111

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.
1313

1414
This exercise should take approximately **30** minutes to complete.
1515

1616
> **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 <a href="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.
1717
1818
## Before you start
1919

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.
2121

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:
2323

24-
- For help configuring your local PC as your lab environment, open the following link in a browser: <a href="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: <a href="https://code.visualstudio.com/download" target="_blank">Download Visual Studio Code</a>.
2525

2626
- For help enabling your GitHub Copilot subscription in Visual Studio Code, open the following link in a browser: <a href="https://go.microsoft.com/fwlink/?linkid=2320158" target="_blank">Enable GitHub Copilot within Visual Studio Code</a>.
2727

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:
2929

3030
- For help enabling your GitHub Copilot subscription in Visual Studio Code, paste the following URL into a browser's site navigation bar: <a href="https://go.microsoft.com/fwlink/?linkid=2320158" target="_blank">Enable GitHub Copilot within Visual Studio Code</a>.
3131

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:
35-
36-
```bash
37-
38-
dotnet nuget add source https://api.nuget.org/v3/index.json -n nuget.org
39-
40-
```
41-
42-
To ensure that Git is configured to use your name and email address, update the following commands with your information, and then run the commands:
43-
44-
```bash
45-
46-
git config --global user.name "John Doe"
47-
48-
```
49-
50-
```bash
51-
52-
git config --global user.email johndoe@example.com
53-
54-
```
55-
5632
## Exercise scenario
5733

5834
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:
7551
7652
## Define product requirements
7753

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:
7955

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.
8157

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.
8359

8460
In this task, you use GitHub Copilot to review your base specifications and create a product requirements document for your prototype app.
8561

@@ -89,7 +65,7 @@ Use the following steps to complete this section of the exercise:
8965

9066
1. On the File menu, select **Add folder to Workspace**.
9167

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**.
9369

9470
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.
9571

@@ -103,7 +79,7 @@ Use the following steps to complete this section of the exercise:
10379

10480
The Set Mode dropdown menu is located in the bottom-left corner of the Chat view.
10581

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:
10783

10884
- **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.
10985
- **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:
166142
167143
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.
168144
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.
170146
171147
> **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.
172148
@@ -182,7 +158,7 @@ Use the following steps to complete this section of the exercise:
182158
- A navigation menu on the left side of the screen that allows users to navigate between the Products, ProductDetails, ShoppingCart, and Checkout pages.
183159
- Basic styling that makes the user interface visually appealing, but it doesn't need to be fully responsive or polished.
184160
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.
186162
187163
Here's a description of the user interface:
188164
@@ -353,7 +329,7 @@ Use the following steps to complete this section of the exercise:
353329
354330
Adding these files to the chat context tells GitHub Copilot Agent to reference them when generating a response.
355331
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.
357333
358334
1. In the EXPLORER view, select the **ShoppingApp** folder.
359335
@@ -426,7 +402,7 @@ Use the following steps to complete this section of the exercise:
426402
427403
## Update the prototype app
428404
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.
430406
431407
In this task, you use GitHub Copilot Agent to refine the features and behavior of your prototype app.
432408
@@ -464,7 +440,7 @@ Use the following steps to complete this section of the exercise:
464440
465441
1. Review the response from GitHub Copilot Agent.
466442
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.
468444
469445
1. Create a prompt that describes the improvements that you want to implement.
470446
@@ -477,7 +453,7 @@ Use the following steps to complete this section of the exercise:
477453
- Add a confirmation/thank you message after processing an order.
478454
- Add a visual indicator (badge) for the number of items in the cart on the nav bar.
479455
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.
481457
482458
```
483459
@@ -489,4 +465,4 @@ In this exercise, you learned how to use GitHub Copilot Agent to create a protot
489465
490466
## Clean up
491467
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

Comments
 (0)