Проста інструкція з веб-хуків: залякування зараз припиняється

Вебхук.

Це схоже на те, що відбувається, коли схрещуєш павука та пірата. Однак у світі Інтернету веб-хуки - це щось зовсім інше. Веб-хуки допомагають з'єднувати служби разом.

Дозволь пояснити.

Скажімо, у нас є дві гіпотетичні служби. Один - це служба, яка генерує дані, а друга, яка збирає та впорядковує ці дані.

Розробники першого сервісу подумали: “Чоловіче, наша платформа лише така корисна. Давайте дамо користувачам можливість пересилати дані в режимі реального часу до інших служб ".

Розробники другого сервісу задумалися. "Гей-віллікери, було б чудово, якби наші користувачі могли легше імпортувати дані". Отже, вони додали веб-хуки, щоб отримувати дані в режимі реального часу від такої служби, як перша служба.

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

Найкращий спосіб пояснити це на реальному прикладі.

Приклад із реального світу

За недавнім проектом я підключив датчик IoT до аркуша Документів Google. Це зайняло у мене лише близько 10 хвилин. Я зараз вам покажу те саме.

Почнемо спочатку з налаштування Google Sheet.

  • Створіть новий аркуш
  • Коли ви там, перейдіть до Інструменти та натисніть Редактор сценаріїв
  • Відкриється нове вікно, яке виглядає приблизно так:
  • Скопіюйте та вставте цей код. Я поясню це після того, як ми це зробимо.
//this is a function that fires when the webapp receives a POST requestfunction doPost(e) { //Return if null if( e == undefined ) { console.log("no data"); return HtmlService.createHtmlOutput("need data"); } //Parse the JSON data var event = JSON.parse(e.postData.contents); var data = event.data;
//Get the last row without data var sheet = SpreadsheetApp.getActiveSheet(); var lastRow = Math.max(sheet.getLastRow(),1); sheet.insertRowAfter(lastRow); //Get current timestamp var timestamp = new Date(); //Insert the data into the sheet sheet.getRange(lastRow + 1, 1).setValue(event.published_at); sheet.getRange(lastRow + 1, 2).setValue(data.temperature); sheet.getRange(lastRow + 1, 3).setValue(data.humidity); sheet.getRange(lastRow + 1, 4).setValue(data.pm10); sheet.getRange(lastRow + 1, 5).setValue(data.pm25); sheet.getRange(lastRow + 1, 6).setValue(data.tvoc); sheet.getRange(lastRow + 1, 7).setValue(data.c02); SpreadsheetApp.flush(); return HtmlService.createHtmlOutput("post request received");}

Тепер давайте розберемось у всьому.

function doPost(e) {

Це функція, яка викликається під час події POST. Розгляньте цей сценарій як веб-сервер. Ми надсилаємо йому дані за певною адресою (яку ми отримаємо в гарячі хвилини)

e є об'єктом виклику HTTP. У ньому будуть дані, які ми надсилаємо. Тож гарною ідеєю є перевірити, чи не має значення NULL. Якщо це так, тоді немає необхідності запускати сценарій.

Якщо у нас є дійсні дані, давайте змінимо їх із рядка на корисний JSON. Ви можете використовувати для цього улюблену функцію кожного JSON.parse.

var event = JSON.parse(e.postData.contents);

Пам’ятайте, що структура даних визначатиме, як ви їх обробляєте! Можливо, вам доведеться запустити JSON.parseкілька разів залежно від того, наскільки вкладені ваші дані та у якому форматі вони знаходяться.

Після того, як ви отримаєте свої дані, настав час розмістити їх у потрібному місці!

//Get the last row without datavar sheet = SpreadsheetApp.getActiveSheet();var lastRow = Math.max(sheet.getLastRow(),1);sheet.insertRowAfter(lastRow);

Ці три виклики приведуть вас до першого доступного рядка, що починається з рядка 1 (залишаючи рядок 0 для міток стовпців).

Потім, нарешті, ми поміщаємо дані в той рядок, якому вони належать:

sheet.getRange(lastRow + 1, 1).setValue(event.published_at);

Де перший параметр sheet.getRange- це рядок, а другий - стовпець. Ви можете використовувати setValueфункцію, щоб встановити, що ви хочете в цій конкретній комірці.

До речі, натхнення для цього коду прийшло з цього допису.

Класно. Отже, у нас є сценарій. Як ми це називаємо?

  • Натисніть кнопку Опублікувати
  • Клацніть Deploy as a web app
  • Змініть налаштування відповідно до знімка екрана нижче. Потім клацнітьDeploy
  • Може з’явитися екран із проханням оновити дозволи. КлацнітьReview Permissions
  • Клацніть, Advancedа потім клацнітьGo to me> in the bottom left.

Original text


  • Finally, click Allow
  • In the last screen, copy your Webhook URL!

Test it

Now we can test if everything works by using Postman. If you haven’t played with Postman yet, it’s a great graphical user interface for curl.

  • Install Postman. You may need an account to go further.
  • Once inside, create a new request. Name it so you know it belongs to this Google Docs webhook
  • Click body and enter the following test code:
{ "event": "gdxg", "data": { "temperature": 21 }, "coreid": "zczxvz", "published_at": "zcvzxcvx"}
  • Finally, click that blue Send button.
  • Go back to your excel sheet and see the magic!

Now we’re cooking with gas!

Conclusion

I hope you’ve gotten the above example to work. Luckily for you, there’s a lot less to worry about once you get this part up and running!

To recap, we’ve talked about webhooks and why they’re used. You should be feeling confident at this point to go and set up some of your own. If you’re still feeling intimidated, I recommend using services like Zapier or IFTTT. (They’re shiny front ends for APIS and Webhooks already available.)

Last but not least check out the full post where I integrate hardware and web in one awesome project.

Happy webhooking!