HW4: The Datastore

In this homework you will start using the datastore to store the pins that each user adds to his account and later displaying them. Note that you will not be storing the images themselves (the *.png or *.jpg). You will only be storing the URL to the image.

First, create a directory called /pic in your project and add a few of your favorite jpegs from the net. You will use these when debugging your app. They will save you time as your browser will not have to keep fetching images from the net (and, you can code offline).

You will then create a Pin(db.Model) with imgUrl, caption, date, and owner properties. That is, each Pin will have a URL, a caption, a date of creation, and an owner associated with it. Each pin will also have a unique id, but you can just use the built-in key. That is, the Pin's id will be given by self.key().id().

The way your app will work is as follows:

1. As before, on 'GET *' if the user is not logged in he is shown the login page. If he is logged in then 'GET /' returns a form asking him for the img URL and caption. You do not need to check if it is a valid URL.
2. When the user hits 'submit' on the form (for adding a image) you will generate a 'POST /pin/' that sends the information of the new pin to the server. Your server code will store this new pin information in the datastore and then forward the user (self.redirect()) to the new pin's page: /pin/1234 (or, whatever number you have the pin).
3. '/pin/1234' will show pin 1234. It will also show the URL and caption values in text boxes, allowing the user to change this. If the user changes them and clicks on the 'update Pin info' button you will generate a 'POST /pin/1234' with the new information and update the info on the server accordingly, then come back to 'GET /pin/1234' which will then be updated.
4. The '/pin/1234' will also have a 'delete this pin' button which does as it says.
5. A 'GET /pin/' will return a page with thumbnails of all the pins owned by the user, each one linked to its pin page. In the header of all pages it will say 'My Pins' which is just a link to '/pin'.

What we are going for here is a fairly standard REST API for getting and editing your pins.

To summarize:

GET /	when logged-in, shows a form for adding a pin
GET /pin	lists all the users' pins and links us to each one.
POST /pin	creates a new pin
GET /pin/123	shows pin 123, and a form for editing it
POST /pin/123	updates pin 123 (caption or url), or deletes it

Required Reading

• You will need to read the Datastore example and consult the Datastore API for all the details of its operation (you only need to know the basics for this homework).
• You will be using the users API to let users log in and determining if the person is logged-in or not. Almost everything you need from 'users' is covered in this Using Users Service example.
  
  

Deadline

As always, push it your github repo by Monday, September 24 @9am

A Note on Proper Googling

You will have notice that whenever you search for a web-related term like 'css font-family' your first results are always at w3chools.com. Now, I have nothing against that website but they are kinda sucky.

What I do is prepend every search with 'mdn', as in 'mdn css font-family'. That way I end up at the much nicer Mozilla Developer Network.

Static CSS Files in the App Engine

If you link to a CSS with, say href="/css/style.css" then the browser is going to do a GET /css/style.css. But, since you are running the app engine this means that, by default, this will go to your Python file where it will look to see if there is a handler defined for /css/style.css.

Since our CSS files are static we don't want the python code to be called to fetch them. We just want the webapp2 to serve these as old-fashioned static files. To do this you need to edit your app.yaml and tell it which files or directories you want to be static. Read the docs on Static File and Directory handlers for the details. Basically, you add something like:

- url: /css
  static_dir: css

to your app.yaml file.

My Solutions

I have pushed my solutions to HW2 to the pinboard github repo so you can take a look at how I did it. I added a link to this repo on the menu at the right. I will be pushing all future solutions to that repo.

CSS Examples

At first, it is hard to imagine that significant visual effects can be achieved by using the CSS properties. But, that is only due to lack of imagination. The sites below showcase the power of CSS. Browse them for ideas, and CSS code.

• CSS Zen Garden is the original CSS showcase site. Every time you click on a design on the right you will see a different design. But, note that all designs use the same HTML. The only thing that changes is the CSS file.
• CSS Deck is a new site for showing off cool CSS tricks. Like, how to build a macbook pro entirely out of CSS.
• The Shapes of CSS blog post shows how to generate geometric shapes with CSS.
  
• Colour Lovers is just colors, but they have some pretty colors.
• CSS3 generator will generate the CSS for shaded, rounded boxes.

CSS Boxes

In the following video I explain a bit more about CSS margin, border, and padding.

Cascading Style Sheets

Below I give a quick introduction to CSS. You should read over the MDN CSS documentation to learn CSS.

HW3: CSS, users

For this homework you will add a CSS file to your webapp to make it look pretty, and you will use the app engine users library to provide login and logout capabilities.

That CSS Look

Your website should look like the screenshots you see here. Namely, it must have:

1. A header which shows either the login button, or the email of the currently logged-in user and the logout button. Both of these must be right-justified.
2. A title, as shown, more or less.
3. A box that is centered on the page and shows either the login message or asks for input (same as the previous homework). The background of the box must be a different color from the rest of the page.
4. The footer, with your name centered on it.

You can use the same colors I used, which are USC's colors, or choose your own color template. Note, if you don't know much about visual design (as I don't), the best thing to do is to use someone else's color scheme and try to pick one with fewer than six colors. The fewer colors you use the more professional it will look.

Login

The login and logout button should work, as expected: login and logout the user. When the user is logged in you should display his email address in the header. You will do this using the app engine's users library, which means that people will be logging in with their gmail/google credentials. Notice that with this method you do not need to store anything. Google takes care of the authentication process.

Required Reading

To do this homework you will to have read:

1. Using the users service: getting started guide. More details in the users service API.
2. MDN CSS Tutorial

You are free to google (or bing, or whatever you're into) for this and all homeworks as much as you want. However, be warned, you must understand what every line code in your program does! This is good to do not just for this class but for your whole career. If you cut-n-paste some piece of code from the interwebs into your program and you don't know exactly what it does you are asking for big-time trouble later on. When your app crashes the next day, is it because of the code you pasted? You have no idea! Blind pasting is the equivalent of agreeing to take in an international flight a suitcase that some stranger just gave you.

As always, push your code to your github repo by Monday, Sept. 17 @9am.

Jinja2 Templates

Below is a short intro to the Jinja2 templates as used in the app engine. You will need to consult the Jinja2 documentation to use them.

HTML Forms

Below I cover the basics of HTML forms.

HW1 Graded

I have graded HW1 and emailed you your grades. I am using your @email.sc.edu address. If you want me to email it somewhere just let me know.

I don't have a solution for this HW since it was mostly about making you have everything installed and know your way around chrome tools.

Python

Below is a short introduction to the main features of Python.



Another fun way to learn python is by doing the codeacadempy Python track.