Динамический вывод данных в мини-приложение

Привет! Меня зовут Женя и я разработчик чат-ботов и мини-приложений в telegram и макс хлоп-хлоп.

В этой статье мы навайбкодим html-блок, чтобы динамически выводить данные из nocodb в мини-приложение в виде карточек.

Такая механика пригодится везде, где содержимого много и оно регулярно меняется: для расписаний, каталогов, рейтингов, списков мероприятий, материалов, тарифов и других данных, которые нужно отображать в мини-приложении в режиме «реального времени».

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

Шаг 1. Таблица в nocodb

В этом уроке я предполагаю, что у тебя уже есть некая таблица с информацией в nocodb или Гугл-таблицах (в них логика будет абсолютно такая же), в ней есть некие данные, которые тебе нужно выводить в мини-апп в «режиме реального времени»

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

Шаг 2. Переменная

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

Свою я назвала {{table}} и выбрала таблицу из Шага 1.

! Обратите внимание, что обязательно нужно провалиться в «Дополнительные настройки» и в пункте «Вариант поиска» выбрать значение «Все», иначе у вас отобразится только первая строка таблицы

Далее выбираем значение «Строка» и заполняем ее нашими переменными. Опытным путем я выяснила, что удобно разделять значения символом |, и дополнительно обозначать конец строки с помощью, например, FIN. Да пусть простят меня настроящие кодеры, если я изобрела что-то забавное :D

Разделитель указываем \n, чтобы каждая строка начиналась.. эм.. с новой строки.

Шаг 3. Вайбкодим!

Я тут немножко с тобой поболтаю, расскажу, как писала эту статью. Сначала я пошла в свой обычный рабочий chatGPT и озадачила его. Получилось очень быстро и легко. А потом я поняла, что этот парень уже дрессированный, надо бы попробовать написать код другой нейронкой, я выбрала deepseek, потому что никогда еще не использовала его для кода, и у меня нет платного аккаунта.

Это было весело :D На задачу, которую в привычной иишке я потратила полминуты, здесь понадобилось минут 15, причем ошибку в коде нашла я, а не он... Но в итоге родился промпт, который поможет тебе сгенерить код в любой нейросети. Я тестанула в deepseek, бесплатном (и незареганном) chatgpt и даже в Алисе AI. Везде успешно :)

Вот, держи:

Ты — frontend-разработчик. Мне нужен готовый HTML-код для мини-приложения в puzzlebot.

Входные данные:
- Переменная: {{table}}
- Формат: "дата | тема | формат | спикер FIN \n"
- Пример: "20.08.2026 15:00 | как открыть ип | мастер-класс | иван иванов FIN
 21.08.2026 12:00 | продвижение бизнеса | вебинар | пётр петров FIN
"
- Записей может быть любое количество (включая 0)
- Переменная ПОДСТАВЛЯЕТСЯ в HTML-код в момент загрузки страницы как обычный текст

Требования к коду:
1. Использовать только HTML + CSS + JavaScript (никаких библиотек)
2. Переменная {{table}} используется ровно 1 раз в скрытом блоке <div>
3. Все записи отображаются в виде отдельных карточек
4. Карточки содержат: дату/время, тему, формат (если есть), спикера
5. Адаптивно под мобильные устройства (ширина 100%, нет горизонтального скролла)
6. Современный, аккуратный дизайн (скругления, тени, отступы)
7. Если данных нет — показывать сообщение "Нет записей"
8. Код готов к вставке в HTML-блок puzzlebot без доработок

Особенности puzzlebot:
- Переменная {{table}} подставляется как текст, а не как JS-строка
- Поэтому лучше хранить данные в скрытом HTML-элементе, а не в JS-переменной
- Используй: <div style="display:none" id="rawData">{{table}}</div>
- Затем забирай через document.getElementById('rawData').textContent

Дополнительно:
- Добавь анимацию появления карточек (fadeIn)
- Сделай легкий эффект при нажатии на карточку
- Корректно обрабатывай длинные тексты (перенос слов)
- Используй безопасное экранирование через textContent

Верни один цельный готовый HTML-код. 

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

Шаг 4. Создаем HTML-блок

Копируем получившийся код, переходим в puzzlebot и создаем новое мини-приложение. Добавляем html-блок и вставляем туда наш код.

Копируем ссылку на мини-апп и проверяем результат!

Результат

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

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

А дальше идем обратно в нейронку и начинаем вносить правки! Главное, сохранить рабочий код, чтобы было к чему откатиться, если все сломается :Р

Если ты уже продвинутый пользователь нейронок — можно воспользоваться Codex или Claude Code, где создавать себе специальный файл с тестовыми данными вместо переменной, и в режиме предпросмотра править дизайн. А накатывать в пазл уже готовое решение :)

Разработка чат-ботов и мини-приложений в telegram и макс
@pro_eugenia | «Чат-боты и заботы»