Integrating Javascript Libraries with Google App Engine

Question

Just starting to learn web programming (taking class CS 253 on Udacity).

My question is how does integrating JS and google app engine work? I know this is may be a fundamental question about web programming, but I really need some guidance on how to understand this concept.

I am trying to incorporate the Twitch Javascript API into Google App Engine. Basically, I would like to have a small website where users can login via Twitch and it stores their info into a database. I really do not understand how this is possible, since Twitch only has a Javascript API.

Here is the script that I have that works perfectly for connecting to Twitch (from the examples on their git page):

<html>
<head>
  <meta charset="utf-8">
  <title>TwitchTV SDK Example App</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>

  <script>
    window.CLIENT_ID = '';
    $(function() {
      // Initialize. If we are already logged in, there is no
      // need for the connect button
      Twitch.init({clientId: CLIENT_ID}, function(error, status) {
        if (status.authenticated) {
          // we're logged in :)
          $('.status input').val('Logged in! Allowed scope: ' + status.scope);
          // Show the data for logged-in users
          $('.authenticated').removeClass('hidden');
        } else {
          $('.status input').val('Not Logged in! Better connect with Twitch!');
          // Show the twitch connect button
          $('.authenticate').removeClass('hidden');
        }
      });


      $('.twitch-connect').click(function() {
        Twitch.login({
          scope: ['user_read', 'channel_read']
        });
      })

      $('#logout button').click(function() {
        Twitch.logout();

        // Reload page and reset url hash. You shouldn't
        // need to do this.
        window.location = window.location.pathname
      })

      $('#get-name button').click(function() {
        Twitch.api({method: 'user'}, function(error, user) {
          $('#get-name input').val(user.display_name);
        });
      })

      $('#get-stream-key button').click(function() {
        Twitch.api({method: 'channel'}, function(error, channel) {
          $('#get-stream-key input').val(channel.stream_key);
        });
      })

    });
  </script>

  <style type="text/css">
  .hidden {
    display: none;
  }
  </style>
</head>
<body>
  <h1>TwitchTV SDK Example App</h1>
    <div class="status">
      Status: <input readonly="readonly" size="60" val="Unknown"/>
    </div>
    <div class="authenticate hidden">
      <img src="http://ttv-api.s3.amazonaws.com/assets/connect_dark.png" class="twitch-connect" href="#" />
    </div>

    <h2 class="authenticated hidden">Authenticated</h2>
    <div class="authenticated hidden">
      <div id="logout">
        <button>Log Out</button>
      </div>

      <div id="get-name">
        <button>Get TwitchTV Name</button>
        <input readonly="readonly" size="50" value="Unknown"/>
      </div>

      <div id="get-stream-key">
        <button>Get TwitchTV Stream Key</button>
        <input readonly="readonly" size="50" value="Unknown"/>
      </div>

    </div>
</body>
</html>

How can I communicate data between this client side javascript and Google App Engine? Thanks!

What is the question exactly? How to send data generated by a JavaScript library on client side to the App Engine on server side? — MeLight
– MeLight, Commented Dec 30, 2014 at 9:58
Yes exactly. How does that communication work? I understand basic communication between GET and POSTS, but I just don't see how this will play out exactly. Thanks! — tabchas
– tabchas, Commented Dec 30, 2014 at 10:43

MeLight · Accepted Answer · 2014-12-30 10:52:28Z

1

Very broad question. But in general, regarding your case:

You should set up a receiving end (handler) on your App Engine application. It will handle the requests from your client side JavaScript (Hello, world example)
Second, you will need to actually send the data to the server. I see that you're using jQuery. In order to call the server we've seen in the Hello, world example, you'll write something like this: $.get('/', function(data) {console.log(data);}). This will call the server and print to the console the message you got from the server.

answered Dec 30, 2014 at 10:52

MeLight

5,5734 gold badges47 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tabchas Over a year ago

Thanks! Your answer made me realize that it all comes down to POST and GET requests. Just need to organize it well and I should be good.

Collectives™ on Stack Overflow

Integrating Javascript Libraries with Google App Engine

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related