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.

HW9 Grades and Solution

The grades are in your inbox. Below is my sample partial solution. I think a few of you were trying to make this a lot more complicated that it is. All we are doing is turning an object into a string and back, and thats done by the library.

The solution you see below is running here. Of course, you would put all your html, python, and javascript in separate files. I'm putting them in one to make it easier to understand.

"""A sample partial solution to the json homework"""        
class JasonTest(webapp.RequestHandler):
    def get(self): #/jtest will draw a chart, /jtest?fmt=json will return the json that is the data for the chart
        if self.request.get('fmt') == 'json':
            jsonObject = {'qtext': "How easy is this?", 'choices': ["Super easy", "Very easy", "Impossible"], 'votes': [5,10,20]}
            self.response.out.write(json.dumps(jsonObject))
            self.response.headers.add_header('Content-type', 'text/json')
        else:
            self.response.out.write("""
<html>
  <head>
    <title>Hello</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['corechart']});
      
      //callback that generates an XHR call, when that returns we create the graph.
      function drawChart() {
        $.ajax('/jtest',{
          type: 'GET',
          data: {fmt: 'json'},
          dataType: 'json',
          success: function(question){ //got the json data, now make the graph
            // Create our data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Choice');
            data.addColumn('number', 'Votes');
            rows = []
            for (var i=0; i < question.choices.length; i++){
               rows[i] = [question.choices[i], question.votes[i]];
            }
            data.addRows(rows);
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, {width: 400, height: 240, is3D: true, title: question.qtext});            
          }
          });
     }

    $(document).ready(function(){ 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
    });
    </script>

  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>
            """)
        
        

HW10: Refactoring and Memcache

For this homework you will be cleaning up the existing codebase and implementing one small new feature. The new feature is the memcaching of an question. In the use-case where a teacher posts a survey question we expect up to hundreds of hits on that question in a short amount of time. Since they are all seeing the exact same question it seems like a perfect time to use a memory cache, so you will. The parts of this homework are below:

1. You will first clean up your web app of all the cruft it has accumulated. This includes:
   1. Eliminating all links to any specific homeworks (hw6, hw7...)
   2. Making sure there are no dead links or links that cause your app to crash.
   3. Make sure that after creating a question the user is taken to that question's page.
   4. Adding all the needed navigation links so the user can move easily move around.
   5. We can see all the questions of a user.
   6. The app is simple to use.
2. Refactor your code. This means to clean up your code without changing its functionality. Get rid of any unnecessary code. Simplify.
3. Implement a memcache of the unanswered questions. That is, the first GET /123 will fetch the question from the datastore but the ones after will fetch it from the memcache. Remember to clear the cache if the owner of the question changes it.

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

Required Reading

• The Memcache Python API.

Friday Challenge Round

For tomorrow's challenge round it will be:

• 11:15 Hui
• 11:25 Hussey
• 11:35 Jackson
• 11:45 Johnson
• 11:55 Motley