Coding with GPT (Syllabus)

Views: 14,375

It’s not too late to learn about coding! This is a short intro. class on design-driven software development for the MBA/businessperson. When I teach it at UVA Darden, it’s (very) roughly 40 hours of content, including class time and assignment time.

It’s designed for a learner that’s comfortable with the basics of software design, including user stories and related techniques on software design that I cover in this class: Digital Product Design. That class is not a prerequisite, but if you haven’t taken it you may need to budget a little extra time to loop back and cover a few key topics.

Course Descriptions + Objectives

By the end of this class, you will have lost your fear of tinkering (with software). You’ll also have a hands-on introduction to how modern software design relates to actual development.

As an MBA considering roles like product manager, founder, or consultant, this is important. Between working software developer and knowing zero about coding, there’s a productive middle place. This is a place where you can:
– follow discussions about software development
– engage confidently in meaningful learning about the software/system you’re managing
– create front-end prototypes

By the end of this class, you will be able to:
1. Take user stories and translate them into functioning web applications using HTML, CSS, and Javascript
2. Evaluate alternative approaches to software implementations
3. Work through coding issues with analytical debugging techniques

Prerequisites

There are no course prerequisites and this course does not assume any prior programming experience.

The course does require projects that have been through the Digital Product Design class, or a similar independent study. The input into this class is user stories and prototypes that have been through a substantial customer discovery and design process- something like the Hypothesis-Driven Development process we use in the above class. A suitable design would have most of the elements you see in this Hypothesis-Driven Development Template.

Teams + Projects

While the assignments are a mix of individual and team assignments, students will work in teams of 2 (min) to 4 (max) individuals. Students can organize around student-submitted projects with the prerequisites above. Student projects must be accepted in advance or by the first class session.

Course Structure

Your primary deliverable is working software and a portfolio entry about what you built and why. We’ll prototype on JS Fiddle and optionally also deploy via Github+AWS Amplify or Replit (AI-forward codeless environment).

You’ll spend a lot of your class hours learning how to make stuff work. That’s normal, and it’s necessary, but the core objective is for you to understand what it takes to move from design narrative to working software. For this reason, we intersperse the class with sessions on peer review and discussion about your implementation. It’s also why your portfolio entry is a significant part of your grade.

The material below is organized around ‘sessions’ of roughly 90 minutes/each.

Grading

Category Due Date Percent of Final Grade
1. Attendance & Participation Every day/ongoing 50
2. Team Project- Working Software (as stated on Canvas) 35
3. Team Project- Portfolio Entry Exam period 15

Attendance & Participation: 50%

My objective is to provide a stimulating environment for you to learn the process of software development. This portion of your grade includes the following:
being prepared for class: understand the topics at hand and being able to discuss your work and your team’s work
on-time, full attendance
posting questions, responses, and ideas to the forum (on Piazza)
I expect you to inform me before class if you will be missing. Absences for reasons other than illness for which I do not receive prior notice will count against your class participation grade.

Team Project- Working Software: 35%

This is your final team deliverable in the form of working software on your WordPress site.

Team Project- Portfolio Entry: 15%

This is your team explanation of what you did and why in the form of a portfolio entry on Behance.

Where Things Are

The following table describes the location of resources for the class.

You It
I want a current, comprehensive overview of the class so I know what’s happening in class and what assignments are coming. Canvas
I want to turn in an assignment so it’s recorded as on time and complete and can be reviewed and graded. Canvas
I want to set up and manage my WordPress instance so I can [start building things, create a restore point, restore to a restore point]. WP Engine is the place. If you’re a team lead, create an account. If you’re on a team, your team lead will send you a login.
I want to add, modify, code on my site so I can implement my user stories and wireframes. For this go to the admin page on your WordPress instance, which will be [your site]/wp-admin.
I want to notes on setting up WP Engine and WordPress so I don’t have to figure out everything from scratch. Please see our handy WP Engine/WP Notes: WP Engine & WordPress Notes for Software Development Class
I want to post a question on Piazza so I can get help from my peers and the teaching team. Please see our handy WP Engine/WP Guide: Piazza Site for GBUS 8633

Session 1: From Prototype to HTML

Objective

Achieve basic working proficiency with HTML.

Five Hot Tips

  1. This class is for you. Six classes of MBA’s before you have all learned how to code this way. Many of the highest performers started with zero coding experience.
  2. Coding isn’t as hard as you probably think, but it does require concentration. The best time to mess with this case is when you’re well rested and free of distractions.
  3. Break the case preparation into pieces and just handle one at a time. While there are a bunch of big/general ideas we’ll focus on, the bulk of the case has to do with managing details that need to be handled individually.
  4. Do use the references material, but use the minimum you need to get through the case. For example, only spend time on the Codecademy tutorials if you read the case appendices and still feel stuck (and even then do just enough to move on). Don’t try to memorize all the details- you’ll just forget them.
  5. Try to give yourself a couple of quality sittings to finish, ideally with a good night’s sleep between them.

Case

Prototyping with HTML & CSS

Tech Note

Coding for MBA’s in the Age of AI (COMING SOON)

Class Preparation

  1. Read Tech Note: Coding for MBA’s in the Age of AI 
    a) Why should an MBA learn how to code? How will it make them a better GM/product manager?
    b) How much coding experience is enough?
    c) What are the four foundation steps to coding and how do they apply to your work on the case above?
  2. Prepare the case: Prototyping with HTML & CSS
    a) How would you unpack this application with the MVC?
    b) Fork the starter code on JS Fiddle (see note below on how), then review and update the code relative to the following questions:
    Looking at the sample code on JS Fiddle, can you identify all the HTML tags (headings, div’s, etc.)?
    Can you explain their roles?
    How about their additional properties (like styling)?
    Suppose you wanted to remove the item that says ‘Orders (90 day): 87’. How would you do that?
    What about creating a list of parts that customers also ordered below it? Note: Please see Exhibit 1 below for an example of generally how this might look and work in the UX.
    What else do you think is worth trying? Try it out!
    c) Asking chatGPT about how to do these things or doing Google searches like ‘create round border on a div’ is a great way to learn and get comfortable working through code. While you don’t need to know what every character in the code means, you should push to generally understand what the AI has decided to give you. Asking it to explain how it decided on that solution and asking it to add comments to the code is an excellent way to do that.

Exhibit 1

The red rectangle below shows an example of a ‘customers also bought’ type UI affordance.

Session 2: A Four-Corner Design

Objective

Achieve basic working proficiency with a responsive grid (CSS Grid).

Tech Note

Coding User Interfaces with AI (COMING SOON)

Case

A Four-Corner Design

Class Preparation

  1. Read Tech Note: Coding User Interfaces with AI
    a) When is a View done? How do you tell?
    b) As a GM, how do you best express your design intent for a View? Is it a good sign or a bad sign if you get a lot of questions from the designers, developers?
    c) Why might CSS Grid be a good or a bad choice for this View?
  2. Prepare the case: A Four-Corner Design
    a) Fork the starter code on JS Fiddle, then review and update the code relative to the following questions:
    b) Where will Trent the Technician be and what device will he be using when he interacts with the application?
    c) Looking at the sample code on JS Fiddle, can you identify how the new CSS class ‘parts-display’ is now controlling the div’s related to the catalog parts?
    d) Some items are now commented out of the existing ‘catalog-part’ class. Why?
    e) Suppose you wanted to increase the width of the catalog parts- how would you do that? What if you wanted to increase the space between them?
    f) What else do you think is worth trying? Try it out!
    Reminder: log in to JS Fiddle to save your work

In-Class Resources

B-Case: A Problematic Grid

From a JIRA ticket assigned to you
Priority: Double Urgent!
Description: The parts page is broken and the HVAC technicians are FREAKING OUT. The description part is showing when it shouldn’t and the parts are also too smooshed together. Please fix ASAP!

Session 3: UI Interactions with JS + Debugging

Objective

Achieve basic working proficiency with Javascript for front controllers/Views.

Tech Note

Making Stuff Happen with Javascript (COMING SOON)

Case

Making Stuff Happen with Javascript

Class Preparation

  1. Read: Coding Algorithms with AI Download Coding Algorithms with AI
    a) How do you describe your design intent for a Controller? How do you test for that design intent?
    b) What are some of the major implementation options when you code a Controller?
    c) How do you test and debug Controllers?
  2. Prepare Case: Making Stuff Happen with Javascript
    a) What is the code doing? How would you describe its operation with ‘pseudocode’?
    b) How would you describe it in terms of the MVC?
    c) What are major chunks of code? What are their jobs?
    d) Can you trace see what the code is doing? Where and why are the various console statements appearing (see case Exhibit on the console).
    e) Challenge: Can you add code so that when a user clicks on the ‘toggle-search’ div, the code toggles showing vs. hiding the ‘search-controls’ div?
    f) How about a somewhat more involved challenge?! Right now, the code allows the user to filter by manufacturer and model. How would you extend it to also filter by part type?
    g) What else do you think is worth trying? Try it out!
    Reminder: Be sure to fork the code to save your work on JS Fiddle
  3. Prepare Case 2: Debugging Javascript
    A) Just to recap, what is the code supposed to be doing vs. what is it doing now?
    B) Why should it be doing those things? What’s happening under the hood that’s doing that?
    C) What line(s) of Javascript is the Console returning errors against, if any?
    D) What assumptions are baked into the code? Which ones might be incorrect?
    E) How might you use logging to Console to help you isolate the issue(s)?

Notes:
1) In class, we’ll step through the JS code and discuss how to extend it. We’ll also step through the analytical debugging process you used to resolve the issues. In this context, the process is much more important than the final answer or fix.

In-Class Notes

For an extra debugging challenge, check out this B-Case for Debugging

Session 4: Controllers with JS: Data Transformation

Objective

Achieve working fluency in controller/algorithm development.

Case

Automating Your Gruntwork with Javascript

Class Preparation

  1. Prepare Case: Automating Your Gruntwork with Javascript
    a) Step by step, how would you describe what the code is doing in ‘pseudo code’/human language?
    b) What is fetch and what is its role in the code?
    c) What is JSON and how does it relate to the spreadsheet in Google Docs?
    d) What is the relationship between the readData and drawDiv functions? How do they work together?
    e) Let’s suppose Frangelico has realized he wants to display the part type in a new row on the overlay div so you can see it when you hover over a part. How would you extend the code to do that?
    f) What else do you think is worth trying? Try it out!
    g) In order to have something you can show and discuss in class, you’ll need to fork the JS Fiddle and save your edits

Session 5: Backlog Prioritization

Objective

Achieve proficiency in moving from design to code.

Class Preparation

  1. Prepare: Your Design and Story Backlog
    The basic idea here is to get ready to submit the individual assignment for Class 6 in a way that makes sense with your team project as a whole.
    a With your team, review and prepare your user stories. Do the user stories have all three clauses? Do they have enough context for everyone to make good decisions? For example, are they linked to personas and jobs-to-be-done?   Feel free to revise and refactor your work.
    b) Are there prototypes in Balsamiq or similar supporting all the user stories? If not, you may want to draft a few of these.
    c) Organize your team workflow on a Trello board- see below for an example. stories as cards and assign them across your team.
    d) How are you dividing up the work?
    e) Please add me as a collaborator so I can see your board: acowan@alexandercowan.comNotes:
    We’ll step through how your team has thought through what they want to build and prepared themselves for a successful execution. Our primary focus will be on the completeness of the stories and their relationship to the available wireframes.

Supporting Materials

1. Preparing a Trello Board
See here for a Trello board you can copy as a starting point (or not): HVAC in a Hurry Kanban
2. Writing User Stories (OPTIONAL)
Facilitating Digital Development with User Stories

Session 6: Preparing a New UI

Objective

Apply your understanding of user stories and HTML to develop a static page prototype.

Assignment: Submit a Static View

The objective of this individual assignment is for you to apply your working knowledge of going from idea to design to code with HTML and CSS. For this, it’s key to have a clear idea and design that links back to your team’s project, which is what you prepared in Class 3 with your backlog.

The essential process is to: 

1. Sketch out and think through what you want to have happen (feel free to use the existing notes in the design brief)

2. Find starter code you think is a reasonable take for you to effectuate your way to #1 (it’s OK to extend the existing code in the project brief)

3. Iterate and analytically debug your way to what you want to have happen in small, complete batches (i.e. test as you go vs. code a whole bunch and then hope it works)

You should submit this here on Canvas, but please make sure you submit the current version rather than the base URL. For example you should submit something like:
https://jsfiddle.net/acowan/pkb93v10/56/ (with a version number at the end of the URL)
and not something like https://jsfiddle.net/acowan/pkb93v10/. with no version at the end. Just click ‘Save’ on your JS Fiddle to see/increment the version number.

Be sure to include:
A) The specific user story or stories you’re working, including prompts and OEC’s (see tech note on Designing User).
Also, make sure you have a clear view of how you would test your implementation for usability (though you do NOT need to user test it).
B) Design Intent
Start with a clear design intent. There’s not requirement that you start from a Balsamiq prototype or stick to the original design in your HTML implementation, but be careful you don’t get lost in the details. Implementing against a prototype is a good way to avoid that. If you do submit a prototype, just link to the Balsamiq file and make sure it’s shared to ‘acowan@alexandercowan.com’.
C) The URL of your JS Fiddle
We’ll review your work in the session, and in the oral exam, along with the rest of the work from your team.

Session 7: Controllers with JS: Data Models and API’s

Objective

Achieve working fluency in using controllers to interface with a third party API.

Tech Note

Coding Models with AI (COMING SOON)*
* only up to section ‘Iteratively Coding, Testing…’ (page 14)

Case

Creating & Managing Users with Google Firebase

Class Preparation

  1. Please Note: You do not need to set up your own Firebase project to work on the case. There is an appendix (B) that has instruction for this, but that is for general reference- for example, if this is something you want use for your team’s project later.
  2. Read (part of) the tech note Coding Models with AI Download Coding Models with AI: up to the section ‘Iteratively Coding, Testing…’ (page 14), and be prepared to discuss the following: A) How do you describe your design intent for a Model? What drives that design intent?
    B) What are some of the major implementation options when you build a Model?
  3. Review the case Creating & Managing Users with Google Firebase. and be prepared to discuss the following: 
    A) Functionally speaking, what new things does the code do now?
    B) Step by step, how would you describe what the code is doing in ‘pseudo code’/human language?
    C) There are a bunch of Firebase functions being called that aren’t listed in the Javascript. Where are those coming from?
    D) What’s an observer function and how is ‘firebase.auth().onAuthStateChanged’ an example of one? For background, see Exhibit: Key JS Concepts and Techniques.
    E) What are the various HTML forms and when, where do they appear?
    F) How does the data flow from the user login event to the actual log in event on Firebase? What’s happening?
    G) There are a few instances of .then(…) in the code. What are those doing and why are they necessary? For background, see Exhibit: Key JS Concepts and Techniques.
    H) Firebase.auth().onAuthStateChanged is what’s called an observer function. What does that mean and why is the observer pattern a good fit for the particular job this code is doing? For background, see Exhibit: Key JS Concepts and Techniques.I) Let’s suppose Frangelico wants to restrict new users to a specific email domain. How would you modify the code to do that?
    Note: You’d probably want them to confirm their identity over email before you sign them in, but you can skip that for now. If you’re particularly interested in trying it out, however, it is a feature of Firebase.J) For this user story: ‘As Ted the Technician, I want to sign in to the system so I can order a part.’, there are a couple of test cases that add more detail:
    a. Make sure that if they submit a username/email with the @hvacnhurry.com. domain that doesn’t exist on the new system, they get a descriptive error like: ‘For now, this is a stand-alone system. If you haven’t created an account here, just click create account. Sorry for the extra step!’
    b. Make sure that if they get a bad password error, remind them that this is a separate system from ‘HVAC Central’ and their password may be different.
    How would you implement those?What else do you think is worth trying? Try it out!Note: You do NOT need to set up your own Firebase project to use the client code- the current project will allow you to connect to it.

    Supporting Materials

    1. In the case exhibits, you’ll find:
    a) A guide to setting up a project on Google Firebase
    b) Notes on a few new programming concepts

Session 8: Setting up a Production Pipeline

Objective

Practice working fluency with 3rd party environments to deploy your application.

Class Preparation

In this class, we’ll have different ‘conference sessions’ for additional tools to help you go from design to code to release. Each session has some amount of preparation (so you’re able to make good use of the class time). Individually or as a team, please decide which session you’d like to attend and then see the links on your chosen session to prepare: Session Notes (Including Prep.).

Session A: Using an AI-Powered IDE with Github

Tech Note

Github and Cursor for MBA’s

While JSFiddle is excellent for working on small-ish bits of code, a lot of development happens as follows:
a) the team manages a  repository (Github is the most popular) where dev’s check out parts of the code
b) the dev’s use a purpose-built app to iteratively write, test, and debug their code : these types of apps are called ‘integrated development environments’ (IDE’s)

In this session, you’ll learn how to check your code in and out of Github as well as how to edit it with Cursor, the hot new AI-forward IDE as well as AWS Amplify for deploying and hosting your application.

While JSFiddle is excellent for working on small-ish bits of code, a lot of development happens as follows:
a) the team manages a code repository (Github is the most popular) where dev’s check out parts of the code
b) the dev’s use a purpose-built app to iteratively write, test, and debug their code : these types of apps are called ‘integrated development environments’ (IDE’s)

In this session, you’ll learn how to check your code in and out of Github as well as how to edit it with Cursor, the hot new AI-forward IDE.

Session B: Deploying Your Code via Replit (Codeless)

COMING SOON

Session 9: Project Convergence

Objective

Apply your understanding of user stories, HTML, CSS, and JS to develop a project.

Class Preparation

  1. Converge your Work
    As a team, integrate a working version of your code and be ready to discuss it (outside your team) across the four steps of:
    a) Focusing Design Intent
    Do all your substantial code executions tie back to a user story? Do those user stories have user-centric/behavioral definitions of done?
    b) Unpacking into Codeable Steps
    Can you explain in simple terms (ex: pseudocode) what your code is doing and why? While you don’t need to understand the term by term functioning of each line of code, you  should generally understand what each function is doing and *be able to* unpack and understand individual lines.
    c) Effectuating between Alternatives
    Which 3rd party piece parts have you incorporated vs. what did you decide to build from scratch. Why?
    note: Examples of 3rd party piece parts are pre-built view components (ex: Bootstrap, Tailwind), pre-built code (ex: Firebase lib’s), and API’s (ex: Firebase API).
    d) Iteratively Coding, Testing, and Debugging
    What’s it been like working through the code? Integrating it with the code of the rest of the team? What tools have worked well for you? Which haven’t?
  2. Read: The Importance of Code Reviews.
    What is a code review? How does it work? What is a pull request?
    Why might code reviews be important for a team?
    Does it slow things down?
    How does the practice relate to other things you’ve learned about team collaboration?

Notes for In-Class Code Review Breakout

In your ‘new dev’ role in the inter-team code review breakouts we’ll do, make sure you can answer the following questions in our debrief about your partner’s code:
1. What is this code supposed to do for the user? What’s its behavioral definition of done?
2. How does the current code do this, in terms of the MVC?
3. What third party components did you leverage and why?
4. How does that unpack into individual functions?

Session 10: Online Lab (Optional)

Preparation

Bring your questions to discuss with your classmates and we’ll meet at this Zoom above. This session is optional.

Session 11: Online Lab (Optional)

Preparation

Bring your questions to discuss with your classmates and we’ll meet at this Zoom above. This session is optional.

Session 12: Design to Code to (User) Test

Objective

Apply your understanding of user stories, HTML, CSS, and JS to develop an test interactive page prototype.

Preparation

  1. Prepare a usability test plan and be prepared to run it with a classmate (outside your team)
    1. You can find an example of such a test plan in the Software Design Template/Appendix 1
    2. As long as all your user stories have the subject testing prompts you see above (middle column), you’re mostly there
    3. Mainly, you’ll need to add a specific example and prompts to be sure you’re testing usability vs. motivation
      1. For example, in the item above, we hand the user a prop. (a certain product) and ask them to look that up VS. asking them what skin care products they might be looking for.

Session 13: Functional Test Automation

Objective

Achieve working fluency in testing web applications.

Preparation

  1. Automate Your ‘Happy Path’
    You’ll automate the core UX with a Selenium script that goes through a full add, modify, delete loop (and is repeatable/re-runnable).

Supporting Materials

COMING SOON.

Session 14

Objective

Achieve working fluency in web application development and portfolio development.

Assignment

  1. Prepare a Backlog of Changes and ‘Employee Onboarding’
    Your job here will be to, individually, pair up with someone outside your team and help them set up a working development environment. You should have a backlog of changes (at least one for each team member) and your definition of done is that your peer is able to commit a change to production.

Supporting Materials

  1. Tutorial on Creating a Software Development Portfolio Entry
    This tutorial has instructions and an example: Application Development Portfolio Entry.

Alumni Gallery

This is a partial list of the amazing projects students have done in class.

Brandefy: app for price and quality comparison of private label goods

Cerebro Medical: software-enabled transcription and data entry service for physicians

Dominion Granite: new take on pre-sales web UX for this company

EZ-Rentals: property management application for small-scale landlords

Food for Darden: lunch delivery for Darden MBA students (on campus)

HomeSlice: new financial product (partial shares of residential property) and marketplace for the same

Itinerant: social networked-powered directory of options for a first date

Mentor Group: marketplace/enterprise solution for mentoring

Points from Away: aggregator for tracking and spending award points

RecruitRef 1: marketplace for college-bound athletes and recruiters

RecruitRef 2: alternate take on the above

Registrar: new ideas for the registrar system at UVA Darden

StatXP: aggregation and customization of video game related news and tips

Yeoman: application for managing residential real estate buying

Related Topics and Further Reading

Digital Design

COMING SOON

Version Control

WHAT? There wasn’t a great opportunity to practice this in the course (or space), but this is an important and relatively standard part of development among teams.
WHY? Both sharing code and organizing around small merges is important to collaboration among teams.
INTRO? These are a couple of pretty good starter pieces: Version Control 101 and The Role of Version Control.
LEARN? Codecademy has a free intro course: Learn Git.

Continuous Delivery & DevOps

WHAT? This is a set of practices and an organizational/cultural movement (respectively) to improve software delivery. As agile is to the relationship between product managers (or ‘businesspeople’) and developers, these practices are to testers (QA), ops (sysadmin) and the rest of the team.
WHY? Amazon famously delivers code every 11.6 seconds. Teams that can deliver faster tend to learn faster, hence innovating faster and competing better.
INTRO? Here are some quick thoughts: Why is velocity important?
LEARN? This Coursera course is a good introduction, and the coding examples continue with the HinH sample code you’ve seen in the cases: Continuous Delivery & DevOps.

Classes and Object-Oriented Programming

WHAT? This is a key component of object-oriented programming, which is a feature of several major languages and approaches to programming.
WHY? Long story but some like this for functional decomposition. Is it as great as people thought it would be? Some might say no.
INTRO? Here’s kind of a fun and reasonable intro: How to explain object-oriented programming concepts to a 6-year-old.
LEARN? There’s a Codecademy module that’s based on Javascript: Introduction to Objects.

Single Page Apps via Angular & React

WHAT? Per Wikipedia- ‘A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server’ Angular (maintained in large part by Google) and React (maintained in large part by Facebook) are Javascript-based application frameworks for building such apps.
WHY? These are a particularly good fit for certain experiences (particularly) on mobile, like Facebook or Instagram.
INTRO? The Wikipedia pages are pretty good: Single-Page App, Angular, and React.
LEARN? There are Codecademy courses on both: React and Angular