CODEWITHSUNDEEP
javascriptgoogle-app-enginewebtwitch
tabchas
tabchas

Reputation: 1402

Integrating Javascript Libraries with Google App Engine

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!

Upvotes: 0

Views: 169

Answers (1)

MeLight
MeLight

Reputation: 5565

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.

Upvotes: 1

Related Questions