Освоєння Ajax: Частина 9. Використання Google Ajax Search API (исходники), Різне, Програмування, статті

До цих пір в статтях даної серії упор робився виключно на ситуації, в яких клієнт відправляє запити серверним сценаріями і програмам. Саме так працює від 80 до 90 відсотків Ajax-додатків – Асинхронних Web-додатків, що використовують об’єкт XMLHttpRequest. Однак при такому підході вас обмежують ваша винахідливість і ваше вміння програмувати, або, по крайней мере, винахідливість та вміння вашої команди або фахівців вашої компанії.


Напевно бувають випадки, коли ви хочете щось зробити, але вам не вистачає необхідних технічних знань. Можливо, ви не знаєте тонкощів синтаксису або не вмієте знайти вірний алгоритм. Може бути, вам не вистачає для вирішення поставленого завдання даних або ресурсів (людей або інформації). Саме в цих випадках виникає думка: “Ах, якби в мене був готовий код!”. Ця стаття написана саме для таких ситуацій.


Сценарії і програми з відкритим кодом


Перш ніж я заглиблюючись в суть даної статті, тобто у використання публічних API у вашому Web-додатку, слід згадати про існування сценаріїв і програм з відкритим кодом. Не вдаючись у деталі, відкритим кодом називають код, який можна певною мірою вільно використовувати в своєму власному додатку. Говорячи в цілому, в більшості випадків можна взяти відкритий код, написаний кимось іншим, і просто скопіювати його в своє середовище без всяких обмежень.


При використанні відкритого коду вам, можливо, доведеться додати до свого додатком додаткову документацію або викласти зроблені вами зміни у відкритий доступ. Незалежно від того, яку програму ви використовуєте, сенс в наступному – ви можете використовувати код, який вам або просто не доводиться писати самому, або ви взагалі не змогли б його написати через відсутність необхідних ресурсів. Проекти на зразок Apache дозволяють легко скористатися роботою, зробленою іншими. Не турбуйтеся, вони самі хочуть, щоб ви використовували результати їх роботи!


Онлайнові статті та керівництва


Було б нерозумно в статті, опублікованій на сайті IBM developerWorks, Не згадати про цінність різних онлайнових ресурсів, наявних в Інтернеті, починаючи зі статей і керівництв і закінчуючи технічними оглядами. В Інтернеті є буквально сотні тисяч навчальних матеріалів, і серед них ви могли б знайти близько тисячі статей про Ajax – я один уже написав майже десяток! Більшість з них містять працюючий код, приклади, файли та багато інших корисних речей.


Якщо у вас немає можливості написати код програми або сценарій для сервера або ви не можете знайти програму з відкритим кодом або сценарій, зайдіть на Google і спробуйте набрати опис того, що ви шукаєте. Напевно ви знайдете статтю, або підказку, або якийсь фрагмент, який вам допоможе. Або зайдіть на сайт developerWorks і зробіть те ж саме – в більшості випадків ви виявите необхідну частину коду або навіть цілий сценарій з корисними коментарями та описом його роботи.


Використання публічних API


У багатьох випадках проблема, з якою ви стикаєтеся, не є чисто технічною. Коли потрібна не просто допомога з написання сценарію або частини коду, а дані або ресурси, яких у вас просто немає, керівництва або сценарію з відкритим кодом буде вже недостатньо. Розглянемо, наприклад, випадок, коли ви хочете розмістити на своїй сторінці пошукову систему. Тобто передбачається наявність даних, серед яких можна буде проводити пошук. А якщо ви хочете здійснювати його і за межами інформації, якою володіє ваша організація?


У випадках, коли ви обмежені не технічними можливостями, а даними, вирішити проблему допоможуть публічні API. Публічний API дозволить вам використовувати програму, яка розміщена на іншому комп’ютері або на чужому сервері і використовує чужі дані. Сам по собі API визначає спосіб взаємодії з цією програмою. Наприклад, публічний API до пошукової системи Google створює запити на пошук, а код Google здійснює пошук по своїх базах даних і повертає результат у вашу програму. Таким чином, ви використовуєте в своїх інтересах не тільки чужі навички написання програм, а й значно більші сховища даних, ніж ті, які є у вашій компанії.


Установки для використання Google Ajax Search API


Google, ймовірно, саме революційне додаток епохи Інтернету. Всі, від малого до великого, знають про Google, навіть якщо вони нічого не розуміють в його роботі. Google – це не тільки надпопулярний і корисний механізм пошуку. Компанія настільки віддана ідеї надання безкоштовних (в більшості своїй) послуг, що не дивно, що у неї також є і публічний API, який ви можете використовувати в своїх програмах. У цьому розділі я розповім вам про налаштування, необхідних для використання Google API, і підготую грунт для розповіді про те, як змусити ваш додаток асинхронно взаємодіяти з Google.


Отримання ключа розробника від Google


В даній статті найбільша увага приділяється Google Ajax Search API. Детальніше дізнатися про це API можна, відвідавши сторінку Google Ajax Search API, Яка показана на малюнку 1.


Рисунок 1. Сторінка Google Ajax Search API
Сторінка Google

Спочатку ви натиснете на посилання Sign up for a Google AJAX Search API key. Після цього відкриється сторінка, на якій ви можете підписатися на використання Google API. Вам потрібно буде прийняти кілька правил його використання (всі вони, на мій погляд, абсолютно нешкідливі) і розмістити URL Web-сайту, на якому працює ваш додаток (див. малюнок 2).


Рисунок 2. Підписка на використання Google’s Ajax Search API
Підписка на використання Google





 



Який URL мені слід використовувати?

URL, який запитує у вас Google – це по суті домен, на якому знаходиться ваш сайт. Якщо у вас є власний домен, як у мене, то ви можете використовувати його. Тільки слід бути більш точним, якщо ваш сайт використовує субдомен або окремий шлях в межах великого домену; в цьому випадку вам може знадобитися URL типу http://www.earthlink.net/ ~ bmclaugh або http://brett.earthlink.net. За винятком цих випадків, не варто занадто сильно конкретизувати URL – просто пошліть Google кореневої URL, який ви використовуєте для доступу до всього свого сайту, і ви зможете використовувати API скрізь в межах цього URL.


КПосле того як ви прочитаєте угоду і поставите галочку, введіть ваш URL, натисніть Generate API Key (Згенерувати API-ключ) і почекайте секунду-дві. Тепер вам потрібно увійти на сайт Google під своїм обліковим записом або створити новий обліковий запис. Це досить стандартна процедура, і ви зумієте з нею впоратися самостійно. Як тільки ви закінчите, з’явиться віконце, в якому будуть показані виданий вам ключ, ваш URL і приклад сторінки. Ключ буде виглядати приблизно так:






ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg

Документація по API від Google


Перш ніж використовувати щойно отриманий ключ приділіть трохи часу вивченню документації по Google API. Хоча дана стаття являє собою непоганий вступ, я вважаю, що вивчення документації по Google API буде вам корисно, і, можливо, воно наштовхне вас на цікаві ідеї про те, як використовувати Google в додатках на своєму сайті.


Найпростіше додаток з використанням пошуку Google


Візьмемо тестову сторінку, запропоновану Google, трошки її змінимо і подивимося, як вона працює.


Створення віконця пошуку


У лістингу 1 показана досить проста Web-сторінка; скопіюйте її в ваш улюблений редактор, збережіть і завантажте на домен або URL, який ви вказали для Google в попередньому розділі.


Лістинг 1. HTML для простого додатка з пошуком Google





<html>
<head>
<title>My Google AJAX Search API Application</title>
<link href=”http://www.google.com/uds/css/gsearch.css”
type=”text/css” rel=”stylesheet” />
<script
src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=
YOUR KEY HERE

type=”text/javascript”> </script>
<script language=”Javascript” type=”text/javascript”>
function OnLoad() { / / Створюємо елемент керування для запуску пошуку Google
var searchControl = new GSearchControl();
/ / Визначаємо, що з’являється в результатах пошуку
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
/ / Вказуємо ваше місце розташування, / / Щоб встановити вихідну точку пошуку
localSearch.setCenterPoint(“Dallas, TX”);
/ / “Малюємо” HTML-форму для елемента
searchControl.draw(document.getElementById(“searchcontrol”));
}
</script>
</head>
<body onload=”OnLoad()”>
<div id=”searchcontrol” />
</body>
</html>

Не забудьте замінити виділений текст своїм ключем розробника, отриманими від Google. Коли ви завантажите цю сторінку, то побачите щось на зразок такого:


Рисунок 3. Найпростіша Пошукова форма для Google
Найпростіша Пошукова форма для Google

Зовсім небагато, але за цією маленькою формою криється вся міць Google.


Запуск пошуку


Наберіть в пошуку слово, натисніть Search, і нехай Google працює. Ви швидко побачите кілька результатів, як показано на малюнку 4.


Рисунок 4. Результати пошуку Google
Результати пошуку Google

Додавання попереднього пошуку


Очевидно, з результатами пошуку сторінка виглядає набагато краще – відео, блоги та результати пошуку надають сторінці більш приємний вигляд. Ви можете включити попередній пошук – задане вами слово, результати пошуку за яким з’являться, коли користувач завантажить сторінку в перший раз. Для цього треба всього лише додати виділену в лістингу 2 рядок у ваш код JavaScript.


Лістинг 2. Додавання попереднього пошуку





function OnLoad() { / / Створюємо елемент керування для запуску пошуку Google
var searchControl = new GSearchControl();
/ / Визначаємо, що з’явиться в результатах пошуку
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
/ / Вказуємо ваше місце розташування, щоб встановити вихідну точку пошуку
localSearch.setCenterPoint(“Dallas, TX”);
/ / “Малюємо” HTML-форму для елемента
searchControl.draw(document.getElementById(“searchcontrol”));
searchControl.execute(“Christmas Eve”);
}

Ви можете вставити в код пошуку своє власне ключове слово, щоб на стартовій сторінці з’являлося те, що ви хочете.


Розбір JavaScript


Перш ніж я продовжу, поглянемо на основні команди. По-перше, створюється новий GSearchControl, як показано в лістингу 3. Це – конструкція, яка дозволяє проводити пошук:


Лістинг 3. Створення нового GSearchControl





function OnLoad() { / / Створюємо елемент керування для запуску пошуку Google
var searchControl = new GSearchControl();

}

Далі створюється новий локальний пошук з використанням спеціальної конструкції Google GlocalSearch, Яка дозволяє здійснювати пошук з прив’язкою до місця розташування. Локальний пошук проілюстрований в лістингу 4.


Лістинг 4. Створення нового локального пошуку





function OnLoad() { / / Створюємо елемент керування для запуску пошуку Google
var searchControl = new GSearchControl();
/ / Наступні рядки дозволяють задати, що з’явиться в результатах пошуку
var localSearch = new GlocalSearch();

/ / Вказуємо ваше місце розташування, щоб встановити вихідну точку пошуку
localSearch.setCenterPoint(“Dallas, TX”);

}

Все це стає досить очевидно після вивчення методів та об’єктів, які треба викликати. Код в лістингу 4 створює новий локальний пошук і потім задає центральну точку пошуку.


У наведеному нижче лістингу 5 містяться кілька рядків, які повідомляють елементу управління пошуком, які саме типи пошуку йому слід виконувати.


Лістинг 5. Можливі типи пошуку





function OnLoad() { / / Створюємо елемент керування для запуску пошуку Google
var searchControl = new GSearchControl();
/ / Визначаємо, що з’явиться в результатах пошуку
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
/ / Вказуємо ваше місце розташування, щоб встановити вихідну точку пошуку
localSearch.setCenterPoint(“Dallas, TX”);

}

Ви можете знайти повні описи більшості цих типів, я ж наведу тут короткі:



Ви вже бачили, як задати попередній пошук. Справа залишається за малим – викликати метод draw(), Як показано в лістингу 6. Використовуючи даний метод, ви викликаєте елемент DOM в своєму HTML-файлі (щоб освіжити в пам’яті інформацію по DOM, зверніться до попередніх статей з цієї серії). Тепер готовий до використання елемент управління чудесним чином з’явиться у вашій формі.


Лістинг 6. Створення елемента керування пошуком





function OnLoad() { / / Створюємо елемент керування для запуску пошуку Google
var searchControl = new GSearchControl();
/ / Визначаємо, що з’явиться в результатах пошуку
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
/ / Вказуємо ваше місце розташування, щоб встановити вихідну точку пошуку
localSearch.setCenterPoint(“Dallas, TX”);
/ / “Малюємо” HTML-форму для елемента
searchControl.draw(document.getElementById(“searchcontrol”));
searchControl.execute(“Christmas Eve”);
}

Але де ж тут Ajax?


Звичайно, далеко не очевидно, де в простому блоці пошуку асинхронність. Здорово, що ви можете додати блок Google-пошуку свого Web-додаток, але це серія про додатки Ajax, а не про Google-пошуку. Так де ж тут Ajax?


Введіть ключове слово для пошуку, натисніть кнопку Search, І ви побачите, властиве Ajax: результати пошуку з’являються без перезавантаження сторінки. Це відмітний знак більшості додатків Ajax – видиме зміст сторінки змінюється без її перезавантаження. Ясно, що відбувається щось виходить за рамки нормальної моделі “запит / відповідь”. Але де XMLHttpRequest? Де об’єкт request, Про який ви читали в попередніх статтях, де DOM і керування сторінкою? Все це включено у дві строчки в вашому HTML.


Google бере JavaScript на себе


Найголовніше, про що я ще не говорив, показано в лістингу 7.


Лістинг 7. Вкрай важливий файл JavaScript




                <script
src=”http://www.google.com/uds/api?file=uds.js
&v=1.0&key=
[YOUR GOOGLE KEY] ”
type=”text/javascript”> </script>

Синтаксис тут не особливо цікавий, найголовніше полягає в файлі uds.js, в якому знаходяться всі сценарії JavaScript, необхідні для функціонування блоку пошуку. Це використання чужого коду в самому правильному розумінні – вільний доступ до коду, використовується в додатку. Це дуже важливо, тому що Google забезпечує підтримку користувачів, і коли компанія виробляє оновлення файлу з JavaScript, ви отримуєте його автоматично. Google не поміняє API, не повідомивши вам про це, тому ваш код буде продовжувати працювати, навіть якщо цей JavaScript зміниться.


Об’єкт GSearchControl


Є ще одна прихована річ – код для об’єкта GSearchControl, Який створюється в JavaScript-функції onLoad(). Щоб створити цей об’єкт, вам потрібно просто викликати код, показаний в лістингу 8.


Лістинг 8. Створення об’єкта GSearchControl




 / / Створюємо елемент керування для запуску пошуку Google
var searchControl = new GSearchControl();

Необхідний HTML-код теж досить простий: потрібен тільки тег div з ID, на який може посилатися JavaScript, як показано в лістингу 9.


Лістинг 9. HTML, необхідний для створення пошукового елементу управління




                <div id=”searchcontrol” />





 



Як виглядає JavaScript від Google?

Зрозуміти використовуваний Google JavaScript не так-то просто. Спочатку JavaScript-файл uds.js обчислює деякі настройки lzk конкретного місця розташування, виконує специфічні для Google дії, перевіряє ваш ключ, а потім завантажує два інших сценарію http://www.google.com/uds/js/locale/en/uistrings.js і http://www.google.com/uds/js/uds_compiled.js. Ви можете завантажити ці два файли і переглянути їх, якщо вам це цікаво, але майте на увазі: код дуже складний, а форматування просто жахливе! Для більшості з вас мета – дізнатися, як використовувати ці файли, а не зрозуміти, що вони роблять рядок за рядком.


І знову код Google робить все сам. Створює текстові поля, графіку і кнопки, які викликають функції JavaScript. Так що ви безкоштовно отримуєте безліч інструментів, і поки ви в загальних рисах розумієте, як це працює, ви легко можете використовувати цей код і успішно застосовувати його в своєму додатку.


Ajax – це більше, ніж просто код


Створення Ajax-додатків полягає не тільки в XmlHttpRequest; Але і в способах поводження з Web-додатками, а вони засновані на асинхронності. І хоча ви самі не писали ніякого спеціального Ajax-коду, ви вже створили додаток Ajax. За це спасибі Google – він зробив більшу частину роботи за вас!


Йдемо далі


Тепер можна виконати всі ці ж кроки для свого застосування. У простому випадку можна просто перетягнути div на вашу Web-сторінку, додати JavaScript, показаний в лістингу 1, – І ви отримаєте готовий до використання пошук Google.


Але свято на цьому не закінчується. Можна не обмежувати себе певним набором опцій і елементів управління. Поекспериментуйте з Web-результатами, результатами пошуку по блогам, відео та інтегруйте їх у свої Web-додатки, де це доречно. Ви можете створити декілька елементів управління пошуком, кожен з яких буде орієнтований на певний тип результату. Ви можете включити елемент управління Google-пошуку в елемент span, прямо в середину вмісту вашого додатки, а не з краю, як в div. У будь-якому випадку важливо, щоб пошук Google був адаптований під ваші потреби, а не ви переробляли свій додаток під Google.


Висновок


Зовсім нескладно побудувати додаток, грунтуючись на тому, що ви дізналися з даної статті, і додати блоки пошуку Google та інші корисні речі з Google API в своє Ajax-додаток. Набагато важливіше, що ви тепер маєте уявлення про використання публічних API взагалі. Наприклад, Amazon.com надає публічний API, який дозволяє виконувати такі ж типи пошуку, що і Google, за книгами й іншим товарах магазину Amazon. Ви можете зібрати колекцію цікавих вам публічних API і просунутися настільки далеко, наскільки дозволять ваші вміння. Фактично ви можете з легкістю створити сайт, інтегрований з Google, Amazon, Flickr і ін


Тому, хоча важливо навчитися використовувати Google – через пошукових алгоритмів і величезної кількості даних, що надаються Google, – ще важливіше навчитися використовувати будь-які публічні API. Також варто почати думати про програму не тільки як про втілення вашого досвіду програмування; в дійсності воно може представляти собою шлюз до різних масивів даних. Ці дані можуть зберігатися на серверах Google, Amazon.com, del.icio.us або ще де-небудь. Додайте до цього свої бізнес-підходи та проектні ідеї, і ви отримаєте потужне і надійне рішення, що перевершують те, що ви могли б запрограмувати самостійно.


Так що рухайтеся вперед і створюйте по-справжньому великі програми. Використовуйте дані звідусіль і не обмежуйтеся тільки тим, що пишете самі. Пробуйте, а я в наступній статті повернуся до деяких технічним тонкощам, таким, як формати даних.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*