Merge pull request #9 from githubuniverseworkshops/arilivigni/self-se…

…rvice-prompting Arilivigni/self service prompting
githubuniverseworkshops · Oct 23, 2024 · f3cce6e · f3cce6e
2 parents 9774087 + 418c318
commit f3cce6e
Show file tree

Hide file tree

Showing 27 changed files with 184 additions and 86 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -10,7 +10,7 @@
         "extensions": [
             "github.copilot",
             "github.copilot-chat",
-            "Phu1237.vs-browser",
+            // "Phu1237.vs-browser",
             "markdown-lint.markdownlinter",
             "ms-python.python", // Python extension
             "ms-python.vscode-pylance" // Pylance extension for Python

diff --git a/docs/1_Story/README.md b/docs/1_Story/README.md
@@ -1,12 +1,10 @@
-# Your journey to develop a fitness tracker with GitHub Copilot now begins!
+# Your journey to develop a fitness tracker app with GitHub Copilot now begins!
 
 ![OctoFit Tracker](../../images/octofit-tracker.png)
 
-Here's a reworked version of the workshop concept that's more suitable for a conference demo and attendee workshop:
-
 ## OctoFit Tracker: Building a Fitness App with GitHub Copilot
 
-Welcome to the OctoFit Tracker workshop! In this hands-on session, you'll step into the shoes of a lead developer tasked with creating a cutting-edge fitness tracker in record time. We'll leverage the power of GitHub Copilot to rapidly develop a functional prototype of OctoFit Tracker, a social fitness app that encourages users to stay active and compete with their peers.
+Welcome to the OctoFit Tracker app workshop! In this hands-on session, you'll step into the shoes of a lead developer tasked with creating a cutting-edge fitness tracker app in record time. We'll leverage the power of GitHub Copilot to rapidly develop a functional prototype of OctoFit Tracker, a social fitness app that encourages users to stay active and compete with their peers.
 
 ### Workshop Overview
 
@@ -15,7 +13,7 @@ In this workshop, you'll:
 1. Set up a development environment using GitHub Codespaces
 2. Use GitHub Copilot to accelerate development across multiple technologies
 3. Build key components of the OctoFit Tracker app
-4. Learn best practices for working with AI-assisted coding tools
+4. Learn best practices and prompting techniques for working with GitHub Copilot
 
 ### Application Features
 
@@ -27,6 +25,19 @@ OctoFit Tracker will include:
 - Competitive leader boards
 - Personalized workout suggestions
 
+### GitHub Copilot and Copilot Chat
+
+GitHub Copilot and Copilot Chat uses OpenAI GPT models for its coding suggestions and chat interaction.
+OpenAI gpt-4o: *"Our high-intelligence flagship model for complex, multi-step tasks. GPT-4o is cheaper and faster than GPT-4 Turbo. Currently points to gpt-4o-2024-08-06"*
+
+[OpenAI GPT models explained](https://platform.openai.com/docs/models)
+
+![openai gpt models](./gpt-models.png)
+
+OpenAI gpt-4o: *"Our high-intelligence flagship model for complex, multi-step tasks. GPT-4o is cheaper and faster than GPT-4 Turbo. Currently points to gpt-4o-2024-08-06"*
+
+> NOTE: we will be using gpt-4o in GitHub Copilot Chat for this workshop at GitHub Universe.
+
 ### Technology Stack
 
 We'll be using a modern web application stack:
@@ -38,32 +49,36 @@ We'll be using a modern web application stack:
 
 ### Workshop Structure
 
-1. **Introduction and Setup of prerequisites**
-   - Overview of OctoFit Tracker concept
+1. **Introduction**
+   - Overview of OctoFit Tracker app concept
+   - OpenAI GPT models
+
+1. **Setup of Prerequisites**
    - Setting up GitHub Codespaces
+   - Ensure GitHub Copilot and Copilot Chat extensions are up to date
 
-2. **Rapid Prototyping with GitHub Copilot**
+1. **Rapid Prototyping with GitHub Copilot**
    - Creating project structure
    - Generating boilerplate code
-   - Implementing basic models and views
+   - Implementing basic models, serializers, urls, and views
 
-3. **Building Core Features**
+1. **Building Core Features**
    - User authentication
    - Activity logging API
    - Team management
    - Leader board functionality
 
-4. **Frontend Development**
+1. **Frontend Development**
    - Setting up React components
    - Implementing responsive UI
    - Connecting to backend APIs
 
-5. **Advanced Features and Optimization**
+1. **Advanced Features and Optimization**
    - Adding personalized workout suggestions
    - Implementing caching with Redis
    - Optimizing database queries
 
-6. **Wrap-up and Q&A**
+1. **Wrap-up and Q&A**
    - Reviewing what we've built
    - Discussing best practices and lessons learned
    - Q&A session
@@ -74,11 +89,12 @@ By the end of this workshop, attendees will:
 
 - Gain hands-on experience with GitHub Copilot in a real-world scenario
 - Learn strategies for effective AI-assisted development
+- Learn how to effectively prompt GitHub Copilot to get accurate responses from GitHub Copilot
 - Understand how to leverage Copilot across different languages and frameworks
 - Develop a functional prototype of a modern web application
 
 Join us for this exciting journey into the future of software development, where we'll harness the power of generative AI with GitHub Copilot to build OctoFit Tracker in record time!
 
 In this workshop, you are going to assume to be the lead developer. You will be responsible for building the application with GitHub Copilot’s help. Good luck!
 
-[Next: Prerequisites, assumptions, and development environment setup](../2_Prerequisites)
+[Next: Prerequisite and setup of the development environment](../2_Prerequisites)
diff --git a/docs/1_Story/gpt-models.png b/docs/1_Story/gpt-models.png
diff --git a/.../2_Prerequisites/2_1_codespace-create.png → .../2_Prerequisites/2_2_codespace-create.png b/.../2_Prerequisites/2_1_codespace-create.png → .../2_Prerequisites/2_2_codespace-create.png
diff --git a/docs/2_Prerequisites/2_3_codesapce-show-extension.png b/docs/2_Prerequisites/2_3_codesapce-show-extension.png
diff --git a/docs/2_Prerequisites/2_4_codespace-copilot-ext-reload.png b/docs/2_Prerequisites/2_4_codespace-copilot-ext-reload.png
diff --git a/docs/2_Prerequisites/README.md b/docs/2_Prerequisites/README.md
@@ -1,4 +1,4 @@
-# Prerequisites and development environment setup
+# Prerequisites and setup of the development environment
 
 ## Prerequisites
 
@@ -7,9 +7,9 @@
 
 ## OctoFit Tracker technology stack
 
-- NodeJS: Version xxx
-- ReactJS: Version xxx
-- Python Django: Version xxx
+- NodeJS: Version v20.17.0
+- ReactJS: Version v18.3.1
+- Python Django: Version v4.1
 
 ## Developer environment setup
 
@@ -24,7 +24,14 @@ but, this is what we are using for the GitHub Universe workshop
 
 #### Create a GitHub codespace
 
-![create a GitHub codespace](./2_1_codespace-create.png)
+![create a GitHub codespace](./2_2_codespace-create.png)
+
+#### Once the GitHub Codespace is created
+
+When the codespace is created you may get the following message for the GitHub Copilot Chat extension
+
+![show extension](./2_3_codesapce-show-extension.png)</br>
+![copilot extension reload](./2_4_codespace-copilot-ext-reload.png)
 
 ### Option 2: Use your IDE of choice
 

diff --git a/docs/3_GettingStarted/3_1_AskCopilotProjectCreation.png b/docs/3_GettingStarted/3_1_AskCopilotProjectCreation.png
diff --git a/docs/3_GettingStarted/3_2_StepByStep.png b/docs/3_GettingStarted/3_2_StepByStep.png
diff --git a/docs/3_GettingStarted/3_3_OctoFitTrackerDirTree.png b/docs/3_GettingStarted/3_3_OctoFitTrackerDirTree.png
diff --git a/docs/3_GettingStarted/README.md b/docs/3_GettingStarted/README.md
@@ -6,7 +6,10 @@ In this section, we will start by setting up the face of our OctoFit application
 
 ## Explain to GitHub Copilot the goals and steps
 
-It is important to lay out a plan and provide details. Type the following prompt:
+It is important to lay out a plan, provide details, and be specific.</br>
+Type the following prompt in GitHub Copilot Chat:
+
+> TIP: we are going to use gpt-4o as our OpenAI GPT model for this GitHub Universe Workshop
 
 ```text
 I want to build an OctoFit Tracker app that will include the following:
@@ -22,13 +25,36 @@ It should be in one app
 generate instructions in this order
 
 1. Create the frontend and backend in the octofit-tracker directory of this repository in one command
-2. the octofit-tracker/backend directory will store the django app with no subdirectories
-3. setup backend python venv and install octofit-tracker/requirements.txt first
-4. Create the django app directly in the directory octofit_tracker/backend
-5. setup the octofit-tracker/frontend directory will store the react app with no subdirectories
-6. instlal bootstrap
-7. Install and setup mongodb with the 'sudo service mongodb start' and 'sudo service mongodb status'
- 
+2. Setup backend python venv and install octofit-tracker/requirements.txt first
+3. The octofit-tracker/backend directory will store the django project with the name octofit-tracker
+4. The Django project octofit-tracker directory will have all the backend components for the app
+5. Create the django app directly in the directory octofit_tracker/backend
+6. Setup the octofit-tracker/frontend directory will store the react app with no subdirectories
+7. Install bootstrap and import it
+8. Install mongodb via 'apt-get' and setup mongodb with the 'sudo service mongodb start' and 'sudo service mongodb status'
+
+Tha directory tree for the OctoFit Tracker App
+
+octofit-tracker/
+├── backend/
+│   ├── venv/
+│   ├── octofit_tracker/
+│   │   ├── __init__.py
+│   │   ├── models.py
+│   │   ├── serializers.py
+│   │   ├── settings.py
+│   │   ├── views.py
+│   │   ├── urls.py
+│   │   ├── wsgi.py
+│   │   └── asgi.py
+└── frontend/
+    ├── node_modules/
+    ├── public/
+    ├── src/
+    ├── package.json
+    └── README.md
+
+All of the backend django app will be in octofit_tracker and do NOT create another app of any kind
 
 Use a Python virtual environment and install all python dependencies from file octofit-tracker/requirements.txt in this workspace
 
@@ -43,10 +69,10 @@ Let's think about this step by step
 Important to avoid using public code and we do NOT need to initialize the git repository
 ```
 
-![create project plan](./3_1_AskCopilotProjectCreation.png)
+![create project plan](./3_1_AskCopilotProjectCreation.png)</br>
 
-![step by step](./3_2_StepByStep.png)
+![step by step](./3_2_StepByStep.png)</br>
 
-![octofit-tracker app directory tree](./3_3_OctoFitTrackerDirTree.png)
+![octofit-tracker app directory tree](./3_3_OctoFitTrackerDirTree.png)</br>
 
 [Back :: Previous: Prerequisites and development environment setup](../2_Prerequisites) | [Next :: OctoFit app backend setup](../4_BackendSettings/)
diff --git a/docs/4_BackendSettings/4_1_OctoFitTrackerBackendFiles.png b/docs/4_BackendSettings/4_1_OctoFitTrackerBackendFiles.png
diff --git a/docs/4_BackendSettings/4_1_OctoFitTrackerBackendSettings.png b/docs/4_BackendSettings/4_1_OctoFitTrackerBackendSettings.png
diff --git a/docs/4_BackendSettings/4_2_CreateModelsViewsSerializers.png b/docs/4_BackendSettings/4_2_CreateModelsViewsSerializers.png
diff --git a/docs/4_BackendSettings/4_2_UpdateSettings.png b/docs/4_BackendSettings/4_2_UpdateSettings.png
diff --git a/docs/4_BackendSettings/4_3_CreateBackendProjectFiles1.png b/docs/4_BackendSettings/4_3_CreateBackendProjectFiles1.png
diff --git a/docs/4_BackendSettings/4_3_CreateBackendProjectFiles2.png b/docs/4_BackendSettings/4_3_CreateBackendProjectFiles2.png
diff --git a/docs/4_BackendSettings/4_3_OctoFitAppBackendUrls.png b/docs/4_BackendSettings/4_3_OctoFitAppBackendUrls.png