CMPS 183 Fall 2018

General Information

• Time and location: MWF 2:40-3:45, Oakes Acad 105
• Instructor: Luca de Alfaro (luca@ucsc.edu)
• Instructor office hours: Wednesdays 1-2pm, E2-339A, or by appointment.
• TAs:
  • Scott Davis (okdogulu@ucsc.edu)
  • Lourdes Morales (lommoral@ucsc.edu)
• TA office hours:
  • Scott: Tuesdays 1-2pm, Wednesdays 12-1pm, Thursdays 2-3pm, E2 Rm 307.
  • Lourdes: Mondays 10-11am in BE 119, Wednesdays 12-1pm in BE 121, Fridays 9-10am in BE 121.
• Review sessions:
  • Mondays 12-1, Phys Sciences 130
  • Wednesdays 10:40am-11:45, Earth & Marine B210
  • Discussion group: Piazza discussion group (signup link)

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).

Permission codes

If you need a permission code to enroll, you can request one using this form.

Requirements

Textbook

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

Development environment

For this class, you need a laptop / desktop on which you can install the required tools for the class. Any OS is fine: Linux, Mac OS X, or Windows. Please follow these installation instructions to set up your machine for development.

Online project hosting

The project will need to be hosted online somewhere, and pythonanywhere is one of the many places where this can be done easily. More information will be provided during the class.

Announcements

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

Homework Assignments

• Homework 1, due Wednesday October 9, 11pm.
• Homework 2, due Friday October 26, 11pm.
• Homework 3, due Wednesday November 7, 11pm.
• Homework 4, due Tuesday November 20, 11pm.
• Homework 5, due Wednesday December 5, 11pm. This homework assignment is optional.

Project

• Write a project proposal following these guidelines.
• Then, use this form to submit your project proposal.

Project submission

• Reserve a project presentation time (by Tuesday December 4).
• Complete the project peer evaluation (by Wednesday December 12, unless you were the only project member).
• Submit the final project code (by Wednesday December 12)
• Give the final project presentation at the time scheduled (schedule will be announced on December 5). The presentation is a 10-minute presentation with:
  • Intro slide with project title and team members.
  • A few slides, describing:
    • The problem you wanted to solve
    • How did you do it
    • Difficulties if any, or special things to know about your project
  • A project demo (this is the main portion of the presentation). Show what your project does.

Lectures

Week 0:

• Lecture 1: Introduction to the class

Week 1:

• Lecture 2: Bottle.py
• Lecture 3: Bottle.py, HTML, CSS
• Lecture 4: Introduction to Python

Week 2:

• Lecture 5: Introduction to web2py
  • Lecture 6: Web2py templates, user login, HTTP basics, beginning of forms.
  • Lecture 7: Forms, insertion in database, security.

Week 3:

• Lecture 8: Edit forms, checking user login.
• Lecture 9: Starring.
• Lecture 10: Stars, thumbs, database joins.

Week 4:

• Lecture 11: Javascript, and beginning of Vue.js
• Lecture 12: Building a simple order site using standard web2py (no javascript)
• Lecture 13: Simple shared blog using vue.js: adding, deleting, editing blog posts.

Week 5:

• Lecture 14: JS for user feedback (stars, thumbs, etc).
• Lecture 15: Thumbs and stars in js.
• Lecture 16: Editable fields in js.

Week 6:

• Lecture 17: File uploads, file streaming, building a music player.
• Lecture 18: on hw3, and on counters.
• Lecture 19: Stripe and e-commerce.

Week 7:

• Monday was Veteran's Day
• Lecture 20: Augmenting user profiles, and local <--> UTC time conversion.
• Lecture 21: Data URLs, uploads, images, google cloud storage, CORs.

Week 8 (Thanksgiving week):

• Using the Google Cloud (recorded lecture)

Week 9:

• Lecture 23: More on image upload
• Lecture 24: Image upload and serving from GCS

Week 10:

• Lecture 25: Image upload and serving from GCS, continued.
• Lecture 26: Web security with examples

Grading and Policies

The class grade will be determined 50% by homework assignment and 50% by the project.

Homework Assignments

• The homework assignments are individual.
• Submissions will use CrowdGrader: the solution you submit will be peer-evaluated by other students in the class. You will be asked to grade 5 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

• Done in web2py as server framework, and if desired, vue.js as frontend framework.
• Teams of 1-4.
• All code versioned in git.
• Project deployed on a publicly accessible server for the final demo.
• Some non-trivial use of a database.
• Some non-trivial use of AJAX and javascript framework.
• 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.

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.

Syllabus

• Introduction to the class. Building a very simple web2py application.
• A (very) quick introduction to Python.
• Simple HTTP concepts: GET, POST, HTTP requests, REST.
• Building a very simple web site using bottle.py.
• Introduction to web2py.
• Building a simple application.
• Simple HTML elements.
• Model - view - controller layout. Views in web2py.
• CSS, done properly.
• 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 and Json
  • Single-page apps, ractive.js or vue.js
  • Advanced DB issues: replication, noSQL, ...
  • Cloud platform primitives on EC2 and Google Cloud
  • Scalability
  • Security

What's different from last year? Not very much. The main difference is that we plan to ask students to meet with faculty or TAs every two weeks to report on project progress.

Collaboration policy

Homework

• You should work individually on all homework assignments.
• You can discuss the assignments with others, and you can ask questions on Piazza showing small portions (a few lines) of code, and you can discuss techniques with your peers.
• You can copy from Stack Overflow, blogs, and places where general web and programming information is made freely available to all. Give clear attribution (a URL in a comment) when you do so. There is no penalty for this.
• You cannot copy from password-protected web sites, such as homework exchange sites, work for hire sites, and the like.
• You cannot wholesale copy entire pieces of answers (HTML pages, templates, entire Python functions that are over 3 lines long).
  • You cannot make your homework available to others in any way (including via public git repositories) until the class is over (after finals week).

Project

You can work in groups on the project.

General

You are free to borrow code from stack overflow or the web (not from other students), but you must cite the source of your code (the URL where it came from) in all cases. However, you cannot ask anyone to do the homework for you.

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.
• bottle.py, a simple web framework.
• 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.

Students with Disabilities

UC Santa Cruz is committed to creating an academic environment that supports its diverse student body. If you are a student with a disability who requires accommodations to achieve equal access in this course, please submit your Accommodation Authorization Letter from the Disability Resource Center (DRC) to me privately during my office hours or by appointment, preferably within the first two weeks of the quarter. At this time, we would also like us to discuss ways we can ensure your full participation in the course. We encourage all students who may benefit from learning more about DRC services to contact DRC by phone at 831-459-2089 or by email at drc@ucsc.edu.