🧠 Настройка Realtime обновление изображений в WeWeb через Supabase

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

🎯 Задача

У меня есть список публикаций. У каждой — изображение. Я нажимаю кнопку «Создать новое изображение», запускается автоматизация в Make.com, и по завершении она обновляет URL картинки в таблице Supabase. Мне нужно, чтобы в этот момент интерфейс WeWeb автоматически показал новую картинку — без обновления страницы.

---

🔌 Что я использую:

• WeWeb — no-code фронтенд
• Supabase — база данных + realtime
• Make.com — генерация нового изображения и обновление таблицы Supabase

---

🔧 Шаг 1: Включаем Realtime в Supabase

В Supabase:

• Открой таблицу, в которой будет происходить изменение (у меня это Vatoko_Blog_History)
• Убедись, что включён Realtime (таблица → ⚡ Realtime → Enable)
• Проверь RLS-политики (Row-Level Security):
  • Разреши SELECT, UPDATE (и, при необходимости, INSERT) для соответствуйщей роли
• Убедись, что название таблицы не содержит пробелов (иначе Realtime не работает)

---

📡 Шаг 2: Подписка на канал в WeWeb

На странице в WeWeb:

1. Создаём workflow, который запускается при загрузке страницы (OnPageLoad)
2. В него добавляем один модуль:
   Realtime → Subscribe to Channel
   Параметры:
   • Channel: image_update (или любое имя, но используйте одно и то же везде)
   • Type: Database changes
   • Event: UPDATE
   • Schema: public
   • Table: Vatoko_Blog_History

💡 Важно: Без этой подписки второй воркфлоу не запустится. Это “активация прослушки”.

---

🚨 Шаг 3: Реакция на изменение

На той же странице:

1. Создаём второй воркфлоу с триггером:
   On Realtime Database Change
   Параметры:
   • Channel: image_update
   • Event: UPDATE
2. Внутри добавляем модуль:
   Change Variable Value — например, чтобы обновить массив с публикациями.

Вот как можно вытащить нужные данные:

return event.data.new?.id || 'none'

return event.data.new?.banner_url || 'empty'

Теперь при каждом обновлении строки — ты получаешь все свежие данные.

---

🔄 Обновление данных в массиве коллекций WeWeb после Realtime события

В моём проекте данные о публикациях хранятся в массиве — это коллекция content, содержащая множество объектов. Каждый объект — это одна публикация с полем id и banner_url.

Когда приходит обновление из Supabase (событие Realtime), мне нужно найти в массиве объект с нужным id и обновить только banner_url — не перезаписывая весь массив.

---

🔧 Как это реализовано

1. В Realtime workflow (триггер On Realtime Database Change) я сначала сохраняю два значения в переменные:
   • updated_id: return event.data.new?.id
   • updated_url: return event.data.new?.banner_url
2. Затем использую модуль Change Variable Value, чтобы точечно обновить banner_url в массиве.

Вот ключевой момент:

🔍 Ключ:

"[" + findIndexByKey({{content}}, 'id', {{updated_id}}) + "].banner_url"

• findIndexByKey() — встроенная функция WeWeb, которая возвращает индекс элемента в массиве content, у которого id совпадает с updated_id
• Таким образом, мы получаем путь к нужному полю banner_url внутри нужного объекта массива

📝 Значение:

{{updated_url}}

• Просто подставляем новое значение, полученное из Supabase

---

💡 Визуально:

Было:

jsonCopyEdit[
  { "id": 1, "banner_url": "old.jpg" },
  { "id": 2, "banner_url": "old2.jpg" }
]

Стало (после UPDATE в Supabase строки с id: 2):

jsonCopyEdit[
  { "id": 1, "banner_url": "old.jpg" },
  { "id": 2, "banner_url": "new-generated.jpg" }
]

---

✨ Результат

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

🎁 Что дальше?

Можно:

• Добавить фильтр, чтобы слушать только определённый проект или пользователя
• Заменять изображение на лоадер, пока автоматизация в Make.com работает
• Уведомлять пользователя: “Изображение обновлено”

---

✅ Вывод

Настроить Realtime в связке Supabase + WeWeb — реально. Это мощная функция, которую многие недооценивают. А теперь ты знаешь, как это сделать.