<![CDATA[Серый форум — Google API. Веб-приложение за 5 минут.]]> http://forum.script-coding.com/viewtopic.php?id=8205 Wed, 03 Apr 2013 11:31:39 +0000 PunBB <![CDATA[Google API. Веб-приложение за 5 минут.]]> http://forum.script-coding.com/viewtopic.php?pid=71058#p71058 Заголовок говорит сам за себя. На регистрацию проекта уйдет больше времени, чем на кодинг. Приложение будет укорачивать URL, для чего используем URL Shortener API. Требования: аккаунт Google, браузер, блокнот и 5 минут времени. Go Go Go .
http://1.bp.blogspot.com/-C--L4WIpyCo/UVwAqkmqFDI/AAAAAAAAAtA/z4162Vwb7RI/s200/shorten-google-map-URL.jpg
Открываем в браузере консоль API по адресу https://code.google.com/apis/console/.
Создаем новый проект.
Если это наш первый проект, нажимаем на большую синюю кнопку.
http://3.bp.blogspot.com/-JOLa1YO1ZUo/UVwCA16n1II/AAAAAAAAAtM/O1qCqipwA64/s1600/uapi1.png
Активируем URL Shortener API.
http://2.bp.blogspot.com/-gutk0GzkqJw/UVwCL80NEKI/AAAAAAAAAtU/WqCh2A5w_T4/s1600/uapi2.png
Переходим к параметрам доступа к проекту (вкладка API Access) и копируем ключ проекта (API key).
http://4.bp.blogspot.com/-pt6ujLFcT-M/UVwCY5SMLSI/AAAAAAAAAtc/2ef1gdMrzug/s640/uapi4.png
Открываем блокнот, пишем нехитрый код.


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

Сохраняем, открываем в браузере, тестируем.
http://2.bp.blogspot.com/-lrvtnGkkoKY/UVwDOOjs7WI/AAAAAAAAAto/w9otzp2vPoM/s1600/uapi5.png

Для полноты ощущений размещаем файл на Google Drive.
That's all folks.

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

]]> Wed, 03 Apr 2013 11:31:39 +0000 http://forum.script-coding.com/viewtopic.php?pid=71058#p71058