Вам когда-нибудь приходилось создавать и отправлять API за очень короткое время? Прочтите эту статью, чтобы узнать, как использовать Strapi для выполнения работы.
Введение
API-интерфейсы настолько полезны и вездесущи в любом приложении, что, как разработчика, вы можете быть обеспокоены созданием API за очень короткое время. В этой статье я покажу вам, как очень быстро (возможно, за 10 минут) создать Node.js API с помощью интуитивно понятного интерфейса Strapi.
Что вы узнаете:
- Как быстро создать API с помощью Strapi.
- Как создать серверную часть Node без написания кода Node.
- Как управлять реляционными полями с помощью Strapi.
- Как добавить конечные точки GraphQL для извлечения и изменения вашего API.
Эта статья написана для:
- Разработчики, которым необходимо быстро создавать серверные API.
- Разработчики, которые хотят создать серверную часть, но хотят сосредоточиться только на интерфейсе.
- Разработчики, которые хотят создать серверный API Node, но не имеют опыта работы с Node.
Что вы будете строить:
В этом руководстве вы начнете с нуля (то есть из пустого каталога), а затем выполните все шаги, необходимые для создания API с использованием Strapi. API, который вы создадите, позволит клиентам делать запросы на управление контентом. Контент в этом случае будет представлять сообщения в блоге (как, например, для веб-сайта блога — если вы хотите создать внешний интерфейс, двигаясь вперед).
Предпосылки
Что вам понадобится для этого урока:
- Знание API; возможно, имеет смысл сначала узнать об этом.
- Node & NPM — вам необходимо установить Node и NPM на вашем локальном компьютере. Чтобы убедиться, что они установлены, выполните следующие команды в своем терминале:
node -v && npm --v
Диспетчер пакетов Node устанавливается вместе с Node. Если они у вас не установлены, вы можете следовать инструкциям на официальном сайте Node.js.
Это руководство выполнено с использованием Node v14.18.1.
3. Yarn. Yarn — это менеджер пакетов, который поможет нам управлять зависимостями наших приложений в несколько раз быстрее и надежнее, чем NPM. Вы можете установить пряжу, используя:
npm install --global yarn
Оглавление
Вот что мы рассмотрим сегодня:
- Введение в Страпи
- Настройка проекта Strapi
- Создание серверной части Strapi
- Понимание и использование отношений в Strapi
- Доставка быстрее с GraphQL и Strapi
- Заключение
Введение в Страпи
Strapi — это безголовая CMS (система управления контентом) с открытым исходным кодом, основанная на Node.js, которая дает разработчикам возможность легко создавать собственные, настраиваемые и производительные API-интерфейсы контента (RESTful и GraphQL). С помощью Strapi можно сэкономить недели разработки API, потому что это не код, а создание надежного API можно выполнить менее чем за 20 минут.
Разве это не здорово? Я тоже так думал. Давайте углубимся в то, как это можно сделать возможным.
Настройка проекта Strapi
Существуют различные способы установить новый проект Strapi. Тем не менее, Strapi CLI — лучший способ начать работу.
Для начала откройте терминал и перейдите в каталог, в котором вы хотите создать этот проект. Запустите следующую команду в своем терминале, чтобы создать новый проект Strapi:
yarn create strapi-app my-project --quickstart
Использование флага --quickstart в конце команды предоставляет вам базу данных SQLite по умолчанию и напрямую создает проект в режиме быстрого запуска. Если вы хотите сменить базу данных, читайте дальше.
Когда создание проекта будет завершено, приложение должно автоматически запуститься с localhost:1337 в вашем браузере.
Если ваше приложение не запустилось автоматически, выполните следующую команду в папке проекта:
yarn develop
Откройте папку приложения в вашей среде IDE, и структура проекта должна выглядеть так, как показано ниже:
Создание серверной части Strapi
Теперь, когда папка проекта создана, первым шагом к созданию серверной части Strapi является регистрация администратора.
Вы можете зарегистрировать администратора, заполнив форму, которая была предоставлена при запуске, как я сделал ниже:
Затем нажмите кнопку «НАЧАТЬ». Это создаст вашу учетную запись и приведет вас к пользовательскому интерфейсу администратора Strapi, который вы будете использовать для конфигураций разработки.
Разве не удивительно, как вы перешли от создания пряжи к панели инструментов, где вы можете довольно скоро создать свой собственный API?
Теперь вы готовы использовать удивительные возможности Strapi для создания API для постов в блоге. Давайте продолжим.
Проектирование структуры данных
На этом этапе мы собираемся начать создавать структуру данных для нашего API. Мы можем сделать это, создав типы контента. Первый тип контента, который мы создадим, предназначен для постов.
Перейдите в раздел Content-Types Builder и нажмите «Создать новый тип коллекции». Появится модальное окно, где вы должны ввести сообщение в качестве отображаемого имени.
Content-Types Builder позволяет создавать и обновлять типы контента: одиночные и коллекционные. "Читать далее".
Затем появится модальное окно, которое вы будете использовать для создания полей для типа контента публикации.
Хм, а какие поля всегда есть в посте в блоге… Давайте создадим следующие:
- заголовок типа Текст (обязательно)
- контент типа Rich Text (обязательно)
- изображение с типом Мультимедиа (Одно изображение) и (обязательно)
- автор с типом Text(обязательно)
Теперь у вас есть тип контента публикации с 4 полями — Text, Rich Text, Media и Text.
Нажмите Готово, а затем Сохранить! Вот и все, ваш первый тип контента создан, и вы успешно создали схему для публикации в блоге.
Схемы помогают реализовать дизайн базы данных. Схемы баз данных — это чертежи, которые помогают разработчикам визуализировать, как следует строить базы данных. Они обеспечивают контрольную точку, указывающую, какие поля информации содержит проект.
Теперь на боковой панели мы увидим раздел «ТИПЫ КОЛЛЕКЦИИ», и если вы перейдете в раздел сообщений, вы обнаружите, что в настоящее время сообщений нет.
Вы можете создать новую публикацию, нажав Добавить новую публикацию.
Вы увидите, что вам предоставляется CMS для ввода данных. Заполните поля (название, избранное изображение, автор, контент) информацией о первом сообщении, которое вы хотите добавить в свою базу данных. Вы можете добавить много постов, если хотите.
Затем нажмите Сохранить и Опубликовать. Мой скриншот показан ниже:
Чтобы просмотреть API сообщений, посетите localhost:1337/posts. P.s.: Обратите внимание, что название типа коллекции, которое мы установили изначально, во множественном числе — post.
Вы получите статус 403 — запрещенная ошибка, как показано ниже:
Это связано с тем, что мы пытались просмотреть API как пользователь, не прошедший проверку подлинности, а по умолчанию для просмотра API требуется проверка подлинности. Чтобы сделать сообщения общедоступными, мы должны предоставить доступ для чтения к типу содержимого сообщения. Для этого перейдите на панель инструментов и в раздел «ОБЩИЕ».
- Нажмите Настройки, затем Роли и разрешения и выберите общедоступную роль.
- Проверьте параметры поиска и поиска в статье под разрешением и сохраните.
С их помощью вы разрешили общедоступному пользователю получать все сообщения GET /posts, а также получать одно сообщение GET /posts/:id; что-то похожее на метод REST API GET.
Затем нажмите Сохранить!
Теперь, если мы перейдем к localhost:1337/posts, на этот раз вы должны увидеть все свои сообщения из конечной точки сообщения.
Вы можете получить доступ к созданным конечным точкам с помощью методов REST API, потому что по умолчанию Strapi предоставляет наши конечные точки через REST, но позже в этой статье я покажу вам, как можно получить доступ к конечным точкам через GraphQL.
В папке проекта файлы ./api/**/config/routes.json определяют все доступные конечные точки для клиентов. По умолчанию Strapi создает конечные точки для всех ваших типов контента. "Читать далее".
Похоже, мы делаем успехи. Не так ли?
Теперь мы создали пост, контент хранится в вашей базе данных, чтобы вы могли иметь доступ к своим данным, когда вам это нужно.
Если вы просмотрите конечную точку сообщений, вы заметите, что еще одно преимущество Strapi заключается в том, что он также поддерживает оптимизацию изображений. Вам предоставляется возможность отображать различные форматы изображений, включая эскизы, большие, средние и маленькие.
Со Strapi вам также не нужно испытывать стресс при построении структуры проекта MVC — создании базы данных, соединений с базой данных, моделей и т. д. Здесь все делается за вас под капотом. Мы посмотрим на это довольно скоро.
Разве не прекрасно видеть, что мы продвигаемся вперед?
Вернувшись в IDE, вы увидите, что в папке проекта создана папка ./api/posts/, которая является отражением конечной точки сообщений, которую вы создали на панели администратора.
В папке моделей файл posts.settings.json определяет созданную вами схему публикации, как показано ниже:
По мере роста вашего приложения — чем больше типов контента (конечных точек) вы добавляете, тем больше папок создается в каталоге API.
Также обратите внимание, что загруженные изображения хранятся в папке public/uploads.
Я считаю очень важным, чтобы весь ваш код соответствовал всем действиям, выполняемым на панели инструментов. Что вы думаете?
Понимание и использование отношений в Strapi
Допустим, у вас есть коллекция видео и для каждого поста в блоге; внутри должно быть встроено видео. Чтобы установить связь между видео из коллекции видео и соответствующей записью в блоге, вам сначала нужно научиться использовать отношения в Strapi.
Поля типа отношения, добавленные к типу контента из Content-Types Builder, позволяют установить отношение с другим типом контента — обязательно с типом коллекции. Эти поля называются «реляционными полями».
С нашими новыми знаниями давайте продолжим и создадим коллекцию видео, чтобы продемонстрировать, как настроить отношения в Strapi.
Перейдите в раздел Content-Types Builder и нажмите «Создать новый тип коллекции». Введите видео в качестве отображаемого имени.
Затем добавьте следующее поле для типа видеоконтента:
- URL типа Текст (обязательно)
Нажмите Готово, а затем Сохранить! Теперь ваш второй тип контента создан, и вы успешно создали схему для видео.
Чтобы продолжить, возьмите URL-адрес видео, возможно, для вашего любимого видео на YouTube.
Поскольку мы хотим создать связь между коллекцией сообщений и коллекцией видео, нам также нужно добавить новое поле с именем видео в коллекцию сообщений. Тип поля для этого будет Отношение, и мы можем выбрать тип отношения, которое мы хотим между публикациями и видео (выбрав любой из 6 вариантов). Я выберу отношение один к одному, где пост содержит видео, как показано ниже:
Примечание. Чтобы поле было отношением, оно должно быть типом коллекции.
Когда закончите, нажмите кнопку Готово.
Теперь схема вашего поста должна выглядеть так:
При этом поле видео в коллекции «Сообщения» связано с коллекцией «Видео».
Чтобы продолжить, перейдите к разделам Видео в разделе «ТИПЫ КОЛЛЕКЦИИ» на панели инструментов, затем нажмите кнопку Добавить новое видео, чтобы добавить видео в свою коллекцию видео, как показано ниже. :
Нажмите Сохранить, затем Опубликовать.
Теперь, когда видео добавлено, мы можем связать его с сообщением в блоге, перейдя к нужному сообщению в коллекции сообщений, нажав кнопку Изменить и выбрав URL-адрес видео, которое вы хотите добавить. на тот пост.
Тадаа! Если вы посетите localhost:1337/posts в своем браузере, вы увидите, что конечная точка сообщений была обновлена, а видео было добавлено в сообщение, куда вы его включили, как показано ниже:
Доставка быстрее с GraphQL и Strapi
Быстрая доставка приложений всегда является главным приоритетом. В этом разделе вы узнаете, как легко запрашивать данные с помощью сгенерированной схемы GraphQL.
Чтобы начать работу с GraphQL в вашем приложении, вам сначала нужно установить плагин, выполнив следующую команду в каталоге вашего проекта:
yarn strapi install graphql
Установив подключаемый модуль GraphQL, вы сможете добавить конечную точку GraphQL для извлечения и изменения вашего контента.
Перезапустите приложение, используя:
yarn develop
Когда вы посещаете localhost:1337/graphql в своем браузере, вы должны увидеть интерфейс (GraphQL Playground), который поможет вам написать запрос GraphQL для изучения ваших данных.
Если вы хотите получить доступ к идентификатору, названию, URL-адресу избранного изображения, автору и URL-адресу видео для сообщений в блоге, вы можете написать запрос, как показано ниже:
Мы смогли получить данные довольно быстро и удобно! Кроме того, с помощью боковой панели вы можете просмотреть свою схему. Потрясающий!
Заключение
Из этой статьи вы узнали, насколько быстрым, простым в использовании и мощным является Strapi для создания API. Настройка нашего бэкэнда прошла очень гладко. Просто создайте свои коллекции, и Strapi по умолчанию сгенерирует конечные точки RESTful, или, если вы предпочитаете использовать конечные точки GraphQL, просто установите плагин. Все это с использованием лучших веб-практик. Классная штука, правда!
Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии, электронная почта или DM мне.
