title: Integrating Javascript Libraries with Google App Engine
body: <p>Just starting to learn web programming (taking class CS 253 on Udacity).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is the script that I have that works perfectly for connecting to Twitch (from the examples on their git page):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;TwitchTV SDK Example App&lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      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);
          });
        })
  
      });
    &lt;/script&gt;
  
    &lt;style type="text/css"&gt;
    .hidden {
      display: none;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;TwitchTV SDK Example App&lt;/h1&gt;
      &lt;div class="status"&gt;
        Status: &lt;input readonly="readonly" size="60" val="Unknown"/&gt;
      &lt;/div&gt;
      &lt;div class="authenticate hidden"&gt;
        &lt;img src="http://ttv-api.s3.amazonaws.com/assets/connect_dark.png" class="twitch-connect" href="#" /&gt;
      &lt;/div&gt;
  
      &lt;h2 class="authenticated hidden"&gt;Authenticated&lt;/h2&gt;
      &lt;div class="authenticated hidden"&gt;
        &lt;div id="logout"&gt;
          &lt;button&gt;Log Out&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div id="get-name"&gt;
          &lt;button&gt;Get TwitchTV Name&lt;/button&gt;
          &lt;input readonly="readonly" size="50" value="Unknown"/&gt;
        &lt;/div&gt;
  
        &lt;div id="get-stream-key"&gt;
          &lt;button&gt;Get TwitchTV Stream Key&lt;/button&gt;
          &lt;input readonly="readonly" size="50" value="Unknown"/&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I communicate data between this client side javascript and Google App Engine? Thanks!</p>