Мобильное приложение на Glide для кафе (Часть 7).

Как отправить уведомление в ‘Telegram’

Мы хотим, чтобы, как только пользователь (клиент) сделал заказ мы получили уведомление в ‘Telegram’ о заказе. Но напрямую отправить сообщение в ‘Телеграмм’ Glide не может. Делать это мы будем с помощью механизма Webhook-ов. Webhook-и это программный код, с помощью которого отслеживают изменения приложения или сайта, работающий по принципу функции обратных вызовов (это если кому интересно), а передача происходит по методу ‘HTTP POST-запроса’.

Создание сценария в ‘Make’

И делать всё это мы будем через промежуточный сервис “Make”. Идём на ‘https://www.make.com/’, регистрируемся, отвечая на несложные вопросы. У меня уже всё это есть и я это пропускаю. И попадаем на главную страницу (Integromat превратился в Make).


Рис.1
Рис.2 После входа попадаем на страницу ’My Organization’ и здесь жмём “Create a new scenario” и попадаем на страницу ‘New scenario’. Жмём на фиолетовый кружок с крестиком посередине и в открывшемся меню в строке поиска (Search applications) набираем ’webhook’, после чего находим и жмём на иконку 'Webhooks' (обычно сверху) (Рис.1). (Webhooks_icon)

И во вновь открывшемся меню в разделе TRIGGERS находим и жмём “Custom webhook” (Triggers when webhook receives data.). (Рис.2) (Webhook_Add)

Здесь нам предлагают выбрать существующий Webhook или добавить новый. У нас пока ничего нет, поэтому жмём Add. И пишем название, например, “Уведомление о бронировании Кафе” (Рис.3) (reserve_cafe).


Рис.3
Рис.4
Рис.5



И жмём ‘Save’ и нам ‘Make’ даёт ссылку. (См. рис. 4) (make_link)


Рис.6 Жмём “Copy address to clipboard” и сохраняем ссылку. И жмём ‘OK’



И не забудем в конце нажать на иконку ‘дискетка’(Рис. 5), чтобы сценарий был сохранён, после чего появится и исчезнет надпись “The scenario was saved.”.

Подключение Glide к сервису ‘Make’

Переходим в приложение Glide во вкладку ‘Layout’, заходим в нашу форму (Форма), что открывается при нажатии кнопки ‘Забронировать (рис.6) (App_form), и находим раздел ‘ON SUBMIT’. Пока сейчас здесь только одно действие, это ‘Show notification’. Жмём на него и в открывшемся меню выбираем “Create new action…” и открывается новое оено (Рис.7).


Рис.7

Жмём на известный крестик ‘Добавить новое действие’ и в открывшемся списке выбираем “Trigger webhook” (Рис.8). (trigger_webhook_new)
Рис.8
Рис.9
Рис.10 Жмём на не него и в открывшемся окне конфигурации нажимаем на строку ‘None’, а затем на “Add new webhook” (Рис.9). (trigger_webhook_config)

И в открывшемся окне конфигурации Вебхука, в строке ‘Name’ пишем имя нашего сценария сервиса ‘Make’, это “Уведомление о бронировании Кафе” (см. рис.3), а в строке ‘Url’ сохранённую ранее ссылка от ‘Make’ (Рис.10). (config_new_webhook) И жмём ‘Save’.

Теперь что мы хотим послать в уведомления. По умолчании Glide нам предлагает ‘Name’. Здесь можно взять всё, что вы пожелаете из таблицы ‘Заказ’. Я выберу “Name”, “Комментарий”, “Стоимость заказа” и “На время”. (Рис.11) (trigger_webhook_value)


Рис.11 Теперь нам надо подписать наше действие, нажимаем на карандашик слева вверху и называем, например, “Уведомление о бронировании Кафе”, после чего жмём ‘Save’.

Рис.12 Давайте проверим, что у нас получилось. Заходим в ‘Mike’ и жмём “Run” (слева внизу). Возвращаемся в Glide форму, набираем, например, ’30.03.2023 18:00:00’ и ‘Столик на двоих №7, и жмём отправить (Рис.12). (App_reserve_cafe)

Возвращаемся обратно в ‘Make’ и видим внизу появилась надпись зелёного цвета: “Webhooks” и справа сверху появилась цифра ‘1’, значить сюда пришло сообщение. Нажимаем на эту единичку в кружочке и в открывшемся меню жмём на крестик напротив “params”, который открывает группу принятых параметров, а затем на крестики напротив ‘Комментарий’, ‘Стоимость заказа’, ‘На время’ и ‘Name’, которые в свою очередь открывают тип и значение параметра. И здесь мы видим всю информацию, которую мы и посылали от Glide. (Рис.13) (recieve_notification).

Рис.13



Что нам и было нужно. Всё чудесно, теперь нам надо отправить всё это в ‘Telegram’.

Подключение сервиса Make к Telegram

Отправлять данныё мы будем в “Бота Telegram”. Для справки, ‘Бот’ — это небольшое приложение, которое самостоятельно выполняет некоторые задачи без участия пользователя. Главная функция бота — отправлять и получать сообщения.


Бота в Telegram создаёт “BotFather”. Перейдём в Telegram и в строке поиска введём ‘BotFather’.
Рис.14
Рис.15 Telegram мне выдал рис.14.

Переходим на страничку ‘BotFather’ и в строке ввода нажимаем на синий кружочек с тремя белыми полосками, (Рис.15) (bot_menu_icon) и открывшемся меню выбираем ‘/newbot’.

Сначала ‘BotFather’ предлагает назвать новый Бот, я назову ‘AleksEventCafe’, затем выбрать имя пользователя (обязательное условие имя должно заканчиваться на ‘bot’), я выбираю – ‘AleksCafeBot’. Если имена уникальные Telegram выдаёт нам сообщение “Done! Congratulations on your new bot. You will find it at t.me/AleksCafeBot. You … “ и ‘Token’ вашего Бота. Жмём “t.me/AleksCafeBot”, а затем ‘Start’ и у нас есть ‘Бот’.

Рис.16 Открываем ‘Make’ и жмём ‘Добавить еще один модуль’ (Рис.16) (Add_another_module) и в строке поиска набираем ‘Telegram’. Здесь нам предлагают ‘Telegram Bot’ нажимаем и в появившемся списке нас интересует “Send a Text Message or a Reply“. Его и выбираем.


Рис.17 В открывшейся вкладке нажимаем сначала ‘Add’, а затем копируем имя нашего ‘Бота’ и его ‘Token’ (Рис.17) (Create_connection). И не забудем нажать ‘Save’.


Рис.18 Дальше нам надо ввести ‘Chat ID’. Чтобы поучить, его мы заходим обратно в Telegram и в строке поиска набираем “IDBot” (Рис.18) (IDBot)

И Telegram выдаёт нам наш ID “P.S. Твой ID: 1373XXXXXX”. У каждого он свой, его и записываем в поле ‘Chat ID’.


Рис.19 Дальше нажимаем кнопкой мыши на окно ‘Text’ и Telegram по умолчанию предлагает нам на выбор перечень параметров полученных от Glide. Давайте для начала подпишем наше сообщение, поэтому я набираю, например “Уведомление о брони кафе”, а затем поочерёдно мышью нажимаю на каждый параметр, который я хочу послать в Telegram. Причём меня интересует, только значение параметра “value”, их и выбираю (Рис.19). (TelegramBot_value)


Рис.20 В результате мы получим наше соединение “Webhooks - Telegram” (Рис.20). (webhooks_telegram) И опять же не забываем нажать на иконку ‘дискетка’, чтобы сохранить сценарий.

Ну что ж осталось только проверить. Нажимаем в MAKE ‘Run’ и идём в Glide. Нажимаю кнопку Забронировать, перехожу в форму, задаю время 31.03.2023 18:30:00 и комментарий Столик на одного №5 у окна, и нажимаю отправить.


Рис.21
Рис.22 Смотрим в Telegram, надписи под иконками поменяли цвет на зелёный цвет. (Рис.21)

Если нажать на единичку в кружочке, то можем видеть наше сообщение (Рис.22). (message_value)

Откроем наш Бот AleksEventCafe и смотрим, в общем всё что мы посылали от Glide мы получили в Telegram. К сожалению, только всё сообщение пришло без разделительных знаков, но я пока на этом останавливаться не буду, это легко исправляется и вы можете это сделать сами. (Рис.23). (message_telegram)


Рис.23