Обзор Umbraco content management system
Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті
Меня зовут Иван Барчук, работаю Senior .Net разработчиком в компании Intellias. У меня более 7 лет опыта .Net разработки и работы с разными CMS. В этой статье мы рассмотрим Umbraco CMS.
Что такое content management system (CMS)?
Контентом являются продукты, товары, услуги, статьи, новости, блоги, изображения — все, что мы можем читать, слушать, смотреть. Content Management System позволяет нам выполнять как основные действия с контентом: создавать, читать, обновлять, редактировать, удалять (CRUD — Create, Read, Update, and Delete), так и дополнительные: стилизовать контент, привязывать размещение контента к указанному отрезку времени и т.д.
Еще одна важная сфера использования CMS — менеджмент пользователей:
— администраторов, которые будут создавать и модерировать контент;
— посетителей сайта, которые будут этот контент потреблять, и других.
Система, которая это все реализует, может быть написана на разных языках: .Net, Java, PHP. Одним из самых популярных сегодня можно считать PHP. Именно на нем написан Wordpress — CMS, которой пользовалось или хотя бы слышало о ней большинство владельцев веб-сайтов. Ее основные преимущества — низкая стоимость размещения, большой набор готовых модулей, простота использования.
Два подхода к выбору CMS
Первый подход — использовать уже существующие системы: Wordpress, Drupal и т.д.
Преимущества:
— у нас уже есть готовое решение, поэтому мы тратим меньше времени и денег;
— так как «продуктом из коробки» пользуются многие пользователи, владелец или разработчик постоянно его улучшает и расширяет функционал;
— система уже опробована рынком, а значит, сформировано комьюнити, в котором при необходимости можно получить ответы на технические вопросы;
— готовые системы, как правило, интуитивно понятны и удобны в использовании.
Недостатки:
— популярность продукта и открытость кода нередко приводит к проблемам с безопасностью;
— выбирая готовое решение, мы часто жертвуем гибкостью: реализовать в его рамках уникальный функционал может быть сложно и/или дорого;
— мы пользуемся решением «as is», например, не можем добавить другую административную панель или суб-администратора панели.
Второй подход — кастомное решение, созданное с нуля с учетом наших требований к системе.
Преимущества:
— имея единоличный доступ к коду, мы можем обеспечивать безопасность не только с технической точки зрения, но и с точки зрения бизнес-процессов. Посторонний человек не знает внутренних зависимостей вашей системы и факторов, определяющих ее работу;
— гибкость — мы можем спроектировать все, что необходимо, исходя из наших процессов и требований. Например, разработать дополнительные модули или реализовать интеграцию со сторонними сервисами: с 1С Бухгалтерией для онлайн-магазина, с новостным агрегатором для медиа-ресурса и т.д.;
— оптимизация в соответствии с нашими нуждами: например, исключить все, что нам не нужно, тем самым увеличив пропускную способность системы и скорость обработки запросов.
Недостатки:
— длительность реализации. Понадобится время не только на разработку, но и на первичный анализ, проработку идеи, функционала и т.д. Если вы располагаете временем, то сможете позволить себе кастомную разработку. Если нет — приходится выбирать из готовых решений и подстраиваться под их функционал;
— цена. Стоимость кастомных решений значительно выше: если в платных CMS ежемесячный тариф может составлять $10, то кастомное решение — это ежемесячная зарплата хотя бы одного разработчика.
Umbraco среди других CMS
Лидером среди СМS является Wordpress — на нем работает 48% проектов с готовыми системами управления контентом. По 4% — у Drupal и WP Engine, остальные 45% распределены между другими CMS, среди которых и Umbraco.
Таким образом, миром правит Wordpress. По моему мнению, он достиг стадии, когда нужно переходить к более высоким стандартам: повысить требования к безопасности, чистоте кода, качеству тестирования и т.д. В том виде, в котором Wordpress существует сейчас, он идеален для небольшого интернет-магазина, личного сайта, блога. Но если вы рассчитываете на рост трафика, кастомизацию и развитие проекта, есть смысл обратить внимание на другие CMS.
И где же тут Umbraco и почему многие о нем не слышали?
Одна из главных причин, которая заставляла многих отказаться от использования CMS Umbraco — высокая стоимость размещения. Несколько лет назад хост для .Net и базы данных стоил порядка $30 в месяц. Сейчас стоимость упала с $35 до $3-4. Я думаю, что это следствие появления и развития Azure.
По моему мнению, клиенту стоит предлагать работать с Umbraco CMS, если в его компании есть:
— опыт работы с .NET;
— наличие интеграционных решений и библиотек к ним;
— разработчик в штате.
История Umbraco
После окончания университета разработчик Нильс Хатвиг работал в датской компании над созданием Danish CMS. Тогда он и задумался над разработкой собственной системы управления контентом. Первая версия Umbraco появилась в 2003 году. С 2004 года она выложена в опенсорс.
Знаковое изменение произошло в 2013 году — выпуск версии Umbraco 7. Появилась реализация «административной части» на AngularJS, и Umbraco стала удобной для размещения и расширения. В момент написания этой статьи последний апдейт датируется 17 марта 2020 года.
Сегодня эта CMS активно развивается и поддерживается, у нее есть свое комьюнити, а техподдержка достаточно быстро отвечает на вопросы.
Для Umbraco требуется следующий стек технологий:
— Microsoft IIS — к сожалению, на сегодняшний день Umbraco разработана на .Net, но в планах есть переход на кроссплатформенную .Net Core (ориентировочно в 2020 году);
— подходят все SQL базы данных, но в версии «из коробки» поддерживаются Microsoft SQL Express 2012+ и MySQL (в версии 8.0.0 MySQL не поддерживается);
— Microsoft ASP.NET 4.7.2;
— синтаксис — Razor Syntax и Linq запросы;
— на админ панели используется AngularJS.
Цикл разработки на Umbraco
На схеме ниже показано, как выглядит процесс разработки на Umbraco.
Основные этапы:
1. Определение задач, которые будет решать проект (онлайн-магазин, ньюсрум, новостной блог, агрегатор информации и т.д.), целевой аудитории, разработка сценариев пользования и всех возможных действий как юзеров, так и посетителей сайта и т.д.
2. UI/UX дизайн
3. Интеграция контента
4. Тестирование
5. Запуск.
Umbraco & Azure
Umbraco поддерживает глубокую интеграцию с Azure сервисами:
— Azure SQL;
— Azure BLOB;
— Azure Active Directory;
— и другими.
Также есть готовые решения в MarketPlace в самом AZURE.
На схеме ниже показано, как Umbraco может интегрироваться с Azure сервисами.
Umbraco: под капотом
Теперь переходим к технической части, где мы пощупаем и локально запустим первое приложение.
Нам понадобится установленное ПО:
— Visual Studio
— MS SQL Express
Пошаговое описание процесса:
1. Запускаем Visual Studio
2. Создаем Новый пустой проект ASP.NET
3. В «Nuget Package Manager» вводим в поиск: Umbraco cms
4. Установить
5. Build Solution
6. Start Solution (F5)
7. Подключить базу данных SQL
8. Выбираем стартовый набор «Umbraco Sample Site»
9. Готово.
Базовая информация о Umbraco CMS
Umbraco реализует MVC паттерн: Model — View — Controller. Это схема разделения данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель (Model), представление (View) и контроллер (Controller) — таким образом, что модификация каждого компонента может осуществляться независимо от двух других.
Чтобы зайти в Административную часть сайта, введите в строку запроса браузера https://{baseurl}/umbraco
Основные секции Административного меню:
— Content — создание, модификация, редактирование, публикация контента;
— Media — загрузка и модификация медиаресурсов (изображения, видео, аудио);
— Settings — секция, где производится настройка типа контента и его отображения;
— Packages — загрузка и установка пакетов и расширений;
— Users — настройка пользователей и их доступов к административной панели;
— Members — настройка пользователей сайта;
— Forms — создание и настройка форм;
— Translation — языковые версии для мультиязычного сайта.
Content (Content is Everything)
В Umbraco все, что будет отображаться для посетителей сайта, является контентом. Даже корневая страница (HomePage) создается как контент.
Любой наш контент состоит из статической части и части, которую мы наполняем:
— изображение;
— описание товара;
— цена;
— характеристики и т.д.
Media
Эта секция нужна, чтобы отделить работу с медиа ресурсами от работы непосредственно с самим контентом. Так, например, для изображения мы можем изменять размеры или соотношение сторон, вносить другие корректировки. И это никак не должно влиять на сам контент.
Settings
В этой секции есть следующий функционал:
— Document Types — функции создания, редактирования, удаление моделей контента;
— Media Types — позволяет задавать тип медиа ресурса;
— Member Types — типы пользователей контента и их права;
— Data Types — тип данных, который будет применяться на сайте например: текстовое поле, палитра цвета, дата и т.д.;
— Macros — «обертка» для повторно используемого кода с параметрами;
— Relation Types — позволяет настраивать взаимосвязи между любыми сущностями в CMS, например, между типами контента и действиями: каскадное удаление или копирование и т.п.;
— Log — логи всех ошибок и изменений. Позволит отслеживать все внесенные модификации, обновления, редактирования;
— Languages — добавление языка;
— Content Templates — предзаполненные макеты данных;
— Templates — шаблоны отображение контента. Чаще всего темплейт привязан к Document Types для отображения данных;
— Partial Views — частичное представление стандартных элементов веб-страницы, например, footer, header, sidebar, top menu;
— Partial View Macro Files — частичное представление элементов веб-страницы с параметрами отображения. Позволяет настраивать отображения «на лету»;
— Stylesheets — полноценный редактор CSS-стилей сайта;
— Scripts — полноценный редактор Javascript файлов, используемых на сайте.
Packages
В этой вкладке можно устанавливать готовые решения и расширения. Вот некоторые из них, на которые стоит обратить внимание:
— uSync — пакет, необходимый в первую очередь разработчикам. Он создает, импортирует и экспортирует модели в ХМL-файлы. Это позволяет синхронизировать контент и модели через систему контроля версий (GitHub, Bitbucket и др.);
— UmbracoFileSystemProviders.Azure — позволяет сохранять все медиа-ресурсы, которые будут находиться в разделе Media в Azure Blob Storage;
— UCommerce — интегрированный модуль для создания интернет-магазинов. Предусматривает добавление дашборда, интеграцию с Azure, импорт и экспорт товарных групп и т.п. Для небольшого проекта будет достаточно функционала бесплатной версии модуля. Рекомендую обратить внимание на этот пакет и на хостинг Azure всем, кто занимается разработкой онлайн-магазинов — в случае роста трафика можно легко расширять и масштабировать сайт. Umbraco качественно интегрирован с Azure — даже при форс-мажорах вам достаточно будет добавить ресурсов, и ваш сайт никогда не ляжет.
Users
Секция Users отвечает за настройки ролей пользователей админки сайта и их уровней доступа. В Umbraco изначально есть 5 ролей для пользователей:
— Administrators — полный доступ ко всему, в т.ч. и к управлению пользователями;
Editors — доступ к публикации, редактированию и удалению контента, медиаресурсов, форм;
— Sensitive data — полный доступ к управлению контентом, в т.ч. и к тому, который маркирован в системе как sensitive;
— Writers — доступ к созданию контента. Публикация только после проверки пользователем с ролью Editor;
— Translators — создание переводов контента. Публикация только после проверки пользователем с ролью Editor.
При необходимости в Umbraco можно настроить дополнительные роли с разными уровнями доступа к контенту и функционалу. Полезная функция — разрешить публикацию контента от определенных ролей только после проверки.
Members
Секция Members отвечает за авторизованных посетителей сайта, потребителей созданного контента (посетителей, подписчиков, покупателей и т.д.).
Для мемберов также можно настраивать роли (Читатель, Модератор, Новый пользователь и др.) с определенным перечнем разрешений, например, писать комментарии. В этой же секции можно отслеживать действия мемберов, связанные с аутентификацией на сайте — как давно пользователь в последний раз проходил авторизацию, менял пароль и т.п.
Translation
Секция для управления словарями и переводами для сайта.
Forms
Хотя Umbraco — это бесплатная CMS, но расширение Umbraco Forms в нем, к сожалению, платное. Стоимость пакета — $200 для каждого сайта. В него входит не только удобный функционал для создания форм, но и инструменты для экспорта данных.
Также есть бесплатный пакет Formulate, который тоже дает возможность создавать формы и редактировать их.
А если вы .Net разработчик вам и не нужны эти расширения, можно воспользоваться доступом к контроллеру в backend и написать свой обработчик данных, введенных пользователями на сайте.
Создание контента в Umbraco
Разберемся, как в Umbraco построен процесс создания конечного контента, который пользователи увидят на сайте.
Для того, чтобы создать контент, нам сначала нужно сформировать модель — это делается с помощью Document Types. В этой модели мы добавляем параметры, которые мы хотим видеть в нашем контенте, например, цену товара, описание, изображение, теги.
После этого мы создаем отображение в Templates. Мы можем выбрать темплейт с уже предустановленными слоями или пустую страницу. На этом этапе мы указываем, где, как и в каком виде на сайте будут отображаться те данные, которые мы внесли в Document Types. Например, мы можем указать, что:
— изображения будут отображаться в виде карусели;
— рядом с ценой должен фигурировать символ валюты;
— превью текстового описания должно включать только первые 200 символов и т.д.
Чтобы не повторять один и тот же код на разных страницах, отображение можно разделить на слои и на частичное представление.
Например, вот так может выглядеть код Мастер Страницы (MasterPage):
@using Umbraco.Core.PropertyEditors @inherits UmbracoViewPage @{ Layout = null; // Get basic design settings from the homepage var home = (Home)Model.Root(); var font = home.Font; var colorTheme = home.ColorTheme; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>@Model.Name - @home.Sitename</title> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="@Url.Content("~/css/umbraco-starterkit-style.css")" /> @RenderSection("Header", required: false) // отображение секции Header если она есть. </head> <body class="frontpage theme-font-@font theme-color-@colorTheme"> <header class="header"> <div class="logo"> @if (home.SiteLogo != null && !string.IsNullOrEmpty(home.SiteLogo.Url)) { <div class="nav-link--home"> <img class="logo-image" src="@home.SiteLogo.Url" alt="@home.Sitename"> </div> } else { <a class="nav-link nav-link--home nav-link--home__text logo-text" href="/">@home.Sitename</a> } </div> <nav class="nav-bar top-nav"> @Html.Partial("~/Views/Partials/Navigation/TopNavigation.cshtml") // отображение частичного представления TopNavigation.cshtml </nav> </div> </header> <main> @RenderBody() // отображение тела страницы </main> <footer class="section--themed"> <div class="container"> <div class="row"> <div class="col-md-12 ta-center"> @home.FooterAddress </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script> <script src="@Url.Content("~/scripts/umbraco-starterkit-app.js")"></script> </body> </html>
Как видим, наша Мастер Страница разбита на несколько слоев и частей. Сам контент будет размещен вместо @RenderBody()
. Это позволяет упростить разработку и поддержку сайта.
Umbraco ASP.NET Controllers
SurfaceController
SurfaceController — это контроллер, созданный в Umbraco. Он дает доступ к нодам, к роутингу, ко всем типам контента и данных. С помощью этого контроллера можно обрабатывать POST и GET запросы. Рассмотрим на примерах.
Контроллер обработки GET запроса:
// Модель данных public class ContactFormViewModel { public int ParentNodeId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Email { get; set; } public string Message { get; set; } } //
Контроллер обработки POST запроса:
public class ContactUsController : SurfaceController { [HttpPost] public ActionResult Submit(ContactFormViewModel сontactFormViewModel) { if (!ModelState.IsValid) return CurrentUmbracoPage(); // Work with form data here return RedirectToCurrentUmbracoPage(); } } //
Форма, написаная на RAZOR, которую можно поместить в любое представление:
@{ var сontactFormViewModel = new ContactFormViewModel(); сontactFormViewModel.ParentNodeId = Model.Id; } @using(Html.BeginUmbracoForm("Submit", "ContactUs")) { @Html.HiddenFor(m => Model.Id) <div> <div class="editor-label"> @Html.TextBoxFor(x => сontactFormViewModel.ParentNodeId) - тут вставляется номер родительской ноды </div> </div> <div> @Html.TextBoxFor(m=>сontactFormViewModel.FirstName) </div> <hr/> <div> @Html.TextBoxFor(m=>сontactFormViewModel.LastName) </div> <div> @Html.TextBoxFor(m=>сontactFormViewModel.Email) </div> <hr/> <div> @Html.TextAreaFor(m=>сontactFormViewModel.Message) </div> <input type="submit" name="Submit" value="Submit" /> } //
RenderMvcController
RenderMvcController — позволяет перехватывать запросы, к примеру, на страницу Product. Для этого нужно, чтоб совпадали имена контроллера и модели (Document Type), тогда можно будет вставлять и переписывать actionresult через override. С его помощью можно варьировать то, что будет отображаться на странице, или запустить асинхронный метод обработки, например, логировать количество посещений или предлагать особые условия для отдельных групп клиентов.
public class ProductController : RenderMvcController { // GET: Product public override ActionResult Index(ContentModel product) { var myProduct = product.Content; // Do some stuff here, then return the base method return base.Index(product); } }
Будущее Umbraco
Два важных нововведения, которые собираются имплементировать в ближайшем будущем:
— ASP.Net Core как бекграунд — с учетом того, что он становится кроссплатформенным и позволяет хоститься на разных сайтах;
— Angular 2+.
Кому можно порекомендовать использовать Umbraco
1. Тем, кто уже работает с .NET framework;
2. Тем, у кого уже есть Azure подписка для работы, или проектам, которые готовы ее приобрести и поддерживать;
3. Проектам, которым важна ISO сертификация по безопасности и codebase. Umbraco CMS проходила сертификацию 27001 и 9001;
4. Тем, у кого есть есть интернет-магазин, а также тем, кто только планирует его запустить;
5. Также я бы рекомендовал использовать Umbraco, если вы планируете интегрировать сторонние ресурсы. На .Net C# уже достаточно много готовых библиотек.
4 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів