API-based CMS подход

Перевод статьи The API-Based CMS Approach.

Эта статья от Levi Gable. Levi погружается в идею отделения самой CMS от представления её содержимого. Levi объясняет, что это даёт свободу и приносит огромную пользу веб-разработчикам. Сайт может обрабатывать API и представлять содержимое тем способом, который вам нужен. Но что ещё более важно, API может обслуживать несколько платформ. Levi демонстрирует как с помощью одного API можно сделать не просто шаблонный сайт, но и React Native приложение, и даже приложение для Apple Watch.

API-based CMS подход

В мире веб-разработки есть такой тренд, который называется API-based CMS. Так же известная как «несвязанная (decoupled)» или «безголовая (headless)». Она позволяет разработчикам отделить управление содержимым от реализации клиентской части и подключается к CMS через API. Это очень интересный подход к разработке сайтов и приложений, который предлагает больше свободы и гибкости. Я хочу показать вам свой процесс настройки и подключения такой CMS.

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

  1. Создать собственный тип содержимого и настроить его поля;
  2. Настроить приложение на получение содержимого через API;
  3. Загрузить содержимое в шаблон вашей страницы;

Давай рассмотрим эти шаги более подробно, на примере того как я буду настраивать простой новостной сайт (демо) с главной страницей и страницами новостных статей.

1. Страница статьи

Создание пользовательского типа содержимого для статьи

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

В нашем примере, у статей должны быть: UID (уникальный идентификатор для SEO дружелюбных URL), дата публикации, заголовок, основноео изображение, автор, а также три различные повторяемых секции, которые могут быть скомбинированы: текст, цитаты и изображения.

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

API-based CMS подход

CMS которую я использовал в этом примере называется prismic.io, хотя любая CMS которая может отдавать данные в формате JSON могла бы быть использована здесь. Для примера, на CSS-Tricks есть целый ряд статей о WordPress JSON API и похоже что у Perch Runway 3 будут возможности «headless CMS». Prismic также использует JSON для создания типов контента и настройки их полей. JSON код моих типов контента, которые я использовал при написании этой статьи есть в проекте на Github’е. Вы можете найти их в директории «customTypes».

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

Настройка клиентской части приложения для запросов к API и загрузки статей

Это то место где API-based CMS на самом деле блистает. Вы можете создать свой сайт используя любую предпочитаемую технологию. Многие API-based CMS предоставляют специальные SDK для основных технологий, в которых есть все необходимые методы для запросов к API и разбора возвращаемых данных. Это позволяет легко начать разработку вашего проекта.

Не важно на чём вы пишете код, вам по-любому нужно выполнить запрос к API и получить данные которые вы хотите отобразить. Я разрабатывал этот пример используя SDK NodeJS, который предоставил мне prismic.io.

Давайте сделаем загрузку страниц с помощью их UID. Вот пример кода, который мы можем использовать для запросов к API.

Загрузка содержимого в шаблоны страниц

После того как мы получили необходимые данные из API, всё что остаётся сделать это вывести их в шаблоны. API будет возвращать JSON объект, который содержит весь наш контент.

В SDK также есть вспомогательные функции, которые делают вывод содержимого в шаблонах очень простым.

В нашем примере, для создания HTML страниц будет использоваться шаблонизатор Pug (ранее Jade). Интегрировать содержимого в страницу очень просто и быстро. Все что нам нужно сделать, это заменить статический контент на то что мы получили из API.

Ниже показан код вывода содержимого в шаблоне, но в нём нет таких разделов как шапка или лэйаут. Если вы хотите увидеть код полностью, не стесняйтесь посмотреть весь проект на Github.

Мы только что вывели страницы для статей нашего сайта. Быстренько снова пройдёмся через этот же процесс и настроим домашнюю страницу.

2. Домашняя страница и лэйаут

Создание пользовательского типа содержимого для лэйаута

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

image03-1

Запрос к API и загрузка домашней страницы

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

Загрузка содержимого в шаблон домашней страницы

Для добавления данных из лэйаута, нужно просто обновить файл header.pug.

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

И всё что нам остаётся сделать это интегрировать оставшиеся статьи.

После того как интеграция завершена, у нас будет сайт который получает и отображает статьи из API.

Другие области применения

Ещё одно преимущество API-based CMS заключается в том, что вы можете осуществлять запросы и загружать содержимое и на других платформах, таких как приложения для смартфонов. Для демонстрации я создал iOS приложение, которое запрашивает этот же API и выводит список статей на смартфоне.

При разработке этого приложения я использовал React Native и тот же подход, который описан выше. Я выбрал React Native потому что он позволяет создавать приложения с богатым UI, используя только JavaScript. На данный момент я сделал только iOS приложение, но React Native позволяет также легко запускать приложения и для Andorid.

Типы содержимого уже готовы, поэтому можно делать запросы к API. Вот запрос получения содержимого для одной статьи:

После того как содержимое было получено, можно отобразить его в представлении (views) тем же методом, который был использован выше для сайта. Снова простой пример того как это может выглядеть.

Преимущество создания мобильного приложения отдельно от сайта заключается в том, что вы можете лучше соединится с вашей аудиторией и облегчит им доступ к вашему контенту с помощью мобильных телефонов. Можно пойти дальше и посылать им Push-уведомления всякий раз когда на сайте появляется новая статья. Я нашёл простой способ интегрировать уведомления с помощью Urban Airship.

Надеюсь, что статья дала вам представление о том, чего можно ожидать от API-based CMS. Мне нравится свобода и уровень контроля, который предоставляет API-based CMS. Создание собственных типов контента — это то что нужно вам для начала. После этого вы сможете использовать технологии и шаблонизаторы, которые предпочитаете. И подключаться к API для лёгкого вывода вашего содержимого в шаблонах.