Путь 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
Первый пост на канале)))
Что получится, если к стандартному функционалу Bubble добавить немного HTML) Да, можно крутануть любой объект на 180 градусов, а можно ... сделать игрушку как на видео)
Напиши свои предположения, как это было реализовано в Bubble (если не знаешь), а если знаешь, интересно услышать мысль, как можно было бы ее доработать)
P.S. Развивать проект я конечно не буду😄😄😄 Это приложение - демонстрация возможностей Bubble+HTML, и призыв смело юзать платформу в нестандартных задачах)
👍6🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Клиент захотел добавлять точное местоположение объекта, указывая широту и долготу. Превратить эти данные в geographic address можно по щелчку пальца с помощью функции Calculate formula👌
👍10
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