Анатолий Демидович: Google+ API. Ищем профиль в Google+.

Разумеется проще через UI, но в нашем случае рассмотрим процедуру поиска публичного профиля с точки зрения использования API. Требования: аккаунт Google, браузер, блокнот и немного терпения.

Открываем в браузере консоль API. Создаем новый проект.

Активируем Google+ API.

Переходим к параметрам доступа к проекту (вкладка API Access), копируем ключ проекта (API key).

Открываем блокнот, рисуем интерфейс: пара кнопок, текстовое поле и блочный элемент для отображения результатов.

<html>
 <head>
  <title>Plus People Finder</title>  
 </head>
 <body>  
  <button onclick="getPlus()">Поиск</button>
  <input id="txt" type="text" onkeyup="onKeyup(event)" />
  <div id="pp"></div>
  <button id="btn">Еще результаты</button> 
 </body>
</html>

Расставим элементы на свои места с помощью CSS. Вторую кнопку пока спрячем - будем отображать, если количество результатов запроса превысит количество отображенных.

<html>
 <head>
  <title>Plus People Finder</title>
  <style type="text/css">
   input{width:100%; height:30px; margin-top:1px; font:normal 18px sans-serif;}
   .pp{width:100%; height:40px; border-top:1px solid #000; border-bottom:1px solid #000; margin:1px; background-color:#fff;}
   .pp:hover{background-color:#ddd;}
   img{width:40px; height:40px;}
   a{font:bold 18px sans-serif; margin-left:10px; vertical-align:top; text-decoration: none; outline: 0;}
   a:hover{text-decoration:underline; color:#f00;}
   button{width:100%; height:30px; text-align:center; font:bold 18px sans-serif; cursor:pointer;}
   #btn{display:none;}   
  </style>
 </head>
 <body>  
  <button onclick="getPlus()">Поиск</button>
  <input id="txt" type="text" onkeyup="onKeyup(event)" />
  <div id="pp"></div>
  <button id="btn">Еще результаты</button> 
 </body>
</html>

Пишем скрипт. Не забываем вставить ключ проекта, скопированный ранее, в переменную API_KEY.
С максимальным количеством результатов запроса (переменной MAX_RESULTS) можно экспериментировать в диапазоне от 1 до 20.

<html>
 <head>
  <title>Plus People Finder</title>
  <style type="text/css">
   input{width:100%; height:30px; margin-top:1px; font:normal 18px sans-serif;}
   .pp{width:100%; height:40px; border-top:1px solid #000; border-bottom:1px solid #000; margin:1px; background-color:#fff;}
   .pp:hover{background-color:#ddd;}
   img{width:40px; height:40px;}
   a{font:bold 18px sans-serif; margin-left:10px; vertical-align:top; text-decoration: none; outline: 0;}
   a:hover{text-decoration:underline; color:#f00;}
   button{width:100%; height:30px; text-align:center; font:bold 18px sans-serif; cursor:pointer;}
   #btn{display:none;}   
  </style>
 <script>   
  function getPlus(pageToken) {     
   var name = document.getElementById('txt').value;   
   var pp = document.getElementById('pp');
   var btn = document.getElementById('btn');
   if (name == '') {
    clearDiv(pp);
    btn.style.display = 'none';
    return;
   }
   
   if(!pageToken) clearDiv(pp);
   
   var API_KEY = 'Ключ_Вашего_Проекта';
   var MAX_RESULTS = 20;
   var requestString = 'https://www.googleapis.com/plus/v1/people?query=' + name + 
     '&maxResults=' + MAX_RESULTS + '&fields=items(displayName%2Cimage%2Curl)%2CnextPageToken&key=' + API_KEY;
   if (pageToken) requestString += '&pageToken=' + pageToken;  
   var xhr = new XMLHttpRequest();  
   xhr.open('GET', requestString, true);
   xhr.setRequestHeader('Content-Type', 'application/json');
   xhr.onreadystatechange = function() {   
    if(xhr.readyState != 4 || xhr.status != 200) return;
    clearTimeout(timeout);
    var res = JSON.parse(xhr.responseText);   
    for (var i=0; i<res.items.length; i++) {     
     var div = pp.appendChild(document.createElement("div"));
     div.className = 'pp';
     var img = div.appendChild(document.createElement("img"));     
     img.src = res.items[i].image.url;     
     var anc = div.appendChild(document.createElement("a"));
     anc.className = 'anc';
     anc.href = res.items[i].url;
     anc.target = '_blank';
     anc.appendChild(document.createTextNode(res.items[i].displayName));     
    }    
    
    if(res.items.length == MAX_RESULTS) {    
     btn.style.display = 'block';
     btn.onclick = function() { getPlus(res.nextPageToken) };
    } else {
     btn.style.display = 'none';
    }
    
   }   
   xhr.send(null);
   var timeout = setTimeout( function(){ xhr.abort() }, 5000);
  }
  function onKeyup(e) {
   var keyCode = e.which || e.keyCode;   
   if(keyCode == 13) getPlus();    
  }
  function clearDiv(div) {
   while(div.lastChild)
    div.removeChild(div.lastChild);
  }
 </script>
 </head>
 <body>  
  <button onclick="getPlus()">Поиск</button>
  <input id="txt" type="text" onkeyup="onKeyup(event)" />
  <div id="pp"></div>
  <button id="btn">Еще результаты</button> 
 </body>
</html>

Сохраняем, открываем в браузере, тестируем.

We are the champions :). Если терпение еще не закончилось - добавляем AJAX Style.

p.s. Полученное приложение поддерживается "современными" браузерами.

Анатолий Демидович

Страницы

понедельник, 8 апреля 2013 г.

Google+ API. Ищем профиль в Google+.

Комментариев нет:

Отправить комментарий

Страницы

понедельник, 8 апреля 2013 г.

Google+ API. Ищем профиль в Google+.

Комментариев нет:

Отправить комментарий

понедельник, 8 апреля 2013 г.