Тема: 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=Ключ_Вашего_Проекта', 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. Полученное приложение поддерживается "современными" браузерами.
p.p.s. Оригинал статьи.