Einstein - Flickr

Write a shell script to get images from Flickr and make a web page to display them.

Background

Flickr is an image sharing site.
You can get a feed of images from Flickr.
See Flickr API
For example, latest images tagged with "louvre" (for the Louvre museum):
https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=louvre
Latest images tagged with both "renaissance" and "painting":
https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=renaissance,painting
Latest images from the National Library of Ireland (NLI), tagged with "Cork":
https://api.flickr.com/services/feeds/photos_public.gne?format=json&id=47290943@N03&tags=cork
This data is in JSON format.

The script

Shell script usage:

 flickr (list of tags)

Get latest images from the NLI (see above) tagged with these tags and make a web page to display them.
For example:

 flickr cork
 flickr dublin pub
 flickr dublin 1922

Send the output into this file:

 $HOME/flickr.html

Einstein test environment

As explained before, in the special Einstein test environment, we need extension .sh and need to call it with "./" in front of it.
Also for technical reasons we will call it flickr3.
So the conclusion is that we need a file called flickr3.sh and we run it like this:

 ./flickr3.sh (list of tags)

Setup

For this lab:

We do not need the Shakespeare files.
You have Internet access to Flickr.

Getting started

Start with this skeleton:

# convert list of args (separated by spaces) into list separated by commas

TAGS=` echo $* | tr ' ' ',' `

# now use TAGS to construct the URL

Use wget to get the JSON feed of photos with the tags.
NLI feed only.
You need to surround the URL with quotes because it has character "&" in it.
But which quotes?

Your program will now be:

TAGS=` echo $* | tr ' ' ',' `
url=[construct URL]
[wget command]

Check with Einstein

Send your program to Einstein and see if you can get some initial marks.
You will need to output to the output file not the command line.

HTML snippets

You will notice there are snippets of usable HTML inside here:
```
 "description": " HTML payload (encoded) ", 
```
For each photo, we are going to extract the descriptions and the list of tags.
You can use egrep to extract lines containing either X or Y using:
```
 egrep 'X|Y' 
```
The patterns we want to look for are:
```
"description":
"tags":
```

Your program will now be:

TAGS=` echo $* | tr ' ' ',' `
url=[construct URL]
[wget command] | [egrep command]

Test that your program now gets the feed, and extracts the descriptions and lists of tags, and nothing else.

Fix the snippets

The descriptions are HTML snippets, encoded. Decode them to normal HTML.
You can do this using tr to remove one character. What character?
"tr" will generate a warning that you can ignore.
Send to the output file.

Your program will now be:

TAGS=` echo $* | tr ' ' ',' `
url=[construct URL]
[wget command] | [egrep command] | [tr command] > [output file]

You can use a multi-line pipe.
Now double click on the output page and you will actually see the images.

Final tidy

It needs some tidying. Use sed to insert space before each item:
```
 sed "s|<p>|<hr style='margin-top:70'><h1> next photo </h1><p>|"  
```
(This only puts space in front of the first <p> on each line.)
Check it looks good. Upload to Einstein for marks.

Einstein is fussy

Note that for this test, Einstein is fussy.
Einstein expects each description line to be all on one line, and each tags line to be all on one line, and there be no other lines:

.. description line ...
.. tags line ...
.. description line ...
.. tags line ...

You can insert extra HTML on a line (like we did with the vertical space). But do not make new lines, or combine lines, with the version you send to Einstein, or Einstein will get confused.

After

Yes you could do some more tidying up. There is some loose text that needs tidying up. You could make lots of improvements.
You can tidy it up after Einstein gives you full marks, since Einstein is fussy.