Table of Contents
This is a case study for use in a class like Software Development.
Please note: This case builds on a prior case called ‘Making Stuff Happen with Javascript‘ and assumes familiarity with its contents.
Prototyping is a Job
Frangelico DeWitt is working with his team to develop a new suite of software for their employer HVAC in a Hurry (a heating and air conditioning service business). Their current focus is on a web application that helps field technicians find availability and pricing for replacement parts.
Frangelico has been prototyping the front end with HTML, CSS, and Javascript and making pretty good progress. Right now, the problem he needs to solve is that it’s really tedious to add new parts into the prototype- he has to manually create each div and he’s finding that it takes forever, it’s error prone, and for reasons related to demos and user testing he’s having to do it a lot.
He’s starting from a working prototype on JS fiddle and would like to automatically pull a list of parts from their test ‘database’ on Google Sheets (HVAC in a Hurry Parts Database).
Automating Your Gruntwork
There’s a bunch of working sample code online to pull data from Google Sheets and do stuff with it. He’s made a start with these JS Fiddles:
Part 1: Just Getting the Parts from Google Sheets
Part 2: Getting the Parts Integrated with the Rest of the Prototype
Please note: I found an interaction between this code, JSFiddle, Chrome, and the ad/setup controllers on JSFiddle. If you experience slow run times, please use these alternative versions of the sample code on Codepen (an alternative to JSFiddle):
Alt/Part 1: Just Getting the Parts from Google Sheets
Alt/Part 2: Getting the Parts Integrated with the Rest of the Prototype
There’s some code in the sample code for dealing with the JSON feed- don’t worry about that for now. Can you follow what the loadParts and drawDiv functions are doing?
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?
What else do you think is worth trying? Try it out!
Exhibit A: User Stories
These stories are the primary focal point for the team: they describe both what the team has learned about the user and what they want to do for them. As you get into the details, it’s key not to lose sight of your design intent and what you’ve decided is important to the user.
Epic User Story
‘As Ted the HVAC technician, I want to identify a part that needs replacing so I can decide my next steps.’
Storyboard
Based on their observations in the field, Frangelico’s team thought through the user experience of the epic with the following storyboard: 
Child Stories
User Story |
Test Cases |
| ‘I know the part number and I want to find it on the system so I can figure out next steps on the repair.’ | Make sure it’s possible to search by part number. Make sure descriptive info. appears as the search narrows (photo?) to help avoid error. |
| ‘I don’t know the part number and I want to try to identify it online so I can move the job forward.’ | Make sure it’s possible to search by make/model of units Make sure it’s possible to search by type |
| ‘I don’t know the part number and I can’t determine it and I want help so I can move the job forward.’ | Make sure an estimate of the turnaround time for an expert to review is available |
| ‘I want to see the cost of the part and time to receive it so I decide on next steps and get agreement from the customer.’ | Make sure it’s possible to dispatch a request by email to the customer in case they order their own parts and/or carry their own inventory of spares. NOTE: How would the customer respond so we can help structure the next steps as we would otherwise? |
| Make sure it’s possible to indicate priority Make sure cost associated with priority delivery are available |
|
| ‘I want to order the part so that we can move forward with the repair.’ |
Exhibit B: Working with the Sample Code on JS Fiddle
The basic idea with JS Fiddle is that you can quickly write and test your code in a simplified environment. When you arrive at the sample JS Fiddle, you can freely edit it.
If you want to see your changes in the ‘Results’ pane, you’ll need to click the ‘Run’ button at the top.
If you want to save your version, you’ll need to have an account on JS Fiddle and click ‘Save/Update’.
Exhibit B’: Reminder on Finding Console Output in JSFiddle
The ‘console’ is basically a place you can see statements that Javascript sends there, which, as I mentioned, is a very common thing for JS coders to do. Recently, JSFiddle made a change where they implement the console inside the Fiddle itself. I prefer the native Chrome Console, and that’s what the balance of this case (and related cases) shows. However, this is not currently the default in JSFiddle. Once you open the sample code in JSFiddle, you’ll need to:
1: Click ‘Settings’ in the upper right
2: Disable the option ‘Console in the editor’
From there, to see the console in Chrome just right click within the browser and click ‘Inspect’. Now in the top of menu of the frame that appears, click ‘Console’. You’re there. For more, see this tutorial: The Console in Chrome.
Exhibit C: Coding with Javascript
You may to refer back to some of the short references in ‘Making Stuff Happen with Javascript‘.
Exhibit D: For Loops and Arrays in Javascript
Two things you’ll see in the sample code are a new control statement, the For Loop, and lots of statements involving arrays, which are a way of storing a set of values in a variable.
For Loops in Javascript
In the sample code, we need to go through each of the rows in Frangelico’s parts spreadsheet, and we don’t know the number of rows in advance- or, rather, we don’t want to set that in advance since the idea is to be able to add rows at will and know that the code will pick them up and display them.
A good control statement for this is the For Loop, which is a control statement that lets you define a certain number of times you want a block of code to run.
In the snippet above, the number of iterations is controlled by whatever value you assign to ‘howmany’ (try playing with it!). Like many variables, the iteration variable (i in this case) starts at 0 and that’s why we tell the statement to run as long as the value of i is less than ‘howmany’. The statement ‘i++’ is just shorthand for saying ‘add 1 to the value of i’.
If you feel generally comfortable with this after playing with the sample code on JS Fiddle, I’d say dive into the case. However, if you’d like a more thorough introduction, see the W3 Schools Note on For Loops. And if that’s not enough, check out the Codecademy module on Javascript, and the section on For Loops.
Arrays in Javascript
We’ll also use arrays, which are a way of storing sets of values for later retrieval. The sample code has a function ‘readData’ that goes to the spreadsheet and reads in a row of values, then draws the applicable parts div. We need a place to put that row’s worth of data where we can then go retrieve it to put it in the div (with another function, ‘drawDiv’).
For this, arrays are a good choice. In the snippet below, you’ll see an empty array declared ‘lilarray’, a few values assigned to positions in the array (see the bracket [] notation), and then those same values ‘indexed’ by a console statement.
Likewise, if that’s enough for you, I’d dive into the case. However, if you’d like a more thorough introduction, see the W3 Schools Note on Arrays, or for a more extended introduction that same Codeacademy tutorial above.
Resources
- 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. - Just for Reference: Symbol Reference for Javascript
