Merge pull request #4 from MicrosoftLearning/Copilot-Scenarios

Minor updates in exercises 1-5 and added vibe coding exercise (6).

Author: ChrisHowd

Instructions/Concepts/1-What is vibe coding.md

@@ -0,0 +1,55 @@
+# Introduction to Vibe Coding
+
+Vibe coding is a programming approach that leverages AI-driven tools, particularly large language models (LLMs), to generate software. Instead of manually writing code, a user provides a natural language description of the problem, 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.
+
+## Key Features and Use Cases
+
+Vibe coding enables programmers and non-programmers to create functional software by describing their ideas in plain language.
+
+Non-programmers:
+
+- Journalist Kevin Roose used vibe coding to develop small-scale applications like LunchBox Buddy, which analyzed fridge contents to suggest meals. This technique is particularly suited for hobby projects or prototyping, as it allows rapid development without extensive technical expertise.
+
+- A sales or marketing professional can use vibe coding to create a simple prototype that demonstrates their vision for a product or service. They can describe the desired features and functionality in natural language, and the AI will generate a prototype app that can be pitched to management or stakeholders. If approved, the prototype can be handed off to a development team to create a production-ready application.
+
+- A teacher can use vibe coding to create educational tools or resources, such as a quiz app or a simple game, by describing the desired functionality and content in natural language. This allows educators to quickly develop interactive learning materials without needing extensive programming skills.
+
+Programmers:
+
+- Rapid prototyping
+
+    Vibe coding allows developers to quickly create prototypes or proof-of-concept applications by describing the desired functionality in natural language. The AI tool generates the initial code, which can then be refined and expanded upon. Experienced developers can use vibe coding to quickly prototype ideas or generate boilerplate code, allowing them to focus on higher-level design and architecture rather than low-level implementation details. This can significantly speed up the development process, especially for complex applications.
+
+- Implement fully-functional features (iterate, iterate, iterate)
+
+    GitHub Copilot Agent helps you iterate on the prototype in the following ways:
+
+    - Replacing prototype/stub code with code that implements completed features
+    - Developing UI elements that enable richer interactions
+    - Implementing sample data that helps demonstrate basic functionality
+    - Code review and bug fixing
+    - Develop unit tests to ensure code quality
+    - Developing new features that enhance the app
+    - Refactoring code
+
+- Documentation generation
+
+    The AI tool can generate documentation for the codebase, including function descriptions, usage examples, and API documentation. This helps maintain clarity and understanding of the code, especially in collaborative environments.
+
+- Language and framework conversion
+
+    If you want to convert your application to a different language or framework, you can use the AI tool to help with the conversion. The AI tool will:
+
+    - Analyze the existing codebase
+    - Generate equivalent code in the target language or framework
+    - Ensure that the new code maintains the same functionality and user experience
+
+## Limitations and Risks
+
+- While vibe coding democratizes software development, it comes with challenges. Users often accept AI-generated code without fully understanding it, which can lead to bugs and errors. This lack of comprehension poses risks in professional settings where debugging and maintenance require a deep understanding of the code.
+
+- Experts caution against relying on vibe coding for production-level systems, as evolving and maintaining such codebases demands high-quality, understandable code.
+
+## Summary
+
+In summary, vibe coding represents a significant shift in software development, making it more accessible but also raising concerns about accountability and code quality. For less experienced developer, vibe coding is best suited for experimentation and non-critical applications.

Instructions/Concepts/2-How to scope vibe coding lab exercise.md

@@ -0,0 +1,67 @@
+
+
+
+
+## Vibe coding project types
+
+The coding projects for a lab exercise need to be carefully scoped, either narrowly or specifically to accommodate 20-30+ minute exercises.
+
+1. Start from scratch projects (implement basics, stub features, page navigation, but little or no app data)
+
+    1. Create a prototype eCommerce app
+
+        Example prompt:
+
+        - I need to create a prototype eCommerce app using JavaScript, HTML, and CSS.
+        - The prototype eCommerce app must provide a dynamic user interface that automatically scales to accommodate viewing on desktop and phone devices.
+        - The eCommerce app should include the following pages: products list, product details, shopping cart, and checkout. Each page should provide basic functionality and forward/back navigation between pages.
+        - Use a simple dataset of 10 fruit products. Include: product name, description, price per unit (where unit could be the number of items or ounces, pounds, etc.), and a simple image that represents the product.
+        - The products list page should display a list of products with basic information such as product name, price per unit, and image. The products list page should also provide a way to select a quantity of a product, and an option to add selected items to the shopping cart.
+        - The product details page should display detailed information about a selected product, including product name, description, price per unit, and image. The product details page should also provide a way to navigate back to the products list page.
+        - The shopping cart page should display a list of products added to the cart, including product name, quantity, and total price. The shopping cart page should also provide a way to update the quantity of products in the cart, and remove products from the cart.
+        - The checkout page should display a summary of the products in the cart, including product name, quantity, and total price. The checkout page should also provide a way to confirm the order. 
+        - The prototype eCommerce app should provide basic navigation between pages. Create a collapsible navigation bar on the left side of the products list, product details, shopping cart, and checkout pages. The navigation bar should allow users to navigate between the products list, product details, shopping cart, and checkout pages.
+        - The prototype eCommerce app should have basic styling to make it visually appealing, but it does not need to be fully responsive or polished.
+        - The prototype eCommerce app Will not 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.
+
+    1. Create a prototype for an AI enhanced app (using Python and Hugging Face models)
+
+1. Add a new feature to a project
+
+    1. Add a new feature to an existing app
+        - For example, add a search feature to the eCommerce app.
+        - The search feature should allow users to search for products by name or description.
+        - The search results should display a list of products that match the search criteria, including product name, price per unit, and image.
+        - The search feature should be accessible from the products list page and should provide a way to navigate back to the products list page.
+
+    1. Add a new page to an existing app
+
+        - For example, add a contact us page to the eCommerce app.
+        - The contact us page should include a form that allows users to submit their name, email address, and message.
+        - The contact us page should also provide a way to navigate back to the products list page.
+
+1. Change a tool, framework, or technology projects
+
+    1. Change the front-end framework of an existing app
+
+        - For example, change the front-end framework of the eCommerce app from JavaScript to React or Angular.
+        - The new front-end framework should provide the same functionality as the original app, including product listing, product details, shopping cart, and checkout.
+        - The new front-end framework should also provide a dynamic user interface that automatically scales to accommodate viewing on desktop and phone devices.
+
+    1. Change the back-end technology of an existing app
+
+        - For example, change the back-end technology of the eCommerce app from Node.js to Python Flask or Django.
+        - The new back-end technology should provide the same functionality as the original app, including user authentication, payment processing, and database integration.
+
+1. Code review and improvement projects
+
+    1. Add logging to a project
+    1. Add unit tests to a project
+
+1. Coding language conversion projects
+
+    Convert and existing app to a different language or framework.
+
+    For example convert a Python app to a Java app or a C# app.
+
+1. Redesign the architecture projects (too big)

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

@@ -0,0 +1,98 @@
+
+## Examine the Vibe Coding process
+
+1. Envision and plan your project
+
+    The developer will work with an AI tool on the following steps to envision and plan the application:
+
+    - Brainstorm ideas
+
+        - What problem does your application solve? What is the purpose of your application?
+        - Who is your target audience?
+        - What platforms will your application run on (web, mobile, desktop)?
+        - What features will your application have?
+        - What technologies will you use to build it?
+        - What are the data requirements for your application?
+        - Is there any sensitive or PI data that needs to be protected?
+
+    - Create Product Requirements Document (PRD)
+
+        - Project Summary
+        - Problem Overview
+        - Scope
+        - Use Cases & Scenarios
+        - Requirements
+            - Functional Requirements: user stories and acceptance criteria
+            - Non-functional Requirements: performance, scalability, security, etc.
+            - Dependencies
+        - Success Metrics
+        - Competitive Analysis
+        - Product Roadmap
+        - Risks & Challenges
+        - Open Questions
+        - Supporting Documentation
+        - Sign-Off
+
+    - Create low-fidelity wireframe diagrams that show the user interface and help explain the user experience:
+
+        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.
+
+        - You can use M365 Copilot to create images of wireframe diagrams
+        - Here is a GitHub Copilot Agent project for wireframe diagrams: [https://github.com/agoldbe/wireframer](https://github.com/agoldbe/wireframer)
+        - 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.
+
+1. Agent uses the PRD and wireframe diagrams to develop a prototype
+
+    The AI tool will use the PRD and wireframe diagrams to develop a prototype of the application.
+
+    The GitHub Copilot Agent will:
+
+    - Install necessary tools and frameworks
+
+    The prototype will include the following:
+
+    - Basic functionality
+    - User interface
+    - User experience
+    - Navigation between pages
+    - Stub data for testing
+
+    You can also have the Agent help with the following:
+
+    - Configure your IDE or code editor
+    - Set up version control (e.g., Git)
+
+1. Implement fully-functional features (iterate, iterate, iterate)
+
+    GitHub Copilot Agent helps you iterate on the prototype in the following ways:
+
+    - Replacing prototype/stub code with code that implements completed features
+    - Developing UI elements that enable richer interactions
+    - Implementing sample data that helps demonstrate basic functionality
+    - Code review and bug fixing
+    - Develop unit tests to ensure code quality
+    - Developing new features that enhance the app
+    - Refactoring code
+
+1. Language and framework conversion
+
+    If you want to convert your application to a different language or framework, you can use the AI tool to help with the conversion. The AI tool will:
+
+    - Analyze the existing codebase
+    - Generate equivalent code in the target language or framework
+    - Ensure that the new code maintains the same functionality and user experience
+
+1. Documentation generation
+
+    The AI tool can generate documentation for the codebase, including function descriptions, usage examples, and API documentation. This helps maintain clarity and understanding of the code, especially in collaborative environments.
+
+1. Code review and improvement
+
+    The AI tool can help with code review and improvement by:
+
+    - Analyzing the code for potential bugs and errors
+    - Suggesting improvements to the code structure and design
+    - Identifying areas for optimization and performance enhancements
+    - Ensuring adherence to coding standards and best practices
+    - Providing feedback on code readability and maintainability
+    - Assisting with refactoring to improve code quality