Эта статья является гостевой серией великого Ekene Eze . Он возглавляет команду опытных разработчиков в Flutterwave и написал это сообщение в блоге через программу Write for the Community.
В этой серии статей вы познакомитесь с процессами настройки вашего собственного приложения для заказа еды и, как следствие, любого приложения для электронной коммерции с использованием современных инструментов разработки, таких как Strapi, Gridsome и Snipcart.
Содержание: 1. Часть 1 - Создание приложения Strapi и создание продуктов 2. Часть 2 - Настройка проекта Gridsome 3. Часть 3 - Использование продуктов с помощью Gridsome и GraphQL 4. Часть 4 - Создание отдельных представлений продукта с помощью шаблонов Gridsome 5. Часть 5 - Реализация корзины и оформления заказа с помощью Snipcart 6. Часть 6 - Развертывание приложений
Страпи
Strapi - одна из самых популярных headless систем управления контентом на данный момент. Что делает Strapi отличным выбором для меня, так это то, что он:
- С открытым исходным кодом
- На основе Node.js
- 100% JavaScript
- Ориентирован на разработчиков и
- Помимо прочего, он полностью настраивается.
Команда Strapi проделала невероятную работу и добавила больше функций, которые улучшают опыт разработчиков продукта. В первой части этой серии мы рассмотрим процесс настройки приложения Strapi и создания продуктов для дальнейшей демонстрации возможностей и простоты использования Strapi.
Gridsome
Gridsome - это бесплатная платформа с открытым исходным кодом на базе Vue.js для создания веб-сайтов и веб-приложений, которые по умолчанию работают быстро. Если вы знакомы с Gatsby, который также является генератором статических сайтов для React, Gridsome можно считать альтернативой на основе Vue. Тем не менее, Gridsome по-прежнему уникален.
Все это благодаря уровню данных GraphQL, который помогает извлекать и централизовать информацию из внешних источников данных (API, локальный файл, CMS). Из уровня данных GraphQL данные становятся доступными для компонентов Vue, где вы можете их использовать. Наконец, он генерируется в статический HTML и отображается во время сборки Gridsome.
Snipcart
Snipcart - это простое решение для электронной коммерции, которое позволяет разработчикам добавлять полностью настраиваемые возможности оформления заказа на любой веб-сайт. Что еще? Snipcart - это 100% HTML и JavaScript с отличным опытом разработчика. Мы увидим больше его функций в конце этой серии, когда добавим функции оформления заказа, чтобы позволить пользователям размещать заказы на еду.
Об этом Snipcart предлагает предварительно настроенные платежные процессоры, такие как Stripe и PayPal, по умолчанию, а также дает вам возможность настроить свой собственный процессор по выбору. На мой взгляд, это продуманная функция, и я это ценю.
Что мы построим
Если это еще не очевидно, в этой серии мы создадим приложение для заказа еды Fullstack, используя Strapi и Gridsome. Мы будем использовать Strapi на бэкэнде для создания продуктов нашего магазина. После этого мы будем потреблять продукты на веб-интерфейсе с помощью Gridsome и, наконец, реализуем функции корзины и оформления заказа с помощью Snipcart. Вот демонстрация и скриншоты конечного продукта в действии:
Демо:
Скриншоты:
Содержание: 1. Часть 1 - Создание приложения Strapi и создание продуктов 2. Часть 2 - Настройка проекта Gridsome 3. Часть 3 - Использование продуктов с помощью Gridsome и GraphQL 4. Часть 4 - Создание отдельных представлений продукта с помощью шаблонов Gridsome 5. Часть 5 - Реализация корзины и оформления заказа с помощью Snipcart 6. Часть 6 - Развертывание приложений
Репо:
- Gridsome Frontend - https://github.com/kenny-io/mealzers-frontend
- Бэкэнд Strapi - https://github.com/kenny-io/mealz
Приступим к первой части!
Создание приложения Strapi и создание продуктов
Создание нового приложения Strapi очень просто. Все, что требуется, - это Node. После его установки (v12 +) вы можете запустить следующую команду в своем терминале, чтобы создать новое приложение Strapi:
yarn create strapi-app mealzers --quickstart
ИЛИ
npx create strapi-app mealzers--quickstart
Эта команда немедленно установит зависимости Strapi и сгенерирует для вас приложение Strapi. Вновь созданное приложение будет доступно в браузере по умолчанию. Просто перейдите к, http://localhost:1337/admin чтобы просмотреть его, и заполните форму администратора.
Укажите свои данные в форме и нажмите синюю кнопку LET’S START , чтобы перейти на панель администратора Strapi, где будет выполнена основная часть работы:
Вот как вы создаете приложение Strapi. Вы также можете открыть приложение в своем любимом редакторе кода и взглянуть на некоторые файлы, созданные по умолчанию, если вам это нравится. А пока давайте продолжим и начнем создавать продукты для нашего ресторана.
Создайте продукт
Следующее, что нам нужно сделать, это создать продукты, которые мы будем отображать в нашем приложении. Для этого выполните следующие действия, перечисленные ниже:
Щелкните видимую синюю кнопку с надписью СОЗДАТЬ ПЕРВЫЙ ТИП КОНТЕНТА, введите Product в поле отображаемого имени и нажмите Continue, чтобы продолжить:
Создание полей продукта
Затем вам потребуется создать поля, которые будут добавлены в вашу коллекцию продуктов. Следовательно, для каждого продукта у нас будут эти поля —
- title - Название блюда (Text)
- price - Цена обеда (Number, float)
- description - Краткое описание блюда (Text)
- рейтинг - рейтинг продукта (Number, Integer)
- инструкции - Как приготовить еду и (Text)
- image - изображение еды (Media, single media)
На следующем экране, показанном ниже, давайте рассмотрим процесс создания поля заголовка в коллекции продуктов и повторим тот же процесс для всех остальных полей:
Для поля title выберите Text
Перейдите на вкладку ADVANCED SETTINGS в правом верхнем углу экрана и установите флажки ниже:
По сути, это говорит Strapi сделать это поле уникальным и обязательным для каждого нового продукта, который мы создаем. Когда вы закончите, нажмите Finish.
Отсюда вы можете нажать кнопку +ДОБАВИТЬ ДРУГОЕ ПОЛЕ К ЭТОМУ ТИПУ КОЛЛЕКЦИИ и повторить процесс для остальных полей. Вы можете решить, какие поля вы хотите отметить обязательными или уникальными по своему усмотрению. Когда вы закончите с остальными полями, нажмите зеленую кнопку сохранения, сервер Strapi перезапустится, и вы должны увидеть этот экран:
Примечание: если вы не видите этот экран после перезапуска сервера, просто обновите браузер, и все будет в порядке.
Добавление товаров
Теперь, когда мы создали все поля, необходимые для нашей коллекции продуктов, давайте начнем добавлять продукты в коллекцию. Щелкните раздел Products на левой боковой панели, затем щелкните Add new product в правом верхнем углу.
Поля продуктов интуитивно понятны и просты для понимания. Задайте значения для всех полей, которые мы указали, и все. Вы можете добавить столько продуктов, сколько хотите, в вашем онлайн-ресторане.
Я создал массив, содержащий все продукты, которые я использую в этом проекте. Вот один товар:
[
{
"id":1,
"title":"Grilled Beef",
"price":30,
"description": "Beef is the culinary name for meat from cattle, particularly skeletal muscle. Humans have been eating beef since prehistoric times. Beef is a source of high-quality protein and essential nutrients. Check below for preparation instructions",
"rating": 4,
"instructions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"image": "https://www.themealdb.com/images/category/beef.png"
},
]
Если вы хотите создать такие же продукты, как мои, вы можете найти здесь gist и быстро скопировать содержимое в свое приложение Strapi.
Когда вы закончите добавлять продукты, у вас должен появиться такой экран сводной информации о продукте:
Получить продукты
Теперь, чтобы получить список всех продуктов, которые мы только что создали, вы можете легко перейти по адресу localhost: 1337 / products в браузере:
Ой! мы получаем код состояния 403. В основном это означает, что у вас нет разрешения на доступ к этой конечной точке. И это ожидается, потому что нам нужно сделать еще одно.
Установка ролей и разрешений
Strapi предлагает функцию ролей и разрешений на вкладке настроек, где вы можете указать, как пользователи могут получить доступ к вашим конечным точкам. В нашем проекте это будет довольно просто. Мы не будем рассматривать аутентификацию, поэтому сделаем конечную точку полностью общедоступной. Для этого нажмите настройки на левой боковой панели> Users and Permission Plugin> Roles> Public> Permissions и установите флажки ниже:
Теперь, когда мы localhost:1337/products снова переходим в браузер, мы видим список всех наших продуктов:
Вывод
Поздравляем, мы подошли к концу этой части. Прежде чем вы уйдете, давайте сделаем краткий обзор. В этой части мы рассмотрели инструменты, которые будем использовать для создания нашего приложения для заказа еды. Мы также рассмотрели процесс настройки нового приложения Strapi. Впоследствии мы создали несколько продуктов, которые мы будем отображать во внешнем интерфейсе позже в этой серии. Большое спасибо, что остались со мной и до встречи в следующей части.