Разработка

Советы по разработке, лайф-хаки no-code, примеры решений и описание шагов их создания

Форма заявок на сайт с оповещением в Телеграм за 10 минут

14/03/2025 - Опубликовано в Разработка Integram

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

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

Настройка состоит из таких шагов:

Регистрация (1 минута)
Создание опроса (2 минуты)
Регистрация бота (1 минута)
Настройка запроса для обращения к боту (6 минут)

Итак, погнали!

1. Регистрация

Регистрируемся в Интеграме через гугл в 1 клик или по почте здесь:

integram.io

2. Создание опроса

Делаем форму опроса, в меню Опросы создаем новый:

Создаем новую таблицу для нашего опроса

Создаем новую таблицу для нашего опроса:

enter image description here

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

enter image description here

Заявка на оценку будет невидимым полем, в котором будет храниться время создания заявки. Далее добавляем первое видимое поле – Имя создателя заявки – его можно выбрать из списка существующих в Интеграме полей. Нажимаем Добавить.

enter image description here

Теперь добавим поле Описание проекта – туда можно будет вбить несколько строк, поэтому выберем для него такой тип.

enter image description here

Осталось добавить ещё 1 поле – почту, на которую придет запрошенная информация. Выбираем Email из списка – он там есть.

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

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

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

Теперь мы сделаем ссылку на наш опрос и получим код для вставки нашей формы на любой сайт. Переходим в настройке по кнопке слева вверху и делаем 3 клика, которые нам советует Мастер опросов – красная ссылка – нажмите здесь:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

Теперь мы можем скопировать отсюда ссылку на опрос или код для сайта:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

Откроем ссылку в режиме инкогнито и увидим форму глазами нашего клиента:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

Если мы заполним и отправим эту форму, то увидим результат в нашей новой таблице заявок в Интеграме:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

Видео-инструкция по созданию простой формы опроса:

https://rutube.ru/video/549098cbb63fb386a1cf1958eaa6bf40/

3. Регистрация бота

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

Находим @BotFather в Телеграме и регистрируем нового бота и имя для него:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

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

Заходим к нашему новому боту и нажимаем Start / Начать – теперь мы готовы принимать здесь сообщения от него.

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

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

4. Настройка запроса для обращения к боту

Создадим новый запрос bot в меню Запросы:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

Добавим туда 3 вычисляемых поля, назвав первые два из них Email и Описание.

Нажать «вычисляемое» и поменять имя добавившейся колонки

К третьему вычисляемому полю примените функцию abn_URL, и должна получиться такая заготовка запроса:

Конструктор запросов умеет вычислять поля и обращаться вовне

У таблицы заявок каждое поле имеет свой код, и нам нужно скопировать их в формулы вычисляемых полей, как на рисунке. Для перехвата параметра используется конструкция 'request.tNNN', где NNN вы меняете на своё значение. Вставьте 'request.tNNN' в формулы первых 2-х колонок и исправьте NNN на ваши номера – их видно при подведении курсора к заголовку колонки таблицы.

Посмотрите эти номера в вашей таблице и заполните здесь формулы

Итак, этот запрос отобразит вам здесь переменные, переданные из вашей формы POST-запросом. Про это потом можно почитать тут, если интересны детали. А пока идём дальше.

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

Из конструктора запросов вы попадете на форму редактирования запроса

Здесь вам надо заполнить 2 поля: первое это адрес API бота, а второе - текст сообщения, состоящий из двух пришедших параметров – Email и Описание. Можете скопировать ссылку под картинкой и заменить коды своими значениями, полученными от BotFather.

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

https://api.telegram.org/bot[код BotFather]/sendMessage?chat_id=[чат ID]&text=[Email]-[Описание]

Последнее, что нам требуется сделать – это использовать этот запрос для обращения по API при создании записи в таблице заявок.

Для этого мы идем в меню Структура, где кликаем на заголовок прямоугольника Заявка на оценку и выбираем из выпадающего списка внизу « --- добавить новое --- »:

«добавить новое» – это первое значение в выпадающем списке колонок

Далее мы задаем любое имя этой колонке, например, bot, и сохраняем это значение, как новую колонку таблицы.

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

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

Нажмите Enter или иконку диска, чтобы сохранить изменение

Теперь при заполнении формы будет вычисляться значение по умолчанию, которое мы здесь задали, – Интеграм найдет наш запрос bot, выполнит его, перехватит переданные параметры и передать их боту на отправку. Пробуем ещё раз отправить форму:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

Заявка будет отправлена, данные сохранены, а мы немедленно получим сообщение в Телеграм:

Форма заявок на сайт с оповещением в Телеграм за 10 минут (no-code)

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

Спасибо!

Как редактировать шаблон Интеграма локально

13/02/2025 - Опубликовано в Разработка Integram

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

Файлы можно загрузить вручную в меню Файлы:

enter image description here

Меню Файлы, папка templates – защищенные шаблоны

Если вы используете VS Code, то в нем есть плагин Run On Save, с помощью которого можно закидывать файлы в шаблоны Интеграма – в меню Файлы в папку templates. Он имитирует ручную загрузку с правами пользователя, роль которого имеет доступ к файлам.

В его настройках json можно использовать такой json, заменив {ВашаБД}, {ТокенАвторизации} и {ТокенXSRF} своими значениями:

{
  "folders": [
    {
      "path": ".."
    }
  ],
  "settings": {
    "emeraldwalk.runonsave": {
          "commands": [
        {
          "match": "integram-front/templates/.*html$",
          "cmd": "curl -v POST -H "Connection: close" -H "Content-Type: multipart/form-data" -H "x-authorization: {ТокенАвторизации}" -F "_xsrf={ТокенXSRF}" -F "add_path=" -F "upload=Загрузить" -F "rewrite=true" -F "userfile=@${file}" https://integram.io/{ВашаБД}/dir_admin/?JSON&templates=1"
        }
      ]
    }
  },
}

По аналогии можно сохранять файлы стилей и скриптов в папку download.

Заведите в своем Интеграме роль api и пользователя с этой ролью: enter image description here Роль с доступом на изменение файлов

Сгенерируйте этому пользователю токены в новом рабочем месте api и пользуйтесь своим любимым редактором! enter image description here По адресу /api теперь есть API-explorer

Спасибо и успехов!

Интеллектуальный отчет для редактирования данных в таблицах

21/01/2025 - Опубликовано в Разработка Integram

Хочу рассказать (видео-формат youtube, rutube) про удобный инструмент для редактирования данных из разных таблиц в виде единой таблицы, как в Excel. Для наглядности мы часто собираем данные в отчеты, где их удобно изучать. Теперь эти данные можно редактировать прямо в отчете, и они будут компактно храниться в таблицах Интеграла, в отличие от Excel.

Интеллектуальный отчет для редактирования данных в таблицах

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

Мы видим здесь 5 связанных уровней данных, по которым у нас построен запрос

Запустить специальный режим работы с отчетом можно вот этой кнопкой в конструкторе запросов.

Интеллектуальный отчет для редактирования данных в таблицах

Здесь можно удобно и быстро фильтровать данные, сортировать их по нескольким колонкам – по убыванию или возрастанию, но самое главное – здесь их можно редактировать.

Интеллектуальный отчет для редактирования данных в таблицах

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

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

Интеллектуальный отчет для редактирования данных в таблицах

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

Интеллектуальный отчет для редактирования данных в таблицах

Давайте посмотрим, как это выглядит в таблицах – начнем с таблицы Услуг. Здесь мы видим подчиненную таблицу цен на услуги и можем перейти в неё, чтобы посмотреть цены и список моделей, для которых действует эта цена.

Интеллектуальный отчет для редактирования данных в таблицах

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

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

Интеллектуальный отчет для редактирования данных в таблицах

Это будет стоимость услуги для iPhone 12 и, задав цену, мы выбираем эту модель из выпадающего списка.

Интеллектуальный отчет для редактирования данных в таблицах

Давайте добавим цены двух деталей для услуги – гидры и шлейфа. Теперь похожим образом указываем для них закупочные цены от разных поставщиков. Таблица растягивается и трансформируется по мере ввода данных.

Интеллектуальный отчет для редактирования данных в таблицах

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

Интеллектуальный отчет для редактирования данных в таблицах

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

Интеллектуальный отчет для редактирования данных в таблицах

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

Интеллектуальный отчет для редактирования данных в таблицах

Для редактирования данных в отчете, вам понадобится добавить колонки с идентификаторами записей в конструкторе запросов. Сделать это нужно только для первых колонок таблицы, которые отмечены на структуре данных.

Вот эти 4 колонки позволят вам редактировать данные в отчете. В самом отчете идентификаторы будут скрыты.

Конструктор запросов и Структура таблиц

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

Для вашего удобства при наведении курсора на поле первой колонки таблицы в конструкторе запросов появляется кнопка [ID], по которой поле с ID и нужным именем добавляется автоматически:

enter image description here

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

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

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

Спасибо!