Как сделать текстовый блог на ноукоде – самому и без единой строчки кода. Пошаговая инструкция

Рассказываем, как без единой строчки кода и без CMS сделать индивидуально настраиваемый и кастомизируемый текстовый блог на ноукод-платформе разработки веб-приложений Bubble.

Зачем создавать блог без кода

Много платформ подойдут для блога – это и конструкторы, и десятки Content Management System (CMS, система управления контентом сайта). Самая известная CMS – WordPress.

CMS – вещь привычная и простая. Однако в том же WordPress, если захочется поменять цвет, кастомные шрифты или кастомную сетку, придётся подключать плагины, использовать платные темы или влезать в код – в CSS-стили как минимум. 

С ноукодом же реально создать красивый и функциональный блог – с гибким дизайном, настроенной сеткой публикаций и кастомными элементами – без кода и платных тем. Вы сможете сделать кнопку, ссылку и другой элемент нужного цвета, формы, размера; расположить элементы где вздумается; настроить под себя страницу публикации постов; настроить желаемую сетку постов; прикрутить любую функцию, которая прокачает блог. По сути, вы сделаете на ноукоде собственную CMS. А потом ещё сможете менять настройки по желанию.

Некоторые скажут, что те, кто не умеет кодить, могут спокойно сделать блог на конструкторе – и будут правы. Однако на конструкторе всё равно встретятся ограничения, особенно по кастомизации, но на ноукоде таких ограничений намного меньше, вы можете их обойти. Да и вообще, так приятно сделать своё собственное. Так что потренеруемся.

Структура блога

Сразу условимся, что мы делаем MVP блога – минимальный жизнеспособный продукт. То есть реализуем минимальный набор функций и элементов блога и покажем основы создания. Этот принцип масштабируется и усложняется через дополнительные функции.

Представим, что наш продукт – авторский блог молодого фрилансера, который любит рассуждать о жизни, рефлексировать и критиковать окружающий мир. Он решил назвать блог «ЖУРНАЛ». Здесь автор будет периодически публиковать небольшие тексты в трёх рубриках: «О жизни», «Порадовало», «Возмутительно». Посты будут публиковаться единым списком на главной странице. Ещё он написал историю о себе и хочет выложить это на отдельную страницу.

Для начала надо придумать, прописать и лучше нарисовать логику и структуру блога. Возьмём вот такой минимальный набор составляющих частей:

• Главная страница;
• Страница с рубриками – на каждую рубрику по странице;
• Страница для загрузки поста – редактор, через который загружается пост;
• Страница поста – для каждого отдельного текста;

Теперь погрузимся в детали.

• На главной странице хотим шапку-хедер с меню и иконками соцсетей, вступительную часть блога и три последних поста с фотографиями.
• В меню будет рубрика «Об авторе» – это ещё одна страница. Там будет написано об авторе блога. 
• В списке постов будут заголовок, подзаголовок и кнопка «Читать историю целиком», по которой будет переход на страницу с отдельным постом. У каждого поста хотим видеть дату публикации и название рубрики. 
• И пусть в блоге публикует посты один человек – админ. Под него тоже будет рабочая страница-область, через которую админ будет загружать тексты.

База данных 

После составления желаемой структуры будущего блога переходим к формированию базы данных. База данных у блога – это место хранения фотографий, текстов. Но главное, что именно база обеспечивает работу блога.

Выделяем главные роли и составляющие базы данных – они у разработчиков называются сущности. В Bubble – это data type.

Первая сущность – Пост (Post)

Выделяем атрибуты и тип данных сущности Пост. Ниже прописываем, как называются атрибуты и типы данных на русском языке (чтобы было понятно нам) и в скобках на английском языке (чтобы понимал Bubble, и именно на английском мы введём данные в базу).

В формате Атрибут – Тип данных у сущности Пост будут:

• Название (Title) – Текст (text)
• Основное изображение (Main picture) – Изображение (image)
• Дата публикации (Publication date) – Дата (date)
• Рубрика (Category) – Текст (text)
• Главный текст (Body text) – Text

Вторая сущность – Пользователь (User).

Эта сущность относится к тому, кто будет верстать и публиковать статьи в блоге, пока это один человек. Но вообще на Bubble реализуема и мультипользовательская модель, где публикуют тексты зарегистрированные пользователи: как в блоге Medium, как в Яндекс.Дзене и тому подобное.

Атрибуты и типы данных сущности Пользователь:

• Имя и фамилия (Name) – текст (text)
• Краткая биография (Bio) – текст (text)
• Фотография (Profile photo) – изображение (image).

В Bubble база данных составляется во вкладке Data. Тут в горизонтальном рубрикаторе нужна вкладка Data types. Слева выводится список созданных сущностей – data types, справа – атрибуты каждой сущности с выбранным типом данных. 

Отдельно остановимся на проработке части базы данных связанных с рубриками – атрибут Category. Настраивать рубрики будем во вкладке Option sets, потому что при публикации поста рубрика будет выбираться из выпадающего списка. Прописать рубрики нужно в поле New option. После этого надо снова вернуться во вкладку Data types и атрибуту Category присвоить значение Category – то есть связать опции будущего выпадающего списка при выборе рубрик и сущность Пост.  

Сборка блога и проработка логики событий. Главная страница и хедер

Как мы решили раньше, у блога должна быть главная страница с хедером-меню и лентой постов.

• Главная страница в Bubble создана по умолчанию, называется index и находится в левом верхнем углу. Там собираются созданные страницы и ре-используемые элементы: хедер и футер, окно об ошибке 404, поп-ап регистрации и авторизации пользователя.
• Хедер в Bubble тоже по умолчанию есть, но не такой, как надо. Выбираем страницу Header. Редактируем по желанию цвет и форму, ставим логотип-название, делаем раздел «Об авторе блога» (пока просто текстовый элемент) и ставим иконки соцсетей.   
• Чтобы вывести хедер на главную, надо вернуться на главную страницу. Находим хедер в списке элементов Reusable elements и перетаскиваем на главную страницу index.

• Здесь же делаем вступление к блогу: через текстовый элемент пишем название, краткое описание и картинку через элемент Image.
• Делаем страницу «Об авторе блога». Создаём новую страницу, там вновь дублируем хедер, ставим текст и фотографию автора (а у нас картинка).
• Связываем текстовый элемент в хедере «Об авторе блога» с этой страницей – то есть делаем текст кликабельным. Для этого вновь идём в хедер, кликаем на текст и через кнопку «Start\Edit workflow» задаём навигацию на нужную «Об авторе блога».

Теперь настроим внутреннюю логику блога: публиковать посты с одной страницы, выводить их списком в конкретное место на главной странице и на отдельную страницу поста и собирать в базе посты и тексты. 

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

Хорошая новость – делать под каждый пост отдельную страницу в Bubble не нужно. Посты будут собираться в базе, там и храниться, а Bubble будет брать их из базы и показывать в месте, которое мы укажем. Но сначала нужно место, откуда будут загружаться посты.

• Создаём новую страницу и назовём её понятно для себя, чтобы не запутаться –  например, addnewpost. На этой страница структура , как хочется разработчику – эту страницу никто, кроме админа, не увидит. 
• Делаем формы для ввода данных – через элемент для ввода Input. Здесь будем вводить заголовок, подзаголовок, основной текст. Категории делаем через элемент Dropdown – выпадающий список, из которого сами же будем выбирать категории. Для загрузки изображения делаем соответствующее окно.
• Внизу делаем кнопку «Добавить новый пост». 

И вот тут начинаем вершить магию веб-приложения. В элементе кнопка кликаем на «Start\Edit workflow» и уходим во вкладку Workflow. Здесь настраиваем логику событий приложения. 

Через «Create a new thing» мы дадим Bubble команду, что с этой кнопки будет создаваться что-то новое – в нашем случае пост, данные для базы. Повторяем логику создания новых данных как на скрине ниже.

Проверяем, как это работает через кнопку Рreview, смотрим, что всё попало в базу во вкладке App data. Элементы в базе можно редактировать и менять и после создания.  

Сборка блога и проработка логики событий. Вывод постов

Связка между визуальными элементами и базой данных устанавливается через элемент Repeating group. Bubble будет выводить в то место, которое ему укажем, те данные из базы, которые попросим. Главное – установить все связи и ничего не перепутать.

• Выбрав и перетащив на нужное место Repeating group, дадим знать, какой тип контента она должна показать. Это делается в настройке элемента в строке Type of content, там выводим Post. Источник данных – Search for Post.

Repeating group – своего рода таблица со строками и столбцами. И надо сказать, что она будет выводить в каждой строке и столбце. 

• В блоге нужны картинка поста, заголовок и подзаголовок, категория, дата публикации, кнопка-ссылка «Читать историю целиком». Все эти элементы перетаскиваем с панели, располагаем их в Repeating group и задаём желаемый размер и стиль.

Каждый элемент в Repeating group уже знает, что данные он берёт из родительской таблицы в базе от сущности Post. Осталось только указать пути до каждого элемента. 

• По кнопке Insert dynamic data показываем, что нам нужно, чтобы один элемент выводил на себя заголовок, второй – подзаголовок, третий – категорию. И так далее. Строка с данными приобретёт вид «Current cell’s Post’s …. », где вместо многоточия будет указан конкретный элемент из базы данных – конкретный атрибут выделенной сущности. Весь процесс показан на видео ниже.

• По такому же принципу – через Repeating group – нужно сделать страницу поста. К нему будет вести ссылка-кнопка «Читать историю целиком» с каждого конкретного поста. Так что нам нужно сделать так, чтобы Bubble выводил на страницу поста ту же информацию из базы данных, что и на главной странице тем же механизмом.
• Делать эту страницу нужно красивой. На неё придут читатели блога.

Проверяем как всё работает через режим Preview. MVP блога готов.     

Рабочий блог на ноукоде за 1 час –  и что не забыть после

Блог «ЖУРНАЛ» после этого надо оптимизировать визуально, адаптировать под размеры экрана и мобильную версию. На это уйдёт чуть больше времени. Мы же собрали такой блог за 1 час.

Кроме красоты, важно и не забыть о технических аспектах веб-приложения: безопасность, интеграции с внешними сервисами, отдельный вход для администратора, настройка видимости элементов и страниц.

А возможности самого Bubble расширяются плагинами – один из них Rich Text Editor, например, помогает решить задачу форматирования текста. С плагинами и гибкостью ноукода в блоге реализуются десятки функций.  

Что ещё можно сделать в блоге на ноукоде

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

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

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

Мы учим делать блоги, онлайн-магазины, интерактивные страницы и многое другое, что можно сделать на мощной ноукод-платформе Bubble на нашем курсе веб-разработки.