Страницы

среда, 3 апреля 2013 г.

Google API. Веб-приложение за 5 минут.

Заголовок говорит сам за себя. На регистрацию проекта уйдет больше времени, чем на кодинг. Приложение будет укорачивать URL, для чего используем URL Shortener API. Требования: аккаунт Google, браузер, блокнот и 5 минут времени. Go Go Go :).

Открываем в браузере консоль API по адресу https://code.google.com/apis/console/.
Создаем новый проект.
Если это наш первый проект, нажимаем на большую синюю кнопку.

Активируем URL Shortener API.

Переходим к параметрам доступа к проекту (вкладка API Access) и копируем ключ проекта (API key).
Открываем блокнот, пишем нехитрый код.
<html>
 <head>
  <title>URL Shortener</title>
  <style type="text/css">
   button{width:100%; margin-bottom:1px; font:bold 18px Georgia serif; cursor:pointer;}
   input{width:100%;}
   a{width:50%; display:inline-block;}
  </style>
  <script>   
  function shorten() {   
   var url = document.getElementById('txt').value;
   if (url == '') return;  
   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyDkSRiCPieUrlMLDz46cKyEkHhPD1D-X1A', true);
   xhr.setRequestHeader('Content-Type', 'application/json');
   xhr.onreadystatechange = function() {
    if(xhr.readyState != 4 || xhr.status != 200) return;
    var res = JSON.parse(xhr.responseText)
    var div = document.body.appendChild(document.createElement("div"));
    var s1 = document.createElement("a");
    s1.href = res.id;
    s1.target = '_blank';
    s1.appendChild(document.createTextNode(res.id));
    var s2 = document.createElement("a");
    s2.href = res.longUrl;
    s2.target = '_blank';
    s2.appendChild(document.createTextNode(res.longUrl));
    div.appendChild(s1);
    div.appendChild(s2);   
   }
   xhr.send(JSON.stringify({'longUrl': url}));
  }
  function keyUp(e) {
   var keyCode = e.which || e.keyCode;    
   if(keyCode != 13) return;
   shorten();
  }
  </script>
 </head>
 <body>
  <button onclick="shorten()">Shorten</button>
  <input id="txt" type="text" onkeyup="keyUp(event)"/> 
 </body>
</html>

Сохраняем, открываем в браузере, тестируем.
Для полноты ощущений размещаем файл на Google Drive
That's all folks.

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