In this week, I start build the back end functions,
include “add a dream” function and “View a dream” function. For “add a dream”
interactions, there are six steps, 1. User clicks icon and go to the “add a dream”
page (build into the front end) 2. User types out dream story and selects the
emotion. 3. User click “next” button go to the next page 4. User types keyword
associated with dream for images. 5. Trove adds two images related to the
keyword 6. Users can change images by clicking the refresh button 7. User drags
the orb to the chute to save dream to the database.
For the front end aspect, all icons and
buttons were created by using HTML and CSS. For the back end aspect, there
actually are three steps, 1. connect to Trove and get images from Trove 2. Manipulate
(refresh function) Trove images and other data (story, orb ID, emotion), 3. store
data to the database.
Firstly, I follow the Trove API Technical
Guide to build Trove connection by using JavaScript. I create several variables
to get user input values (keyword) and API key, then create a search query same
with the Trove API Technical Guide: http://api.trove.nla.gov.au/result?key=<INSERT
KEY>&zone=<ZONE NAME>&q=<YOUR SEARCH TERMS> [1]. Then I use
“getJSON”method to get the JSON information we need to display the images.
 |
| Search from Trove |
 |
| getJSON method & Random number generator |
When I extend the JASON data, I found that
each image contains two different URLs, one URL link type is “fulltext” and
another one is “thumbnail”. The different of these two URL is that we can directly
use “thumbnail”URL to display image content, but the image quality is very low,
but we can’t directly use “fulltext” URL without get permission from other
website, such as Flickr. In order to get the high quality images, I was
inspired by one Trove example which is “Images & Trove” [2], it’s show us
how to reformat and access high quality images from each website ("flickr.com",
"nla.gov.au", "artsearch.nga.gov.au",
"recordsearch.naa.gov.au", "images.slsa.sa.gov.au").
 |
| Reformat URL |
 |
| Access Flickr by using Flickr key |
Secondly, the original idea is that display
two images and user can refresh each image. I create two variables that contain
random number, because image URL stored in an array, so using these random
numbers, then we can display two random images after user search from Trove, and
two images URL will store into two variables, they will become the image path
and stored into database. Then if user click refresh button, then generate a
new random number and display the correspond image from array, also update two
image path variables. But there is a potential
problem which is generate two same random numbers, but we don’t want to show users
two same images at same time. So I added one function to prevent this issue,
the function triggered if two random number is same, then it will change one
random number to avoid duplication.
 |
| After user click refresh button & prevent duplicate function |
 |
| Display two images |
 |
| Update URL after user click refresh |
Thirdly, in order to store orb information,
we were using PHP to connect to the database, then use SQL to manipulate the
orb data, such as update and insert. There are two steps for store dream
content, 1. Generate a orbID, the first orbID is 0, the second orbID will be
the above orbID plus one, and so on, the function is that getting the max orbID
in the database, and adding one in order to create the next orb ID for this new
orb, then we can make sure there is no duplication (primary key). 2. Insert orbID,
Story, Emotion, image1URL and image2URL to the database, but the imageURL is
NULL value, because the story and emotion come from different web page, so we
want to add orb first, then update the image URL after user finish the
selection. 3. Update two orb image path.
 |
| connect to the database |
 |
| Generate unique orb ID |
 |
| Insert a new orb into database |
 |
| Update two image path URL |
For this week back end coding， we have considered the flow in web. We keep the maximize efficiency
for every functions, because back end has logic complexity, if the function too
complex and take more times to finish the job, the performance issues can
negatively impact the user's experience. We improve many times for each
function, so that they can get the result efficiently.
We also set clear goals for each function, because
every function has a significant purpose, if the goals not clear, it’s may cost
overwrite or errors. For example, when we built the random number generator, we
only considered matches two numbers with loaded image array, so we create two generators
for each image, then we got duplication issue, so actually the goal of this
generator is to generate two different numbers, which need a function to avoid the
duplication.
References :
[1] Trove API Technical Guide
Source: http://help.nla.gov.au/trove/building-with-trove/api-technical-guide
[2]Getting High Quality Images
Source: http://deco1800.uqcloud.net/examples/troveImage.php
