CMPS 183 Winter 2015

General Information

• Time and location: TTh 8-9:45, Thimann 001
• Instructor: Luca de Alfaro (luca@ucsc.edu, please include "CMPS 183" in the email subject line)
• Instructor office hours: Mondays 1:30-2:30pm or by appointment.
• TA: Rakshit Agrawal (ragrawa1@ucsc.edu) (note the number "1", not "l", at the end)
• TA office hours:
  • Tuesday 5-6:45 in Jack Baskin Engineering Rm 312 C/D
  • Friday 9-10:45 in E2 Rm 480
  • Review sessions: Monday 3:30-4:40 Social Sciences 2, 071
  • Discussion group: Piazza discussion group (please sign up here)
  • Hangouts on air: You can find my lecture videos on my Google+ UCSC Feed. If you follow me there, you should also be able to watch classes in near real-time (we measured the delay to be about 40 seconds). We also enable Q&A from Hangouts, but note that we might miss questions as the instructor will not be watching the hangout while teaching.

This class provides an introduction to the design and implementation of interactive, dynamic web sites. The class will be based on web2py, a Python-based framework for the rapid implementation and deployment of web sites (read why web2py was chosen). The class grade will be determined 50% by the homework assignments, and 50% by the final project. See the syllabus below for a more detailed topic list.

Project Reviews

• Tuesday slots with instructor
• Thursday slots with instructor
• Friday slots with TA

You have to do at least one review for your project during the class. You can of course do reviews more often, if you like.

Requirements

Textbook:The web2py book. You can also download it in pdf if you wish to read it offline.

Development environment: To develop web applications, you need one of these two:

• A laptop / desktop on which you can install web2py. Any OS is fine: Linux, Mac OS X, or Windows.
  • Alternatively, you can run web2py online at https://www.pythonanywhere.com/try-web2py/. This will enable you to develop the code, and likely do anything you need for the class.

Of course, running web2py on your laptop gives you more choice of editors, packages installed, etc, but running web2py on pythonanywhere should work fine.

The project will need to be hosted online somewhere, and pythonanywhere is one of the many places where this can be done.

Announcements: All announcements will be posted to the Piazza discussion group. It is your responsibility to keep up with announcements and deadlines.

Attendance: I will not check individual attendance to lectures: in practice, it is your choice whether to attend or not. However, I will often comment on assignments, project requirements, and similar in class. It is your responsibility to keep up with this information; it is not my responsibility to send announcements that cover in detail what I say in class.

Homework Assignments and Project Delivery Dates

• Homework 1, due Thursday January 22, end of day.
• Homework 2, due Wednesday January 28, end of day.
• Homework 3, due Tuesday February 3, end of day.
• Homework 4, due Thursday February 12, end of day.

Project

• Please discuss project ideas in this spreadsheet, and form groups according to topics and interest. You need to be logged in via your @ucsc.edu account to edit this document.
• Here are some suggestions on what constitutes a good project, and some suggestions.

Lectures

• Lecture 1: Introduction. Slides, code. The code is a web2py packaged app.
• Lecture 2: Introduction to Python.
• Lecture 3: Building a bulletin board in web2py, part 1.
• Lecture 4: Building a bulletin board in web2py, part 2.
• Lecture 5: git, and intro to databases part 1.
• Lecture 6: more on databases.
• Lecture 7: introduction to HTML, more on SQLFORM.grid
• Lecture 8: more on forms, validation, form processing.
• Lecture 9: forms, input, input processing.
• Lecture 10: forms, input, input processing
• Lecture 11: Javascript, beginning of jQuery
• Lecture 12: AJAX
• Lecture 13: Patrick Rogers on UX

Tentative plan (it always changes):

• Lecture 1: Introduction to the class.
• Lecture 2: Introduction to Python.
• Lecture 3: Introduction to web2py. Simple HTTP concepts: GET, POST, HTTP requests, cookies.
• Lecture 4: Introduction to web2py. Basic HTML.
• Lecture 5: Introduction to git. People present project ideas.
• Lecture 6: Databases.
• Lecture 7: Databases in web2py. Transactions.
• Lecture 8: Forms, widgets.
• Lecture 9: Form validation. Forms for output, SQLFORM.grid
• Lecture 10: More on form processing.
• Lecture 11: Javascript.
• Lecture 12: Jquery, Jquery UI.
• Lecture 13: Principles of design (guest lecture by Patrick Rogers)
• Lecture 14: AJAX.
• Lecture 15: AJAX.
• Lecture 16: Simple one-page apps.
• Lecture 17: Embedding your web app in a phone (Android, iOS) app.
• Lecture 18: Cloud primitives, hosting.
• Lecture 19: We hit the beach. Just kidding. We will find something to do!
• Lecture 20: Some final project presentations.
• Final exam slot and other times: Final project presentations.

Syllabus

• Introduction to the class. Building a very simple web2py application.
• A (very) quick introduction to Python.
• Introduction to web2py.
• Simple HTTP concepts: GET, POST, HTTP requests, REST.
• Building a simple application.
• Simple HTML elements.
• Model - view - controller layout. Views in web2py.
• A quick introduction to git.
• Databases, and databases in web2py. Transactions.
• Cookies, sessions, logging in and out.
• Input: forms, validators.
• Output: widgets, SQLFORM.grid, forms for output
• Javascript.
• Jquery and JqueryUI
• AJAX
• Single-page apps, ractive.js
• Advanced DB issues: replication, noSQL, ...
• Cloud platform primitives on EC2 and Google Cloud
• Scalability
• Security

Homework Assignments

• The homework assignments are individual.
• Submissions will useCrowdGrader: the solution you submit will be peer-evaluated by other students in the class. You will be asked to grade 5-6 solutions by other students, and your homework grade will depend both on the quality of your submission, and on the accuracy of your grades and the quality of your reviews. The benefits of this is that you will get to see several ways of solving each homework assignment. You can learn more about CrowdGrader here.
• The grades will be re-normalized by the instructor for each assignment.
• Homework submissions should be anonymous: do not write your name in the code you submit.
• The instructor may discuss and display in class code that you submit as homework.

Project Requirements

You can work in groups for the project. The project consists in developing a web application in web2py, and deploy it so that others can use it.

Requirements

• Done in web2py. Very few exceptions might be granted.
• Teams of 1-4.
• All code versioned in git.
• Project deployed on a publicly accessible server.
• Some non-trivial use of a database.
• Some personalization / user accounts / personalized content / user interaction.
• Good, natural to use UI.

Groups and topic. You should start early on in the class to decide with whom to collaborate for the project. Groups of size 1-3 are recommended. Please also start thinking about a topic.

Plagiarism policy. The project overall needs to be original work. You can choose a non-original topic (e.g., let's re-implement Twitter or Instagram), but the bulk of the organization and contribution must be yours. You are more than welcome, and in fact encouraged, to re-use existing pieces of code any time you can: in particular, copying code from Stack Overflow, and from blogs, is allowed. For all the code you copy, you should abide to the license terms of the code, and you should add a clear comment into your source code, stating the source of the code (including the URL). When you re-use code, you should pay attention to integrating the code well in your application. Copy just what you need, do not add portions of code that are irrelevant to the task at hand.

Project submissions and evaluation. You will need to submit the project a total of 4 times. All submissions will use CrowdGrader (it can handle group assignments). The deadlines will be posted shortly.

• Submission 1. You will need to submit a project proposal (pdf, or a pointer to an online document such as a Google document with read access). The project proposal should identify the problem you want to solve, and provide a general text overview of the site you plan to build. This proposal will be graded by the instructor (you will be able to look at other proposals, if you wish, but the grade computed by CrowdGrader is not used). The instructor will approve it, or send it back to you with feedback. No other grade will be given.
• Submission 2. You should submit a preliminary implementation. The models (database layout) and some initial pages will be there. This submission will be peer-evaluated as well as instructor evaluated.
• Submission 3. You should submit a version of the whole application. The application should be mostly functional, even though rough edges may still be present. This submission will be peer-evaluated, and you should use all the feedback you get in order to perfect the project for the final submission.
• Submission 4. This is the final project submission, due on the day of the final. Submit as polished and as nice a project as you can.

Project presentations. The last day of class, and the day of the final, are dedicated to project presentations. You will be able to choose the day for your presentation.

Project evaluation. The project evaluation is a holistic process, that takes into account factors such as: how ambitious the project is, how clean the code is, how polished the UI is, how good the database model is, how well the project progressed from initial proposal to final project, how much was the feedback received in prior project submissions is addressed in following submissions. Extra credit is given for projects that solve real problems, and that are hosted and made accessible for all to use.

Coding

You should always use a version control system for all your code. In particular, we strongly recommend git.

Clean, well-commented, succinct code is the best code. The instructor will look at the code you submit, in particular, the project code. If the code is not understandable, points may be taken off.

Resources

Here are some links that you might find useful.

• Web2py, and web2py documentation. We will be using the web2py book (html, pdf) as our textbook.
• Python.
• Amazon Web Services and Amazon EC2.
• Rackspace.
• Google Appengine.
• Jquery and JqueryUI.
• JSON.
• Javascript.
• HTML (tutorial, validator) and CSS (tutorial).
• HTTP.
• Database engines: MySql, Postgres, and SQLite.
• Apache HTTP server.
• Git and GitHub. Use this .gitignore file for web2py projects in order to avoid entering too many files in version control. Here are somebasic instructions for working with git; there are more tutorials available on the web.
• Logging in web2py.