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 in Paris):
https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=louvre
Latest images tagged with "Dublin":
https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=dublin
This data is in JSON format.

The script

Shell script usage would be like:

 flickr (tag)

Get latest images tagged with this tag, and make a web page to display them.
For example:

 flickr belfast
 flickr dublin

Send the output into this file:

 $HOME/flickr.html

Lab exam

For this lab exam, you have Internet access to Flickr.
For reasons explained before, we need to call the script flickr5.sh and run it like this:
```
 ./flickr5.sh (tag) 
```

Getting started

# comment and uncomment this line:
exec > [output file]

url=[construct URL from argument]
[wget the URL]

You can comment and uncomment the "exec" line to switch between output to screen and output to file.
Use wget to get the JSON feed of images with the tag.
You need to surround the URL with quotes because it has character "&" in it.
But which quotes?

Make sure this works before proceeding.
How do you know it worked?

HTML snippets

At first the JSON you get back looks weird.
Then you notice there are snippets of usable HTML in it, like this:
```
 "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 have a line:
```
[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.

Your program will now have a line:

[wget command] | [egrep command] | [tr command]

Set the "exec" command to output to a file. Now double click on the output file and you will actually see the images.

Final tidy

It needs some tidying. Use sed to insert some space before each item:

 
EXTRA="<hr style='margin-top:70'><h1> next photo </h1>"
[wget command] | [egrep command] | [tr command] | sed "s|<p>|$EXTRA<p>|"

This only puts space in front of the first <p> on each line.

Upload to Einstein

To avoid problems with the Flickr firewall, we will not do network calls in the code run on Einstein.
Instead Einstein will test it with a static file.
So for the version uploaded to Einstein, replace the wget command with:

 
cat $1 | [egrep command] ....

Note that Einstein will now use the command-line argument to tell your program what static file to use.

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.