Как интегрировать api на свой сайт
Перейти к содержимому

Как интегрировать api на свой сайт

  • автор:

Как интегрировать сайт с внешними сервисами

Современные приложения и сайты не могут быть изолированы. Через внешнюю интеграцию настраивается авторизация через соцсети, оплата онлайн, заказ доставки на постоянной основе. Для оптимизации бизнес-процесса сайт и интегрированные сервисы должны автоматически обмениваться данными в режиме реального времени. Расскажем о том, как расширить функциональности вашего сайта, и о своем опыте.

Оптимальный способ интеграции — это API (application program interface) или программный интерфейс приложения. Мы привыкли, что купленный билет в кино автоматически добавляется в календарь, а моментально авторизовавшись через google-аккаунт можно оставить комментарий. Именно API соединяет сайт с внешним миром и позволяет совершить необходимое действие – регистрацию, покупку, подписку, не уходя с сайта.

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

А самые востребованные сервисы разрабатывают свои API, делают их публичными и сразу составляют документацию, описывающую процесс интеграции. Таким образом можно подключить сервисы по бронированию, голосовой поиск и другие приложения для удобства пользователей.

Разработчик сайта сможет обратиться к существующему API в своем коде, а дальше все будет зависеть только от функциональностей приложения. Например, авиакомпании передают на сайт-агрегатор информацию о своих предложениях, что делает возможным бронирование авиабилета в несколько кликов.

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

Какие функциональности можно таким образом добавить на сайт

  • Чат: Slack, Facebook Messenger, WhatsApp
  • Авторизация и доступы: LastPass, OneLogin, One Identity
  • Рекомендации: Foursquare, Yelp
  • Опросы: Typeform, Form.io
  • Онлайн-оплата: Mastercard API, PayPal
  • Публикации медиаконтента: Youtube, Flickr, Last.fm, Vimeo
  • Безопасность: PhotoCaptcha, Key Captcha
  • Аналитика: Google Analytics Management

А также сервисы для быстрой отправки имейла, использования электронной подписи, карты Google Maps, стриминговые платформы или Wikipedia.

Вот как мы интегрировали внешние сервисы на своих проектах.

МегаФон

Бизнес-задача:

Подключить на сайте megafon.ru оплату банковской картой. Для этого был выбран сервис онлайн-платежей InPlat.

В документации от сервиса Inplat прописаны сценарии оплаты с подтверждением или без, единичная оплата или привязка карты. Когда абонент собирается оплатить услуги на сайте МегаФона, он получает ответ системы:

  1. МегаФон отправляет в систему InPlat метод init (или form);
  2. Система отвечает, что успешно приняла инициацию;
  3. Система пытается списать введенную сумму с карты абонента, используя данные, которые он ввел в форме на сайте (init или form);
  4. Система оповещает сайт МегаФона о результате проведения платежа методом result;
  5. Сайт МегаФона отвечает об успешном получении метода result

Реализация:

Интеграция – это организация обмена информацией с сервисом-поставщиком данных. Поставщик данных определяет способ взаимодействия со своим сервисом и описывает ее в документации. Это запросы к интерфейсу API по протоколу http различного предназначения — получение информации, изменение, удаление, добавление сущности. Разработчик сайта МегаФон видит API и пишет код, который обращается к API. Сайт МегаФона предоставляет форму, после того, как пользователь ее заполняет, запрос отправляется к API InPlat. Дальше запрос обрабатывается на стороне InPlat.

Nikon

Бизнес-задача:

Провести розыгрыш призов, с механикой, основанной на верификации чеков.

Мы создали несколько лендингов для акций Nikon. Их механика отличалась, например, в акции Я свобода творчества после покупки техники Nikon, покупатель может зарегистрировать чек и получить годовую подписку на пакет программ Adobe Creative для фотографов. Пользователь отправляет номер и фотографию чека, серийный номера проверяется на официальном сайте Nikon, после чего пользователь получает ключ доступа к программам. В этом случае сначала необходима интеграция с API Nikon, а потом с API Adobe.

В акции Я объективно лучший подарок пользователь регистрирует свой чек на покупку и может получить подарок в фирменном магазине Nikon. Чтобы сразу на лендинге акции узнать адреса магазинов, мы подключили интерактивную карту.

Реализация:

Пользователь загружает фото чека. Данные Nikon отправляет на внешний сервис – официальный сайт Nikon. Он обрабатывает эти данные и проверяет серийный номер. После чего сайт Adobe отправляет пользователю ключ доступа к программам.

Но не для всех задач достаточно интерактивного обмена данными. Существуют кейсы, требующие комплексного решения. Для каждой задачи необходимо выбрать свой механизм: например, интеграция с сервисом карт будет в каждом разрабатываться по-разному и это займет разное время.

PepsiCo

Бизнес-задача:

  1. Создать единую платформу для промоактивностей PepsiCo
  2. Интегрировать платформу с имеющейся CRM

PepsiCo часто проводит акции, в рамках которых пользователь вводит на промо-сайте код с крышечки или пачки. Он получает гарантированные призы или участвует в розыгрыше большого еженедельного приза.

Раньше сайты акции напрямую интегрировались с CRM-системой и другими отдельными инструментами, нужными для промомеханик, таких как сервис регистрации чека или программы лояльности. Регистрация, авторизация пользователей, валидация кодов происходили с помощью интегрированной CRM. А розыгрыш и отбор победителей — на странице сайта.

Реализация:

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

Благодаря этому инструменту повысилась общая стабильность проектов: единая платформа задает стандарт разработки промосайтов, экономит время и упрощает задачу для разработчиков. Механики, разработанные для одного розыгрыша, применимы на другом, поэтому новые промо запускаются гораздо быстрее.

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

Новым подрядчикам легче включиться в работу, т.к. они могут пользоваться единой платформой, чтобы создавать новые механики розыгрышей. А PepsiCo получили возможность выбирать подрядчиков из более широкого круга агентств, т.к. на них осталось мало технических задач и можно ориентироваться на экспертов в креативе.

Особенности интеграции

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

Но нужно учитывать, что интеграция с внешним сервисом – это дорогой процесс, поскольку готовых решений очень мало. Все проекты индивидуальны и многое зависит от бизнес-задач. Поэтому каждый раз разработчик сопоставляет бизнес-задачу с возможностями сервиса и вырабатывает решение.

Что такое API?

API расшифровывается как Application Programming Interface , поэтому мы начнем с изучения того, что такое интерфейс.

Что такое интерфейс?

Каждое используемое нами устройство имеет какой -то интерфейс. На вашей микроволновой печи есть цифры и кнопка запуска, а выключатель света имеет еще более простой интерфейс.

Мы используем эти интерфейсы, чтобы заставить устройство делать то, что мы хотим. Нам не нужно понимать основные схемы и науку, чтобы нагреть буррито с фасолью. Нам нужно использовать только тот интерфейс, который нам открыт.

Сравните внутреннюю работу автомобильного двигателя с тем, с чем мы взаимодействуем .

Внутренняя сложность абстрагируется , предоставляя пользователю максимально простой интерфейс.

API обеспечивают уровень абстракции для пользователя. Абстракция скрывает все, кроме важного для пользователя, что упрощает ее использование. Абстракция — это концепция, которую вы часто будете встречать в программировании, поэтому полезно хорошо ее понять.

Что такое «программирование приложений» в API

Теперь, когда мы знаем, что означает интерфейсная часть, часть прикладного программирования стала легче понять.

API — это то, как приложения взаимодействуют друг с другом .

Все программное обеспечение, с которым вы можете взаимодействовать с помощью кода, имеет некоторую форму API, поэтому вы увидите, что термин всплывает во многих местах.

Когда веб-разработчики говорят о «попадании в API», они обычно имеют в виду веб-службу, которая позволяет отправлять запросы и получать данные в ответ. Мы коснемся их в ближайшее время.

Всякий раз, когда я задаюсь вопросом: «Как заставить этот код делать то, что я хочу?» Я искал документацию API, связанную с этим кодом.

Возможно, вы смотрели документацию по библиотекам JavaScript, таким как Lodash , чтобы понять, как вам нужно форматировать свой код. В документации рассказывается, как использовать API для этой библиотеки.

Как работают веб-API?

В ваш веб-браузер встроено множество API, которые мы можем использовать! Они называются веб-API. В Chrome, Firefox, Safari и т. д. они встроены, чтобы использовать их для добавления функций на наши сайты.

Некоторые API позволяют воспроизводить аудиофайлы , позволяют вашему приложению понимать речь пользователя , реагировать на контроллеры видеоигр и многое другое! Когда вы прослушиваете щелчок или нажатие клавиатуры в JavaScript, вы используете для этого веб-API событий .

В оставшейся части этой статьи мы в основном рассмотрим веб-API HTTP, поскольку веб-разработчики чаще всего ссылаются на них, говоря об API.

Это API-интерфейсы, которые находятся между вашим кодом и некоторыми источниками данных или функциями на сервере, к которому вы хотите получить доступ. Чаще всего они используют архитектурный стиль REST API для соответствия определенным критериям при выполнении HTTP-запросов.

API обычно делает две вещи: — Во-первых, он устанавливает правила взаимодействия с ним.

«Правила» — это API, говорящее: «Если вы структурируете свой запрос следующим образом , я пришлю вам данные, структурированные таким образом ». Если вы не структурируете свой запрос так, как ожидает API, он не будет знаете, что вы хотите, и вы получите ошибку в ответ.

  • API также обрабатывает передачу данных между сервером и кодом, делающим запрос. API — это программа, которая действует как посредник между веб-приложением, сервером и базой данных.

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

Давайте коснемся некоторых концепций, которые вы должны понимать при работе с HTTP API.

Конечные точки

В следующем разделе мы рассмотрим некоторую документацию по API, в которой описывается это соглашение.

Аутентификация

Некоторые API требуют, чтобы вы зарегистрировали учетную запись или получили уникальный ключ для доступа к их информации. Это может быть связано с защитой данных, предотвращением злоупотребления службой или с целью взимания платы за данные.

Если вы меняете данные в своей базе данных через API, вам необходима аутентификация. Вы не хотите, чтобы кто-либо еще мог редактировать или удалять ваши файлы!

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

Если API требует аутентификации, в документации к API объясняется, как это работает.

Глаголы HTTP

Вместе с каждым созданным HTTP-запросом всегда существует HTTP-глагол . Наиболее распространены GET, POST, PUTи DELETE.

Когда веб-сайты запрашивают данные с сервера, это обычно GETзапрос. POSTи PUTиспользуются для изменения или добавления данных и DELETEудаления определенного ресурса.

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

При создании приложения

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

Если вы работаете бэкэнд-разработчиком, ваша работа заключается в разработке и реализации API-интерфейсов, которые запускают функции и запрашивают базу данных. Вы захотите предоставить своим разработчикам внешнего интерфейса четкую документацию о том, как работает API.

Если вы работаете с полным стеком или создаете собственное приложение, вам может потребоваться обрабатывать обе части. К счастью, если вы используете такие сервисы, как Auth0, для управления идентификацией, создание API выполняется за вас.

Работа с JSON

Большинство используемых вами HTTP API принимают и получают данные в формате JSON (JavaScript Object Notation). Это делает обучение чтению и письму в этом формате довольно важным навыком. JSON хранит свои данные в парах ключ-значение . Давайте посмотрим на JSON, который мы получаем, когда запрашиваем данные из Star Wars API . Если мы запросим этот URL:

Мы получим этот ответ JSON:

< "name": "Leia Organa", "height": "150", "mass": "49", "hair_color": "brown", "skin_color": "light", "eye_color": "brown", "birth_year": "19BBY", "gender": "female", "homeworld": "", "films": [ "", "", "", "" ], "species": [], "vehicles": [ "" ], "starships": [], "created": "2014-12-10T15:20:09.791000Z", "edited": "2014-12-20T21:17:50.315000Z", "url": "" > 

Вы можете увидеть отношение ключ/значение здесь. Ключ «name» имеет значение «Leia Organa» . Мы можем использовать этот объект в нашем коде JavaScript для отображения выбранной нами информации или даже для выполнения последующих запросов API.

Если бы мы запросили https://swapi.dev/api/people/6/ , ключи (имя, рост, масса) остались бы прежними, но значения (Лея Органа, 150, 49) изменились бы.

JSON — это облегченный формат, который можно использовать в JavaScript, Python, PHP и любом другом языке, который вы можете использовать в Интернете.

Как сделать API-интеграцию?

Теперь, когда мы лучше понимаем, что такое API, давайте посмотрим на процесс интеграции реального API и сделаем наши первые запросы. Мы собираемся начать с простого API шутки .

Сначала перейдите по этому URL -адресу .

Вся документация находится в этом файле README.md .

Глядя на документацию, я вижу, что нам даны три конечные точки.

Если мы хотим «поймать случайную шутку», у нас есть два возможных синтаксиса для этого. В этих двух ссылках нет ничего принципиально отличающегося; автор API предлагает вам два подхода к использованию API.

С помощью этого API вы можете посетить URL-адрес в своем браузере и увидеть ответ.

Совет разработчика: Firefox отлично подходит для форматирования данных в удобном для чтения виде.

В ответ на наш запрос мы получаем полезную нагрузку JSON с четырьмя свойствами: идентификатор этой случайной шутки, ее тип , настройку и кульминацию шутки.

Обратите внимание, что более сложные API точно описывают, что вы получите взамен. Если вы хотите увидеть более сложный ответ, взгляните на эту конечную точку Yelp API для бизнеса .

Глядя под капот

Что мне нравится в этом API шуток, так это то, что он относительно прост и имеет открытый исходный код. Это позволяет нам посмотреть на код, который возвращает наши шутки.

Все шутки хранятся здесь в файле JSON . Когда мы делаем наш запрос GET, index.js обрабатывает наш запрос, вызывая соответствующую функцию. Функции хранятся здесь в handler.js , и их всего несколько.

Я рекомендую просмотреть эти три файла, даже если вы не совсем понимаете, что они делают. Вы увидите, что API не обязательно должны быть сложными. Здесь «база данных» представляет собой один файл JSON.

Использование инструмента API — почтальон (Postman)

Когда мы делаем запросы к API, обычно это происходит не путем ввода их в браузере, а через код. Кодирование запросов API может занять много времени, когда вы просто пытаетесь проверить, работает ли API. К счастью, есть бесплатная программа Postman, которую вы можете скачать здесь .

Postman — надежная программа, в которую я не буду вдаваться слишком глубоко, но я хочу, чтобы вам было удобно создавать с ее помощью запрос GET.

Скачайте, установите и откройте Postman. Глагол действия HTTP по умолчанию имеет значение GET, поэтому вы можете оставить его и вставить https://official-joke-api.appspot.com/random_jokeв качестве URL-адреса запроса.

Нажмите «Отправить», чтобы отправить запрос, и вы увидите ответ на нижней панели.

Вот и все! Вы получаете много информации, легко доступной с Postman. Вы можете увидеть статус, 200 OKвремя, которое потребовалось для выполнения запроса, и многое другое, если вы перемещаетесь по различным вкладкам.

Теперь мы запрашиваем массив из десяти объектов шутки, поэтому форма ответа изменилась.

Обратите внимание, что текст ответа теперь начинается с квадратных скобок, [ ]а не с фигурных скобок, как < >.

Некоторые API, такие как Unsplash API, возвращают фактическое изображение для полезной нагрузки ответа. Попробуйте эту конечную точку и посмотрите, что вы получите:https://source.unsplash.com/random

Знакомство с Postman поможет, если вы продолжите использовать API и когда-нибудь создадите свой собственный.

Как использовать API для создания веб-приложения Joke

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

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

Для этого нам не нужны никакие библиотеки или плагины. Мы будем использовать обычный JavaScript для выполнения запроса.

Я создал стартер CodePen, в котором уже настроен CSS. Нажмите здесь, чтобы открыть стартовую ручку, и нажмите «Вилка» в правом нижнем углу, чтобы создать ее копию.

Вот окончательная версия , если вы хотите проверить, что мы делаем.

Здесь будет полезно иметь небольшой опыт работы с HTML и JavaScript, но я надеюсь, что вы все равно сможете следовать этому курсу, если вы только начинаете.

Добавление HTML

Мы начнем с создания нашего HTML. Для этой демонстрации нам не нужно много: всего лишь кнопка и два элемента абзаца.

 Убедитесь, что вы указали идентификаторы и type="button" как показано. К идентификаторам привязаны некоторые стили, и мы собираемся ссылаться на них позже в нашем JavaScript. type="button" сообщает браузеру, что это не обычная кнопка отправки формы.

Ваше окно CodePen должно выглядеть примерно так:

Теперь мы перейдем в окно JavaScript и задействуем эту кнопку. Во-первых, мы собираемся добавить в документ прослушиватель кликов.

document.addEventListener("click", function (event) < // Checking if the button was clicked if (!event.target.matches("#button")) return; console.log("Button was clicked!"); >); 

Здесь мы прослушиваем все клики. Если что-то, что неreturn является кнопкой, будет нажато , мы console.log()не запустим. Но если это кнопка target, то мы увидим наше сообщение в консоли. Нажмите кнопку «Консоль» в левом нижнем углу пользовательского интерфейса CodePen, чтобы увидеть этот вывод.

На данный момент мы знаем, что наша кнопка работает. Давайте заставим его запросить нашу шутку. Мы удалим строку с console.log()и заменим ее fetch()командой.

Fetch — это веб-API! Он предоставляет нам интерфейс для выполнения запросов и получения ресурсов. Он встроен в современные браузеры и значительно упрощает запрос данных. Подробнее читайте здесь .

document.addEventListener("click", function (event) < // Checking if the button was clicked if (!event.target.matches("#button")) return; fetch("") .then((response) => response.json()) .then((data) => console.log(data)); >); 

Мы добавили здесь три строки, fetch()и два экземпляра .then(). Давайте рассмотрим каждую строку одну за другой.

 fetch("") 

Здесь мы используем Fetch API для запроса конечной точки шутки. Как и в случае с Postman, GETглагол используется по умолчанию, поэтому нам не нужно его указывать. fetch()отправит этот запрос, и когда он разрешится или завершится, он передаст данные ответа нашему первому .then().

.then((response) => response.json()) 

Точка перед then()функцией означает, что мы связываем наш запрос на выборку. Эта строка кода будет выполняться только после разрешения выборки. fetch()возвращает объект Response, но нам просто нужен объект JavaScript, поэтому мы запускаем response.json()команду. Результат этого передается в нашу следующую строку кода.

.then((data) => console.log(data)); 

Мы снова создаем цепочку и выходим из JSON, который разрешается сверху. Нажмите кнопку и проверьте свою консоль. Это должно выглядеть примерно так.

Это круто; мы успешно извлекаем данные из API с помощью JavaScript! Теперь мы отобразим шутку в наших элементах HTML.

Мы добавим функцию в конец нашего JavaScript с именем renderJoke. Он возьмет объект, который мы получили из конечной точки, и добавит к каждому элементу innerHTML.

function renderJoke(data)

Теперь измените последнюю строку нашей fetch()цепочки с этой:

.then((data) => console.log(data)); 
.then((data) => renderJoke(data)); 

Вместо того, чтобы выводить данные из журнала, мы теперь передаем их нашей новой функции. Ваш JavaScript должен выглядеть так:

document.addEventListener("click", function (event) < // Checking if the button was clicked if (!event.target.matches("#button")) return; fetch("") .then((response) => response.json()) .then((data) => renderJoke(data)); >); function renderJoke(data)

Когда вы нажимаете кнопку, она должна возвращать шутку, подобную этой:

Если у вас это работает, поздравляем! Теперь вы делаете запрос API с помощью JavaScript, обрабатываете ответ и отображаете результаты в HTML! Это огромное достижение. ��

Обработка ошибок

Иногда запросы API не выполняются, и нам нужны наши веб-сайты или приложения, чтобы сообщить пользователю, что что-то пошло не так, как планировалось. Это довольно плохой пользовательский опыт, когда вы нажимаете кнопку, и ничего не происходит. Давайте смоделируем это, добавив опечатку в конечную точку API. Я изменил свою строку, “https://official-joke-api.appspot.com/random_jo“чтобы вызвать ошибку.

Теперь нажмите кнопку шутки. Вроде бы ничего не происходит, но если вы откроете инструменты разработчика и проверите консоль, то увидите, что API ответил на наш запрос расширением 404. Это API говорит, что не может найти то, что вы запрашиваете.

Давайте добавим код, чтобы пользователь знал, когда наш API возвращает ошибку.

Сначала давайте добавим в наш HTML новый элемент абзаца с расширением >

 Затем мы создадим renderError()функцию для добавления сообщения к этому HTML-элементу при возникновении ошибки.
function renderError()

Теперь мы добавим в нашу fetch()цепочку специальную функцию, которая отлавливает любые ошибки.

fetch("") .then((response) => response.json()) .then((data) => renderJoke(data)) .catch(() => renderError()); 

Если запрос на выборку выполнен успешно, .then()функции будут вызываться по порядку, а .catch()функция вызываться не будет. Но если запрос завершится ошибкой, он пропустит .then()функции и вызовет .catch()единственную.

Нажмите кнопку; теперь пользователь уведомляется о том, что запрос не выполнен

Наконец, нам нужно очистить сообщение об ошибке, если пользователь попытается снова и запрос будет успешным. Добавьте этот код в нашу renderJoke()функцию.

const error = document.getElementById("error"); error.innerHTML = ""; 

Исправьте конечную точку API, чтобы она была “ https://official-joke-api.appspot.com/random_joke“еще раз.

Все готово! Вот финальное приложение, если вы хотите сравнить его со своим кодом.

Дополнительный кредит

Вы можете продолжить работу над этим приложением и добавить еще несколько функций.

Например, позволить пользователям выбрать категорию, а затем изменить эту часть запроса API. У вас также может быть какой-то способ скрыть изюминку, пока пользователь не нажмет другую кнопку или не пройдет несколько секунд. Вы даже можете использовать конечную точку для десяти шуток и посмеяться над пользователем, не делая дополнительных запросов.

Я хотел бы увидеть, что вы придумали!

Устранение неполадок API

В конце концов, вы столкнетесь с некоторыми проблемами с API, и вам нужно будет отладить проблему в своем коде. Вот несколько советов по устранению неполадок, когда API работает не так, как вы ожидаете. Проверить документацию

Если вы используете общедоступный API, должна быть документация, которая расскажет вам, как структурировать ваш запрос. Убедитесь, что вы следуете описанному там синтаксису. Сравните их примеры с тем, что есть в вашем запросе, чтобы увидеть, что отличается. Проверьте вкладку «Сеть»

Если вы делаете запросы API в браузере, одним из лучших инструментов устранения неполадок API является вкладка «Сеть». В Chrome вы можете нажать Control+ Shift+ Jв Windows или Command+ Option+ Jна Mac, чтобы открыть DevTools. Щелкните вкладку «Сеть» вверху. Теперь вкладка «Сеть» будет прослушивать каждый запрос, который делает веб-сайт.

Вот запрос от приложения-шутки, которое мы сделали ранее.

Это показывает нам URL-адрес, к которому мы сделали запрос, наш метод (или глагол) и код состояния, который мы получили в ответ. Вы можете увидеть, что API вернуло на вкладках Preview и Response .

Если ваш код состояния не 200, читайте дальше.

Проверьте код состояния

Вы видели сообщение «404 File Not Found» на веб-сайте, когда щелкали неработающую ссылку или вводили что-то неправильно. Этот 404 — это особый код, который сервер передает вашему браузеру в ответ на его запрос.

Либо на вкладке сети, либо в Postman вы всегда будете получать код состояния от API.

Это один из многих кодов состояния HTTP, которые помогают нам понять, как поступают наши запросы. Ответы сгруппированы в сотни:

1xx информационный ответ – запрос получен, процесс продолжается 2xx Success — запрос успешно получен, понят и принят. Перенаправление 3xx — необходимо предпринять дальнейшие действия для выполнения запроса. Ошибка клиента 4xx — запрос содержит неправильный синтаксис или не может быть выполнен 

Вообще говоря, ответ 200 или что-то около 200 — это успех.

Что-либо в 400’s означает, что запрос не выполнен, и причиной, вероятно, является наша ошибка. Проверьте список кодов состояния HTTP для конкретного кода, который вы получили. Если это 400вы должны проверить, что ваш запрос отформатирован правильно.

Что-либо в 500’ означает, что что-то пошло не так на сервере, который обрабатывал ваш запрос API. Возможно, сервер не работает или в коде есть ошибка. Повторите запрос через некоторое время.

При работе с API вы, вероятно, когда-нибудь столкнетесь с так называемой ошибкой CORS (Cross-Origin Resource Sharing). У вас есть ошибка CORS, если вы проверяете свою консоль и видите сообщение о том, что в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Вот хороший ресурс для изучения и исправления этой ошибки, когда вы сталкиваетесь с ней.

Проблемы с обещаниями

Одна вещь, которую мы не рассмотрели в этой статье, — это концепция промисов. При работе с API вы начинаете работать с концепцией асинхронного программирования. Это выходит за рамки этой статьи, но если у вас возникли проблемы с работой с данными, которые возвращаются из ваших запросов API, вы можете столкнуться с проблемой с промисами. Вот отличная статья , которая поможет вам разобраться.

Лучшие интеграции API для начала работы

Существует множество бесплатных API, которые вы можете использовать для любого проекта, который вы хотите сделать. Вот полный список из сотен API , но ниже я расскажу о паре с идеями о том, как вы могли бы начать работу.

Unsplash

Unsplash — отличный ресурс для загрузки совершенно бесплатных стоковых фотографий, но знаете ли вы, что у них также есть общедоступный API?

Ознакомьтесь с Unsplash Source и подумайте, как вы можете использовать этот API для добавления красивых изображений в свой следующий проект.

API покемонов

PokeAPI — это бесплатный API, для доступа к которому не требуется аутентификация. Вам доступно несколько различных конечных точек, что означает, что вы можете запрашивать различные типы данных. Вы можете запрашивать конкретных покемонов, движения, игры, локации и многое другое.

Вот пример приложения «Поймать покемонов », основанный на нашем приложении «Шутка», которое вы использовали ранее, чтобы помочь вам начать работу.

API для собак

Dog API возвращает случайные изображения собак! Лучше всего то, что вы можете запросить собак определенных пород, что дает вам возможность сделать более сложное веб-приложение.

Если вам нужна базовая концепция, вы можете сделать что-то похожее на приложение Pokemon, но с другим уровнем сложности. Взгляните на несколько каркасов для этой идеи приложения.

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

Во-первых, ваше приложение может использовать эту конечную точку для получения всех пород, которые есть у API:https://dog.ceo/api/breeds/list/all

Затем вы можете включить их выбор в запрос к этой конечной точке: https://dog.ceo/api/breed/hound/images, заменив houndих выбором.

Прочитайте документы здесь, чтобы увидеть, что это вернет. Это должно заставить вас начать!

Платформы интеграции API без кода

Мы не будем подробно останавливаться на этих вариантах приложений для соединителей, но я хочу, чтобы вы знали, что они доступны, если они лучше всего соответствуют вашим потребностям.

Некоторые сервисы, такие как Zapier или IFTTT , предоставляют людям простой интерфейс для подключения различных API к своей экосистеме. Они также уменьшают потребность в управлении API.

Этот пример с домашней страницы Zapier соединяет API Gmail, Dropbox и Slack. Вам потребуется некоторое время, чтобы написать код самостоятельно, но Zapier создает интерфейс поверх этих API, еще больше абстрагируясь от сложности!

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

Пора закругляться

Мы многое затронули в этой статье, так что поздравляем, что дочитали до конца.

Мы рассмотрели концепции интерфейсов и то, как API абстрагируется от сложности. Мы коснулись веб-API, а затем углубились в HTTP API. Мы использовали Postman для отправки запросов и даже создали наше приложение Joke! Мы изучили еще несколько API-интерфейсов, с которыми вы могли поиграть, и увидели, что иногда решения без кода могут быть выходом.

Я надеюсь, что вы многому научились и чувствуете себя более уверенно, работая с API в будущем. Хотя некоторые API могут быть невероятно сложными, основные концепции остаются прежними.

Интеграция сайта с API — Что это и как пользоваться?

Application programming interface, сокращенно API, представляет собой набор методов для взаимодействия с другими приложениями.

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

Предложение выгодное. Но как сделать так, чтобы сайт контрагентов всегда показывал актуальные цены и остатки товаров? Вам нужно сделать список методов, вызывая которые контрагенты могли бы получить все нужные им данные.

Тогда вы делаете два метода:

— метод, показывающий цену продукта (а к ней уже сайт контрагентов добавит 10%)

— и метод, возвращающий остатки на складе.

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

Все это дело вы оформляете, пишете документацию. Теперь любой разработчик может торговать вашими продуктами у себя на сайте. И тут вас ожидает еще один сюрприз.

Конкуренты узнали про ваше API и решили немного вам насолить. И уменьшают каждый день у вас остатки товаров. Из-за этого дружественные интернет-магазины не могут получить достоверную информацию об остатках.

Вы понимаете, что нужно каждому дружественному магазину присвоить уникальный токен и таким образом узнавать, кто передает вам остатки. Так можно отсеять или заблокировать недоброжелателей. И вы добавляете метод авторизации в документацию. Теперь просто так, без согласования с вами, использовать API нельзя.

Вот так мы разобрали, что такое API. В реальности методов намного больше.

Обычно API содержит следующие данные:

— методы для взаимодействия и их описания

— данные, которые можно передать этим методам

— возвращаемые методами данные (в том числе и ошибки)

Примеры API

С API вы встречаетесь повседневно в интернете. Вот несколько распространенных примеров.

Комментарии Вконтакте и Фейсбук.

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

Передача заказа из интернет магазина в 1с

А также получение товара из 1С.

Регистрация через соцсети

Применяется на всех современных сайтах, чтобы мотивировать пользователей регистрироваться в системе.

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

Используется на сайтах большинства интернет-магазинов.

Можно ли самостоятельно настроить API на сайте?

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

Яндекс Метрика и Google Analitycs

Счетчики посещений на сайт. Для первоначальной интеграции достаточно вставить код на сайт по инструкции. Для настройки целей потребуются уже знания веб-разработки.

Конструктор карт Яндекса

Позволяет создать карту с меткой, схему проезда, карту доставки в конструкторе. А потом получить код и вставить в нужное место на сайте.

Видео с Ютуба также можно вставить на страницу сайта.

Под видео выбираем Поделиться — Встроить.

Появится код видео. Его и вставляем, куда нам нужно.

Интеграция готового API с помощью программиста на примере эквайринга

Разберем небольшой пример — оплата с сайта с помощью эквайринга Сбербанка.

Для начала вы заключаете договор со Сбербанком. Это могут сделать только юридические лица или индивидуальные предприниматели. Без юрлица/ИП вы не имеете права принимать оплату на сайте.

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

Разработчики пишут следующие методы:

— Авторизация вашего магазина в системе эквайринга (чтобы понимать, кому придет оплата)

— Передача корзины (списка товаров заказа) и общей суммы

Методы вызываются при оформлении заказа.

После успешной регистрации заказа пользователь перенаправляется на страницу оплаты товара. Разработчики могут сами ее создать либо использовать готовую форму от Сбербанка.

После того, как сумма оплачена, пользователь возвращается в магазин. Тут скрипт проверяет статус заказа и в случае успешной оплаты уведомляет пользователя об этом. Если во время операции произошли ошибки, они тоже выводятся на экран.

При успешной оплате заказ отправляется в 1с с помощью другого API (обмен с 1с).

Меня зовут Елена Маркова. Я — опытный веб-разработчик, знающий и любящий свое дело. У меня есть своя собственная команда. Вместе мы занимаемся созданием сайтов с душой и профессионализмом.

Разработка сайтов

Адрес: г. Воронеж, ул. Владимира Невского, 31
Работаю: Ежедневно 09:00 — 21:00 МСК

Простое руководство по автоматизации интеграции API

Интерфейс прикладного программирования (API) — это набор протоколов для создания приложений. API позволяют различным веб-сервисам, системам и прикладному программному обеспечению подключаться к корпоративным данным и обмениваться ими. Что делает API настолько широко используемыми, так это то, что они «независимы от платформы». В результате вы можете использовать их для потребления информации независимо от базовой операционной системы или технологического стека.

Современный бизнес использует множество приложений для разных целей. Это связано с тем, что большинство организаций больше не заинтересованы в универсальном решении. Вместо этого спрос на целевые и специализированные приложения увеличился в геометрической прогрессии. Однако проблема заключается в интеграции информации, содержащейся в этих разнообразных приложениях, для обеспечения точной отчетности и принятия решений.

Эта запись в блоге представляет собой подробное руководство по интеграции API.

Что такое интеграция API?

Интеграция API — это процесс, в котором два или более приложений соединяются через API-интерфейсы «разговаривать» друг с другом. Это может включать в себя выполнение приложениями совместной функции или обмен информацией для обеспечения целостности данных.

Предприятия используют все виды приложений, включая веб-сервисы (платформы SaaS), корпоративное программное обеспечение (ERP) и специально разработанное программное обеспечение. Каждое из этих приложений должно сосуществовать, чтобы обеспечить бесперебойную работу бизнеса.

Давайте проиллюстрируем использование платформы интеграции API в сценарии, когда бизнес использует различные приложения, такие как Marketo (веб-инструменты или маркетинговые приложения), Salesforce (онлайн-система CRM) и Oracle ERP (облачное программное приложение). Каждое из этих приложений имеет один или несколько общих объектов, связанных с бизнесом, например имена клиентов.

Крайне важно, чтобы всякий раз, когда вы добавляете клиента в систему ERP, то же самое отражалось в Marketo и Salesforce, и наоборот. Если информация не обновляется во всех трех приложениях, это может означать, что ваш отдел продаж или маркетинга работает с неточными данными. Это может привести к потере потенциальных клиентов, упущению возможностей продаж и ошибочной отчетности для вашего бизнеса.

Решение интеграции API добавляет уровень автоматизации между этими приложениями, который запускает автоматические обновления при каждом изменении данных в одном из приложений. Это также позволит вам поддерживать главную базу данных (например, в Oracle ERP), которую вы сможете использовать для отчетности и аналитики.

Ускорьте интеграцию API с
инструмент управления API

Ключевые функции инструментов интеграции API

Одной из важнейших функций инструментов интеграции API является то, что они помогают интегрировать существующие программные компоненты. Кроме того, они позволяют вам использовать общедоступные API для интеграции различных онлайн-приложений, таких как Twitter, Google Maps, Marketo, с вашими бизнес-приложениями. Вы можете использовать эти открытые API для дополнения информации, присутствующей в базе данных вашего предприятия, для поддержки или улучшения бизнес-процессов. Например, компании могут использовать API Twitter, чтобы узнать больше о потенциальных клиентах и ​​новых тенденциях.

Как реализовать интеграцию данных API?

Мы знаем, почему сейчас интеграция API, давайте перейдем к как добиться интеграции API. Существует несколько подходов к интеграции API, включая написание собственного кода или использование сторонних платформ для построения конвейеров интеграции.

Ручное кодирование

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

Недостатком написания кода вручную является то, что он может быть довольно сложным и громоздким. Особенно, если речь идет о более чем паре приложений. Чтобы объяснить это подробнее, давайте продолжим пример из предыдущего раздела, связанный с Marketo, Salesforce и Oracle ERP. Каждое приложение имеет свой набор API REST для получения и обновления информации. Разработчики API должны написать код для различных способов форматирования, хранения и захвата данных в каждом из них. Весь этот процесс интеграции API может занять недели и даже месяцы, чтобы завершить и правильно выполнить.

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

Автоматизация с помощью платформ интеграции API

Лучшим и более распространенным подходом к интеграции API является использование сторонних интеграционных платформ. Эти платформы могут преодолеть ограничения, с которыми пользователи сталкиваются при написании кода.

Платформа комплексной интеграции, такая как Astera может удовлетворить все ваши потребности в интеграции API. Astera позволяет импортировать общедоступные и частные REST API без написания единой строки кода. Вы можете использовать эти API с другими объектами в Astera, например встроенные преобразования и соединители. Эти функции автоматизируют интеграцию API, избавляя вас от необходимости запускать конвейеры вручную. Это также может помешать вам выполнять отдельные задачи для каждой новой транзакции.

Astera Управление API достаточно гибкое для выполнения любых задач, связанных с интеграцией, которые нужны вашему бизнесу, что позволяет вам создавать рабочие процессы, не кодируя их самостоятельно. Он предоставляет вам простой и удобный пользовательский интерфейс, который вы можете использовать для создания рабочего процесса интеграции.

Работы С Нами Astera, вы также можете опубликовать эти процессы интеграции как API.

Вот как Astera может упростить интеграцию API

  • Предварительно построенные разъемы для многочисленных облачных сервисов и приложений, включая популярные CRM, такие как Salesforce, можно подключаться к любому открытому или пользовательскому API REST.
  • Предлагает широкий спектр встроенных преобразований чтобы помочь вам агрегировать, преобразовывать и форматировать данные, полученные из API, по мере необходимости.
  • Упрощенное сопоставление устраняет сложность архитектуры данных и платформы хранения. Независимо от того, имеете ли вы дело с данными в формате JSON, XML или любом другом формате, сопоставление выполняется без кода и является простым. Astera Управление API упрощает создание и автоматизацию сопоставлений данных, предоставляя сопоставления с возможностью перетаскивания.
  • Мощные возможности ветвления позволяют применять условную логику и цифровые преобразования в конвейерах интеграции API. Например, вам может потребоваться обработать данные, используя различные преобразования в зависимости от типа извлекаемых данных. Вы можете легко сделать это через Astera создавая ветки рабочего процесса на основе желаемых условий.
  • После интеграции сторонних API вы также можете разрабатывать и публиковать свои API.

Готовы начать интеграцию API?

Интеграция API устанавливает связь между внешними приложениями и стеком технологий вашего предприятия. Это облегчает беспрепятственный обмен данными или передачу данных между двумя системами. Сегодня предприятия используют всевозможные облачные сервисы, платформы SaaS и корпоративное программное обеспечение. Следовательно, важно использовать интеграцию API, чтобы избежать трудоемкого процесса кодирования, необходимого для обмена данными между различными приложениями.

Узнайте, как интеграция API может помочь вам получить доступ к облачным данным и подключить их

Хотите интегрировать сторонние API и опубликовать свои собственные API? Запланируйте индивидуальное демонстрация и узнайте больше о том, как Astera может помочь.

Другие статьи по теме

  • Что такое звездная схема? Преимущества и недостатки
  • Что такое озеро данных? Определение и преимущества
  • Что такое сбор счетов-фактур и как его автоматизировать?
  • Извлечение данных документа 101: понимание основ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *