Merge pull request #7 from githubuniverseworkshops/arilivigni/self-service-prompting

Arilivigni/self service prompting

Author: bryantson

.devcontainer/devcontainer.json

@@ -10,7 +10,14 @@
         "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
         ]}
-    }
+    },
+    "forwardPorts": [
+        8000, // Django default port
+        27017 // MongoDB default port
+    ]
 }

.gitignore

@@ -3,10 +3,6 @@
 # Virtual Environment
 venv/
 
-# octofit backend
-octofit/
-manage.py
-app/
-
-# octofit frontend
-frontend
+# octofit tracker app frontend and backend
+backend/
+frontend/

README.md

@@ -26,8 +26,6 @@ Without further ado, let's get started.
 ## Table of Contents
 
 1. [Story](docs/1_Story)
-2. [Prerequisites, expectations, and assumptions](docs/2_Prerequisites)
-3. [Getting started - front end setup with HTML and CSS](docs/3_GettingStarted)
-4. Prettifying the design with Bootstrap
-5. Adding functionality with ReactJS
-6. Adding a backend with NodeJS
+2. [Prerequisites and development environment setup](docs/2_Prerequisites)
+3. [Getting started - app frontend and backend creation](docs/3_GettingStarted)
+4. [MongoDB install and setup](docs/4_MongoDBInstallSetup/)

images/code-tab.png renamed to docs/2_Prerequisites/2_1_code-tab.png

@@ -1,4 +1,4 @@
-# Prerequisites, assumptions, and development environment setup
+# Prerequisites and development environment setup
 
 ## Prerequisites
 
@@ -13,26 +13,22 @@
 
 ## Developer environment setup
 
-### Go to the code tab
-![code tab](../../images/code-tab.png)
+### Option 1: Using a Copilot + Codespaces
 
-### Create a GitHub codespace
-![create a GitHub codespace](../../images/codespace-create.png)
+You are not required to use GitHub Codespaces
+but, this is what we are using for the GitHub Universe workshop
 
-## Assumptions
+#### Go to the code tab
 
-Two approaches:
-Ask Copilot to generate a lot of boiler plate codes first time:
-PROS: Create a lot of structures that we probably need later
-CONS: Probably need to make a bunch of changes to make it work. Hard to make it into a tutorial.
-Good for: When you actually work for the real project
-Bad for: Make it a tutorial like format
-Ask Copilot to make incremental, graduate changes
-PROS: More predictable and easy to make it procedural steps
-CONS: Can take more time and strategy later
-Good for: Tutorial
-Bad for: Real project
+![code tab](./2_1_code-tab.png)
 
-We will choose the second approach because we want to make it a more procedural step-by-step approach.
+#### Create a GitHub codespace
 
-[:back: Previous: Story](../1_Story) | [Next: Getting started - Front end setup with HTML and CSS :soon:](../3_GettingStarted)
+![create a GitHub codespace](./2_1_codespace-create.png)
+
+### Option 2: Use your IDE of choice
+
+- If you choose this option we recommend using VSCode as your IDE, but this workshop is not limited to VSCode
+- URL for REACT and Django will be `http://localhost` or `http://127.0.0.1`
+
+[Back :: Previous: Story](../1_Story) | [Next :: Getting started](../3_GettingStarted/)

images/codespace-create.png renamed to docs/2_Prerequisites/2_1_codespace-create.png

@@ -1,39 +1,47 @@
-# Getting started - Front end setup with HTML and CSS
+# Getting started
 
 In this section, we will start by setting up the face of our OctoFit application by building the front end page. To do that, we will keep it as simple as possible for now. We need resources like HTML and CSS to start decorating first, and we will later modify the page to extend the functionalities.
 
-## Goals/Outcome
+> TIP: One challenging thing about GitHub Copilot is that it is very generative. Thus, it is hard to make a consistent, repeatable tutorial unless you try to keep it simple and very progressive.
 
-- Understand the basic strategies around designing the OctoFit app by asking GitHub Copilot Chat
-- Start getting the feel for OctoFit app by generating HTML and CSS resources
-- See a front-end page with a greeting message
+## Explain to GitHub Copilot the goals and steps
 
-![OctoFit App with front end](../../images/0_FinalResult.jpg)
+It is important to lay out a plan and provide details 
 
-Let’s start with the basic front end development with the help of GitHub Copilot. Although we can start using the built-in in-file Copilot suggestion, we will initiate this by using GitHub Copilot Chat.
+```text
+I want to build an OctoFit Tracker app that will include the following:
 
-After you open the GitHub Copilot Chat panel, please type the following prompt.
+* User authentication and profiles
+* Activity logging and tracking 
+* Team creation and management 
+* Competitive leader boards 
+* Personalized workout suggestions in one app 
 
-`I have this great idea called the OctoFit app. Can you show me the outline for how to get started? Please ignore technology stacks for now.`
+I want to use React.js for the frontend. I want to use Python with Django REST Framework for the backend and Mongo DB as the database to store data.
 
-![Ask Copilot for Outline](../../images/1_AskCopilot4Outline.jpg)
+Create the frontend and backend in the octofit-tracker directory of this repository
 
-The reason why I asked to ignore technology stack is because I want to keep it super simple. If we did not add that, what you will likely see is that some users will get code examples, while some others don’t, etc.
+the octofit-tracker/backend directory will store the django app with no subdirectories
 
-> TIP: One challenging thing about GitHub Copilot is that it is very generative. Thus, it is hard to make a consistent, repeatable tutorial unless you try to keep it simple and very progressive.
-Once you get the result, try to read to see how you can approach creating our fitness application. Your result still might look different from mine, and that is perfectly okay!
+the octofit-tracker/frontend directory will store the react app with no subdirectories
+
+Use a Python virtual environment and install all python dependencies from file octofit-tracker/requirements.txt in this workspace
 
-Once you get the result, try to read to see how you can approach creating our fitness application. Your result still might look different from mine, and that is perfectly okay!
+The octofit-tracker/requirements.txt already contains all Django requirements. Django, djongo, sqlparse
 
-Now, let’s move onto the next prompt through GitHub Copilot Chat. This time, we want to generate some assets to create our web pages. HTML, which stands for Hyper Text Markup Language, is the language of the web, though it is not exactly a programming language, and CSS, which stands for Cascading Style Sheet, is the web language for the design. Thus, we will ask to generate these two. Let’s proceed with the following prompts. 
+Layout the directory structure with no redundant backend and frontend subdirectories
 
-`Now, how can I add HTML and CSS on these?`
+Use bootstrap for the frontend
 
-![Ask Copilot for HTML and CSS - Page 1](../../images/2_1_AskGenerateHTMLCSS.jpg)
+Let's think about this step by step
 
-![Ask Copilot for HTML and CSS - Page 2](../../images/2_2_AskGenerateHTMLCSS.jpg)
+Important to avoid using public code and we do NOT need to initialize the git repository
+```
 
-As you can see, this prompt will generate some examples of HTML and CSS lines that you can use. Again, your result might look different from mine, and that is perfectly okay!
+![project plan](./3_1_AskCopilotProjectCreation.png)
 
+![directory structure](./3_2_CopilotDirectoryStructure.png)
 
+![octofit-tracker app setup](./3_3_OctFit-Tracker-Setup.png)
 
+[Back :: Previous: Prerequisites and development environment setup](../2_Prerequisites) | [Next :: MongoDB install and setup - ](../4_MongoDBInstallSetup)