2014-12-30 5 views
0

웹 프로그래밍 (Udacity에서 CS 253 클래스)을 배우기 시작합니다.Google App Engine과 자바 스크립트 라이브러리 통합

제 질문은 JS와 Google 응용 프로그램 엔진을 어떻게 통합합니까? 나는 이것이 웹 프로그래밍에 관한 근본적인 질문 일 수 있지만이 개념을 이해하는 방법에 대한 지침이 필요하다는 것을 알고있다.

Google App Engine에 Twitch Javascript API를 통합하려고합니다. 기본적으로 저는 사용자가 트 위치를 통해 로그인 할 수있는 작은 웹 사이트를 원하고 데이터베이스에 정보를 저장합니다. Twitch는 Javascript API 만 가지고 있기 때문에 실제로 이것이 가능한지 이해할 수 없습니다.

<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> 

가 어떻게이 클라이언트 측 자바 스크립트와 구글 앱 엔진 사이에 데이터를 통신 할 수

: 여기

내가 (자신의 자식 페이지의 예에서) 트 위치에 연결하기위한 완벽하게 작동 할 수있는 스크립트를입니까? 감사!

+0

정확히 무엇이 문제입니까? 클라이언트 측의 자바 스크립트 라이브러리에서 생성 된 데이터를 서버 측의 App Engine으로 보내는 방법은 무엇입니까? – MeLight

+0

예. 통신은 어떻게 작동합니까? 나는 GET과 POSTS 간의 기본적인 의사 소통을 이해하고 있지만 이것이 정확히 어떻게 실행되는지는 알 수 없다. 감사! – tabchas

답변

1

매우 광범위한 질문입니다. 하지만 일반적으로 귀하의 사례와 관련하여 :

  • App Engine 응용 프로그램에서 수신 측 (처리기)을 설정해야합니다. 클라이언트 쪽에서 요청을 처리합니다. JavaScript (Hello, world 예)
  • 두 번째로 실제로 서버로 데이터를 보내야합니다. 나는 당신이 jQuery를 사용하고있는 것을 본다. 안녕하세요, 세계 예에서 본 서버를 호출하려면 다음과 같이 작성하십시오 : $.get('/', function(data) {console.log(data);}). 이렇게하면 서버가 호출되어 서버에서받은 메시지가 콘솔에 출력됩니다.
+1

감사합니다. 귀하의 대답은 POST 및 GET 요청에 모두 해당된다는 사실을 깨닫게했습니다. 잘 정리하면 좋을 것입니다. – tabchas

+1

정확 :) 아주 환영합니다. – MeLight