Новая основа для работы с моим клиентом

Вчера мы запустили простое веб-приложение для Motown, которое ежедневно отображает факты из легендарной истории лейбла. Я уже поделился несколькими техническими решениями этого проекта в процессе разработки, включая добавление поиска Apple Music в Contentful, создание простого календаря с сеткой CSS и воссоздание пользовательского интерфейса автоматического воспроизведения Instagram. Теперь, когда проект запущен, я хотел бы быстро объяснить, как мы в первую очередь интегрировали Contentful в наше приложение Nuxt.js.

Contentful, для тех, кто не знает, - это инфраструктура контента, которая прекрасно интегрируется в современные фреймворки, такие как Nuxt. Мы используем его в проекте Motown для управления всеми историями, исполнителями и песнями, связанными с историей лейбла. Чтобы сделать этот блог кратким, я предполагаю, что у вас уже есть некоторые данные в Contentful. Если нет, просто прочтите их отличную статью Начало работы, создайте данные и вернитесь сюда.

Первое, что мы сделаем, это создадим новый проект Nuxt, так что создайте пустой каталог для вашего проекта и перейдите в этот каталог.

mkdir motown
cd motown

Затем создайте package.json файл, чтобы отслеживать зависимости вашего проекта.

{
  "name": "motown",
  "scripts": {
    "dev": "nuxt"
  }
}

Наконец, добавьте nuxt в свой проект.

npm install --save nuxt

Пока мы это делаем, давайте установим Javascript SDK для контента и модуль @ nuxtjs / dotenv для управления нашими локальными (Contentful) переменными среды.

npm install --save contentful @nuxtjs/dotenv

Затем нам нужно создать .env файл в корневом каталоге нашего проекта и указать переменные для вашего идентификатора пространства Contentful и токена доступа api доставки контента. И то, и другое можно найти в вашей учетной записи Contentful в разделе Настройки ›Ключи API.

CONTENTFUL_SPACE_ID=123
CONTENTFUL_ACCESS_TOKEN=abc

Теперь, чтобы использовать эти переменные в нашем проекте, нам нужно включить модуль в nuxt.config.js файл конфигурации нашего проекта Nuxt. Этот файл также должен быть создан в корневом каталоге вашего проекта.

require('dotenv').config()
export default{
  env: {
    CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID,
    CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN
  }
}

Милый, теперь у вашего проекта есть возможность доступа к опубликованным вами данным Contentful. Теперь мы создадим плагин Nuxt для инициализации клиента Contentful на основе нашего идентификатора пространства и токена доступа. Создайте новый каталог с именем plugins в корневом каталоге и добавьте файл с именем contentful.js. Теперь давайте экспортируем клиент API в этот файл.

const contentful = require('contentful')
const config = {
  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
}
const client = contentful.createClient(config)
export default client

Хорошо, мы уже близко. Последний шаг - создать страницу в вашем проекте Nuxt, которая будет использовать этот плагин для получения ваших данных из Contentful. Создайте в корневой папке проекта еще один каталог с именем pages и создайте в нем файл с именем index.vue. Страницы Nuxt - это компоненты Vue, которые позволяют объявлять HTML, CSS и Javascript в одном месте. Давайте пока добавим простой шаблон-заполнитель.

<template>
  <section>
    <h1>Contentful + Nuxt = 🔥</h1>
  </section>
</template>

Прямо под этим мы можем объявить <script>, необходимый для импорта созданного нами плагина Contentful. После импортирования этого плагина мы можем использовать метод asyncData для получения наших записей из Contentful. Этот метод хорош, потому что он получает ваши данные на сервере или клиенте до отрисовки компонента страницы. Nuxt также будет использовать встроенный компонент loading, чтобы информировать пользователей о ходе загрузки.

<script>
import contentful from '~/plugins/contentful.js'
export default{
  asyncData ({ params }) {
    return contentful.getEntries({ 'content_type': 'story' })
    .then(result => { stories: result.items })
  }
}
</script>

Мы используем клиент Contentful, чтобы получить все записи истории типа контента, а затем вернуть найденные элементы в объекте, который Nuxt.js объединит с данными нашего компонента страницы. Теперь у нас есть доступ к нашим Contentful данным через нашу страницу. Для этого упражнения давайте просто переберем элементы и отобразим их как абзацы в нашем HTML.

<template>
  <section>
    <p v-for="story in stories">
      { story.fields.headline }
    </p>
  </section>
</template>

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