TL; DR;
Cosmic JS обеспечивает отличный сервер для блогов. Это полнофункциональная система управления контентом (CMS) с интуитивно понятным пользовательским интерфейсом, которую нетехнический клиент может использовать для управления контентом своего сайта.

Следуйте приведенным ниже ссылкам для кода и демонстрации:

TL;DR:

Приложение блога React + Next.js
Демонстрация блога React + Next.js
Кодовая база блога React + Next.js

Введение
Каждому блогу нужна надежная CMS. Это позволяет владельцам контента управлять своим контентом без необходимости нанимать разработчика для внесения каждого отдельного изменения в свой сайт. Многие разработчики сразу же думают о WordPress, когда рассматривают CMS. Однако я хотел бы предложить в качестве альтернативы Cosmic JS. Интегрировать с точки зрения разработчика и управлять со стороны клиента чрезвычайно просто. В этой статье мы подключим приложение React + Next.js к Cosmic JS и перейдем над некоторыми функциями.

Начало работы
Сначала вам нужно создать бесплатную учетную запись с Cosmic JS. Перейдите на https://cosmicjs.com. Нажмите кнопку Создать бесплатную учетную запись в заголовке.

Затем введите свою информацию или просто нажмите «Зарегистрироваться с помощью GitHub».

Первым шагом в создании серверной части с помощью Cosmic JS является создание Bucket. Bucket можно рассматривать как контейнер объектов. Объекты - это любые данные, которые вы хотите сохранить. Объект может быть сообщением в блоге, изображением, любыми метаданными или чем угодно. Подробнее о объектах мы поговорим в следующем разделе. А пока просто знайте, что вам нужен Bucket для хранения всех данных вашего проекта. Теперь вы должны быть на https://cosmicjs.com/buckets. Нажмите Добавить новый сегмент. Введите название своего проекта и нажмите Сохранить сегмент.

Панель управления и настройка
Теперь вы должны быть на https://cosmicjs.com/****/dashboard ****, представляющем собой уникальную строку символов, которая идентифицирует ваш ведро (также называемое слагом). Всеми данными вашего сайта можно управлять в Личном кабинете. Первое, что мы собираемся сделать, это определить Тип объекта. Тип объекта определяет структуру данных. В этом руководстве мы собираемся определить 4 различных типа объектов: глобальные, сообщения, авторов и Социальные ссылки. Начнем с сообщений. Сообщение Объекты будут содержать всю информацию, необходимую для отображения сообщения в блоге на нашем сайте. Нажмите кнопку Добавить тип объекта.

Введите «Сообщение» в поле «Единственное имя». Поля «Имя во множественном числе» и «Конечная точка API» должны заполняться автоматически.

Затем щелкните вкладку «Шаблон метаполя». Нажмите «Добавить метаполе».

Выберите «Изображение / файл».

Введите «Герой» в поле «Название». Поле «Ключ» должно автоматически заполниться словом «герой».

Добавим еще одно метаполе. Снова нажмите «Добавить метаполе». На этот раз выберите «HTML Text Area».

Назовите его "Тизер". Затем нажмите «Сохранить тип объекта».

Потрясающие! вы создали свой первый Тип объекта. Давай сделаем еще трижды!

  1. Создайте Тип объекта, Автор. Это представляет автора сообщения в блоге. Добавьте метаполе «Изображение / Файл» и назовите его «Изображение».
  2. Создайте Тип объекта, Глобальный. Так мы будем хранить метаданные о нашем блоге, такие как заголовок, тег и логотип. Не добавляйте метаполя.
  3. Создайте Тип объекта, Социальную ссылку. Мы будем использовать это для хранения данных о внешних социальных ссылках. Добавьте метаполе «Ввод обычного текста» и назовите его «URL». Добавьте метаполе «Изображение / Файл» и назовите его «Значок».

Мы почти закончили настройку. Вернемся к нашему сообщению Object Type и добавим еще одно метаполе. Мы только что определили другой Тип объекта, Автор. Разве не было бы замечательно, если бы мы могли связать каждое сообщение с его автором? Снова нажмите «Добавить метаполе». На этот раз выберите «Отношение одного объекта». В появившемся диалоговом окне введите «Автор» в поле «Заголовок». Затем выберите «Ограничить поиск по типу объекта» и выберите «Авторы». Затем нажмите «Сохранить».

Настройка завершена! Вы только что создали целую серверную часть для своего проекта. Не требует настройки баз данных или серверов! 😀 🎉

Добавить контент

Прежде чем мы перейдем к подключению Cosmic JS к нашему приложению, давайте сначала добавим некоторые данные. Нажмите «Глобалы» в меню панели инструментов. Затем нажмите «Добавить глобальный».

В поле «Заголовок» введите «Заголовок». Затем мы добавим 3 метаполя.

  1. Добавьте метаполе «Ввод обычного текста». Введите «Заголовок сайта» в поле «Заголовок» и «Мой космический блог» в поле «Значение». Установите флажок «Обязательно».
  2. Добавьте еще одно метаполе «Ввод обычного текста». Введите «Тег сайта» в поле «Заголовок» и «Чистый, минималистичный, ориентированный на контент блог на основе Cosmic JS» в поле «Ценность».
  3. Добавьте метаполе «Изображение / Файл». Введите «Логотип сайта» в поле «Заголовок», а затем выберите изображение на своем компьютере.

Нажмите «Опубликовать».

Теперь давайте добавим автора. Щелкните «Авторы», затем «Добавить автора». Введите свое имя в поле «Заголовок». Добавьте краткую биографию в раздел «Содержание». Выберите изображение. Затем нажмите «Опубликовать».

Затем мы добавим сообщение. Нажмите «Сообщения», затем «Добавить сообщение». Введите название, контент, тизер, добавьте изображение героя, затем выберите свое имя в раскрывающемся меню «Автор».

Надеюсь, теперь вы научились пользоваться Dashboard. Это довольно интуитивно понятно.

Последнее, что мы сделаем, это добавим несколько социальных ссылок. Повторите тот же процесс, что и с другими типами объектов. Добавьте как минимум две социальные ссылки.

Контент ✔️, давайте напишем код

Теперь мы можем перейти к коду! Клонируйте, скачайте или просто проверьте исходный код на https://github.com/chrisoverstreet/cosmic-blog.

Это не руководство по React или Next.js, поэтому я просто сосредоточусь на файле /server.js. Next.js позволяет реализовать собственный сервер, создав файл server.js в корневом каталоге вашего проекта. Мы собираемся создать экспресс-сервер.

Самый простой способ подключиться к вашему бэкэнду Cosmic JS - использовать официальный клиент JavaScript Cosmic JS. Чтобы установить клиент, введите в терминале:

npm i -S cosmicjs

Вернувшись в server.js, импортируйте и инициализируйте cosmicjs:

const Cosmic = require('cosmicjs');
const api = Cosmic();

Теперь мы собираемся реализовать собственный API для подключения к Cosmic JS. Мы делаем это, чтобы создать слой между нашим приложением и нашими данными. Мы могли бы использовать клиент cosmicjs всякий раз, когда нам нужно было получить данные в нашем приложении, но тогда наши конфиденциальные данные корзины будут доступны клиенту (например, ключ доступа для записи API). Найдите ярлык своего ведра, вернувшись на панель инструментов Cosmic JS. В меню «Настройки» выберите «Основные настройки». Ваш "Bucket slug" должен быть виден. Скопируйте это.

Вернувшись в server.js, мы создадим объект корзины, который сможет использовать наш API.

const bucket = api.bucket({ slug: 5b7536d0-59f8-11e8-8958-e7a8aba9942d });

С помощью этого объекта корзины мы можем извлекать и возвращать наши данные следующим образом:

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

Вот полный код server.js:

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

Это так просто!

Outro

Это был просто общий обзор использования Cosmic JS с React + Next.js. Если вы похожи на меня, лучший способ чему-то научиться - это сразу же начать экспериментировать. Я предлагаю вам скачать исходный код этого проекта и поработать с ним. Cosmic JS может предложить гораздо больше, чем было упомянуто в этом сообщении. Ознакомьтесь со статьями и другой информацией, доступной на их сайте во вкладке «Разработчики».

Спасибо за прочтение! Удачного кодирования!

Эта статья изначально появилась как Статья Cosmic JS.