GIF Search

Overview

In this lesson we will be using the GIPHY API to make a GIF Search app.

New Concepts

Web:

Use this component to call the API using a HTTP GET request. You will also use this component to parse the JSON response to get the GIF url.

WebViewer:

Use this component to display the GIF url.

Blocks

Here are some of the blocks we will be using for the app.

Let's Get Started:

User Interface Designer:

We will need the following components

• Horizontal Arrangement
• Text Box
• Button
• Label
• WebViewer
• Web

JSON (JavaScript Object Notation)

This is an example of a response when using a HTTP GET request on the GIPHY API.

{
  "data": {
    ...
    "type": "gif",
    "id": "hcrezmYwSLNGE",
    "url": "http:\/\/giphy.com\/gifs\/cat-sunglasses-hcrezmYwSLNGE",
    "image_original_url": "http:\/\/media1.giphy.com\/media\/hcrezmYwSLNGE\/giphy.gif",
    "image_url": "http:\/\/media1.giphy.com\/media\/hcrezmYwSLNGE\/giphy.gif",
    ...
  },
  "meta": {
    "status": 200,
    "msg": "OK"
  }
}

Logic :

Variables Setup

1. Initialize 4 variables, GIF_response, GIF_response_data, GIF_response_data_image_url, GIF_request_URL, all to " ".

SearchButton Setup

1. Set GIF_request_URL to the joined GIPHY API Base URL, and the keyword that the user searched.
2. Set the GIF_request_URL Label's text to the GIF_request_URL variable. (so you can double check the GIF_request_URL)

This is the GIPHY API Base URL
http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&rating=pg&tag=

TEST

Try searching for cats. The request url should look like this:

http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&rating=pg&tag=cats

SearchButton Setup Part 2

1. Set Web1's URL to the GIF_request_URL.
2. Call Web1.Get

Extracting the GIF from response

1. Inside the 'when Web1.GotText block...
2. Set the GIF_response variable to the JsonTextDecode of the responseContent
3. Set the GIF_response_data variable to the 'look up in pairs' key:'data' result of the pairs in the GIF_response variable.
4. Set the GIF_response_data_image_url variable to the 'look up in pairs' key:'data' result of the pairs in the GIF_response_data variable.
5. Set the GIF_image_URL Label's text to the GIF_response_data_image_url
6. Call the WebViewers GoToUrl using the GIF_response_data_image_url

External References:

APK Download