Week8 Flow & Back-end functions

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