Мене звати Іван Барчук. Більше 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, то кастомне рішення – це щомісячна зарплата хоча б одного розробника.
.NET розробників на великий міжнародний eLearning project
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 потрібен стек технологій:
1. Microsoft IIS – на жаль, на сьогоднішній день Umbraco розроблена на .Net, але в планах є перехід 2. на крос-платформну .Net Core (орієнтовно в 2020 році);
3. підходять всі SQL бази даних, але у версії "з коробки" підтримуються Microsoft SQL Express 2012+ і MySQL (у версії 8.0.0 MySQL не підтримується);
4. Microsoft ASP.NET 4.7.2;
5. синтаксис – Razor Syntax і Linq запити;
6. на адмінпанелі використовується AngularJS.
проєкт для .NET спеціалістів, який використовує NASA
Цикл розробки на 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 – налаштування користувачів і їхніх доступів до адміністративної панелі;
● Member – налаштування користувачів сайту;
● 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, розширення 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
Два важливих нововведення, які збираються імплементувати в найближчому майбутньому:
1. ASP.Net Core як бекграунд з урахуванням того, що він стає крос-платформним і дозволяє хоститься на різних сайтах;
2. Angular 2+.
Кому можна порекомендувати використовувати Umbraco:
- тим, хто вже працює з .NET framework;
- тим, у кого вже є Azure підписка для роботи, або проєктам, які готові її придбати і підтримувати;
- проєктам, для яких важлива ISO сертифікація з безпеки і codebase. Umbraco CMS проходила сертифікацію 27001 і 9001;
- тим, у кого є є інтернет-магазин, а також тим, хто тільки планує його запустити;
- також я б рекомендував використовувати Umbraco, якщо ви плануєте інтегрувати сторонні ресурси. На .Net C # вже доволі багато готових бібліотек.
Корисні посилання: Документація по Umbraco.
Іван та команда наших .NET розробників чекає на тебе. Приєднуйся до Intellias!
