Overview

This document explains how to work with the HTML-JavaScript front-end of the Twitter Sentiment Analysis web application. 

Downloading the Front-end File

You can download the HTML file from GitHub or click here. You need a text editor to edit the HTML file.

Modifying the Front-end File

After verifying that the API is working as expected, you can modify the URL in the downloaded HTML file. If you open the HTML file without modification, you are using the default Ultra URL provided by SnapLogic.

To change the default URL, modify the HTML file at line 43.


Alternatively, you can remove the Ultra URL and Token settings from the code block above and add your own URL and token in the code at line 113 and 114.

Open the HTML file using a browser and validate that the web application is working as expected.

Deploy your Web Application

Since the application is an HTML file, you can host the application using your own web server or a static web hosting service. In this instance, you choose to host the application on GitHub Pages. For information on how you can host your web application on S3, see Hosting a Static Website on Amazon S3.

Deploying your Web Application using GitHub Pages

For details on how you can deploy your web application using GitHub, see Creating Web Applications Using SnapLogic API

Understanding the HTML Code

Here's the complete HTML code used to create the front-end of the Twitter Sentiment Analysis web application:


<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- Popper -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <!-- Bootstrap -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

    <title>Twitter Sentiment Analysis</title>
</head>

<body>

    <div class="container">

        <!-- Title -->
        <h1 class="display-4">
            Twitter Sentiment Analysis
        </h1>

        <div class="container">

            <!-- Input and output textareas -->
            <div class="row">
                <div class="col-md-6" style=background-color:white;>
                    <div class="form-group">
                        <label for="inputTextArea">Input:</label>
                        <textarea class="form-control" rows="15"
                            id="inputTextArea">Paste a Tweet here and click submit.</textarea>
                    </div>
                </div>
                <div class="col-md-6" style=background-color:white;>
                    <div class="form-group">
                        <label for="outputTextArea">Output:</label>
                        <textarea readonly class="form-control" rows="15" id="outputTextArea"></textarea>
                    </div>
                </div>
            </div>

            <!-- Submit button -->
            <div class="row">
                <div class="col-md-12" align="center" style=background-color:white;>
                    <form>
                        <input type="button" class="btn btn-outline-primary" value="Submit" onClick="operate()"
                            style="width: 100%">
                    </form>
                </div>
            </div>

        </div>
    </div>

    <script>
        // This function will call the SnapLogic Ultra Task.
        function requestSnapLogicUltra(url, token, params, action, action_fail, metadata) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var responseJson = JSON.parse(xhr.responseText);
                    if (metadata == null) {
                        action(responseJson);
                    } else {
                        action(responseJson, metadata)
                    }
                }
                else if (xhr.status != 200) {
                    action_fail();
                }
            };
            var content = {
                "token": token,
                "params": params
            };
            xhr.send(JSON.stringify(content));
        }
        // This is triggered when the user clicks "Submit". It sends the Tweet to SnapLogic's Ultra Task and retrieves sentiment along with confidence level.
        function operate() {
            // Waiting message.
            $("#outputTextArea").text("Waiting for result from SnapLogic.");
            var input = document.getElementById("inputTextArea").value;
            // Replace your SnapLogic's Ultra Task API here.
            var url = "https://prod-slprod-fm.snaplogic.io/api/1/rest/feed-master/queue/SLPROD/ML_PROD/Twitter%20Sentiment%20Analysis/Twitter_API_Task";
            var token = "snaplogic_ml_showcase";
            var params = {
                "text": input
            };
            // Handle response.
            var action = function (responseJson) {
                var result = responseJson;
                console.log(result);
                var result_pretty = JSON.stringify(result, function (key, val) {
                    if (val.toFixed) {
                        return Number(val.toPrecision(3));
                    } else {
                        return val;
                    }
                }, 4);
                $("#outputTextArea").text(result_pretty);
            }
            // Handle failure.
            var action_fail = function (responseJson) {
                alert("This showcase is under heavy load. Please try again later.");
            }
            // Send request to SnapLogic.
            requestSnapLogicUltra(url, token, params, action, action_fail);
        }
    </script>

</body>

</html>


This file has the following components: