Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Обзор 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# уже достаточно много готовых библиотек.

Полезные ссылки

1. Документация по Umbraco.

👍ПодобаєтьсяСподобалось3
До обраногоВ обраному2
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

@Іван Барчук, подскажите как использовать Umbraco CMS тем у кого уже есть интернет магазин, на nopCommerce например ?

Какие есть преимущества по сравнению с вордпресс/друпал ?

в статье уже упоминалось. tldr вордпресс/друпал это php. Умбрако это же .net стек.

Підписатись на коментарі