Google JavaScript API v3

Эта статья о некоторых интересных вещах Google JavaScript API v3, как настроить аутентификацию с Google (OAuth 2.0) и выполнять некоторые запросы API. Я покажу вам, как сделать контент HTML с использованием шаблона jQuery.

Демо

Я надеюсь, что вы уже создали свой ​​собственный проект в API Google API, консоль , как я описал в руководстве Google API — Получить список контактов . Если нет, сделайте свой ​​собственный проект Google API. Следующий шаг, из «Google + API, поэтому, откройте консоль Google API, а затем выберите «Services». Здесь мы должны включить «Google + API»:

Google JavaScript API v3

После этого, откройте API, доступно для копирования «Client ID» и «API ключ» (в конце):
Google JavaScript API v3
Google JavaScript API v3
Теперь мы готовы начать программировать!

Шаг 1. HTML

Создайте пустой файл index.html с кодом:

index.html





<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Как к доставать ваш Google+ профиль info и другие деятельности с помощью Google JS API
    	<link href=
http://pixelcom.crimea.ua/"css/main.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src=
http://pixelcom.crimea.ua/"https://www.google.com/jsapi"></script><script type="text/javascript">// <![CDATA[
        google.load("jquery", "1.7.1");

// ]]></script>
<script type="text/javascript" src=
http://pixelcom.crimea.ua/"js/jsrender.js"></script><!-- define template for our units --><script id="gplusTemplate" type="text/x-jsrender">// <![CDATA[


<div id="{{>id}}" class="gp">
            <img src=
http://pixelcom.crimea.ua/"{{:actor.image.url}}" />
<div>


<a href=
http://pixelcom.crimea.ua/"{{:actor.url}}" target="_blank">{{:actor.displayName}}</a><span>{{:published}}</span>


<a href=
http://pixelcom.crimea.ua/"{{:url}}" target="_blank">{{:title}}</a>


{{:object.content}}

</div>

</div>

    
// ]]></script>

 <img class="google" alt="google plus" src=
http://pixelcom.crimea.ua/"google-plus.jpg" /></pre>
<center>
 <button id="login" style="visibility: hidden;">Авторизация</button>
<div id="author"></div>
<div id="actList"></div>
</center>
<pre>

<script type="text/javascript">// <![CDATA[
        // Your client ID
        var clientId = 'YOUR_CLIENT_ID_KEY';

        // Your API key
        var apiKey = 'YOUR_API_KEY';

        // The authorization scope
        var scopes = 'https://www.googleapis.com/auth/plus.me';

        // onliad initialization
        function onloadInitialization() {
            // set our own api key
            gapi.client.setApiKey(apiKey);

            // and checkAuth in 1 ms
            window.setTimeout(checkAuth, 1);
        }

        // check authorization
        function checkAuth() {
            gapi.auth.authorize({
                client_id: clientId,
                scope: scopes,
                immediate: true
            }, handleAuthResult);
        }

        // handle authorization result
        function handleAuthResult(authResult) {
            var authorizeButton = document.getElementById('login');
            if (authResult && ! authResult.error) {
                authorizeButton.style.visibility = 'hidden';
                makeGoogleApiCalls();
            } else {
                authorizeButton.style.visibility = '';
                authorizeButton.onclick = handleAuthClick;
            }
        }

        // handle onclick event of Login button
        function handleAuthClick(event) {
            gapi.auth.authorize({
                client_id: clientId,
                scope: scopes,
                immediate: false
            }, handleAuthResult);

            return false;
        }

        // make Google API calls: obtain logged-in member info and activity of friends
        function makeGoogleApiCalls() {
            gapi.client.load('plus', 'v1', function() {

                // Request1: obtain logged-in member info
                var request = gapi.client.plus.people.get({
                    'userId': 'me'
                });
                request.execute(function(aInfo) {

                    // prepare author info array for rendering
                    var authorInfo = [
                        {
                            'id': aInfo.id,
                            'actor': {'image': {'url': aInfo.image.url}, 'url': aInfo.url, 'displayName': aInfo.displayName},
                            'published': '',
                            'url': aInfo.url,
                            'title': 'My page at G+',
                            'object': {'content': ''}
                        }
                    ];
                    // and render it using 'gplusTemplate' template
                    $('#author').html(
                        $('#gplusTemplate').render(authorInfo)
                    );
                });

                // Request2: obtain friend's activity feed
                var restRequest = gapi.client.request({
                    'path': '/plus/v1/activities',
                    'params': {'query': 'Google+', 'orderBy': 'best'}
                });
                restRequest.execute(function(activityInfo) {

                    // render activity items using 'gplusTemplate' template
                    $('#actList').html(
                        $('#gplusTemplate').render(activityInfo.items)
                    );
                });
            });
        }

// ]]></script>
<script type="text/javascript" src=
http://pixelcom.crimea.ua/"https://apis.google.com/js/client.js?onload=onloadInitialization"></script>



В заголовке файл подключает библиотеку jQuery, jsrender.js (библиотека JsRender) и определит пользовательский шаблон HTML (gplusTemplate). Мы будем использовать этот шаблон для создания переченя видов деятельности G + друг.

В теле нашей странице кнопка «Авторизация» и 2 контейнера (для отображения нашей собственной информации и перечень видов деятельности:



<button id="login" style="visibility: hidden;">Авторизация</button></pre>
<div id="author"></div>
<div id="actList"></div>
<pre>



Теперь мы должны понять наш код JavaScript. Важное замечание — поставьте собственные ключи Client ID и API в начале этого кода JavaScript. Некоторые функции в середине предназначены для обращения с кнопкой входа (авторизации). Когда страница загружается установите тайм-аут для проверки авторизации. Если мы вошли в систему — мы прячем кнопку Авторизации. В противном случае — показать и добавить «OnClick» обработчик (чтобы вызвать авторизацию). Стандартный метод authorize() всегда показывает всплывающее окно, которое может быть немного раздражать, если вы просто пытаетесь обновить OAuth 2,0 маркер. Google OAuth 2.0 также поддерживает реализацию режима «immediate», который освежает знак без всплывающего окна.

Ну, а когда мы вошли в систему — мы можем сделать вызовы Google API. Мы собираемся сделать 2 запроса API: получение информацию и получить ленту друзей. Это очень просто:



// Request1: obtain logged-in member info
  var request = gapi.client.plus.people.get({
  'userId': 'me'
  });
  request.execute(function(aInfo) {
  // do something else
  });

  // Request2: obtain friend's activity feed
  var restRequest = gapi.client.request({
  'path': '/plus/v1/activities',
  'params': {'query': 'Google+', 'orderBy': 'best'}
  });
  restRequest.execute(function(activityInfo) {
  // do something else
  });


Следующая часть очень интересная. Как обычно, мы получим ответ в формате JSON. Таким образом, у меня вопрос — как использовать данные из ответа JSON в целях получения результата HTML-кода? Некоторые люди могут предлагать метод «for» (проходит через все элементы массива JSON), но я хотел бы вам предложить новый метод — шаблоны. Он имеет одно важное преимущество — скорость. В результате скорость может быть очень высокой, особенно при формировании больших списков. Посмотрите на этот код, и вы поймете, что сделать HTML-контент очень легко с использованием библиотеки JsRender:



var restRequest = gapi.client.request({
    'path': '/plus/v1/activities',
    'params': {'query': 'Google+', 'orderBy': 'best'}
});
restRequest.execute(function(activityInfo) {

    // render activity items using 'gplusTemplate' template
    $('#actList').html(
        $('#gplusTemplate').render(activityInfo.items)
    );
});


Скачать библиотеку JsRender jQuery  здесь  . Синтаксис шаблона JsRender:

Описание Пример Выход
Value of firstName property of the data item with no encoding {{:firstName}} Madelyn
Simple object path to nested property, with no encoding {{:movie.releaseYear}} 1987
Simple comparison {{:movie.releaseYear < 2000}} true
Value with no encoding {{:movie.name}} Star Wars IV: Return of the Jedi
HTML-encoded value {{>movie.name}} Star Wars: Episode VI: <span style=’color:purple;font-style: italic;’>Return of the Jedi</span>
HTML-encoded value {{html:movie.name}} Star Wars: Episode VI: <span style=’color:purple;font-style: italic;’>Return of the Jedi</span>

Заключение

Если у Вас есть предложения по поводу новых идей для статей — вы можете поделиться ими с нами. Удачи вам в вашей работе!

Статья подготовлена для вас коллективом сайта www.pixelcom.crimea.ua
Оригинал статьи: www.script-tutorials.com/google-javascript-api-practice-with-jquery-templates
Перевел: Виктор Клим
Правила использования материалов сайта!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>