Cosmic JS позволяет легко создавать вложенные структуры объектов и загружать медиафайлы. В этом руководстве мы узнаем, как строятся вложенные структуры и как вы можете получить эти данные из Cosmic JS API для использования на простом персональном музыкальном веб-сайте, основанном на Cosmic JS и Nuxt.js.
TL;DR:
Демонстрация личного музыкального сайта
База кода личного музыкального сайта
вступление
Поскольку уже есть множество статей, в которых вы можете узнать, как работать с Cosmic JS Dashboard, мы будем использовать уже подготовленный снимок Bucket.
Создать ведро
Сначала вам нужно будет создать новую корзину, так как на следующем шаге из нее будут удалены все данные.
Загрузите базу bucket.json, содержащую описание шаблона Bucket Objects, а также некоторые демонстрационные данные для нашего приложения. Чтобы импортировать его в свой сегмент, просто перейдите на страницу панели управления сегмента и перейдите в раздел Настройки ›Импорт / экспорт; вы увидите кнопку Добавить файл импорта - щелкните ее и выберите файл bucket.json, который вы скачали ранее.
Теперь ваша корзина с недавно импортированными шаблонами объектов позволяет вам встраивать объекты в следующие структуры:
В Cosmic JS, когда вам нужно вложить / связать объекты в другой объект, вы используете метаполе «Связь нескольких объектов». Затем, когда вы выбираете объект root, вы получите все элементы, связанные с ним объектами Metafield. В следующем абзаце вы увидите, как развернуть приложение, которое обращается к таким структурам, с помощью всего одного запроса Cosmic JS API.
Разверните приложение
Чтобы развернуть реальное приложение, выполните следующие действия:
1) Клонируйте репозиторий на свой компьютер и перейдите в только что созданную папку
2) Установите зависимости приложений
3) Настройте локальный экземпляр приложения
На самом деле, способ настройки приложений, размещенных на Cosmic JS, заключается в чтении переменных среды, но на этот раз для большей ясности с нашим локальным развертыванием мы просто редактируем файл с именем instance.config.js. Чтобы иметь возможность запускать приложение с вашим собственным Cosmic JS Bucket, вам нужно будет изменить следующие 3 атрибута в этом файле:
- слизняк
- read_key
- write_key
Чтобы получить эти настройки, перейдите на панель управления Bucket и выберите Настройки> Основные настройки. Там вы увидите поля с названием:
- Bucket slug
- Ключ доступа для чтения API
- Ключ доступа на запись к API
Скопируйте значения из этих полей в свой instance.config.js и сохраните его. После этого должно получиться так:
4) Запустите приложение
После сборки приложения вы увидите сообщение о том, что сервер запущен по его адресу и порту. Перейдите по этому адресу с помощью своего веб-браузера. Вы должны увидеть домашнюю страницу приложения с демонстрационными данными, загруженными из вашего сегмента:
Узнайте, как извлекаются данные
Получить данные из Cosmic JS в ваше JS-приложение довольно просто, если вы привыкнете к JavaScript как к самому асинхронному языку. В этом конкретном примере приложения мы используем небольшую фабрику, которая создает обещание, которое позже преобразуется в экземпляр Bucket, который позволяет нам извлекать из него объекты. В этом файле вы можете увидеть, как это делается:
Вы можете заметить, что для инициализации Bucket требуются параметры, которые мы предварительно установили в файле конфигурации.
Затем вы можете увидеть, как на самом деле доступ к сегменту используется в управлении состоянием приложения. Вот упрощенный вид индексного файла Vuex:
Здесь мы ждем, когда обещание с Bucket разрешится. Затем мы вызываем getObjects с типом «авторы», количеством, ограниченным 1, и отключенным объяснением метаполей. Затем, если ответ возвращается с непустым статусом, мы выбираем первый полученный объект и сохраняем его в нашем состоянии. Вот и все!
Если вы хотите более внимательно изучить полученные данные, вы можете установить vue-devtools, затем запустить приложение в режиме разработки с помощью команды npm run dev и проверить состояние Vuex с помощью vue-devtools в вашем браузер. Вы увидите, что полученное дерево данных содержит не только объект Автор, но также связанные с ним альбомы и треки.
А как насчет передачи данных в Cosmic JS?
Вы также можете не только читать объекты из своего ведра, но и записывать (создавать) их в него. Чтобы задействовать этот тип операции, наше приложение позволяет пользователям публиковать комментарии относительно альбомов. Посмотрите на следующий фрагмент кода в контексте формы комментария, и вы увидите, что создать объекты с помощью метода addObject так же просто, как получить их с помощью getObjects из Cosmic JS.
Вывод
Cosmic JS позволяет создавать структуры данных на основе отношений нескольких объектов, а затем получать эти данные в свое приложение с помощью нескольких строк кода.
Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, напишите нам в Twitter и присоединитесь к разговору в Slack.
