Building the TNT Copilot Shell

A Collaborative Development Story with Copilot

Stage No: | Last Update:

...loading...

Copilot: About This Project

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)

Item 1
Item 2
Item 3

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