CMPS 183 Spring 2018

General Information

Time and location: TTh 3:20-4:55, Earth & Marine B206
Instructor: Luca de Alfaro (luca+183@ucsc.edu, please use this email for class matters)
Instructor office hours: Tuesdays 1-2pm, E2-339A, or by appointment.

TAs:
TA office hours:
Review sessions:
- Discussion group: Piazza discussion group

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 on Thursday, April 12, 11pm.
Homework 2, due on Tuesday, April 24, 11pm.
Homework 3, due on Sunday, May 13, 11pm.
Homeworks 4 and 5. (You need to be logged in via your @ucsc.edu account to read them).

Project

The form for proposing projects will be made available later.

Lectures

Lecture 1, introduction to the class and beginning of bottle.py
Lecture 2, serving simple web pages, HTML, CSS.
Lecture 3, introduction to web2py, cookies.
Lecture 4, cookies, database, login.
Lecture 5: forms, editing, signed URLs.
Lecture 6: javascript.
Lecture 7: review of database access, start of vue.js
Lecture 8: vue.js, and start of building a music player
Lecture 9: music player, and file upload.
Lecture 10: editing in place, jQuery.
Lecture 11: file upload, streaming, and more on vue.js
Lecture 12: On databases.
Lecture 13: On databases, and hosting.
Lecture 14: Google cloud storage, building APIs.
Lecture 15: CORS policy
Lecture 16: Star ratings, Stripe checkout.
Lecture 17: Cordova
Lecture 18: Login from Cordova, tic tac toe.

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? Every year, I change the class a little bit, trying to improve it. This year, I will initially use bottle.py to develop simple web sites to motivate the main features of web2py. We will still use vue.js as our javascript framework, as I quite like its simplicity.

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. However, the bulk of the work needs to be your own, and wholesale copying of submissions is not allowed, and will incur disciplinary sanctions. Students who host their code on public repositories, facilitating copying by other students, will equally incur sanctions.

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.

Page updated

Report abuse