Publish your App. Use Only one Eclipse Project

After you finish HW1, and you made sure that it runs locally (http://localhost:8080), you can then publish it for the whole world to see!

Just go to https://appengine.google.com/ and click on "create application". Find an "application identifier" (app id) for your app (I suggest the same project name as your github repo, to keep things simple) that isn't taken, use all the other default values and create it. Then just copy the app id into your app.yaml under 'application: your-app-id' then click 'deploy' on your google app engine launcher. It will copy all your files to the google app engine and deploy. You can look at the log file to track its progress.

Your app will then appear at http://your-app-id.appspot.com

Note that if you later on decide to buy your own domain name, say myawesomeproject.com, it is just a matter of filling out a form to get the app to appear under your domain name.

You will have Only One Eclipse Project

I have noticed that some of you made an eclipse project called HW1. That's a bad name. You will only have one eclipse project for the whole semester. Each week you will be adding more features to this project. A good eclipse project name is the name of the github repo I gave you, or something similar.

HW2: jinja2 templates, HTML forms

In this homework you will allow your webapp to accept a URL, for an image, and a caption (text). Your app will not save these to the database (we will do that next week) but will simply display these back to the user.

Your app must use the jinja2 templates. Specifically, it will use a base.html template from which your other template inherits from. The base.html is a general template that all your other templates will inherit from. Thus, it contains the basic layout of the site. For this homework it is fine if this is a minimal template, but later on we will be adding headers and footers here.

The page after the user clicks 'submit'.

Your page should look like this, except 'Homework 1' should be '2', my bad.

Required Reading

To get this done you will have to read getting started using the webapp2 framework and handling forms. You will also want to consult the webapp2 framework documentation and the jinja2 documentation.

Turning it in

Push your code to your github repo by Monday Sept. 10 @9am.

Also, in your app.yaml set the version to 2 (for HW2) and publish it to appspot.com. That is, go to appengine.google.com and create a new application. Set its name in your app.yaml and click on the "Deploy" button on your appserver. When you start working on HW3 change the version to 3 (and so on). In this way I will be able to view your previous at work even while you might already be testing a new version (at least, I hope it works out)

eGit User Guide

There is a comprehensive Users Guide for eGit which I forgot to mention. The Gettig Started section shows you how to set up a local repo, and also how to push/pull from a github repo.

While I'm here. If your eclipse workspace is in dropbox and you use it in more than one machine (say, laptop and desktop) then you should make sure to use dropbox's "Selective Sync" option and do NOT sync the .metadata folder in your eclipse workspace.  As this stackoverflow question atests, you should then be Ok. I have had this setup and shared a workspace between my laptop and desktop for over a year without any issues. The only thing is, I do have to 'import existing project' on the second machine after creating in on the first one.

Git Command Line Tutorial

There are like, 10,000 tutorials on git. Here is another one, on getting started with git using the command line:

HTML Basics

Below I talk about the basics of HTML. You should read over the MDN HTML documentation to make sure you are up to speed on basic HTML.

HW1: Hello World, HTML and Git

For the first homework you will write a simple HTML page and push it to github. The goal is to make sure you have all (well, most) of the needed software installed on your laptop and understand the basic workflow.

First, write an index.html file, using the HTML5 DOCTYPE, that contains:

1. Matching title and h1 with "HW1: Your-name"
2. Nicely-formated answers to the following questions: (You should use chrome tools to find the answers)
   
   1. What webserver and OS is used by www.sc.edu?
      
      
   2. List all the JavaScript files loaded by www.sc.edu.
      
      
   3. List all the CSS files loaded by www.sc.edu.
      
      
   4. List the keys of all the cookies used by www.sc.edu.
      
      
   5. In www.sc.edu, for the word "Campuses" on the left-hand menu, what is the margin-top?
      
      
   6. What webserver and CMS is used by www.cse.sc.edu?
      
      
   7. Go to www.cec.sc.edu, change the line that says "About the college" (in the top left) to say "Engineers Get Things Done!". Take a screenshot. Add the screenshot image to index.html, with a width of 400 pixels.
3. Make sure your page validates.

Finally, create the "Hello World" app engine application, as explained in this post and in the app engine Getting Started tutorial. Run it locally with the appserver to make sure it says hello world. You do not need to publish it (but you can, if you want to). Finally, add the index.html and related images to this new project, add them to the git repo, and push to your github repo.

This homework is due Monday, September 3 @9am.

Pushing your App Engine Project to Github

The video below shows you how add your eclipse appengine project to your local git and then push this local git repo to github, making sure the local master branch is tracking the remote ('origin') master branch at github. Thus, afterwards everytime you want to push to github all you have to do is 'Team->Push to Upstream'.

Also, I give a quick tip on setting up Quick Diff.

I forgot to show how to add a .gitignore file, but all you have to do is add a text file called '.gitignore' to your project's top-level folder, and in this file put the names of all the files you do not want to be added to your repo, one per line. Namely, add '.project' and '.pydevproject'.

Setting Up Eclipse and the App Engine

The video below shows how to set up eclipse and the app engine (etc.) for this class. I am using eclipse Helios in the video. You will find all the files you need at the appengine downloads page.

If you are using a newer eclipse, like for example Juno (the latest one, which I am using in class), then you should follow google's instructions for installing the google app engine plugin for eclipse. Note: I just upgraded to Juno from Helios and for it to work I had to first uninstall, in eclipse, all the Google plugins I had, then upgrade to Juno, then install the google plugin as per google's instructions.



I did forget to mention in the video that you should also install the eGit eclipse plugin. That is, when you are in the eclipse marketplace also search for 'egit' and install.

Also, you probably want to install and setup git itself in your laptop, in case you want to use git from the command line. The github guide on setting up git will show you how. Note mac users: if you use homebrew (and you should), just type brew install git to install it. Linux users already know they just have to apt-get install git.

Chrome Developer Tools

On the previous video I used Chrome Developer tools, showing you a bit how to use them. You will be using these a lot in this class. Below is a very quick tutorial to get you started. You can learn best by just clicking around in devtools.



The video below has some very useful tricks (which might not make much sense to you now, but will make perfect sense in a few weeks as we cover more topics):



Watch Google I/O 2012 - Chrome Developer Tools Evolution to learn about the latest features in chrome tools.

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.