В этом Из этого руководства вы узнаете, что такое Headless CMS, а также плюсы и минусы Headless CMS. В конце концов, вы создали корзину для покупок, используя GraphCMS (a (система управления контентом только для бэкэнда). После этого вы можете создать любое веб-приложение по вашему выбору, используя CMS без головы и React.
Для этого вам необходимо установить Node и npm / yarn на вашей машине. Если вы этого еще не сделали, следуйте этим кратким руководствам для установки пряжи или npm на вашу машину. Вам также необходимо иметь базовое понимание Запросы React, Node.js и GraphQL (конечно, вы всегда можете освежить навыки React и GraphQL!)
По мере развития цифровых продуктов растет и контент, который мы потребляем. Масштабируемый, перекрестный Платформа системы управления контентом имеет решающее значение для обеспечения скорости роста продукта. Традиционная CMS обеспечивает комфорт, когда контент, интерфейс редактирования, шаблоны и пользовательские коды находятся в единой среде. Но с изменениями в этой мобильной эпохе этого уже недостаточно Нам нужен новый вид CMS — тот, который может мак Контент, доступный через любой канал, в этот момент требуется Безголовая CMS. Безголовая CMS дает вам преимущества управления контентом и его доставки на любой канал. API делает содержимое доступным через любой канал и на любом устройстве, используя большинство любимых инструментов и языков программирования, а также обеспечивает более высокий уровень безопасности и гораздо лучшую масштабируемость.
Как это выглядит на практике?
Что происходит, когда вы убираете интерфейс CMS? Самым большим отличием является то, что веб-сайт не может быть создан с использованием автономной CMS. С традиционной CMS все происходит в одном и том же месте.
Безголовая CMS не имеет функций, позволяющих создать ваш сайт, — у нее нет тем или шаблонов сайта. Чтобы использовать безголовую CMS, сначала нужно создать сайт, приложение или другой опыт, а затем использовать API-интерфейс CMS, чтобы включить в него свой контент.
Почему вы должны заботиться о безголовых?
Безголовая CMS поставляется с дружественным к API подходом, который позволяет публиковать контент через API (RESTful или GraphQL). Он позволяет использовать один и тот же API для доставки контента по различным каналам, таким как приложения для Android или IOS, умные часы, AR / VR и т. Д. Безголовая CMS дает разработчикам возможность быстро использовать творческий потенциал. В традиционной CMS изменения могут занимать много времени, например, чтобы настроить часть вашего сайта, вам необходимо заново внедрить всю CMS. Безголовая CMS позволяет вносить изменения в ваш внешний интерфейс без какого-либо влияния на внутреннюю инфраструктуру, что экономит ваше время и ресурсы, что делает его намного лучше.
Традиционный и безголовый CMS: преимущества и преимущества Минусы
Может быть сложно выбрать между автономной и традиционной CMS. Дело в том, что оба они имеют потенциальные преимущества и недостатки.
Традиционные CMS Pros
- Это позволяет легко настраивать. Многие из них имеют функции перетаскивания, что позволяет легко и без опыта программисту работать с ними без проблем.
- Настроить свой контент на традиционной CMS проще, чем нужно (управление контентом, дизайн и т. д.) уже доступны.
Традиционные минусы CMS
- Объединенный интерфейс и бэкэнд дают больше времени и денег на обслуживание и настройку.
- Традиционная CMS, например WordPress, в значительной степени опирается на плагины и темы, которые могут содержать вредоносные коды или ошибки и замедлять работу сайта или блога. Вот список из 18 305 уязвимых плагинов WordPress, тем. Вот меры безопасности для разработчиков Drupal. Проверьте здесь больше фактов.
Headless CMS Pros
- Поскольку фронтенд и бэкэнд отделены друг от друга, вы можете выбрать, какой интерфейс технология соответствует вашим потребностям. Это также дает разработчику гибкость на этапе разработки.
- Платформы (блоги, веб-сайты и т. Д.), Созданные с использованием CMS без головы, могут быть развернуты для работы на различных дисплеях, таких как веб, мобильные устройства, AR / VR и т. Д. .
Безголовые CMS Минусы
- Они доставляют вам хлопоты по управлению внутренними инфраструктурами, настраивая компонент представления вашего сайта, приложение.
- Они могут быть более дорогостоящими для реализации — затраты на создание удобной для пользователя платформы с аналитикой высоки по сравнению с использованием традиционной CMS.
Примеры наилучшего использования для CMS без головы
Безголовая CMS может иметь следующие варианты использования:
- Генераторы статических сайтов (например, Gridsome, Gatsby)
Многие сайты Jamstack созданы со статическим сайтом генераторы, такие как Gridsome, Hugo или Gatsby, используют безголовую CMS для управления контентом, который они могут не может обращаться к базе данных, поэтому содержимое может храниться в автономной CMS и извлекаться через API во время сборки и развертываться в виде статических файлов.
- Мобильные приложения (iOS, Android)
Преимущество автономной CMS для мобильных инженеров заключается в том, что API позволяет им доставлять контент в приложение IOS / Android из того же бэкэнда, который управляет контентом для их веб-сайта, что обеспечивает синхронизацию. .
Этот подход предусматривает обслуживание контента через API, который затем используется веб-приложением, но предлагает централизованное место для управления контентом. Примером является приложение электронной коммерции, созданное с использованием HTML, CSS и JavaScript с содержимым и данными о продукте, которые поддерживаются в CMS и обслуживаются через внешний API.
Типы CMS без головы
Существует список безголовых CMS, которые вы можете проверить.
Обратите внимание, что эта статья не предназначена для рекламы каких-либо услуг или продуктов.
- Contentful
Управляемая без API система управления контентом, разработанная для создания, управления и распространения контента на любой платформе. В отличие от традиционной CMS, они предоставляют возможность создавать модель контента, чтобы вы могли решать, каким типом контента вы хотите управлять. - GraphCMS
Безголовая CMS для пользователей, которые хотят создавать контент GraphQL инфраструктура для своих цифровых продуктов. Эта CMS полностью построена как API, ориентированная с нуля, позволяя создателям определять структуры, разрешения и отношения для параметров API. В этой статье мы будем использовать GraphCMS из-за его подхода API GraphQL. - ButterCMS
CMS, которая дает полную свободу для создания веб-сайта или фирменного блога с полным SEO и поддерживает любой технологический стек. Этот инструмент экономит ваши деньги и время на разработку сайта. Butter CMS — это необслуживаемый инструмент CMS без головы и может интегрироваться с любым языком или структурой. Мощный интерфейс позволяет без особых хлопот определять и настраивать каждый элемент вашего веб-сайта. - Directus
Инструмент с открытым исходным кодом, который упаковывает пользовательские базы данных SQL с помощью динамического API и предоставляет интуитивно понятное приложение администратора для управления его содержание. Бесплатное самостоятельное размещение или использование облачной службы по требованию для управления всеми вашими многоканальными цифровыми интерфейсами. - Sanity
Еще одна платформа на основе API для управления структурированным контентом. С Sanity вы можете управлять своим текстом, изображениями и другими медиафайлами с помощью API. Вы также можете использовать одностраничное приложение с открытым исходным кодом Sanity Studio для быстрой настройки среды редактирования, которую вы можете настроить. - Agility
Ориентированная на JAMStack Headless CMS со встроенным Page Management. Быстрее создавать, управлять и развертывать. Agility CMS — это Content-First Headless CMS, позволяющая выбрать любой язык программирования, а также гибкость, скорость и мощность, которые дает легковесные API. Оттуда добавьте такие функции, как управление страницей, электронная торговля, онлайн-тикеты и поиск. Agility CMS становится полноценной платформой Digital Experience, экономя время, снимая ограничения и обеспечивая бесперебойную работу по всем цифровым каналам. - Netlify CMS
Бесплатная CMS с открытым исходным кодом, основанная на git, созданная Netlify. Он позволяет вам определять модель содержимого, интегрирует стороннюю аутентификацию и расширяет возможности его бэкэнда (одностраничное приложение, построенное на React).
Примечание : Все вышеперечисленные примеры имеют бесплатные и платные версии, кроме Directus и Netlify CMS, которые являются бесплатными. Список более безголовых CMS можно найти здесь.
В этой статье мы используем GraphCMS — ориентированную на API GraphqQL систему управления безголовым контентом, которая заботится о нашей серверной архитектуре.
Использование GraphCMS
Контент является как динамическим, так и многоканальным, однако современные системы управления контентом (CMS) не обладают гибкостью для удовлетворения требований современного распространения цифрового контента. GraphCMS является первой HeadlessCMS, построенной на основе GraphQL, и предлагает решение этой проблемы с ее задачей облегчить безболезненный поток контента между создателями контента, разработчиками и потребителями.
GraphCMS принимает практически любые виды данных, которые вы можете себе представить, начиная от изображения, карты и т. д. Это даже делает роли и разрешения легко. В то время как существуют другие безголовые CMS-решения, GraphCMS стремится обеспечить беспроблемный опыт для разработчиков; используя спецификацию API под названием GraphQL. Это устраняет необходимость взаимодействия нескольких SDK с доставкой контента и обеспечивает простой доступ к многоканальному контенту. Это делает создание приложений с богатым контентом очень простым.
GraphCMS и GraphQL
GraphCMS очень полагается на GraphQL, его спецификацию магистрального API. GraphQL — это язык запросов и времени выполнения API. Он был разработан Facebook в 2012 году и выпущен с открытым исходным кодом в 2015 году. С тех пор такие пользователи, как Pinterest, Github, Twitter, Intuit, Coursera, все приняли GraphQL для своих мобильных приложений, веб-сайтов и API. GraphQL похож на REST по своей основной цели — предоставить спецификацию для построения и использования API. Тем не менее, неофициально названный «REST 2.0», GraphQL оптимизировал различные ключевые функции, предлагаемые REST.
Основная уникальность GraphQL заключается в независимом от протокола использовании, контролируемом извлечении данных, редактируемых полях, типах и глубокой ошибке. обработки. Результаты включают в себя удаление избыточности кода, предотвращение чрезмерного и недостаточного извлечения данных и значительное сокращение сетевых запросов.
В качестве конкретного примера, давайте возьмем отношение запроса к новостной ленте. В новостной ленте есть автор, заголовок и комментарии. Если мы используем CMS на основе REST, нам нужно будет сделать 3 разных запроса к серверу для этих 3 разных конечных точек, тогда как в CMS на основе GraphQL нам нужно будет сделать только 1 запрос для всех 3. Следовательно, результаты дают относительно более быстрые запросы и меньшее затопление сети — в практическом случае это будет не просто одна сущность, выполняющая несколько запросов, а тысячи и миллионы.
GraphQL уменьшает сложность построения API, абстрагируя все запросы до одной конечной точки , В отличие от традиционных REST API, он декларативный; все запрошенное возвращается.
GraphCMS имеет щедрый бесплатный уровень в 1 миллион запросов операций API в месяц и трафик активов 500 ГБ. Кроме того, GraphCMS предоставляет интерфейс администратора Graphiql который предоставляет вам полный доступ к вашим данным, и вы можете просто загрузить их все, а затем выполнить множество мутаций для нового бэкэнда, чтобы перенести все на другое.
В этой статье мы будем использовать бесплатный уровень — 1 миллион операций API в месяц и трафик активов 500 ГБ. Вы можете использовать тот же уровень для тестирования, для проектов, которые нуждаются в большем, чем это, лучше проверить их страницу с ценами.
Создание нашего проекта
Чтобы увидеть всю мощь CMS без головы используя GraphCMS, мы будем создавать простую корзину для покупок.
Начало работы
Чтобы начать работу с GraphCMS, выполните следующие действия.
- Создайте учетную запись в GraphCMS. Вы можете использовать бесплатный уровень.
- При успешной регистрации вы попадете на свою панель инструментов , Нажмите, чтобы создать новый проект.
- Убедитесь, что вы нажали на создание проекта с нуля.
- Задайте сведения о проекте для проекта, заполните поле изображения ниже и нажмите кнопку «Создать».
- На нашей панели инструментов мы будем создавать наши модели и контент.
- Выберите схему на боковой панели панели управления, чтобы создать схему.
GraphCMS имеет потрясающий интерфейс перетаскивания которые позволяют легко создавать схемы за считанные минуты.
Примечание : Нажмите на вкладку «Дополнительно», чтобы выбрать необходимую опцию в наших полях.
- Если все прошло хорошо, наша схема должна выглядеть следующим образом:
- В настоящее время у нас нет контента. Нажмите «Содержимое» на боковой панели, где должен находиться раздел «Содержимое», и нажмите «Создать новое».
- Давайте добавим немного содержимого, чтобы мы могли отобразить его позже в нашем приложении, используя React.
- Добавьте еще немного контента, если хотите. Вот наш результат.
- Затем скопируйте URL-адрес конечной точки API (щелкните на панели инструментов) — это единственная конечная точка для связи между нашим внешним интерфейсом React и внутренним сервером GraphCMS.
Далее, давайте сделаем нашу конечную точку API доступной.
- Перейдите к настройкам в разделе Публичное разрешение API щелкните раскрывающийся список, выберите ОТКРЫТЬ и нажмите кнопку обновления.
Настройка React
Самый простой способ настроить React — использовать Create-React-App. (Это официально поддерживаемый способ создания одностраничных приложений React, предлагающий современную настройку сборки без конфигурации.) Мы воспользуемся ею для начальной загрузки приложения, которое будем создавать.
От на вашем терминале выполните следующую команду:
npx create-response-app smashing-stores && cd smashing-stores
После успешной установки запустите сервер React запустив npm start .
Создание нашего макета
При создании макета для нашего проекта у нас будет пять различных компонентов.
Navbar |
Для удержания нашей иконки навигации и корзины |
Все товары |
Для отображения a список всех продуктов |
Продукт |
Разметка для одного продукта |
Нижний колонтитул |
Нижний колонтитул нашего приложения |
Тележка |
Для хранения товаров в нашей корзине |
Для быстрой настройки мы будем использовать Bootstrap для создания наших компонентов. Чтобы включить Bootstrap, мы бы использовали загрузочный CDN, откройте ваш index.html в общей папке, добавьте ссылку на раздел заголовка:
https: / /stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
Now, мы можем использовать классы начальной загрузки в нашем приложении.
Затем создайте папку / components и создайте в ней следующие файлы:
- Navbar.js
- Allproducts. JS
- Product.js
- Footer.js
- Cart.js
Откройте Navbar.js и добавьте следующий код:
import React from «реагируют»;
const Navbar = () => {
возвращение (
);
};
экспорт по умолчанию Navbar;
Мы объявили функциональный компонент Navbar, мы возвращаем наш тег навигации с классом начальной загрузки navbar navbar-light bg-light . Что эти классы делают, так это применяют Navbar со светлым фоном. Внутри нашего элемента nav мы включили тег привязки со ссылкой на forward-slash (Homepage) и класс navbar-brand .
Стилизованная кнопка В компоненте Navbar есть класс с именем navbar navbar-light bg-light . Что делает этот класс, чтобы гарантировать, что наша кнопка имеет светло-синий цвет фона и тень при наведении.
Далее, давайте создадим наш нижний колонтитул. Откройте файл Footer.js и добавьте в него следующий код:
import React from 'Reaction';
import '../App.css';
const Footer = () => {
возвращение (
);
};
нижний колонтитул по умолчанию для экспорта;
Мы добавили электронную почту для контактов, используя h5 и элемент параграфа. Наконец, в этом разделе нижнего колонтитула мы добавили авторские права с именем «Smashing Stores».
Наш нижний колонтитул нуждается в некоторой стилизации, поэтому мы добавили бы следующие стили в файл App.css :
нижний колонтитул {
положение: абсолютное;
низ: -55px;
ширина: 100%;
цвет фона: # 333;
цвет: #fff;
}
Прежде чем мы создадим наш компонент продукта, нам нужно запросить GraphCMS, чтобы отправить нам сведения о нашем продукте для отображения. Давайте сделаем это сейчас.
Подключение к бэкэнду GraphCMS с GraphQL
Чтобы подключить наше приложение к бэкенду, нам нужно установить пару пакетов GraphQL. Одной из библиотек, которые мы можем использовать, является apollo-boost, который дает клиенту возможность подключения к бэкэнду GraphQL с помощью URI ( U niform R esource I dentifier).
URI является конечной точкой, предоставленной GraphCMS и доступной в разделе конечных точек панели управления.
Выполните следующую команду в своем терминале, чтобы установить необходимые пакеты:
npm install apollo-boost graphql graphql-tag реагировать-apollo
Как только вы закончите установку, обновите файл index.js в [ / src каталог со следующим кодом:
import React from 'Reaction';
импортировать ReactDOM из 'response-dom';
import './index.css';
импортировать приложение из ./App ';
import {ApolloProvider} из "реагировать-Аполлон";
импорт ApolloClient из «Аполлон-буст»;
импортировать * как serviceWorker из './serviceWorker';
константный клиент = новый ApolloClient ({
Ури: ""
});
ReactDOM.render (
,
document.getElementById ( 'корень')
);
serviceWorker.unregister ();
Здесь мы завернули все наше приложение с ApolloProvider который принимает одну пропу: клиент . ApolloProvider загружает схему Graph CMS и дает нам доступ ко всем свойствам модели данных внутри нашего приложения, что возможно, потому что наш компонент App является дочерним по отношению к ApolloProvider компонент.
Отображение наших продуктов
Если вы зашли так далеко, похлопайте себя по спине. «Мы смогли загрузить нашу схему из GraphCMS в наше приложение.
Следующим шагом является получение и отображение наших продуктов. Создайте папку / all-product в папке / component а затем создайте файл index.js и добавьте в него следующее:
импорт gql из "graphql-tag";
const PRODUCTS_QUERY = gql`
запрос {
продукты {
Я бы
название
цена
описание
создано в
изображение {
Я бы
URL
}
}
}
`;
экспорт по умолчанию PRODUCTS_QUERY;
Что такое « productses »? Наше имя модели — products, но GraphQL является множественным числом моделей, отсюда и название.
Затем мы создали переменную с именем PRODUCTS_QUERY которая хранит запрос из нашего внутреннего интерфейса GraphQl. Функция gql используется для анализа (анализа объекта, как это было в нашей схеме) простой строки, содержащей код GraphQL (если вы не знакомы с синтаксисом backtick, вы можете прочитать теговые литералы шаблона JavaScript).
GraphCMS предоставляет удобный проводник GraphQL с именем (graphiql) специально для тестирования нашего запроса.
Теперь, когда наш запрос работает как надо. Давайте продолжим и создадим компоненты нашего продукта.
Создание компонента Allproducts
Откройте файл Allproducts.js и добавьте следующий код в it:
импортировать React, {Component} из 'реакции';
import {Query} из 'response-apollo';
импортировать PRODUCTS_QUERY из './all-products/index';
импортировать продукт из «./Product»;
импортировать корзину из './Cart';
импортировать Navbar из './Navbar';
Класс Allproducts extends Component {
конструктор (реквизит) {
супер (реквизит);
this.state = {
cartitems: []
};
}
addItem = (item) => {
this.setState ({
cartitems: this.state.cartitems.concat ([item])
});
}
render () {
возвращение (
{({загрузка, ошибка, данные}) => {
if (loading) return Получение продуктов .....
if (error) return Ошибка при получении продуктов
const items = data.productses;
возвращение (
);
}
};
экспорт по умолчанию AllProducts;
Здесь мы обернули наши продукты компонентом и передали PRODUCTS_QUERY в качестве реквизита. Аполлон ввел несколько реквизитов в функцию рендеринга компонента. Сами эти реквизиты предоставляют информацию о состоянии сетевых запросов:
loading |
Это происходит во время текущих запросов. |
ошибка |
Это происходит при сбое запросов. |
данные |
Это данные, полученные с сервера. |
Наконец, мы перебираем все полученные элементы и передаем их в качестве опоры нашему компоненту продукта. Прежде чем мы увидим, как он выглядит, давайте создадим наш компонент Product.
Создание компонента Product
Откройте Product.js и добавьте в него следующий код:
импорт React из'act ';
const Product = (реквизит) => {
возвращение (
{props.product.name}
$ {props.product.price}
{props.product.description}
);
}
экспорт по умолчанию Product;
Поскольку наш Product.js является функциональным компонентом, который получает сведения о продукте через реквизиты и отображает их, мы вызываем функцию addItem в прослушивателе событий onClick для добавления текущего продукта. в корзину, когда он щелкнул.
Импорт наших компонентов в App.js
После установки наших компонентов самое время импортировать наши компоненты в наш базовый компонент App.js.
Откройте его и добавьте в него следующее:
импорт React из'act ';
import './App.css';
импортировать нижний колонтитул из './components/Footer';
импортировать продукты из ./components/Allproducts ';
function App () {
возвращение (
- Из строк 3-4 мы импортировали компонент «Нижний колонтитул» и «Продукты» в компонент приложения.
Далее введите npm start в вашем терминал затем перейдите к https: // localhost: 3000 в вашем браузере, и вы увидите следующее:
Мы близки к завершению нашего проекта, но нашим продуктам нужна функция, которая добавляет товары в корзину.
Создание компонента нашей корзины
Чтобы включить функциональность нашей корзины, нам нужно добавить некоторые методы к нашим компонентам.
Давайте обновим наш файл Allproducts.js по следующему адресу:
import React, {Component} из'act ';
import {Query} из 'response-apollo';
импортировать PRODUCTS_QUERY из './all-products/index';
импортировать продукт из «./Product»;
импортировать корзину из './Cart';
импортировать Navbar из './Navbar';
Класс Allproducts extends Component {
конструктор (реквизит) {
супер (реквизит);
this.state = {
cartitems: [],
показать: ложь
};
}
addItem = (item) => {
this.setState ({
cartitems: this.state.cartitems.concat ([item])
});
}
showModal = () => {
this.setState ({show: true});
};
hideModal = () => {
this.setState ({show: false});
};
render () {
возвращение (
{({загрузка, ошибка, данные}) => {
if (загрузка) возвращает Fetching
if (error) return Error
const items = data.productses
const itemssent = this.state.cartitems;
возвращение (
{items.map (item =>
)
};
};
экспорт по умолчанию Allproducts;
-
showModal
Этот метод устанавливает состояние показа в значение true, чтобы модал мог быть виден пользователю. -
hideModal
Этот метод устанавливает состояние показа в false, чтобы скрыть модал. - Мы создали переменную с именем
itemssentкоторая содержит состояние все элементы корзины, которые мы получаем из бэкэнда.
-
cart
Он передает данные из корзины в наш Navbar. -
show
Это запускает наш модальный метод.
Cart
-
-
Items
Получает и сохраняет данные, отправленные с Navbar, чтобы их можно было отображать при необходимости. -
handleCl ose
Закрывает модал.
Давайте обновим наш файл Navbar.js следующим кодом:
импорт React из 'реакции';
const Navbar = (реквизит) => {
возвращение (
);
};
экспорт по умолчанию Navbar;
- Мы добавили событие по щелчку, которое принимает функцию, которая запускает эту модальную корзину.
- Наконец, мы проверяем количество товаров в нашей корзине с помощью метода JavaScript
.length.
Затем создайте файл Cart.js и добавьте в него следующий код:
импорт React из'act ';
const Cart = ({handleClose, show, items}) => {
возвращение (
{items.map (item =>
{item.name}
$ {item.price}
)}
Всего товаров: {items.length}
);
};
экспорт по умолчанию Корзина;
В нашем родительском div мы использовали троичный оператор, который переключает между видимостью и скрытым состоянием. Далее, в другом для отображения товаров в нашей модальной корзине мы отображаем наши товары.
Наконец, в этом разделе, чтобы проверить общее количество товаров в нашей корзине, мы использовали . length JavaScript method.
Open up your app.css and add the following code to it:
.modal {
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.main-modal {
position:fixed;
background: white;
width: 80%;
height: auto;
top:50%;
left:50%;
padding: 10px;
transform: translate(-50%,-50%);
}
.display-block {
display: block;
}
.display-none {
дисплей: нет;
}Finally open the shopping cart, add items to it and view it via the ‘Cart’ button:
Conclusion
The concept learned in this article can help you create almost anytime of web apps without paying so much attention to your back-end infrastructure. You can take it further by creating a full-fledged e-commerce store and adding payment etc. I’ll love to see what you were able to make in the comments section.
The supporting repo for this article is available on Github.
References
- GraphCMS Documentation
- Event App with GraphCMS
(ks, yk, il)
Загрузка...
