Использование HeadlessKit для создания основы Optimizely SaaS CMS в .NET 10

Безголовый имеет тенденцию обещать свободу и проводить встречи по согласованию. Две кодовые базы. Два набора моделей. Две команды изо всех сил стараются не разойтись. При использовании Optimizely SaaS CMS headless является обязательным. Поэтому вместо того, чтобы бороться с этим, я решил перевернуть это. Что произойдет, если мы сначала построим голову — правильно, в .NET — и позволим CMS адаптироваться к этой реальности? Этот эксперимент стал CodeArt.Optimizely.HeadlessKit, который теперь доступен с открытым исходным кодом.

От CMS, ориентированной на код, к безголовому трению

На протяжении многих лет одним из самых больших преимуществ Optimizely CMS было определение модели, основанной на коде.

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

И очень редко вы оказывались в зависимости от области, которой не было.

Это было предсказуемо. Стабильный. Удобен для разработчиков.

Затем безголовый вошел в комнату.

Будь то Optimizely SaaS CMS или API-интерфейсы Graph/REST в CMS 12.11.13, модель фундаментально меняется. Внезапно:

Модели контента живут в одной системе
Фронтенд-модели живут в другом
Синхронизация становится вашей ответственностью
Запросы нужно писать вручную
Маршрутизация, навигация, логика рендеринга — все вам нужно перестроить

Другими словами: больше гибкости, но и больше движущихся частей.

Я видел, как клиенты решали эту проблему разными способами. Некоторые вручную поддерживают обе стороны. Некоторые создают модели внешнего интерфейса на основе схем Graph. Я даже помог автоматизировать часть этого процесса.

Это помогает, но в итоге вы все равно получаете:

Две базы кода, которые необходимо развернуть синхронно
Или хрупкое сочетание конфигурации администратора и логики внешнего интерфейса.
Или постоянный поток вопросов: «Почему этого объекта недвижимости не существует?» моменты

И тут я начал думать по-другому.

Как должна выглядеть идеальная голова?

Вместо того, чтобы спрашивать, «Как нам адаптировать наш интерфейс к CMS?»
Я спросил:

Как бы для меня выглядел идеальный главный сайт?

Я хотел:

Код в первую очередь
Строго типизированный
Минимальная работа по синхронизации
Легко работать (особенно при разработке с помощью искусственного интеллекта).
Максимально приближен к классическому опыту разработки Optimizely CMS.

Будучи разработчиком .NET, я, естественно, начал с простого сайта ASP.NET MVC/Razor Pages в .NET 10.

Что, если я:

Определены мои типы контента как обычные классы моделей.
Отмеченные редактируемые свойства с атрибутами
Добавлен один пакет NuGet.
Пусть он синхронизирует все с SaaS CMS при запуске.

Типы контента.
Характеристики.
Шаблоны отображения для Visual Builder.

А что, если бы он также обрабатывал маршрутизацию, базовую логику рендеринга и запросы Content Graph?

Оказывается — это было не так уж и сложно.

Итак, вот v1 из Безголовый комплект.

Легкий мост, ориентированный на код, между вашим сайтом .NET 10 и Optimizely SaaS CMS.

👉Гитхаб:
https://github.com/CodeArtDK/CodeArt.Optimizely.HeadlessKit

Пакет NuGet доступен в канале nuget Optimizely.

Начало работы с HeadlessKit

Вот как можно перейти от пустого проекта .NET 10 к полностью синхронизированной CMS Optimizely SaaS с типами контента и готовым к работе рендерингом — без необходимости вручную определять что-либо в CMS.

Примечание. Это основано на официальные документы — так что здесь работает именно то, что работает в репозитории.

HeadlessKit намеренно прост. Если вы раньше создавали сайт Razor Pages или MVC, вы уже на 90 %.

Установите пакет

Добавьте свою SaaS CMS и настройки графика

Настройте свои учетные данные в файле appsettings.json (или секретах пользователя).

Для HeadlessKit необходимо:

Учетные данные API SaaS CMS
Оптимизировать ключ графика

Вот и все.

Зарегистрируйте услуги

В program.cs, автозагрузке или там, где вы регистрируете свой DI:

Это позволяет:

Синхронизация типов контента
Интеграция графов
Динамическая маршрутизация
Поддержка предварительного просмотра

Настройка маршрутизации

app.MapDynamicPageRoute<ContentRouteTransformer>("{**path}");

Определите типы контента в коде

При запуске HeadlessKit:

Создайте или обновите тип контента
Синхронизировать свойства
Настройка шаблонов отображения для Visual Builder

Ручная настройка CMS не требуется.

Создайте шаблон и запустите

Добавьте страницу Razor или шаблон MVC для своего типа контента, наследующего его от включенной универсальной базы.

    [TemplateDescriptor(typeof(LandingPage))]
    public class LandingPageModel : ContentPage { }

Запустите сайт.

Вот и все.

Ваши модели теперь:

Строго типизированный
Синхронизация с SaaS CMS.
Запрос через Content Graph
Отображается через ваш сайт .NET

Шаблоны отображения

Если вы используете визуальный конструктор и определяете взаимодействие, элементы и тому подобное, вы, конечно, можете таким же образом определить шаблоны отображения в своем коде.

    [DisplayTemplate(Key = "ExperienceDefault", DisplayName = "Experience",
        BaseType = BaseTypes.Experience, IsDefault = true)]
    public class ExperienceDisplayTemplate : SaaSDisplayTemplate
    {
        [JsonIgnore]
        [DisplayTemplateSetting(DisplayName = "Color Scheme", SortOrder = 10)]
        [DisplayTemplateChoice("default", "Default", SortOrder = 1)]
        [DisplayTemplateChoice("dark", "Dark", SortOrder = 2)]
        [DisplayTemplateChoice("warm", "Warm", SortOrder = 3)]
        [DisplayTemplateChoice("cool", "Cool", SortOrder = 4)]
        public string ColorScheme { get; set; } = "default";

        [JsonIgnore]
        [DisplayTemplateSetting(DisplayName = "Typography", SortOrder = 20)]
        [DisplayTemplateChoice("default", "Default", SortOrder = 1)]
        [DisplayTemplateChoice("serif", "Serif", SortOrder = 2)]
        [DisplayTemplateChoice("modern", "Modern", SortOrder = 3)]
        [DisplayTemplateChoice("monospace", "Monospace", SortOrder = 4)]
        public string Typography { get; set; } = "default";

        [JsonIgnore]
        [DisplayTemplateSetting(DisplayName = "Content Width", SortOrder = 30)]
        [DisplayTemplateChoice("default", "Default", SortOrder = 1)]
        [DisplayTemplateChoice("narrow", "Narrow", SortOrder = 2)]
        [DisplayTemplateChoice("wide", "Wide", SortOrder = 3)]
        [DisplayTemplateChoice("full", "Full Width", SortOrder = 4)]
        public string ContentWidth { get; set; } = "default";

        [JsonIgnore]
        [DisplayTemplateSetting(DisplayName = "Accent Color", SortOrder = 40)]
        [DisplayTemplateChoice("teal", "Teal", SortOrder = 1)]
        [DisplayTemplateChoice("blue", "Blue", SortOrder = 2)]
        [DisplayTemplateChoice("purple", "Purple", SortOrder = 3)]
        [DisplayTemplateChoice("orange", "Orange", SortOrder = 4)]
        public string AccentColor { get; set; } = "teal";
    }

Запрос контента

Но, конечно, вам также понадобится возможность запрашивать контент, осуществлять навигацию и так далее. И это тоже поддерживается в библиотеке «из коробки». И в каком-то смысле вы можете это узнать.

public class MyService
{
    private readonly IContentRepository _repository;

    public MyService(IContentRepository repository)
    {
        _repository = repository;
    }

    public async Task Example()
    {
        // Get content by URL path
        var page = await _repository.GetContentByPath("/en/about");

        // Get content by key
        var content = await _repository.GetContent("abc-123-def");

        // Get child content
        var children = await _repository.GetChildren("parent-key-123");
    }
}

Или вы даже можете выполнять дополнительные запросы в стиле LINQ, если хотите выполнять такие функции, как поиск или более продвинутую навигацию.

// Basic query
var articles = await GraphQuery.For(client)
    .Where(f => f.Metadata.Status.Eq("Published"))
    .OrderBy(a => a.MetaData.Published, OrderDirection.DESC)
    .Take(10)
    .ToListAsync();

И многое другое

Конечно, есть также поддержка режима предварительного просмотра SaaS и набор помощников по тегам для визуализации всех специфических элементов Optimizely, таких как область контента, композиция опыта и области контента.

Вы можете проверить, как все это сочетается друг с другом, на прилагаемых примерах сайтов. На данный момент существуют как Razor Pages, так и образец сайта MVC, а сайт самообслуживания Blazor находится в стадии разработки. Включенный образец сайта является еще одной вымышленной компанией, и он был создан искусственным интеллектом с помощью нескольких подсказок.

ИИ

Естественно, я предполагаю, что вы также будете использовать агенты для создания сайтов на этой основе — и чтобы облегчить этот процесс, я также включил документацию по искусственному интеллекту, чтобы ваши агенты могли быстро научиться работать с HeadlessKit, а также напрямую запрашивать Optimizely SaaS.
Когда я попросил своих агентов создать образец сайта, я просто попросил их использовать клиентские ключи и секреты, а также свои знания API управления контентом SaaS для создания контента непосредственно в CMS, и это было прекрасно сделано.

Демо-сайт

Если вы хотите попробовать запустить демонстрационный сайт самостоятельно, вы можете получить репозиторий, заполнить настройки приложения или секреты пользователя и запустить его на Optimizely SaaS CMS (если вам повезет, вы можете получить бесплатную пробную версию, как я).

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

Ещё по этой теме