Путь Bubble-разработчика
158 subscribers
3 photos
1 video
9 links
😎

Фишки и заметки Bubble-разработчика

Автор: t.me/revik

Провожу обучение и консультации

😎
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Как просто настроить изменение внешности кнопки при заполнении обязательных инпутов?
1) указываем какие инпуты не могут быть пустыми
2) прописываем в стиле кнопки атрибуты при условии когда она isn't clickable
3) радуемся)
👍7🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Убираем паузу между вводом данных в инпут и фильтрацией РГ🔥
Обычно фильтруя РГ значением из инпута мы получаем задержку в пару секунд между вводом текста и показом релевантных результатов. Сократить задержку позволяет плагин Instant Text, который на лету анализирует содержимое инпута и отдает его значение в работу! Почти как FuzzySearch, и чтобы повторить функционал поиска по нескольким полям, можно (за совет спасибо @esporykhin) у сущности создать отдельный филд и в него складывать значения из всех филдов по которым нужно производить поиск.
Оставь реакцию, если понравилось!
🔥14👍4
Нашел ценное замечание по поводу листовых API:

Оригинал:
API workflows are particularly great for handling operations on a list. Bubble's "make changes to a list of things" and "delete a list of things" actions can be unreliable at scale, so using the "schedule an API workflow on a list" is a good option instead.

Перевод:
API workflows особенно хороши для выполнения операций со списком. Такие функции Bubble как "make changes to a list of things" и "delete a list of things" могут быть ненадежными при работе с большими списками, и вместо них лучше использовать "schedule an API workflow on a list".

Source: https://docs.airdev.co/bubble-development-guide/steps/develop/make-things-modular

UPD Важное дополнение: эти советы работают, если вы по какой-то причине не хотите/не можете настроить цикл (рекурсивное АПИ). Цикл на бэкенде с правильно выставленной задержкой более надежен, особенно на больших списках.
👍13❤2
🔥Создать массив объектов без цикла на бэкенде и получить список unique id всех созданных элементов?🔥

Такую возможность открывает использование Data API.

Включить взаимодействие с данными по API можно в настройках: Settings - API - Enable Data API.
Под последним пунктом отмечаем таблицы, в которых хотим создавать/удалять/редактировать записи.
Не забываем сходить на вкладку Privacy Rules и установить для конкретной таблицы правила использования по API.

Теперь мы можем отправлять POST-запрос (на endpoint https://[appname].bubbleapps.io/api/1.1/[typename]/bulk) с телом в JSON-формате:

{"key1": value, "key2": value}
{"key1": value, "key2": value}

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

Скорость создания зависит от:
- доступного capacity
- размера создаваемых элементов.

В ответ на запрос мы получаем статус и ID созданных записей в текстовом формате.

UPD: по совету от @titovdo, если у вас не редачится тело запроса через wf, поставьте формат "Raw" в Body type👌

🔥Оставь реакцию, если понравилось! 🔥

Источник: https://manual.bubble.io/core-resources/api/data-api#bulk-create-new-things
🔥9👍4
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Вносим изменения в список записей, не используя "тестовую" страницу🔥

Продолжаем тему взаимодействия со списками

Тестовые страницы в проекте безусловно нужны, и вряд ли кто сможет без них обойтись) Но вместо создания отдельной страницы с кнопкой, запускающей API воркфлоу для обработки списка записей (удаление/редактирование/создание новых на основе существующих), можно использовать уже созданный в Баббле интерфейс!

Для начала создайте API воркфлоу для обработки ОДНОЙ записи из необходимой таблицы. Укажите в настройках ОДИН параметр с необходимым типом данных. Настройте action для работы с записью (укажите условия при которых действие может выполниться).

Затем переходим во вкладку Data, открываем раздел App data и над текущей таблицей видим кнопку Bulk. Эта кнопка позволяет запустить Backend воркфлоу настроенный на работу с ОДНОЙ записью для ВСЕХ записей в текущей таблице!
Нажатие на кнопку открывает попап со списком API воркфлоу (неподходящие для работы с текущей таблицей выглядят серыми и некликабельны, под каждым объясняется почему его нельзя использовать). Выберите ранее созданный воркфлоу и ниже появится предупреждение сколько всего записей сейчас находится в таблице и соответственно будет обработано. Нажимаем "Run workflow" и наблюдаем процесс обработки!

Напиши в комментариях как ты называешь свои тестовые страницы и оставь реакцию если пост понравился🔥
🔥11👍3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Автообновление Preview-страницы🔥

Классное ускорение рабочего процесса с плагином Reload on Update от AirDev.

После установки плагина, на странице, которую вы хотите автоматически обновлять при внесении изменений, настройте рабочий процесс When page is loaded и внутрь добавьте действие Auto-Reload page on update из раздела Plugins. Внутри экшена можно включить/отключить отображение баннера с предложением обновить страницу.

Удобно, например, когда правишь дизайн на одном мониторе а окно с превью расположил на втором.

🔥Оставь реакцию, если понравилось!🔥
🔥21👍7
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Создаем переменную внутри workflow и используем её в следующих шагах🔥

Нашел и начал использовать прикольный плагин Variable.
Устанавливаем его, и в workflow в разделе Plugins появляются 2 действия "Store a text variable/Store a number variable". Не нужно создавать скрытые input, заполнять промежуточные кастом-стейты для получения расчетов, достаточно создать новый шаг, рассчитать в нем данные и использовать их в следующих шагах. Похожий функционал предоставляет действие Set WF Vars в плагине Canvas Utilities.

Можно использовать, например, когда в условии шага нужно сравнить два рассчитываемых значения (как показано в GIF). Количество сценариев ограничено только вашим воображением)

Напиши, где бы ты использовал или уже используешь этот плагин.

🔥Оставь реакцию, если понравилось🔥
🔥19👍3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Избавляемся от лишних шагов в воркфлоу с помощью :formatted as text🔥

Нередки ситуации когда при создании/редактировании записей нам нужно записать в одно поле разные данные при разных условиях.

Решить задачу можно, не создавая дополнительные шаги) Достаточно разместить условие в значение филда и добавить к нему функцию :formatted as text, которое позволяет указать какие значения следуют сообщить полю при выполнении/не выполнении условия.

Пример в GIF достаточно примитивен, но позволяет понять суть данной функции) Очень помогает при формировании JSON тела для отправки по API. Избавляет от лишних повторений, и последующей проверки шагов на соответствие последним изменениям.

Функция на выходе отдает текст. Есть еще :formatted as number (отдает числа).

Напиши в каких еще ситуациях ты использовал эту фишку или планируешь использовать!

🔥Оставь реакцию если понравилось🔥
🔥14👍2
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Немного о безопасности🔥

😁Я немного знаю о вашем сайте: на нем с большой долей вероятности есть страница test
Обычно эта страница собирается "на скорую руку" без настройки правил отображения или редиректа.

Чем это грозит?
Если неравнодушные👋 пользователи знают адрес вашего сайта и решат это проверить, они возможно:
1) получат доступ к новому функционалу, которого еще нет на сайте 😨
2) получат доступ к кнопкам, запускающим бэк, которые многие так любят рисовать на этих страницах. В теории, это может привести к изменениям в БД которые будет невозможно без потерь отменить обычным восстановлением (если хватились не сразу)😭

Как можно обезопасить свой сайт?
1) Задавайте тестовым страницам более сложные названия👨‍💻
2) Используйте продуманные Privacy Rules🤓

Пиши в комментариях, какие меры безопасности помогают тебе 🚗

🔥Оставь реакцию если пост был полезен🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18❤3🙏2
🔥Привет! 🔥

Есть ещё много чего хотел бы вам рассказать, но пока маленький опрос🙃
Интересно узнать:
1) как попали в канал (кроме случаев когда я сам добавил🤣)
2) какие посты особенно были полезны (может что-то вам реально упростило работу)
3) что хотели бы ещё увидеть на канале) Напишите)

Если писать неохота, можно поставить реакцию🔥: будем считать ее как оценку контента на канале)
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥30👍3👌1
This media is not supported in your browser
VIEW IN TELEGRAM
🔥- Я только спросить! - В очередь!🔥

На одном из проектов была задача: дать юзерам возможность присылать API-запросами в приложение на Баббл товары в больших количествах (до 40-50 тыс. шт.). Создать большое количество товаров с помощью Data API не проблема: за 20 с создавалось 250 записей с 12 заполненными полями, но вопрос: что станет с сайтом, если запросы отправят сразу 10, 20 и более пользователей?
Такие запросы будут выполняться параллельно, постепенно расходуя capacity приложения. Что произойдет, когда процессы заполнят всю память? Они встанут в очередь, и начнут выполняться последовательно! Круто?! Не совсем🤪) Представим что некоторые действия пользователя на фронте зависят от процессов на бэке. Что ждет пользователя, если на бэке выстроится очередь? Долгий ответ сайта) В особо тяжелых случаях браузер отобразит вам сообщение "app too busy"😆
Чтобы не дать пользователям положить ваш сайт, используйте очередь.

Спецы советуют переносить сложные процессы с фронта на бэк, и это имеет смысл. Но на бэке они не всегда должны выполняться параллельно🙃
С тяжелыми процессами на бэке можно поступить следующим образом:
1) настройте процесс так, чтобы вместо запуска отдельного API workflow, юзер складывал свое задание в БД (создайте для этого отдельную таблицу "Очередь")
2) запустите цикл, который с определенной частотой (частоту вычисляют отталкиваясь от показаний на вкладке Logs - Capacity) будет запускать обработку очередной записи из таблицы "Очередь" (убедитесь, что цикл не отвалится, если в таблице закончатся записи).

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

Здоровья вашим аппкам)

Напишите, пользуетесь ли вы этим способом, и как бы вы его доработали👍

🔥Ставь реакцию, если понравилось🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22❤3👍3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Превращаем список в красиво оформленный текст🔥

Допустим, заказчик хочет чтобы при оформлении очередного заказа ему на почту отправлялся список позиций входящих в заказ. Позиция включает в себя название товара, количество и итоговую стоимость. Как эту информацию оформить списком и отправить в письме?

На помощь приходит знакомая многим функция :format as text. Она работает как РГ, только в тексте: вы объясняете как должна выглядеть строка (формируете шаблон), а Баббл сам формирует все строки и разделяет их указанным разделителем.

Функция очень помогает при формировании API-запросов, например при массивном создании новых записей через Data API.

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

🔥Оставь реакцию, если понравилось🔥
🔥17👍6👌2
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Превращаем статичные ссылки в кликабельные 🔥

Небольшая подсказка, ускоряющая работу с ссылками в текстовых элементах. Работает с адресами сайтов и почт.
Ставь 🔥 если понравилось)
🔥19👍3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Меняем юзеру пароль, не зная старого пароля и без отправки письма на его почту🔥

Допустим был создан аккаунт для клиента, а пароль не подходит😱 (такое иногда случается, если не юзается confirm password при регистрации!) и хочется его сменить, не тревожа клиента🙈.

Чтобы попасть на страницу восстановления пароля в обход почты пользователя:
1) Создаем API Workflow(!) с параметром user с типом User. Добавляем первым шагом "Send password reset email" для почты юзера присланного в параметре, внутри шага отмечаем "Just make token, don't send email". На втором шаге складываем результат первого шага к юзеру в филд, назовем его "reset_token".
2) На фронте рисуем РГ с пользователями, в ячейке с юзером располагаем кнопку "Сменить пароль", вешаем на нее первым шагом запуск вышеупомянутого воркфлоу, отправив в параметре user пользователя из текущей ячейки. Вторым шагом делаем паузу, чтобы токен успел сгенериться и прописаться к юзеру в БД (необязательно😊). Третьим шагом - go to page→"reset_pw" добавив в этом шаге параметр reset со значением из филда "reset_token" родительского пользователя. Все - вы уже на странице сброса пароля)

Обратите внимание, что токен генерится только на бэкенде, на фронте получите пустой результат) Вышеописанная последовательность - не каноническая, а всего лишь пример)

🔥Оставь реакцию, если понравилось🔥
🔥19⚡4🏆3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Новая кнопка в интерфейсе) открывает меню блоков, которые можно встроить в проект) Frames не установлен, судя по всему новая фича Баббла)
🔥17👍2
Вот уже как год канал открывает подписчикам полезные Баббл фишки) Признаюсь, рад тому, что благодаря постам мы стали разрабатывать быстрее и правильнее, "как положено", и уверенно двигаемся в правильном направлении) Спасибо за регулярный фидбэк, ваш опыт и мнение очень ценны) Дальше будет только интереснее)
🔥25🎉2
⏺Список тем на канале:

👩‍🎓 Из документации:
• API Workflow on a list лучше...
•
Массовое создание записей без цикла
• Редачим таблицу без тестовой страницы

🤓 Описание функций:
• Координаты превратить в адрес
• Изменение стиля для некликабельных элементов
• Formatted as text: сокращаем кол-во шагов в воркфлоу
• Format as text: cписок записей в виде оформленного текста
• Статичные ссылки в кликабельные
• Смена пароля без почты и старого пароля (+1 способ в комментах)
• Сжимаем фото с помощью imgix

📞 Плагины:
• Автообновление превью
• Мгновенный доступ к значению инпута
• Переменная внутри рабочего процесса
• Global Variable вместо кастом стейт и url-parameter

💪 Lifehacks/крутые практики:
• Называем страницы правильно
• Очередь на бэкенде
• Копирование между приложениями

😎 Мои эксперименты:
• Арканоид на баббл

☺️ Информационная доска
• Книга отзывов и предложений
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍3
На днях неофициальный Telegram бот @donate открыл владельцам каналов возможность публиковать платный контент и настраивать платную подписку для приватных каналов.

🔔 Предупреждаю: платных подписок и постов в моих планах нет и в ближайшее время не предвидится🥳

Но...
для неравнодушных 😉 подписчиков думаю разместить кнопку "Пожертвовать" чтобы  дать возможность выразить благодарность за мой труд ❤️

Есть мысль пустить средства на чай с печеньками, покупку курсов, книг и консультаций, которые потом можно будет конвертировать в полезные посты на канале)

Поделитесь в комментах своими мыслями или оставьте реакцию с оценкой идеи🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍4
Какие методы вы используете для переключения групп на странице?
Anonymous Poll
65%
Custom State
25%
Show/Hide element
57%
Get data from page URL
1%
Запись в БД
5%
Global Variable
6%
Другое
This media is not supported in your browser
VIEW IN TELEGRAM
🔥Global Variable🔥

По итогам опроса:
- Самым популярным способом оказался Custom State, но это и не мудрено (не забываем что значение кс при перезагрузке страницы не сохраняется, а значит не получится фиксировать выбранную вкладку)
- Самый очевидный - действие Show/Hide. Когда элементов 1 или 2 - вполне себе удобно)
- 59% отметили параметры в адресной строке и только 6% отметили Global Variable)

Те, кто знаком с JS знают, что глобальные переменные могут использоваться в любой части приложения. У плагина "Global Variable" немного похожая функциональность, но другой принцип действия - данные записываются в local storage и могут быть использованы в любой части страницы, на которой находится юзер минимальным набором действий🥳.

Элемент можно разместить на странице или внутри реюзабл, в настройках нужно указать название переменной. Использовать значение переменой можно ссылаясь на элемент. Затем действием "set a Global Variable" записываем в переменную с конкретным именем (вы можете разместить на странице несколько переменных) необходимое значение. Значение переменой автоматически перезапишется во всех местах на странице, где вы его использовали.

На гиф отражен процесс настройки и использования - значение меняется на странице, в reusable и в его дочернем reusable. После перезагрузки страницы значение переменной сохраняется. Изменяется и считывается оно быстрее аналогов. Можно юзать для навигации по странице) Области применения ограничены только вашим воображением)

Напишите, где вы уже использовали плагин, или планируете использовать.

🔥Оставь реакцию, если понравилось🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👍7👏2