Как создать Mashup, объединив 3 разных API

18 января 2018

В этом уроке вы узнаете, как создать mashup из трех различных API, включая интеграцию с Google Maps. Эта идея возникла, когда я искал в каталоге API ProgrammableWeb несколько API-интерфейсов, которые дополняли друг друга настолько, что я мог использовать их, чтобы предоставить другим данные. То, что я придумал, будет известно как «Beer Mashup».

Шаг 1. Обнаружение API

Просматривая каталог ProgrammableWeb, я нашел инструмент геолокации IP, называемый ipLoc. Он просто принимает в IP-адрес и возвращает на него соответствующие данные о местоположении, такие как состояние, город, страна, почтовый индекс и т. Д.

Затем я нашел очень классный проект картирования пива, который имеет огромный каталог баров и пабов не только в США, но и во многих других странах. Мгновенно я заметил, что это был прекрасный комплимент ipLoc, потому что для API BeerMapping требуется город (который мы можем получить из API ipLoc), чтобы вернуть список локальных баров и пабов.

Наконец, я также хотел интегрировать Google Maps в этот mashup, чтобы отобразить адреса баров и пабов, чтобы добавить немного интерактивности к странице, а не просто отображать каждый столбец в простом списке HTML.

Шаг 2. Инициализация переменных

Я обычно считаю, что лучше всего запускать документы PHP с некоторыми переменными, которые я хочу установить глобально внутри скрипта. Здесь я добавляю строку, которая замалчивает предупреждающие сообщения PHP (Google Maps выплевывает многие из них, если вы пытаетесь сопоставить неверный адрес) и мои ключи BeerMashup и API Карт Google. Мы закончим использование этих ключей API, когда мы перейдем к их соответствующим шагам ниже.

<?php
    error_reporting(E_ERROR|E_PARSE);  //Silence Errors
//Initialize Variables
    $beer_api = 'YOUR_BEERMAPPING_API_KEY';
    $gmaps_api = 'YOUR_GOOGLEMAPS_API_KEY';

Шаг 3. Настройка IP-геолокации

API-интерфейс ipLoc позволяет вам указать IP-адрес для получения данных или использовать IP-адрес по умолчанию, который находит скрипт.

Версия по умолчанию: http: iploc.mwudka.com iploc json nStatic Version (IP-адрес жестко запрограммирован): http: iploc.mwudka.com iploc 68.162.155.110 jso

//Set Locatio
    //Visitor IP Address
    $ip = getenv("REMOTE_ADDR");
    //via IPLoc
    $iploc = file_get_contents("http://iploc.mwudka.com/iploc/$ip/json/");  //Format: JSO
    $ipdata = json_decode($iploc, true);

После небольшого тестирования я понял, что версия API ipLoc по умолчанию находила местоположение моего хостинг-провайдера (Scottsdale, AZ, USA), а не IP-адрес моего домашнего компьютера (Питтсбург, Пенсильвания, США). Чтобы обойти это, я решил использовать статическую IP-версию API (строка 2 выше) и передал в IP-адрес, который был обнаружен переменной getenv («REMOTE_ADDR»).

После проверки того, были ли данные успешно возвращены как декодированная строка в формате json, нам нужно извлечь только те данные, которые мы хотим передать API BeerMapping, который является городом и штатом.

// Error checking
if ($ipdata['city']) {
    $city = $ipdata['city'];
    $state = $ipdata['region'];
    $location = $city .", ". $state;
} else {
    $err = "No location data returned for your IP address: ". $ip;
}

Шаг 4. Интеграция Карт Google

Этот шаг нужно сделать сейчас, потому что следующий шаг добавит точки местоположения на Карты Google - и Google Maps должен быть инициализирован до того, как это произойдет.

Чтобы сделать интеграцию с Google Maps максимально простой и безболезненной, я заручился поддержкой отличного класса PHP под названием Phoogle из System Seven Designs. Этот класс позаботится о том, чтобы весь Google Maps API тяжело подходил для нас, просто позволяя нам беспокоиться о данных.

Все, что нам нужно сделать, чтобы заставить это работать, - сначала включить файл класса, который мы скачали: phoogle.php, а затем установить некоторые основные параметры карты, такие как высота, ширина, уровень масштабирования и ваш ключ API Карт Google. (Получить один из них здесь).

//Phoogle - GoogleMaps PHP Class
    require_once 'phoogle.php';
    $map = new PhoogleMap();
    $map->setAPIKey($gmaps_api); //Using the variable we set in Step 2
    $map->setHeight(450);
    $map->setWidth(750);
    $map->zoomLevel = 6;
    $map->showType = false;

Шаг 5. API-интерфейс BeerMapping

Поскольку у нас есть объединенный город и состояние в переменной $ location из шага 3, у нас есть все, что нужно, чтобы извлекать данные из API BeerMapping. Конечно, нам также нужен один из их ключей API, который можно запросить здесь (примерно за 30 секунд процесс, начало до конца).

Вызов API BeerMapping выглядит следующим образом: nReal Пример: http: beermapping.com webservice loccity 71515667a86b8ec7f58cd22e3af86f6e pittsburgh, pa

После подстановки наших переменных для ключа API (шаг 2) и местоположения (шаг 3) наш вызов API BeerMapping теперь выглядит следующим образом: nOur Пример: http: beermapping.com webservice loccity $ beer_api $ locatio

После небольшой игры с этим API я обнаружил, что в этом месте не может быть пробелов. Таким образом, нижеприведенный код сначала избавляется от пространства, имеющего формат «город, штат». Затем он заменяет все другие пробелы в месте с символом подчеркивания «_».

//Format Location for use with API
    $locationF = str_replace(", ", ",", $location); // Remove space before "State"
    $locationF = str_replace(" ", "_", $locationF); // Replace space with underscore in "City" name

Их данные могут быть возвращены только в формате xml, поэтому мы можем легко извлечь данные, возвращенные этим вызовом, с помощью функции simplexml_load_file PHP.

//BeerMapping - Format: XML
    $beerdata = simplexml_load_file ("http://beermapping.com/webservice/loccity/$beer_api/$locationF");

Как видно из изображения, мы сначала загружаем весь файл в переменную $ beerdata. После проверки, чтобы мы вернули результаты...

// Error checking
$beererr = $beerdata->location->id; //$beererr will be 0 if there were no locations returned
if ($beererr == '0') {
    $err = "No breweries were found in ". $location;
} else {

... следующим шагом будет цикл через каждый бар, возвращенный в вызове, извлечение всех данных, которые нам нужно передать в Карты Google (шаг 4).

        $breweries = $beerdata->location;
        $barcount = count($breweries); //How Many?
        foreach ($breweries as $brewery) {
            $name = $brewery->name;
            $link = $brewery->reviewlink;
            $street = $brewery->street;
            $city = $brewery->city;
            $state = $brewery->state;
            $zip = $brewery->zip;
            $phone = $brewery->phone;
            //Location Point set for the Google Maps API
            $map->addAddress("$street $city $state $zip", "<a href='$link' title='$name BeerMap'>$name</a><br/>$street<br />$city, $state $zip<br />Phone: $phone");
        }
    }
?>

Строка 1 выше устанавливает расположение структуры «местоположений». Строка 2 подсчитывает количество «местоположений», возвращаемых результатом API. Оставшиеся строки используют цикл foreach для циклического перемещения по каждому «местоположению» и вытаскивают его адресную информацию. Строка 14 устанавливает «точку» для каждой пивоварни на нашей карте Google.

Шаг 6. Генерация HTML

После завершения всего созданного нами PHP-кода мы теперь можем работать над его отображением. Первые несколько строк, показанных ниже, являются стандартными в любом документе HTML, но после этого мы вернемся к использованию PHP. Сначала мы проверяем, не является ли переменная $ err FALSE, что означает, что переменная $ err пуста или что мы никогда не получали ошибку. Если мы никогда не получили ошибку, мы выплевываем карту Google, иначе мы выплюс сообщение об ошибке.

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Bars Near <?php echo $location; ?></title>
</head>
    <body>
    <div class="wrapper">
        <div class="header">
            <img class="logo" src="images/logo.png" alt="The Beer Mashup" />
            <p class="footer">Developed by <a href="http://www.cagintranet.com">Chris Cagle</a> for <a href="http://www.nettuts.com">NETTUTS</a></p>
            <div class="mapdiv">
                <?php
                if (!$err) {
                    echo "<div>";
                    $map->printGoogleJS();
                    $map->showMap();
                    echo "<h3>". $location ." <span>(". $barcount ." Bars)</span></h3>";
                } else {
                    echo "<p class="error"><b>". $err ."</b></p>";;
                }
                ?>
            </div>
        </div>   
    </div>   
    </body>
</html>

После добавления некоторого текста и CSS, и теперь у вас есть великолепная веб-страница, в которой отображаются все бары и пабы в непосредственной близости от местоположения того, кто просматривает веб-страницу.

Просмотрите демонстрацию страницы в ее нынешнем виде. Теперь mashup отлично работает, но у нас есть еще одно улучшение, которое будет иметь значение, когда дело доходит до пользовательского интерфейса.

Шаг 7. Изменение кода, позволяющего посетителям посещать вход

. На этом этапе наша страница работает нормально, но есть одно небольшое предостережение. Посетитель может просматривать только бары из своего текущего местоположения. Что делать, если посетитель хочет, чтобы исследовательские бары в другом городе, а не тот, который наш IP API вернулся для него или нее? Любой посетитель хотел бы указать местоположение для исследования.

Чтобы это разрешить, мы будем иметь простую форму, которая будет приниматься в городе и штате от посетителя, а затем перезагрузить страницу для данного местоположения и пропустить API-интерфейс ipLoc звоните полностью. Мы вставим этот код прямо перед нашей линией

на шаге 6.

<form method="post" id="form" action="beermashup2.php">
    <span>location: (ex.ew Orleans, LA)</span>
    <input type="text" value="" name="loc" id="loc" /><br class="clear" />
    <input type="submit" id="submitted" value="SEARCH" name="submitted" />
</form>

Чтобы выполнить эту работу, нам нужно будет обернуть код, который мы сделали на шаге ipLoc (шаг 3), в if-statement, который проверяет, была ли форма отправлена или нет. Если форма * не была отправлена (которая будет выполняться каждый раз, когда страница будет загружена первоначально), то она будет использовать IP-адрес IP-адреса IP-адреса. Если форма * была отправлена *, она будет принимать то, что подала пользователь, и установить для нее нашу переменную $ location.

//Set Locatio
    if ( isset($_POST['loc']) ) {
        //via user input
        $location = $_POST['loc'];
    } else {
        //Visitor IP Address
        $ip = getenv("REMOTE_ADDR");
        //via IPLoc
        $iploc = file_get_contents("http://iploc.mwudka.com/iploc/$ip/json/");  //Format: JSO
        $ipdata = json_decode($iploc, true);
        // Error checking
        if ($ipdata['city']) {
            $city = $ipdata['city'];
            $state = $ipdata['region'];
            $location = $city .", ". $state;
        } else {
            $err = "No location data returned for your IP address: ". $ip;
        }

Шаг 8. Вводя все вместе

Просмотрите демонстрацию окончательной заявки.

Вы можете просмотреть исходный код финального проекта (который в значительной степени соответствует только приведенным выше шагам) и посмотреть, как я закончил комбинирование 3 отдельных API в одном приложении. Прогуляйтесь по каталогу API через ProgrammableWeb и посмотрите, что вы можете придумать самостоятельно. Работа с API-интерфейсами - моя новая одержимость, потому что интересно создавать что-то новое и полезное из чужих данных. Если этот урок помог вам объединить несколько API-интерфейсов, отправьте их здесь - я бы хотел их увидеть.