Building the TNT Copilot Shell

A Collaborative Development Story with Copilot

Stage No: | Last Update:

...loading...

Copilot: About This Project

SPARK
SPARK Imagination!

We're using the S.P.A.R.K approach to app development with VSCode and GitHub Copilot.

Conversations illustrate various aspects of software development including:

  • Planning and structuring an application
  • Implementing interactive UI elements
  • Adding user-requested features and troubleshooting
  • Enhancing visual presentation and user experience

This documentation is designed as a teaching resource for students learning about AI-assisted programming in a classroom setting.

Claude provided some guidelines as we use AI teamwork to build our apps. Check them out!


Human commentary: This is a starter template for future apps. Copilot came up with a great design in our Dial of Destiny app and we've generalized it with the hopes of using it for our future designs.

Establishing initial goals and app structure

As we write this app, remember I will be using it as a high school teacher to guide my students into how to use AI to assist a programmer in code development. Please make sure to add lots of comments and explanations on how things work, and lay out this chat log in such a way that it can be turned into a static web page that shows our collaboration once we're done.

I've provided a general shell for our dialog which you generated earlier and I'd like to follow this particular 'look and feel.'

Sample Copilot Response

I'll help you build an application with thorough documentation that shows the collaboration process.

Here's some sample JavaScript code I'll use for documentation. I'll include detailed comments to explain how everything works:

app.js - A Sample Function

/**
 * A future app we will build together
 * Created with p5.js and GitHub Copilot

 */

//It's common to use a 'Hello World' 
//scenario when getting started with a new app

function helloWorld(){
    console.log("...helloWorld...");

}//end function helloWorld
  

This example demonstrates:

  • Comments
  • Function syntax with breadcrumbs
  • Basic console output
Another step towards a polished app

Another prompt by the human here

A response by Copilot

Some commentary...possible code shown

Explanation of the Change(s)
  1. Item 1
  2. Item 2
  3. Item 3
Adding another prompt

How can I add a new collaboration section to this chat log template?

Copilot's Response

To add a new collaboration section, simply copy the structure of an existing collaboration-section block and update the content as needed. Be sure to increment the section number and adjust the section-title and messages to fit your new dialog.

Explanation of the Change(s)
  1. Duplicated the previous section's HTML structure.
  2. Updated the section number and title.
  3. Customized the human and AI messages for the new prompt.
Adding some sample CSS

Can you show me what it would look like to add some sample CSS to this app? I want to see a code snippet, but we're not adding it to the actual styles yet.

Copilot's Response

Absolutely! Here's a sample CSS snippet that could be used to style your collaboration sections. This is just for demonstration and can be customized further:

site-styles.css - Sample CSS

.collaboration-section {
    background: linear-gradient(90deg, #f8f9fa 60%, #e6f2ff 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.human-message {
    background-color: #e6f2ff;
    border-left: 4px solid #0d6efd;
    padding: 1rem;
}

.ai-message {
    background-color: #f0f7f0;
    border-left: 4px solid #198754;
    padding: 1rem;
}
Explanation of the Change(s)
  1. Provided a sample CSS code block using language-css for syntax highlighting.
  2. Demonstrated how to style the collaboration-section, human-message, and ai-message classes.
  3. Kept the code in a code block for easy reference and teaching.
Final Project Summary
Key Features Implemented
  • Wow Factor 1
  • Wow Factor 2
  • Wow Factor 3
  • Wow Factor 4
Educational Value

This project demonstrates several important programming concepts:

  • Concept 1
  • Concept 2
  • Concept 3
  • Concept 4
Collaboration Highlights

This project showcases effective AI-human collaboration through:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
Try the App!

Check out the app at: app location

The source code is fully commented and can be used as a teaching resource for students learning about:

  • Topic 1
  • Topic 2
  • Topic 3
  • Topic 4