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/Labs/LAB_AK_06_vibe_coding_prototype_ecommerce_app.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ lab:
8
8
9
9
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.
10
10
11
-
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.
11
+
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 check out. 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
12
13
13
This exercise should take approximately **30** minutes to complete.
14
14
@@ -25,11 +25,11 @@ If you're using a local PC as your lab environment for this exercise:
25
25
26
26
- You can download the Visual Studio Code installer file from the following URL: <ahref="https://code.visualstudio.com/download"target="_blank">Download Visual Studio Code</a>.
27
27
28
-
- 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>.
28
+
- For help with 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>.
29
29
30
30
If you're using a hosted lab environment that supports this exercise:
31
31
32
-
- For help enabling your GitHub Copilot subscription in Visual Studio Code, open a browser and paste the following URL into the site navigation bar: <ahref="https://go.microsoft.com/fwlink/?linkid=2320158"target="_blank">Enable GitHub Copilot within Visual Studio Code</a>.
32
+
- For help with enabling your GitHub Copilot subscription in Visual Studio Code, open a browser and paste the following URL into the site navigation bar: <ahref="https://go.microsoft.com/fwlink/?linkid=2320158"target="_blank">Enable GitHub Copilot within Visual Studio Code</a>.
33
33
34
34
## Exercise scenario
35
35
@@ -81,7 +81,7 @@ Use the following steps to complete this section of the exercise:
81
81
82
82
The *Set Mode* and *Pick Model* dropdown menus are located in the bottom-left corner of the Chat view.
83
83
84
-
**GitHub Copilot modes**: Although their capabilities overlap, each of the chat modes (Ask, Edit, and Agent) are optimized for a specific purpose:
84
+
**GitHub Copilot modes**: Although their capabilities overlap, each of the chat modes (Ask, Edit, and Agent) is optimized for a specific purpose:
85
85
86
86
-**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.
87
87
-**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.
@@ -310,7 +310,7 @@ Use the following steps to complete this section of the exercise:
310
310
311
311
1. In Visual Studio Code, create a new folder named **ShoppingApp** in the VibeCoding-PrototypeApp folder.
312
312
313
-
GitHub Copilot Agent needs an empty folder to use as a workspace for the new the app files.
313
+
GitHub Copilot Agent needs an empty folder to use as a workspace for the new app files.
314
314
315
315
The EXPLORER view in Visual Studio Code should look similar to the following:
0 commit comments