Создайте индивидуальную поисковую систему с помощью поискового API Google.
Сразу предупреждаем, что это не совсем поисковая система, но вы определенно сможете научиться играть и настроить этот проект в соответствии со своими потребностями, используя API Google.
Мы собираемся создать собственную поисковую систему с использованием поискового API Google для получения запросов и отображения наиболее релевантных результатов поиска.
Чтобы создать эту поисковую систему, нам понадобятся:
- HTML
- CSS
- Javascript
- аккаунт Repl.it
- аккаунт Google
Мы также будем работать с API Google, и вам не стоит беспокоиться, если вы не знаете, как их использовать, потому что мы расскажем вам и об этом.
Начало работы
Мы предоставляем вам стартовые файлы для этого проекта и форк, чтобы вы могли внести изменения и приступить к созданию поисковой системы. Стартовый файл включает стили и предварительный код, чтобы помочь вам начать этот проект.
Когда все будет готово, перейдите к файлу index.html и добавьте следующее между тегами <body> </body>:
<img src="brewgle.png" width="525" class="image">
<div class="search">
<input type="text" id="search" class="input">
<button id="submit" class="searchbtn" onclick="submit()">Search</button>
</div>
Это приведет к ссылке на изображение с соответствующим стилем! Не стесняйтесь добавить свой собственный, чтобы сделать его индивидуальным. Затем мы добавим ввод поиска и кнопку, которая при нажатии вызывает submit().
Теперь нам нужно создать секцию для отображения содержимого! Добавьте следующее прямо под </div>.
<div id="buttons" class="buttons">
<button id="allbutton" class="all" onclick="submit()"></button>
</div>
<div id="content"></div>
Наконец, давайте обратимся к файлам javascript для подключения запросов к веб!
<script src="script.js"></script>
<script id="query" src="query.js"></script>
API Google
Суперкруто — теперь интерфейс завершен! Теперь давайте получим несколько запросов. В вашем файле query.js должна быть функция submit(). Внутри этой функции вставьте следующий код:
document.getElementById('buttons').style.display = 'block';
document.getElementById('content').innerHTML = '';
var val = document.getElementById('search').value;
var newelement = document.createElement('script');
newelement.src = `https://www.googleapis.com/customsearch/v1?key=API_KEY&cx=003606982592251140240:5xbiwoxb3m0&q=${val}&callback=hndlr`;
newelement.id = 'mainscript';
document.body.appendChild(newelement);
Теперь нам нужно настроить API Google Search! Чтобы начать, перейдите на портал разработчиков Google и убедитесь, что вы вошли в систему. После этого прокрутите страницу вниз до раздела «Получить ключ» и создайте проект под названием Search. Нажмите кнопку Далее, скопируйте свой ключ API и нажмите кнопку Готово. В файле query.js вы увидите переменную newelement.src. Там, где написано API_KEY, вставьте свой API-ключ, и все готово!
Что же это за URL и почему он такой длинный?
Форматирование результатов запроса
Теперь, когда все готово, давайте отформатируем наш контент. Перейдите в файл script.js и вы увидите функцию hdnlr(response). Внутри этой функции добавьте следующий код:
try {
} catch(error) {
}
По сути, функция будет пробовать некоторый код, и если он не сработает, то будет перехватывать & выводить ошибку. Внутри функции try добавьте следующий код:
document.getElementById('content').innerHTML += `
<div style="color: grey;">
Wohooo! About ${response.searchInformation.formattedTotalResults} results in ${response.searchInformation.formattedSearchTime} seconds!
</div>`
Это позволит получить количество результатов и время, затраченное на их получение, точно так же, как вы видите в Google! Затем, чтобы получить фактическую информацию, добавьте следующее в функцию try:
for (var i = 0; i < response.items.length; i++) {
document.getElementById('content').innerHTML += `
<div style="align-items: center;">
<br>
<a style="color: grey; font-size: 12px; text-decoration: none;" href=${response.items[i].link} target="_blank">${response.items[i].link}</a>
<a target="_blank" href=${response.items[i].link} style="text-decoration: none;">
<h2 style="margin-top: 2px;">${response.items[i].title}</h2>
</a>
<div style="margin-top: -8px;">
${response.items[i].htmlSnippet}
</div>
</div>`;
}
Теперь ваш код будет получать ссылку, заголовок и htmlSnippet для отображения каждого запроса. Для вывода любых ошибок добавьте в функцию catch следующее:
document.getElementById('content').innerHTML = 'error!';
И вот так, вы успешно собрали метаданные для каждого запроса! Теперь нажмите кнопку ‘Run’ в верхней части вашего Repl и наблюдайте, как происходит волшебство!
Если ваш код выдает ошибку, не стесняйтесь ссылаться на окончательный код!
Время волшебства!
Вот и все! Если вы нажмете кнопку «Выполнить» и перейдете по ссылке на вашу реплику, вы должны увидеть полнофункциональную поисковую систему к вашим услугам! Вот ссылка на окончательный код (за исключением ключа API), если вам нужна помощь!
Несколько важных моментов, о которых следует помнить:
- Пожалуйста, не сообщайте никому свой API-ключ
- Не превышайте 100 запросов в день (потому что Google предоставляет только 100 бесплатных запросов в день, иначе вы можете превысить свой лимит, заплатив за это дополнительную плату).
Счастливого хакинга и присоединяйтесь к Hack Club TechBrewers для создания более удивительных вещей 🚀.