Обучение Bubble.io, с нуля до про. Часть 1 из 2 | nocode монстр

• Bubble - популярный конструктор сайтов.  

• Видео поможет начинающим разработчикам освоить верстку и перенос дизайна в систему Bubble.  

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

• Viru - площадка для статей, в основном бизнес-тематики.  

• Логика сервиса: лента статей, возможность создания статей пользователями.  

• Использование встроенного редактора, похожего на Notion.  

• Автор канала хочет поддержать фонд "Лучшие друзья".  

• Фонд помогает людям с особенностями интеллектуального развития адаптироваться в обществе.  

• Призыв к подписке и пожертвованиям для продолжения работы фонда.  

• Создание проекта в Bubble.  

• Рабочая область и элементы, которые можно перетаскивать.  

• Принципы верстки: перетаскивание элементов и их позиционирование.  

• Разные размеры экранов требуют разных подходов к верстке.  

• Типы отображения: строка и колонка.  

• Автоматическое масштабирование элементов в зависимости от размера экрана.  

• Страница отображается в виде колонки.  

• Использование элемента "группа" для позиционирования дочерних элементов.  

• Настройка высоты и цвета группы, добавление иконки сервиса Viru.  

• Добавляем картинку 30x32 в колонку.  

• Настраиваем отступы: 80 пикселей слева, 14 пикселей сверху и снизу.  

• Загружаем картинку и добавляем кнопку с отступами 14 пикселей сверху и снизу.  

• Настраиваем цвет фона и тень для блока.  

• Добавляем кнопку с иконкой и текстом.  

• Задаем параметры кнопки: высота 42 пикселя, скругление 42 пикселя, белый фон, черный текст.  

• Группируем элементы для удобного размещения.  

• Добавляем картинку профиля пользователя и задаем скругление.  

• Настраиваем отступы и переносим элементы в новую группу.  

• Используем автоматическое выравнивание для элементов.  

• Настраиваем отступ для группы с иконкой.  

• Проверяем, что все элементы расположены правильно.  

• Собираем статьи в большой блок 640x640.  

• Задаем фон страницы и добавляем группу с белой заливкой и скруглением.  

• Настраиваем отступы для текстовых блоков.  

• Объясняем разницу между маржинами и падингами.  

• Задаем падинги для группы, чтобы элементы не прилипали к краям.  

• Удаляем дефолтные отступы и задаем новые параметры.  

• Проверяем, как сайт выглядит на мобильных устройствах.  

• Используем инструмент "Посмотреть код" для выбора экрана телефона.  

• Убеждаемся, что сайт корректно отображается на разных устройствах.  

• Использование фиксированных значений для верстки приводит к проблемам на мобильных устройствах.  

• Элементы не вписываются в экран, появляется прокрутка.  

• Необходимо задавать поведения элементов для разных размеров экрана.  

• Условия позволяют скрывать элементы при определенных размерах экрана.  

• Пример: скрытие кнопки при ширине экрана меньше 400 пикселей.  

• Адаптивная верстка требует ручной настройки для корректного отображения на мобильных устройствах.  

• Адаптивная верстка требует тщательной настройки каждого элемента.  

• Нет простого способа сделать верстку адаптивной без ручной настройки.  

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

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

• Добавление интерактивности в приложение: регистрация пользователя.  

• Использование фиксированного контейнера для центрирования элементов.  

• Использование событий для проверки состояния элементов, таких как валидность ввода.  

• Применение стилей в зависимости от состояния элементов.  

• Настройка отображения кнопки "Войти" в зависимости от статуса пользователя.  

• Использование коллапса элементов для удаления места под них.  

• Настройка отображения кнопки "Войти" и профиля пользователя.  

• Объединение элементов в группы для упрощения настройки.  

• При клике на кнопку "Войти" добавляется первое действие.  

• Создается событие, которое показывает элемент "по плагин".  

• При клике на крестик настраивается действие для скрытия элемента.  

• Действия в Bubble настраиваются цепочкой событий.  

• Действия могут быть связаны с аккаунтом, базой данных или виджетами.  

• Логика действий проверяется через кнопку "Превью".  

• Стейты позволяют запоминать состояние элементов.  

• Стейты могут быть привязаны к любому элементу.  

• Стейты используются для локального хранения данных, которые очищаются при перезагрузке страницы.  

• Стейт создается с указанием имени и типа данных.  

• Дефолтное значение по умолчанию устанавливается в "да".  

• Элементы отображаются в зависимости от значения стейта.  

• При клике на "Зарегистрироваться" стейт изменяется на "нет".  

• При нажатии назад стейт возвращается к "да".  

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

• При клике на "Зарегистрироваться" начинается процесс регистрации.  

• Указываются поля для ввода email и пароля.  

• Добавляется поле для ввода имени пользователя.  

• После регистрации пользователя стейт сбрасывается в дефолтное состояние.  

• По закрываются, чтобы не смущать пользователя.  

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

• При нажатии на кнопку появляется сообщение о необходимости регистрации.  

• Регистрация на тот же email проходит успешно, появляется кнопка "написать" и иконка профиля.  

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

• Верстка - это долгое и кропотливое занятие, требующее практики.  

• Автор рекомендует попробовать собрать несколько экранов самостоятельно.  

• Верстка на Bootstrap неудобна из-за нагромождения элементов и сложности адаптивной верстки.  

• Автор предлагает делегировать скучные задачи специалистам.  

• В описании видео есть ссылка на сайт автора для заказа услуг по разработке приложений.  

• Для тех, кто хочет стать разработчиком, автор рекомендует подписаться на его телеграм-канал.  

• Автор благодарит за просмотр и просит делиться видео, подписываться и ставить лайки.