Создание полноценного приложения для электронной коммерции с нуля с использованием React, GraphQL, Stripe и Headless CMS Strapi. Заинтересованы в создании впечатляющих полнофункциональных приложений с React и GraphQL в рекордно короткие сроки? Это курс для вас!
Вот что мы рассмотрим:
- Создание полноценного приложения для электронной коммерции с React, GraphQL, Stripe и Headless CMS Strapi с нуля
- Написание и выполнение запросов GraphQL на клиенте и сервере
- Выполнение точных запросов и поисковых операций с GraphQL
- Обработка платежей по кредитным картам и создание заказов с помощью Stripe
- Интеграция Stripe с React с использованием библиотеки компонентов React-Stripe
- Использование Headless CMS Strapi для молниеносного создания проектов и создания прототипов
- Аутентификация JWT для пользователей с входом / регистрацией
- Отправка электронных писем пользователям с помощью почтового сервиса / API SendGrid
- Создание уникальных, привлекательных мобильных приложений с использованием новой библиотеки компонентов React, Gestalt
- Создание частных маршрутов в React для аутентифицированных пользователей
- Обширная работа с LocalStorage API для сохранения данных на клиенте
- Тост-уведомления для наших пользователей, чтобы дать пользователям обратную связь об успешных действиях, а также об ошибках
- Пользовательские анимации загрузки с библиотекой React Spinners
- Адаптивный дизайн с использованием CSS Flexbox
- Основная работа с React Router 4 (параметры маршрута, объект истории, withRouter, NavLinks и тд.)
- Тонны работы с ES6 / 7, в частности с асинхронными / ожидающими функциями (с обработкой ошибок)
- Разверните наше приложение в Интернете, используя Heroku
- И больше!
Что будет строиться в этом курсе?
На протяжении этого курса мы будем создавать интернет-магазин под названием BrewHaha, приложение электронной коммерции, которое позволит пользователям заказывать доставку напитков по запросу.
Это будет полнофункциональное приложение с нуля, созданное с помощью React и GraphQL поверх Node API, созданного инструментом Strapi. Мы создадим и будем использовать базу данных MongoDB, размещенную на MLab. Он будет использовать известные в отрасли инструменты, такие как Stripe, для обработки платежей по кредитным картам, выполненных в нашем приложении React, и почтовый клиент SendGrid для отправки электронных писем нашим пользователям при выполнении определенных действий (например, при совершении платежа).
Как мы будем строить наше приложение так быстро (в течение 90 минут)?
Секрет создания нашего приложения так быстро заключается в помощи CMS Strapi. Это инструмент, который с помощью одной команды создаст полный API-интерфейс Node и административную панель для взаимодействия с нашими данными. В конце концов, это значительно упростит создание приложений с полным стеком с помощью React (и всех библиотек JavaScript). Нам не нужно изобретать колесо для будущих проектов, которые мы создаем - основные вещи, которые нам нужно сделать в наших приложениях (управление данными, роли и разрешения, аутентификация), станут намного проще.
И мы не будем принимать быстрые решения при создании нашего приложения. К концу у нас будет действительно полноценное приложение, которое мы сможем развернуть в Интернете, и посетители будут регистрироваться, добавлять продукты в свою корзину пользователя, оформлять заказы и обрабатывать свою кредитную карту для оплаты!
Что такое headless CMS?
headless означает отсутствие внешнего интерфейса; Другими словами, headless CMS не дает нам клиента для нашего приложения для взаимодействия с пользователями (мы будем делать это с React), она дает нам лучший способ работы с данными в наших приложениях. CMS расшифровывается как «система управления контентом». Она предоставляет нам богатый, интуитивно понятный интерфейс для управления контентом в наших проектах! С легкостью создавать новые типы данных, управлять ролями и разрешениями пользователей; в общем, чтобы дать нам обширный контроль над нашим приложением в одном удобном месте.
Если вы раньше не работали с системами управления контентом, вы попали по адресу. Я покажу вам, как приступить к работе со Strapi, чтобы создать внутренний и законченный API-интерфейс Node, настроить плагины и функции в нашем приложении и быстро повысить производительность.