Class Philosophy

This is a 'technical' class, meaning that we will solely focus on actually building a web application (a pinterest-like webbapp, this semester). We will be using the Google App Engine as our platform, the Python version. We will also be making heavy use of JavaScript and the jQuery library.

As in past years, I will try to 'flip' this class in that I will expect you to watch the videos and do the assigned readings before coming to class. During class time I will try to do as little lecturing as possible and instead provide individual help to each one of you for that week's homework. So, bring your laptop to class. The first couple of weeks we will have more traditional lectures as we have some material to cover before you get started coding.

The grading is described in the grading page.

The recommended online resources and books are in the about page.

All the videos I make and use for this class are in this youtube playlist. I will also posts here some videos by others which I think are helpful.

You will turn in your homeworks on github (nearly) every Monday morning, 9am. Thus, Friday's class will be an especially good time to ask me questions. Note that I go to bed early (my kids have to be at school at 7:30am) so do not expect me to be on IM on Sunday night. My solution to each week's homework will appear as a github project every Monday 9:01am. Thus, absolutely no late homeworks will be accepted.

Finally, this is an easy class. There are no complex algorithms to understand, no strange mathematical notation, no tests to take, and (almost) nothing to memorize. However, it is programming, and programming takes time, lots of time. Unfortunately, the only way to learn to code is by coding so, there is no other way until we get the Matrix brain plugs. If you are not ready to put in at least 8 hours/week of coding/reading time for this class then it is better that you do not take it.

The Internet and the Web

The first thing you need to understand is a bit about how the Internet works, and a bit more about how the World Wide Web works (and, the fact that they are not the same thing). First, a quick video on the Internet:


Next, a video about how the web works:



You should also bookmark the Mozilla Developer Network (MDN) and read their HTML Tutorials.

Git and Github for Homeworks

During the course of this class you will build a fairly sophisticated webapp, one small step at a time. Specifically, (almost) every week there will be a new homework which will involve adding more features to the webapp from last week.

You will turn in the weekly homeworks by using git and github.  The folks at github have been nice enough to give me 20 free 'private' repos. We have to use private repos because all of you will be working on the same project so, we don't want others copying your work. 

The way this will work is:

1. You get a github.com account.
2. You email me your github account name and I will then create a private repo for you and give you commit privileges on it. After that you and I will be the only ones who can see or edit the repo.
3. Before every deadline you will 'push' to github. I will 'pull' every project just after the deadline. Make sure your code is on the 'master' branch.

Alternatively, you can go to here and tell them you are a student and want your own couple of private repos. Then you can create your own repos yourself.  It takes them a couple of weeks to answer so, do it now. The advantage of this is that you will have the repo after class is over, whereas the repos I create will eventually get deleted when I teach this class again.

Either way, at the end of the semester you will have a nice little project on your github account that you can make public to show prospective employers your webapp building skills.

If all this sounds confusing, no worries, I will spend a lecture on git and on the specific workflow you will use (really just, 'commit', 'commit', then 'push' when you are ready).

Required Reading

• Read Chapters 1 and 2 (at least) of The Git Book.

This class will be taught again in the Fall 2012

It looks like I will be teaching this class again in the Fall 2012. Cool. Please sign up!

If you are a graduate student and want to take this class come talk to me about getting 700-level credit for taking this class.

By the way, here is a positive (anonymous) comment from a student in last year's class:

"I loved this class. There was a lot of programming involved but it was, I believe the perfect amount of work.

However, that does not mean that I was able to finish every assignment on time. I would recommend to future students that you do not take a heavy course load when taking this class. To get the most out of this class you really want to be able to spend time on this.

This has been one of the most interesting and get this, fun programming classes I have taken. I hope that you continue to offer it more frequently in the future."

and another (sorry, no money for a TA, but if any graduates of this class happen to be reading this and are willing to TA for free, talk to me)

"Great class and attendance set up. I could go to lecture if i needed help but didn't have to if i understood the topic. I feel that the homework were for the most part interesting and fair (by fair i mean there were usually only 4 or 5 things that were required instead of 9-10). This class has really gotten me interested in building web-applications and i have already started building some in my spare time. Before this class i had no real passion in the computing field, but now i have a specific passion that i would like to one day turn into a career. Thanks for teaching this class and hopefully it will continue. One suggestion for future classes would be to get a TA (which may not be an option) or a student who has done well in the class or who knows the subjects to assist you with helping students. There where times when i would chat with you and you might have been away and didn't answer my question. I feel that if there are multiple outlets then students will have an easier time getting help, which well keep them motivated."

and another, mostly positive (but, good point, I will do more jQuery/Javascript time)

"I feel that the amount of material covered was just right. I feel that we learned a little about a lot of useful techniques and that the more important and complicated techniques (Javascript, JQuery/Ajax, getting information via API) were given more time than the more basic techniques (HTML, Canvas, Off-Line data)."

And here is a negative one:

"Far, far, far, far, far too much. Most of the topics could have been covered over the course of a semester and still be too much. I have other classes and work a lot, so I didn't stand a chance."

If you just want to learn HTML, CSS, and a little bit of JavaScript, then take CSCE 102. If you want to go beyond that and learn how to build web applications (jQuery, DOM, app engine, databases, ORMs, REST APIs, canvas, HTML5, templates, etc.), then take this class.

Finally, you might be wondering how in demand these technologies are in the real world. Well, a survey done by stackoverflow.com of their users reveals that 42% of software developers describe their occupation as "Web Application Developer" (Question 7).

Update: And, one more thing, if you can't wait to get started, Udacity is teaching a class on web applications that starts in April 16. It is taught by the guy who created Reddit. They are using the google app engine, just like we will!

Feedback

So, we have covered a lot: from the basics of HTTP, to HTML, CSS, Python, the google app engine, the noSQL datastore, webapp framework, Django templates, JavaScript, the DOM, REST, JSON, JSONP, jQuery, Ajax, HTML5, localStorage, and canvas, among others. I think the weekly homeworks is really the only way to not just lecture you about these technologies (which is completely useless, no one learns to program by listening to a lecture and taking a test) but to actually get you to build real webapps. But, what do you think?

The form below can be filled out anonymously. You could also comment on this post so that next year's students can see them and be properly warned.

HW13: Facebook App: Polaroid Collage

We finish the semester with a simple facebook app, hosted on the google app engine, and using canvas. Your facebook app will be a 'canvas' app. It will fetch the user's friends' profile pictures and use a canvas to display them all in random positions, with random rotation, and with a white border around each one, like the collage shown here. Specifically you will do the following.

1. Implement a new google app engine app which you will register as a facebook app.
2. Your app will let the facebook user log in. Once logged in, and you have obtained permission to view his friends list, your app will fetch his friends list, then fetch the profile picture for each friend, and finally it will display these photos in one large canvas.
3. Also, under each photo you will place that person's name.

You will turn it in on Wednesday, April 27 @11am here. Make sure you include both the URL to your facebook app (http://apps.facebook.com/yourappname) and the appspot name of your deployed app (http://yourgoogleapp.appspot.com).

Required Reading

• Facebook developers' documentation. You will mostly be using the graph API via the JavaScript SDK and the code in the next bullet point.
• Facebook Python SDK. This is the library and sample code (under 'examples') that I used in class. Remember to add the 'post' method (as I showed in class) because it will not work without it.

Research Experiences for Undergraduates (REU) Position this Summer

I have a Summer REU project that involves writing some Python code to use the google search API (more JSON goodness) to track memes in the blogosphere. Its $3000 for the summer, 20 hours/week assumed, only undergrads can apply.

Challenge Round

Just a couple left for tomorrow:

• 11:15 Neelands
• 11:30 Rowe
• 11:45 Dillon

Canvas and WebGL

Checkout this post to see some awesome demos of what JavaScript and canvas WebGL (3D) can do. You will need to use a new Chrome, Firefox or Safari.

HW12: Canvas, Flickr, and JSONP

In this homework you will practice using the ever more popular canvas API. You will implement a javascript program (along with its supporting HTML file, of course) which fetches the 'interesting' photos from flickr and displays them in an art gallery view. Specifically, you will write JavaScript code to do the following:

1. Create a request that calls the flickr.interestingess.getList method to fetch today's most interesting photos at flickr, in JSONP format. Note that this is a JSONP request, not JSON. This is a sample call. You will need to read the jQuery .ajax() documentation to see how jQuery handles JSONP requests with .ajax() in a very similar way to regular XHR requests (even thought JSONP requests are not XHR, I will explain in class).
2. You will then make a 4x4 art gallery, similar to this art gallery example but populated with the flickr interesting photos you got. To to this, you will need to create photo source urls from the data you just got. Note that the gallery is an HTML table where each cell is a canvas object of two images: the frame image and the photo image. Use the frame image from the example. It's OK your photo does not fill up the entire frame.
3. You will also add the 'title' of each photo just below it (either in the canvas object, or in HTML). And you will randomly draw a big red X across some photos (probability 1/2). The X's should be re-determined every time the page is loaded.

This homework is due on Wednesday, April 20 @11am. You can turn it in here. Remember to always include a URL to your published app.

Required Reading

1. Flickr API pertinent sections.
2. JSONP overview.

HW11: localStorage

For this homework you will write code that deals gracefully with the problem of a user going online/offline while editing a question text. In the current implementation of a question editing session you are doing an XHR request whenever the user clicks on the 'save' button (or, goes out of focus). But, what happens if the user is offline at that moment?

One use case you will implement is the following.

1. The user goes to his questions at /123.
2. He goes offline: unplugs his ethernet cable and turns off wi-fi.
3. He goes back to his browser and edits the question at /123
4. He shuts off the browser.
5. He goes back online.
6. He starts his browser and visits /123.
7. The page should show the question as it was before he turned off the browser, including all his changes. The page will also immediately try again to do an XHR update of the new question.

You will implement this using the localStorage object. In class, I will explain more on how to achieve this effect.

Required Reading

• localStorage

This homework is due on Wednesday, April 13 @11am. You can turn it in here

Google App Engine Status

is here. Quote:

Unfortunately, an issue encountered as part of the maintenance period has caused the downtime period to last longer than expected. We currently expect read-only to complete between 6:15 and 6:30 pm PDT and will update this thread as we have a more accurate target. Thank you for your patience.