UMass Lowell Dept. of Computer Science
COMP 4620 — GUI Programming II
Spring 2016 Semester, Section 201
Prof. Jesse M. Heines
Notes for Class No. 4
Discussion of Project Planning Statuses, Creating an Express Project, and Using Word Like a CS Major
Thursday, January 28, 2016
A video of this class is (or will be) posted at:
http://echo360.uml.edu/heines2016/comp4620-201.html
Handouts and Materials
- Assignment No. 1
- Strong writing skills essential for success, even in IT (PDF) by Paula Jacobs
- published July 6, 1998 and still as relevant today as it was then
- Common Writing Mistakes and Their Corrections (HTML) by Jesse Heines
- Senior Thesis Pet Peeves (PDF) by Kevin Karplus (“Gas Station Without Pumps”)
- Ten Words You Need to Stop Misspelling (PDF) by “The Oatmeal”
- Proofreaders’ Marks (PDF)
Handouts 2-6 in a single document (PDF)
Openings / Announcements / Reminders
Class Notes
Related reading for this class: Writing Handouts and GetMEAN: Chap. 3
Project Titles and Teams
as of January 27, 2016, at 2:00 PM
- Dylan Wetherald, Martin Rudzki, and Michael Bejaniance: Sudoku Zen Garden (Sudoku puzzles)
- Tyler Bainbridge, James Erardi, Alex Cushing, and Alex Nevers: Prism (art portfolios)
- Thiago Goncalves and Cody Mulkern: Webcars (car ads)
- Ramon Meza, Dominic Cabral, and Glen Anderson: 5-Track Portastudio (audio recorder and mixer)
- Cullin Lam, Andry Lora, and Son Nguyen: ClockWork (time management social application)
- Alex Li, Evan O’Leary, Patrick Quaratiello, and Peter Welby: HuddleHere (team meeting organizer)
- Santiago Paredes, Justin Nguyen, Bun Soth, and Tak Lo: Onsemble (musicians’ social network)
- Rajia Abdelaziz, Jeremy Daigneau, Madhumathi Prakash, and Alex Chen: invisaWear Technologies (website for the company)
This is only 27 of the 37 students enrolled.
On learning the MEAN stack
Question from a student:
Is it better to follow the book and build Holmes’s Loc8r application or to try to do things on your own?
My OPINION: While everyone has their own learning style and tricks (I’ll cover some of mine as we go along), I believe that in the interest of time it’s best to follow the book and build Holmes’s application
Relationship to Angular2 syntax
- templating
- use of {{ }} syntax
- component architecture, requiring numerous “includes,” which are
require statements in NodeJS
The value of “upfront investment”
Getting Started with MEAN — Textbook Ch. 3 (continued)
Understanding Jade (p. 60)
- Jade does not contain any HTML tags
- instead, it uses “tag names, indentation, and a CSS-inspired reference method”
- if a tag name is omitted, Jade assumes you want a DIV tag
- “Jade templates must be indented using spaces, not tabs!”
Example Jade code
#banner.page-header
h1 My page
p.lead Welcome to my page
Resultant HTML output
<div id="banner" class="page-header">
<h1>My page</h1>
<p class="lead">Welcome to my page</p>
</div>
Step 7: Testing the project (p. 61)
- make sure you are in the topmost directory of your application
- open your browser and enter
localhost:3000 in the address bar
Step 8: Using nodemon (p. 64)
- then type
nodemon in the topmost directory of your application
- open your browser and enter
localhost:3000 in the address bar as before
- the only difference is that when you change a file, Node will restart automagically
JMH Learning Tricks
- Add your name to the
views/index.jade file
- Add a timestamp as a page footer
- note that Jade comments can only be written in // style
Step 9: Changing the folder structure for Model-View-Controller (MVC) architecture (p. 65)
- create a new folder named
app_server
- create two subfolders of
app_server named models and controllers
- move the
views and routes folders from the root of the application to the app_server folder
Step 10: Using the new views and routes folders (p. 66)
- edit
app.js in the top level directory
- change:
app.set('views', path.join(__dirname, 'views'));
- to:
app.set('views', path.join(__dirname, 'app_server', 'views'));
- also in
app.js
- change:
var routes = require('./routes/index');
var users = require('./routes/users');
- to:
var routes = require('./app_server/routes/index');
var users = require('./app_server/routes/users');
Step 11: Spiltting controllers from routes (p. 67)
- Listing 3.2 (p. 67): Taking the controller out of the route: step 1
Step 12: Moving the controller of of the routes file (p. 69)
- approach:
- use the NodeJS
module.exports method to expose parts of your code to other files
- then
require the file containing the exports method in other files
- create a new file called
main.js in app_server/controllers
- then
require file main.js in file app_server/routes/index.js
- this results in the structure shown in Figure 3.7 on p. 70
Writing Expectations — Using Word Like a CS Major
page settings
- title page
- headers and footers
- automatic generation of tables of contents
using styles
paragraph settings
- lines per inch
- indentation
- space after
- justification
- borders and shading
- widow line control
- “keep line with next”
- widow heads
using lists
- bulleted
- numbered
- outline numbered
proper use of fonts
proper use of spaces and tabs
- types of tabs
- dots and lines
- adjusting default settings
inserting and manipulating graphics
- working with screen captures
- labeling tables and figures
inserting and numbering code
citing references
