UMass Lowell Dept. of Computer Science
COMP 4620 — GUI Programming II
Spring 2016 Semester, Section 201
Prof. Jesse M. Heines
Notes for Class No. 1
Course Orientation and Introduction to the Semester Project
Tuesday, January 19, 2016
A video of this class is (or will be) posted at:
http://echo360.uml.edu/heines2016/comp4620-201.html
Handouts and Materials
Openings / Announcements / Reminders
Please check your registration on the class discussion forum at https://piazza.com/uml/spring2016/comp4620
- I have added your email addresses from last semester, but please check these to ensure that I didn’t make any mistakes
- I have already posted a question entitled “Project Ideas Forum” to which you need to respond
Class Notes
Related reading for this class: Syllabus and GetMEAN: Chap. 1-2
Assessing Your Education
Estimated Annual Tuition and Fees (in U.S. dollars) for the 2014-2015 Academic Year
source: http://www.uml.edu/thesolutioncenter/bill/tuition-fees/Undergraduate/default.aspx
| Item on
Your Bill |
In-State |
Out-of-
State |
Proximity
Program |
| Tuition |
$ 1,454 |
$ 8,567 |
$ 2,181 |
| Operating Fee |
10,798 |
19,383 |
19,383 |
| Campus Technology Fee |
250 |
250 |
250 |
| Student Activity Fee |
925 |
925 |
925 |
| Total Tuition and Fees |
$ 13,427 |
$ 29,125 |
$ 22,739 |
- full-time status = 15 credits per semester = 30 credits per year
- 1 credit = 50 minutes of class time
- classes are typically 3 credits, which means that the average student takes 10 courses per year
- there are typically 26 or 27 classes per semester, but at least one of those is typically used for an exam, so let’s call it 26
- 26 classes * 50 minutes / class * 10 courses = 13,000 minutes in class = 216.67 hours in class
- this translates to:
| Class Costs |
In-State |
Out-of-
State |
Proximity
Program |
| Cost Per Hour |
$ 61.97 |
$ 134.42 |
$ 104.95 |
| Cost Per Class |
51.64 |
112.02 |
87.46 |
Which brings us to the bottom line question: Are you using your class time well?
Administrative Info
Administrative issues are essentially the same as last semester, but there are a few differences
Please read the course syllabus carefully
Look over the course website at
http://teaching.cs.uml.edu/~heines/91.462/91.462-2015-16s/
- as always, please report to me any aspects of the course website that do not work on a specific browser
- the course website provides an index with links to:
- as with the course syllabus, the beginning of the semester is a good time to refamiliarize yourself with the reference links and websites
mentioned there
The major grading emphasis will remain on the assignments, as I always believe that this is where
the real learning occurs
- assignments and projects will account for 100% of your final grade
As before, attendance is critical
- we do a lot of spontaneous things in class
- I never know exactly how these things are going to turn out
- class discussions are vital to understanding the concepts and exploring
their implications
- I still expect everyone to participate in discussions
- “there are no stupid questions, only stupid answers”
- as in 91.461, attendance will again be computed as a percentage and counted as a regular assignment
grade
Contact me for help via e-mail or phone or by stopping in
- again I have given you my home phone number
- you may call any day, including Saturdays and Sundays
- please do not call after 10:00 PM
- remember that procrastination is a huge problem
- my office hours are posted on my calendar at http://teaching.cs.uml.edu/calendar
- you are welcome to try to see me any time I am in my office, but please
do not try to see me during the half hour just before class
- when e-mailing me:
- remember that I use extensive filters on my incoming e-mail to auto-delete
junk mail and pornography
- therefore, your e-mail must have a proper subject header or it
may get deleted before I even see it
- be sure to put a subject header on your e-mail
- be sure to start that subject header with our course number, COMP 4620
Please go to the Class Roster and verify that the e-mail address I have for you is still correct
- all grade reports and most important announcements will be sent to the email addresses shown there
- how to auto-forward your CS e-mail to another e-mail account
- create a file in your CS root directory named
.forward
- the content of that file should be:
\your-CS-username, full-e-mail-address-to-forward-to
- the
\your-CS-username
- note that the two parts are separated by a comma
- make sure that the forwarded-to e-mail address is correct or your
e-mail could go into an infinite loop!
- you absolutely must test your setup by sending an
e-mail message to yourself and making sure that it goes where you
expect it to
- example:
~
> cat > .forward
\heines, heinesj@comcast.net
^D this is Ctrl-D
~ >
Course / Teaching Philosophy (from my My Favorite Quotes page)
- “The mind is not a vessel to be filled, but a fire to be kindled.”
- — Plutarch, 46–120, Greek philosopher
- “I never teach my pupils; I only attempt to provide the conditions in which they can learn.”
- — Albert Einstein, 1879-1955, Nobel Prize-Winning Physicist
- “Science is more than a study of molecules and calculations; it is the love of knowledge and the continued search for the truth.”
- — Kenneth H. Olsen, 1926-2011, Founder, Digital Equipment Corporation
- “Those things for which [a college demands] the most money [from a student] are never the things which the student most wants. Tuition, for instance, is an important item in the term bill, while for the far more valuable education which he gets by associating with the most cultivated of his contemporaries, no charge is made.”
- — Henry David Thoreau, 1817–1862, writing in Walden (published in 1854)
What is the common theme in these quotes?
Significant Course Dates
UMass Lowell semesters are only 14 weeks long (not counting Spring Break)
- there are only 27 classes in the entire semester
- the last day of this course is semester is Thursday, April 28th
The list of assignments is already posted (more on this below)
Introduction to the Semester Project and Assignment No. 1
All work this semester will be done in teams
- there are 41 students registered for this course
- this is 25% more than I have ever had before
- all projects will be done in 3- and 4-person teams
- if you need an exception for some reason, you will need to discuss this with me
- I do not recommend working on a team with a close friend
- I will not be able to give everyone and every project team as much individual attention as I would like
I will be doing all the grading in this myself
- this is a very specialized type of course, and no graduate teaching assistant can grade it
You therefore need to become an autodidact
Why is becoming an autodidact particularly important to you as a computer scientist?
Project themes may be of your own choosing, but they must obviously focus on GUI programming
To give you ideas and to show you what’s expected, the latter part of this class will be devoted to reviewing
proposals from the 2008, 2011, 2013, 2014, and 2015 semesters with my comments
I strongly recommend that you keep an open mind on who you will ask to be your partners on your project
- you will be working with these people throughout the semester
- best friends sometimes don’t make the best partners
- the most important characteristics of business partners is that they
- have a real, personal interest in the project
- are really willing to work
- are dependable when it comes to timeliness and responsibilities
- are reliable communicators
Projects will have certain restrictions
- for example, a major problem is backend development
- I will address this shortly when I present “the second part of this course”
- teams must not spend tons of time implementing, for example, a login routine
- instead, just select different users from a dropdown menu, for example
- the big enemy that you’re going to face this semester is time
What you are to do for our next class: Thursday,
January 21
(1) Read the course syllabus
(2) Complete your registration for this course by filling out the form at https://docs.google.com/forms/d/166cx_uRhYJ24qoI-zMrs1dpWVyOw5iloQ-ojjF41lv4/viewform
(3) Review Assignment No. 1
(4) Review at least a few of the proposals from the 2008, 2011, 2013, 2014, and 2015 semesters
(5) Respond to the Project Ideas Forum question that I posted on Piazza with your project ideas so that others can know what you’re thinking and appropriate project teams can be built.
(6) Meet with potential project partners and discuss ideas with them in preparation for writing your project proposal, which is due Thursday, February 4, 2016
The Second Part of This Course — Learning the MEAN Stack
Reading Assignment: Chapters 1 and 2
Why learn the MEAN stack?
- there are numerous JavaScript libraries “out there”
- they all follow similar principles
- learning any of will solidify your knowledge of JavaScript and the relationship between front-end and back-end development
- every part of the MEAN stack uses JavaScript
- the MEAN stack — MongoDB, Express, Angular, and Node.js — is popular and mature
- in addition, an excellent book is available — and required for this semester
- introduces Bootstrap, GitHub, and the Heroku server, too
- the book not only presents the technology, but also presents a professional approach to full-stack development
- the software is easy to deploy on all platforms
To fulfill the UMass Lowell slogan to make you “work ready,” we need to look at full-stack development
- “the paths of front-end and back-end developers are merging" (p. 6)
- the average time that young people spend at a single company these days is 4.6 years (2014 data)
- the more you know,
- the better you will be as a team member
- the more valuable you are to your company or to yourself (if you’re a freelancer)
- the more flexibility you have in job selection (geographic as well as company)
How the pieces fit together
- Node.js is a platform
- it is “fast, efficient, and scalable” (p. 8)
- it is a single-threaded application (pp. 8-10)
- see the explanation of these characteristics in the text
- it is easy to install additional modules through npm (the Node Package Manager, p. 11)
- Express is a web framework
- it provides the web server characteristics, most importantly the routing of URLs to responses (p. 12)
- it also provides templating engines that make it straightforward to generate consistently-styled web pages
- it also provides session support to circumvent HTTP’s stateless protocol characteristic
- MongoDB is a database
- it is a document rather than a relational database
- “The concept of rows still exists, but columns are removed from the picture. Rather than a column defining what should be in a row, each row is a document, and this document both defines and holds the data itself.” (p. 13)
- documents are stored as BSON, which is Binary JSON
- but when we interact with them, we’ll be working with human-readable JSON
- data modeling is done with Mongoose, which allows the definition of a schema
- a schema defines what data can be in a document and what data must be in a document (p. 15)
- we will see that the format of a schema is very similar to what we’ve seen in jQuery validation
- as a matter of fact, “Mongoose enables you to add data validation at the schema level, making sure that you only allow valid data to be saved in the database.” (p. 15)
- AngularJS is a front-end framework
- it provides the ability to “work with data directly in the front end.” (p. 16)
- “AngularJS is what is known as an opinionated framework. This means that it forces its opinion on you as to how it needs to be used.” (p. 16)
- one of its main features is that it provides two-way data binding
- “... the view is ‘live.’ The view is bound to the model, so if the model changes, the view changes instantly. [Conversely], if the view changes, the model changes [appropriately].” (p. 17)
- in this book, AngularJS is used to simplify the implementation of single-page applications (SPAs)
“Supporting Cast” (p. 19)
- Twitter Bootstrap: “a front-end framework that provides a wealth of help for creating a great user interface. Among its features, Bootstrap provides a responsive grid system, default styles for many interface components, and the ability to change the visual appearance with themes.” (p. 19)
- Git: “a distributed revision control and source code management system.” (p. 20)
- “we’ll use Git as the method for deploying our application to a live web server” (p. 20)
- this process is similar to our use of gh-pages last semester
- Heroku: a free web server that supports Node.js applications
- “applications on Heroku are essentially Git repositories” (p. 21)
- basic deployment command:
$ git push heroku master
Using the MEAN stack for your projects
I am *not* going to insist that all projects be implemented using the MEAN stack
- I want you to do a project that you want to do
- I want you to use appropriate tools for the job
- I want you to produce a product that you will be proud to show when you go for job interviews
However, I *encourage* you to use the MEAN stack for your projects because it provides a comprehensive framework
- it provides all the tools you will need and the flexibility to do whatever you want
- the textbook will be very helpful
I plan to make some small assignments that will require you to do things that are discussed in the text
- therefore, you should get Node.js and its friends up and running as soon as possible
- download Node.js version 4.2.4 from https://nodejs.org/en/
- that will also install
npm, which you will use to install other required packages
- MongoDB version 3.2 is at https://www.mongodb.org/
