CMSI 370 Interaction Design, Fall 2017
This assignment turns your attention to some dynamic user interface code. Resources to help you with this include many of the links listed on the course website, assorted samples from the bazaar repository, and the starter files that are included with your GitHub Classroom repositories for this assignment, once you have set yourself up.
For this assignment, you will want to be acquainted with one or more of the web development resources listed in the course website, particularly the Mozilla Developer Network site, the specifications that can be found with the W3C, the jQuery website, and Bootstrap documentation.
Textbook reading is centered on the menus, forms, and dialogs interaction style, which would be Shneiderman/Plaisant Chapter 6.
The JavaScript textbook will be of help, particularly Chapter 6, Section 7.5, and Sections 8.2.3, 8.3, 8.4.1, 8.5, and 8.7. For the best exposure, read Chapters 6, 7, and 8 in full.
The sample code that comes with your GitHub Classroom repository is fully configured for code style review (ESLint), unit tests (Jasmine and Karma), and code coverage (Istanbul). These will be walked through in class, and will be run automatically whenever you push to GitHub. If you want to run these on your own machine, you will need Node.js.
In order to connect your repository to our automated code review and feedback system, once you are up and running please send your repository’s URL to Thomas O’Brien. Create a GitHub issue on your repository and mention him in it (@obrienthomas13). Once he has you hooked up, the system will provide feedback on code formatting and quality whenever you commit a new version to GitHub. Points will be deducted if issues here linger in the final submission.
The title pretty much says it: put together a front end for a pre-existing web service API. Many such APIs are freely and publicly available, although many do require some degree of signup. The Programmable Web blog, especially its API Directory, is a good starting point for your “API shopping.” For this assignment, you are to:
- Choose a web service API (selected examples have been and will be shown in class)
- Design and implement a simple front end that invokes the API’s services
Specific functionality will vary depending on the API, of course, but for proper scale, we are looking for the implementation of at least three (3) non-trivial web service functions.
A “home-grown” option is available in the form of the LMU Diabolical web service that was developed by the CMSI 486 class of fall, 2012, with support from a Google education grant. The service and some documentation are located at http://lmu-diabolical.appspot.com.
If you choose this as your back-end service, your front end should implement the following:
- Display a list of current characters
- Spawn/create a new character
- View a character
- Modify a character
- Delete a character (make sure the user does not delete one by accident)
For other web service APIs, it is highly recommended that you check with me first on the three or more operations for which you plan to supply a front end. Better safe than sorry.
Finally, we do want a good user interface, but don’t worry about fancy graphics—we know that those require a different skill set. Instead, look to make good choices in user interface elements, layout, and behaviors. Some visuals are sufficiently easy with Bootstrap and maybe some custom CSS; you are not obligated to go beyond that.
Commit your front end files such that your repository becomes the root location of a web server. Place unit tests and fixtures in the test subdirectory, as seen in the supplied starter code. To evaluate your work, we will run a simple HTTP server from a local copy of that directory and use your application from a web browser. As such, you will need to set things up so that your selected web service API can be invoked under that configuration—for security reasons, such setup might not be trivial, but by and large it is doable.
Programming assignments are scored according to outcomes 3a, 3b, and 4a to 4f in the syllabus. For this particular assignment, graded categories are as follows:
| Category | Points | Outcomes |
|---|---|---|
| Web Service Functions (at least 3, points mostly evenly divided) | 50 | 3a, 3b, 4a, 4b, 4d |
| Web App Layout | 30 | 3a, 3b, 4a, 4b, 4d |
| Test Suite and Coverage | 20 | 4a |
| Linting | deduction only | 4c |
| Version Control | deduction only | 4e |
| Punctuality | deduction only | 4f |
| Total | 100 |
The last three graded categories are “deduction only,” meaning that you will only get points taken off if there are significant issues with those categories. Such issues include but are not limited to: lingering linting errors as of the final commit (4c), insufficiently granular or unmessaged commits (4e), and late commits (4f).