Skip to content

Commit cfda270

Browse files
mheaddmheadd
authored
Initial commit
0 parents  commit cfda270

19 files changed

+1307
-0
lines changed

‎.devcontainer/devcontainer.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "copilot-flow-state",
3+
"image": "mcr.microsoft.com/devcontainers/base:jammy",
4+
"features": {
5+
"ghcr.io/devcontainers/features/docker-in-docker:2": {},
6+
"ghcr.io/devcontainers/features/github-cli:1": {},
7+
"ghcr.io/devcontainers/features/node:1": {
8+
"version": "lts",
9+
"pnpmVersion": "latest",
10+
"nvmVersion": "latest"
11+
}
12+
},
13+
"customizations": {
14+
"vscode": {
15+
"extensions": [
16+
"GitHub.copilot",
17+
"dbaeumer.vscode-eslint",
18+
"DavidAnson.vscode-markdownlint",
19+
"bierner.markdown-mermaid",
20+
"bitlang.cobol"
21+
],
22+
"settings": {
23+
"chat.agent.enabled": true,
24+
"chat.mcp.enabled": true
25+
}
26+
}
27+
},
28+
"forwardPorts": [],
29+
"postCreateCommand": "sudo chmod +x ./.devcontainer/*.sh && sudo ./.devcontainer/postCreate.sh"
30+
}

‎.devcontainer/postCreate.sh‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/bash
2+
3+
# Update packages and install GnuCOBOL
4+
echo "Installing GnuCOBOL compiler..."
5+
sudo apt-get update && sudo apt-get install -y gnucobol

‎.github/prompts/runCobolApp.prompt.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
mode: agent
3+
---
4+
5+
I want you to compile and run the COBOL application.
6+
7+
Follow these steps:
8+
9+
1. Compile the COBOL application from the project root:
10+
11+
```bash
12+
cobc -x src/cobol/main.cob src/cobol/operations.cob src/cobol/data.cob -o accountsystem
13+
```
14+
15+
1. Run the compiled application with:
16+
17+
```bash
18+
./accountsystem
19+
```

‎.github/steps/1-preparing.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
## Step 1: Help me modernize Copilot
2+
3+
Welcome to Mergington High School's IT team! You've joined at a critical time. The school has been using the same COBOL-based accounting system since the early 1990s to manage student fees, cafeteria accounts, and school supplies purchases. The original programmer retired years ago, and the current IT staff struggles to maintain the system whenever changes are needed.
4+
5+
### 📖 Theory: Educational Legacy Systems Modernization
6+
7+
> [!NOTE]
8+
> Legacy code modernization in educational settings means transforming outdated systems into modern technologies while preserving essential school business operations and data integrity.
9+
10+
Many educational institutions still rely on legacy COBOL systems for critical administrative functions. While these systems have reliably managed school finances for decades, they now present significant challenges:
11+
12+
- ❗ Skill Shortage – Fewer developers today know COBOL, making maintenance difficult and expensive.
13+
- ❗ Integration Issues – Legacy systems struggle to interface with modern platforms, APIs, and cloud services.
14+
- ❗ High Maintenance Costs – Old systems and inefficient processes drive up the cost of running and supporting legacy systems
15+
- ❗ Lack of Agility – Legacy systems are rigid, making it hard to adapt to new business needs or market changes quickly.
16+
- ❗ Security Risks – Outdated codebases may lack modern security features, leaving systems vulnerable.
17+
18+
**Benefits of Modernizing Legacy Systems**
19+
20+
- ✅ Improved Agility – Easier to adapt and scale with changing business and technology needs.
21+
- ✅ Cost Efficiency – Modern systems are typically more efficient and require less manual intervention.
22+
- ✅ Better Integration – Seamless connection with modern tools, APIs, and third-party services.
23+
- ✅ Enhanced Security – Up-to-date security protocols and compliance with modern standards.
24+
- ✅ Access to Talent – Easier to hire developers familiar with modern languages and tools.
25+
26+
However, companies are often afraid of the initial steps to modernizing their legacy systems.
27+
28+
GitHub Copilot can help breach that feat and transform this modernization process by:
29+
30+
1. Helping decipher the decades-old COBOL code that lacks documentation.
31+
1. Assisting with test creation to ensure business logic remains intact.
32+
1. Translating COBOL structures to modern Node.js equivalents.
33+
1. Testing the new code to ensure it meets the original system's requirements.
34+
35+
### ⌨️ Activity: Setting Up Your Environment
36+
37+
To get started, we will set up a GitHub Codespace with the necessary tools and extensions to use GitHub Copilot effectively.
38+
39+
> [!TIP]
40+
> You can learn more about current and upcoming features in the [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features) documentation.
41+
42+
1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
43+
44+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
45+
46+
1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
47+
48+
- ✅ Your copy: `/{{full_repo_name}}`
49+
- ❌ Original: `/skills/modernize-your-legacy-code-with-github-copilot`
50+
51+
1. Wait a moment for Visual Studio Code to load in your browser.
52+
53+
1. In the left sidebar, click the extensions tab and verify that the `GitHub Copilot` and `Cobol` extensions are installed and enabled.
54+
55+
<img width="350" alt="copilot extension for VS Code" src="https://github.com/user-attachments/assets/ef1ef984-17fc-4b20-a9a6-65a866def468" />
56+
57+
<img width="345" alt="cobol extension for VS Code" src="https://github.com/user-attachments/assets/955aad46-7468-4942-bbd3-d342bcef7642" />
58+
59+
1. At the top of VS Code, locate and click the **Copilot icon** to open a Copilot Chat panel.
60+
61+
<img width="150" alt="image" src="https://github.com/user-attachments/assets/5e64db46-95cb-415d-badc-b6b8677f10c1" />
62+
63+
1. If this is your first time using GitHub Copilot, you will need to accept the usage terms to continue.
64+
65+
<details>
66+
<summary>Having trouble? 🤷</summary><br/>
67+
68+
- If you don't see the Copilot icon, make sure you have the GitHub Copilot extension installed and enabled.
69+
- If you don't see the Copilot chat panel or have other issues with it, try reloading the codespace with `Ctrl + Shift + P` (Windows) or `Cmd + Shift + P` (Mac) and selecting **Developer: Reload Window**.
70+
71+
</details>
72+
73+
### :keyboard: Activity: Use Copilot to help remember a terminal command 🙋
74+
75+
Great work! Now that we have our working environment set up, let's ask copilot for help starting a branch so we can do some refactoring in the next steps!
76+
77+
1. In the bottom panel, select the **Terminal** tab.
78+
79+
1. Within the new terminal window use the keyboard shortcut `Ctrl + I` (windows) or `Cmd + I` (mac) to bring up **Copilot's Terminal Inline Chat**.
80+
81+
1. Let's ask Copilot to help us remember a command we have forgotten: creating a branch and publishing it.
82+
83+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
84+
>
85+
> ```prompt
86+
> Hey copilot, how can I create and publish a new git branch called modernize-legacy-code?
87+
> ```
88+
89+
<details>
90+
<summary>Having trouble? 🤷</summary><br/>
91+
92+
Remember, you are supposed to use **Copilot's Terminal Inline Chat** NOT the Copilot Chat panel.
93+
94+
The Terminal Inline Chat is specifically designed to help with terminal commands.
95+
96+
Copilot should respond with a command similar to the one below.
97+
98+
```shell
99+
git checkout -b modernize-legacy-code
100+
git push -u origin modernize-legacy-code
101+
```
102+
103+
</details>
104+
105+
1. Now that we are happy with the command, press the `Run` button to let Copilot run it for us. No need to copy and paste!
106+
107+
1. Now that your branch is pushed to GitHub, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.
108+
109+
<details>
110+
<summary>Having trouble? 🤷</summary><br/>
111+
112+
If you don't get feedback, here are some things to check:
113+
114+
- Make sure you created the branch with the **exact name** `modernize-legacy-code`. No prefixes or suffixes.
115+
- Make sure the branch was indeed pushed to your repository. That will trigger the next step.
116+
- If Copilot doesn't understand your command, try rephrasing it or providing more context.
117+
118+
</details>

‎.github/steps/2-explain-legacy-code.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
## Step 2: Understanding the School's Legacy COBOL Accounting System
2+
3+
In this step, you'll explore the school's legacy COBOL accounting system to understand its structure and functionality. This will help you prepare for the modernization process.
4+
5+
### ⌨️ Activity: Exploring the School's Legacy Accounting System
6+
7+
Before we can modernize the school's accounting system, we need to understand how it works.
8+
9+
First, take a few minutes to explore the COBOL files in the repository, you will find them in the `src/cobol` directory.
10+
11+
>[!NOTE]
12+
> COBOL is a legacy language that was widely used in the 1960s and 1970s for business applications. It has a very different syntax and structure compared to modern programming languages.
13+
>
14+
> You may not be familiar with COBOL, but don't worry! GitHub Copilot can help you understand the code and its purpose.
15+
16+
17+
Let's use GitHub Copilot to help us understand the COBOL code!
18+
1. Open up Copilot Chat window in the sidebar and select **Agent** Mode. You will use it for the rest of the exercise.
19+
1. Click **Add Context...** in the Copilot Chat sidebar, select **Files & Folders** then select the `src/` directory. This will put the COBOL files in the prompt context so Copilot will be sure what files you are referring to in the following prompt.
20+
21+
1. Let's Ask Copilot in Agent mode to:
22+
- Explain the purpose of each file in the context of the school's accounting system
23+
- Create a `docs/README.md` file and document it's findings, especially the key functions and business requirements
24+
25+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
26+
>
27+
> ```prompt
28+
> Create a README.md file in a new /docs directory
29+
>
30+
> Document the purpose of each COBOL file, key functions, and any specific business rules related to student accounts.
31+
> ```
32+
33+
> 💡 **Tip:** Creating good prompts is a combination of proper context, clarity and specificity. Learn more about [Prompt Engineering](https://docs.github.com/en/copilot/concepts/prompt-engineering-for-copilot-chat).
34+
35+
36+
<details>
37+
<summary>Having trouble? 🤷</summary><br/>
38+
39+
- COBOL is a column-sensitive language. The code is organized in divisions (IDENTIFICATION, DATA, PROCEDURE) and sections.
40+
- The `main.cob` file handles the user interface and menu options (view student balance, process payment, record purchase, exit)
41+
- The `operations.cob` file contains the logic for different student account operations
42+
- The `data.cob` file manages the storage of student account balances
43+
44+
</details>
45+
46+
### ⌨️ Activity: Create a data flow diagram
47+
48+
Now that you have a better understanding of the school's accounting system, let's visualize how data flows through it. We can use that later as context for Copilot to help us modernize the code.
49+
50+
>[!NOTE]
51+
> Notice how we are breaking down the task into smaller steps.
52+
>
53+
> You will find that Copilot is more effective when you provide it with specific smaller tasks rather than trying to do everything at once, e.g `Hey Copilot, refactor this COBOL codebase to Node.js`.
54+
>
55+
> This is especially true when working on large codebase modernizations and context window limitations come into play.
56+
57+
Let's visualize the data flow with a diagram!
58+
59+
1. Ask Copilot to Create a Mermaid data flow diagram (DFD) that illustrates how data moves through the school's accounting system.
60+
61+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
62+
>
63+
> ```prompt
64+
> Create a sequence diagram of the app showing the data flow of the app.
65+
>
66+
> Please create this in mermaid format so that I can render this at the end of the the docs/README.md markdown file.
67+
> ```
68+
69+
1. Make sure you can preview the diagram in the `docs/README.md` file.
70+
71+
1. In the left sidebar, select the `Source Control` tab and make sure you are making changes on `modernize-legacy-code`branch.
72+
73+
> 💡 **Tip:** Opening a file from the source control area will show the differences to the original rather than simply opening it.
74+
75+
1. Find the `docs/README.md` file and press the `+` sign to collect your changes together in the staging area.
76+
77+
1. Above the list of staged changes, find the **Message** text box, but **don't enter anything** for now.
78+
79+
- Typically, you would write a short description of the changes here, but now we have Copilot to help out!
80+
81+
1. To the right of the **Message** text box, find and click the **Generate Commit Message with Copilot** button (sparkles icon).
82+
83+
1. Press the **Commit** button and **Sync Changes** button to push your changes to the `modernize-legacy-code`branch on GitHub.
84+
85+
1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson.
86+
87+
<details>
88+
<summary>Having trouble? 🤷</summary><br/>
89+
90+
If you don't get feedback, here are some things to check:
91+
92+
- Make sure your pushed the `docs/README.md` file changes to the branch `modernize-legacy-code`.
93+
94+
</details>

‎.github/steps/3-create-test-plan.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
## Step 3: Run the COBOL application and create a test plan to ensure quality of our legacy codebase
2+
3+
In the following activities we will build and run the COBOL accounting application and create a test plan that we can use to ensure the quality of our legacy codebase.
4+
5+
Running the COBOL application will help us understand how it works and what it does.
6+
7+
### ⌨️ Activity: Build and run the COBOL application
8+
9+
COBOL is a compiled language, we need to compile the source code before we can run it.
10+
11+
But... you don't know how to compile COBOL source code, right? No problem!
12+
13+
Because that is a common task, we have already set up a custom prompt file that is ready to use in your codespace!
14+
15+
1. Inside your Copilot Chat window, make sure you are still using **Agent Mode**.
16+
1. Use the **Run COBOL App** prompt file by typing `/runCobolApp` in the chat input box and selecting the prompt from the list. You don't need to type anything else, just select the prompt.
17+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
18+
>
19+
> ```prompt
20+
> /runCobolApp
21+
> ```
22+
23+
<!--- TODO: add screenshot -->
24+
> 🪧 **Note:** You can find the contents of the prompt file in `.github/prompts` directory. You can learn more about prompt files [here](https://code.visualstudio.com/docs/copilot/copilot-customization).
25+
1. Play with the Cobol App to see how it works!
26+
- The application will prompt you to select an option from the menu.
27+
- Try playing with the different options of the COBOL accounting app and when you are done select option `4` to exit.
28+
29+
### ⌨️ Activity: Generate a test plan to validate the current implementation
30+
31+
Given the features of our existing legacy accounting system we want to generate a comprehensive test plan that covers all critical functionalities and edge cases.
32+
33+
We will use that test plan to create tests in the Node.js application later.
34+
35+
1. Inside your Copilot Chat window, make sure you are still using **Agent Mode**.
36+
1. Provide Copilot the specific instructions and requirements for the test plan by typing or pasting the above prompt in the chat input box.
37+
38+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
39+
>
40+
> ```prompt
41+
> The current Cobol app has no tests.
42+
> Can you please create a test plan of the current business logic and implementation that I can use to validate with business stakeholders.
43+
> Store it in a file called docs/TESTPLAN.md.
44+
> Later I would like to use this test plan to create unit and integration tests in a node.js app. I am in the middle of transforming the current Cobol app to a node.js app.
45+
> The test plan should include the following headings:
46+
> 1. Test Case ID
47+
> 2. Test Case Description
48+
> 3. Pre-conditions
49+
> 4. Test Steps
50+
> 5. Expected Result
51+
> 6. Actual Result
52+
> 7. Status (Pass/Fail)
53+
> 8. Comments
54+
>
55+
> Please create the test plan in a markdown table format. The test plan should cover all the business logic in the current Cobol app.
56+
>
57+
> ```
58+
59+
1. Make sure you can preview the test plan in the `docs/TESTPLAN.md` file. If there are any issues, you can continue chatting with Copilot to refine the test plan until you are satisfied with the results.
60+
61+
1. Commit the changes to the `docs/TESTPLAN.md` file and push to the `modernize-legacy-code` branch.
62+
63+
> 💡 **Tip:** You can use Copilot to help you with the commit message like in the last step, or write your own.
64+
65+
<details>
66+
<summary>Having trouble? 🤷</summary><br/>
67+
68+
- If you don't see the `/runCobolApp` prompt in the list, make sure you are using **Agent Mode**.
69+
- If you don't get feedback, make sure your pushed the `docs/TESTPLAN.md` file changes to the branch `modernize-legacy-code`.
70+
71+
</details>

0 commit comments

Comments
 (0)