Coding with GPT (Syllabus)

Views: 14,161

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: Software 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 Software 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 on WordPress.

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

Class Preparation

  1. Prepare the case: Prototyping with HTML & CSS
    a) Fork the starter code on JS Fiddle (see note below on how), then review and update the code relative to the following questions:
    b) Looking at the sample code on JS Fiddle, can you identify all the HTML tags (headings, div’s, etc.)?
    c) Can you explain their roles?
    d) How about their additional properties (like styling)?
    e) Suppose you wanted to remove the item that says ‘Orders (90 day): 87’. How would you do that?
    f) What about creating a list of parts that customers also ordered below it?
    g) What else do you think is worth trying? Try it out!Pro Tip: Doing Google searches like ‘create round border on a div’ is a great way to learn and get comfortable working through code. It what we all do!
  2. Read Solving Agile UX by Laura Klein
    A) Please make notes on the questions below, which we’ll discuss in our next synchronous session.
    B) What are the advantages of observing user behavior in small+frequent vs. large+infrequent batches?
    C) How is that ‘agile’?
    D) Laura mentions that a hypothesis-driven dev. process is one where the team asks “If we make this change, we predict it will have this effect. Now let’s test to see if we were right or wrong.” How has making a certain change changed user behavior in a project you’ve worked on? How did that whole process work?

Notes:
In class, we’ll step through the elements of the page and edit them based on ideas for moving it forward. Doing Google searches like ‘create round border on a div’ is a great way to learn and get comfortable working through implementations.

Supporting Materials

  1. Written Tutorial- HTML Introduction
    This is a good introduction. If you want something more guided to ease you into the concepts, see the next item.
  2. Online Course- Learn HTML
    I would stick to just the first module ‘HTML Elements and Structure’ and (unless you’re interested) skip the module on tables, ‘HTML Tables’. The idea here isn’t to make sure you understand every little detail, but to make sure you have enough of a foundation to ask the right questions and answer them yourself to the greatest extent possible.

Session 2: Making HTML Manageable with CSS

Objective

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

Case

A Four-Corner Design

Class Preparation

  1. 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.
  2. Find a Team
    [class-specific infrastructure like a Google Form for sign-up’s]

Session 3: Development-Ready Design

Objective

Achieve proficiency in moving from design to code

Class Preparation

  1. Read: How (and why) to write great User Stories
    a) What is a user story?
    b) Why are user stories important?
    c) How might you use them in the role of {PdM, designer, developer, analyst}?
    d) How do they relate to the solution you implement?
    e) How do you know when they’re done?
    f) How do you know if they’re working well for your team?
  2. Read: The Importance of Code Reviews
    a) What is a code review? How does it work? What is a PR?
    b) Why might code reviews be important for a team?
    c) Does it slow things down?
    d) How does the practice relate to other things you’ve learned about team collaboration?
  3. 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.com

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 Board.
  2. Writing User Stories
    User Story Tutorial.
    Additionally, here are a few videos from my Coursera course, ‘Agile Meets Design Thinking‘: 1) Preparing for Great User Stories 2) Writing Great User Stories 3) Adding Test Cases to User Stories.
  3. Creating Prototypes
    Prototyping Tutorial.
    Additionally, here are a few videos from my Coursera course ‘Running Design Sprints‘: 1) The Inexact Science of Interface Design 2) Usability with Donald Norman’s 7 Steps Model 3) The Importance of Comparables & Prototyping 4) Creating Interactive Prototypes in Balsamiq.

Session 4: Making Stuff Happen with Javascript

Objective

Achieve basic working proficiency with Javascript and JQuery.

Case

Making Stuff Happen with Javascript

Class Preparation

  1. Watch: MVC Tutorial
    What is the Model-View-Controller framework and how does it relate to the material in the case?
    What’s what?
  2. Prepare Case: Making Stuff Happen with Javascript
    A) Looking at the sample code, can you trace see what the code is doing?
    Do you understand what’s logging to console and why?
    B) Looking at the sample code, can you toggle (show/hide) the #search-controls div with JQuery?
  3. C) 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?
    D) 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

Notes:
In class, we’ll step through the JS code and discuss how to extend it.

Session 5: Debugging Javascript

Objective

Achieve basic working fluency with analytical debugging of Javascript.

Case

Debugging Javascript

Class Preparation

  1. Read: The first programming language you should learn is…
    Obviously, this is in the context of product dev. in general vs. analytics specifically, but why might Javascript be a good choice for the first programming language you learn?
    What’s the relationship between application dev. and analytics from your perspective?
  2. Prepare Case: Debugging Javascript
    A) Work through the objectives with the sample code on JS Fiddle.
    B) What line(s) of Javascript is the Console returning errors against, if any?
    What do you see there.
    Pro tip: Filter on ‘index’ to see just the content of the JS Fiddle
    What assumptions are baked into the code? Which ones might be incorrect?
    How might you use logging to Console to help you isolate the issue(s)?
    C) In class, we’ll 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.

Session 6: Design to Code I

Objective

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

Project Preparation

Based on your assigned stories, develop at least one static page (per team).

Class Preparation

  1. Read: 5 Good Reasons Why Designers Should Code
    If you’re acting in the role of designer, why might it be important to be able to code?
    Is it?
  2. Project: Prepare a Static Page Prototype in JS Fiddle
    Be sure to have ready:
    A) The specific user story or stories you’re working.
    Also, make sure you have a clear view of how you would test your implementation for usability.
    B) Optional but highly recommended: Your prototype or prototypes
    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.
    C) The URL of your JS Fiddle
    We’ll review your work in the session.

Session 7: Automating Your Gruntwork with Javascript

Objective

Achieve working fluency in controller/algorithim development.

Case

Automating Your Gruntwork with Javascript

Class Preparation

  1. Read: The Rise of Automation: Why Coding Is Becoming a Job for Everyone
    How will automation affect MBA jobs in 10 years? Is coding a job for everyone?
    Finally, why is the skill set of being able to find answers so much more important today?
  2. 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 AJAX 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

Notes:
In class, we’ll step through the JS code and discuss how to extend it.

Supporting Materials

  1. Just for Backup: Introduction to Javascript on Codecademy
    If you just feel overwhelmed by programming and Javascript, you can ease into the material very gently by starting here. I noticed that it didn’t allow me to skip items within a lesson but you can skip forward to different lessons.
  2. Just for Reference: Symbol Reference for Javascript

Session 8: Creating & Managing Users with Google Firebase

Objective

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

Case

Creating & Managing Users with Google Firebase

Class Preparation

1. Can you follow what the code is doing?
– There are a bunch of Firebase functions being called that aren’t listed in the Javascript. Where are those coming from?
– What’s an observer function and how is ‘firebase.auth().onAuthStateChanged’ an example of one? For background, see Exhibit: Key JS Concepts and Techniques.
– What are the various HTML forms and when, where do they appear?
– How does the data flow from the user login event to the actual log in event on Firebase? What’s happening?
– 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.
– 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.

2. 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.

3. 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!

Supporting Materials

In the case exhibits, you’ll find:

  1. A guide to setting up a project on Google Firebase
  2. Notes on a few new programming concepts

Session 9 (Optional): Building Less Software & Deploying Software on Platforms

Objective

Achieve working fluency with 3rd party environments (which much (most?)) software is built.

Case

Building Less Software

Project Preparation

Based on your wireframes and prototypes, select a WordPress theme that maps to your target navigation and feel, then integrate your pages and CSS onto this new platform.

Assignment

  1. What are the advantages of building on platforms vs. building from scratch? Here’s one perspective that has to do with the implementation itself: 8 Reasons This Salesforce Developer Loves Heroku. Here’s one that has more to do with UX and strategy: Building on Slack Saved Our Startup.
  2. Project: Implement Your Code on WordPress
    A) Team Leads Only
    Create a WP Engine Account per Guide Below
    Create WordPress Admin’s and SFTP Users for Your Team (per guide)
    B) Select and Implement a WordPress Theme
    Investigate the available WordPress themes and choose one you think is a good starting point. Don’t worry, they’re pretty easy to switch if you change your mind later. Which WordPress theme did you select? Why? How did you/will you validate it?
    C) Move your HTML and CSS onto Page items within WordPress and integrate them with the navigation (and any other relevant facilities). How did you port your current JS Fiddle prototype over to WordPress? What updates did you make to the HTML & CSS?
    D) We’ll step through both your design choices and how you moved your work over during our class session.

Notes:
We’ll step through both your design choices and how you moved your work over during our class session.

Supporting Materials

  1. Using WP Engine & WordPress
    See here for notes on getting started: Notes on Using WP Engine

Session 11: Your Interactive Page I

Objective

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

Project Preparation

Based on your assigned stories, develop at least one interactive page, applying Javascript (per team).

Assignment

  1. How and why is prototyping a good investment for teams? Here’s one perspective: How & Why Prototypes Are Mandatory for Good Design. What mistakes can prototype help you avoid? How do those relate to the interfaces on a team (designer to businessperson, businessperson to developer, designer to developer, etc.)?
  2. Select one or more stories to prototype.
  3. Make sure you have a clear idea of what you want from your prototypes.
  4. Render the page on JS Fiddle (or WordPress if you prefer).

Notes:
We’ll step through how your team has moved from design objective to code execution.

Session 12: Your Interactive Page II

Objective

Achieve working fluency in web application development.

Assignment

  1. Live Case: In pairs, you will step a peer through your design (user story and mockup) and your code.
  2. Work on your team project. What have you implemented against your stories?

Notes:
We’ll spend part of class time working with help available (lab) and part of the time reviewing your work.

Session 13: Project Demos

Objective

Achieve working fluency in web application development.

Assignment

  1. Work on your team project. What have you implemented against your stories?

Notes:
We’ll spend part of class time working with help available (lab) and part of the time reviewing your work.

Session 14: Portfolio Entries & Contest

Objective

Achieve working fluency in web application development and portfolio development.

Assignment

  1. Create a portfolio entry on Behance (like this: Zach’s Power) and be ready to share it in class. Make sure it has at least all the elements described in the tutorial below, including a video demo.

We’ll spend class reviewing your portfolio entries and work with a brief wrap-up at the end.

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