Создайте интернет-магазин с React и GraphQL за 90 минут - Видеоуроки

Build an Online Store with React and GraphQL in 90 Minutes
Duration 03:42:16
Открыть все курсы от udemy

Создание полноценного приложения для электронной коммерции с нуля с использованием 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, настроить плагины и функции в нашем приложении и быстро повысить производительность.

Полный список уроков Развернуть / Свернуть
  • Урок 1. Tools Used / Needed for Our App 00:04:37
  • Урок 2. Short Path versus the Long(er) Path in the Course 00:01:23
  • Урок 3. Git Clone Repo, Install Dependencies, Scaffold React App 00:03:19
  • Урок 4. Create Components, Routing for Project 00:03:19
  • Урок 5. Hot Module Loading with create-react-app (Optional) 00:01:12
  • Урок 6. Gestalt Setup and Navbar Component 00:06:31
  • Урок 7. Add Base CSS Rules and Apply Class to Active NavLink (Optional) 00:01:55
  • Урок 8. (Updated) Setup MongoDB Atlas Database, Install Strapi CLI, Create Strapi Server 00:05:56
  • Урок 9. Brief Look at Strapi CLI (Optional) 00:02:27
  • Урок 10. Start the Strapi Server, Create Root Admin for CMS 00:02:16
  • Урок 11. Overview of Strapi Admin Panel (Optional) 00:05:31
  • Урок 12. Add Brand Content Type with Content Type Builder, Add First Brand 00:04:51
  • Урок 13. Install GraphQL Plugin, Visit GraphQL Playground 00:01:18
  • Урок 14. Query Brand by Id in GraphQL Playground, Give Permission to All Users (Optional) 00:05:16
  • Урок 15. Query Multiple Brands with GraphQL, Change Permissions Again 00:02:59
  • Урок 16. Run Client Script with Server, Add Markup for Brands Section 00:02:22
  • Урок 17. Connecting React with GraphQL using Strapi SDK, Fetch Data from Client 00:04:15
  • Урок 18. Catch async / await Errors with try / catch, Put Brand Data in Local State 00:02:37
  • Урок 19. Display Brands on Home Page, Create Brand Card Component 00:05:35
  • Урок 20. Add Flex Wrap to Brand Cards for Responsive Design, More Styles (Optional) 00:01:45
  • Урок 21. Add SearchField Component to Search Brands (Optional) 00:05:08
  • Урок 22. Client-Side Search with .filter() (Optional) 00:03:48
  • Урок 23. Add Loading State for Brand Data, Create Loader Component (Optional) 00:05:39
  • Урок 24. Add Brew Content Type 00:02:23
  • Урок 25. Seed Brew Data 00:04:21
  • Урок 26. Query Brew / Brews, Change Permission for Public / Auth Users 00:03:17
  • Урок 27. Query Brand by Id to Get Associated Brews 00:02:29
  • Урок 28. Request Brews by Brand Id in Brews Component 00:05:40
  • Урок 29. Add Markup to Display Brews 00:06:02
  • Урок 30. Add Cart Markup in Brews Component 00:04:40
  • Урок 31. Create Function to Add Items to Cart 00:05:04
  • Урок 32. Create Function to Delete Item from Cart, Calculate Cart Total 00:03:59
  • Урок 33. Persist Cart to LocalStorage 00:03:19
  • Урок 34. Create Sign Up Form 00:05:13
  • Урок 35. Add Form Validation to Sign Up (Optional) 00:02:23
  • Урок 36. Create Toast Message Component to Show Upon Validation Error (Optional) 00:05:08
  • Урок 37. Register User, Store JWT in LocalStorage 00:06:24
  • Урок 38. Change Navbar Upon Sign Up 00:03:54
  • Урок 39. Sign Out User 00:03:52
  • Урок 40. Create Sign In Markup / Functionality 00:01:56
  • Урок 41. Make Checkout a Private Route (Optional) 00:02:36
  • Урок 42. Add Markup for Checkout Form 00:05:35
  • Урок 43. Add Cart to Checkout, Show Default Text if Cart Empty 00:05:52
  • Урок 44. Add Confirmation Modal to Order on Submit 00:07:01
  • Урок 45. Sign Up for Stripe and Get API Keys 00:01:08
  • Урок 46. Add Stripe to Checkout Page 00:04:11
  • Урок 47. Create Orders Content Type, Add Create Function in Controllers 00:06:00
  • Урок 48. Submit Order to Database, Send / Process Payment with Stripe 00:08:26
  • Урок 49. Set up SendGrid, Give API Key to Strapi (Optional) 00:03:18
  • Урок 50. Send Confirmation Email upon Checkout (Optional) 00:09:01
  • Урок 51. Search with GraphQL and where / field_contains (Optional) 00:07:47
  • Урок 52. Make App Fully Mobile-Compatible (Optional) 00:07:18
Этот курс находится в платной подписке!

И будет доступен в бесплатном просмотре 15.05.2019. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

29-03-2019 en 65 уроков
udemy Full-Stack React, Python, and GraphQL
Разрабатывайте впечатляющие полнофункциональные приложения с использованием новейших и лучших функций Python, React и GraphQL. Этот курс предназначен для разработчиков, желающих создать полноценные приложения с полным стеком с передовыми пользовательскими интерфейсами React на основе мощного бэкэнда Python, использующего GraphQL на сервере и клиенте.
Duration 06:30:03
3 0
23-10-2018 en 429 уроков
udemy NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)
Изучите Node, постройте REST API с помощью Node.js,  GraphQL, добавьте аутентификацию, используйте MongoDB, SQL и многое другое! Node.js, вероятно, самый популярный и современный серверный язык программирования, в который вы можете погрузиться в эти дни!
Duration 34:08:57
89 1
26-02-2019 en 37 уроков
udemy Build a Realtime App with React Hooks and GraphQL
Освойте новейшие и лучшие функции React в контексте полнофункционального реального приложения. Хотите создать реальное полнофункциональное приложение с React Hooks? Можете не искать другой курс, все тут.
Duration 04:32:39
21 0
11-09-2018 en 82 урока
udemy Full-Stack Vue with GraphQL - The Ultimate Guide
Создайте приложение с полным стеком Pinterest с нуля с помощью Vue, GraphQL, Apollo 2, Vuex и Vuetify. Включает Apollo Server 2, Apollo Boost и новый Vue CLI 3! Заинтересованы в создании приложений следующего уровня с помощью Vue и GraphQL? Не смотрите дальше! Этот курс - ваш универсальный путеводитель по обучению...
Duration 09:52:03
20 2
30-09-2018 en 118 уроков
udemy The Modern GraphQL Bootcamp (Advanced Node.js)
Узнайте, как создавать приложения GraphQL с помощью Node.js. Включая Prisma, аутентификацию, Apollo Client и многое другое! Вы хотите изучить GraphQL и сохранить свои навыки Node.js всегда актуальными? GraphQL быстро меняется, как разработчики Node.js пишут свои API и бэкэнд-приложения. Он предлагает очень необходимую замену традиционному HTTP-протоколу REST. Это, безусловно, самое захватывающее изменение, которое мы наблюдаем для разработки...
Duration 23:23:33
39 2
16-09-2018 en 68 уроков
wesbos Full Stack Advanced React + GraphQL
Премиум курс от Wes Bos - Full Stack Advanced React + GraphQL на рельаном примере научит строить вас проекты высокого уровня с помощью React.  Подобно тому, как React изменил способ создания веб-приложений, GraphQL меняет способ сборки API для запроса и изменения данных. С упором на современное приложение для JavaScript и реального мира, этот курс является начальным способом изучения Full Stack Advanced React, GraphQL, Node.js и друзей.
Duration 16:19:09
116 1
25-04-2018 en 39 уроков
frontendmasters Advanced GraphQL
GraphQL, технология, созданная Facebook, представляет собой приложение API. В этом семинаре вы узнаете о передовых методах, которые вы можете применить при создании API-интерфейса GraphQL. Существует множество пакетов и подходов к созданию API-интерфейса GraphQL; этот семинар хочет построить готовый к производству API GraphQL.
Duration 03:29:42
5 0
28-12-2018 ru 9 уроков
javascript.ninja Современный React
Прежде чем с головой бросаться в освоение новых подходов мы разберемся и проанализируем - какие же проблемы с HOC'ами и render prop'ами заставили разработчиков React искать чего-то нового.
Duration 07:43:49
19 5
en 83 урока
reacttraining (Ryan Florence) Realtime React with Firebase
Я преподаю React с 2015 года, а начал работать с ним еще раньше. Сегодня есть еще одна технология, о которой я хочу повогорить с вами - это Firebase. В этом курсе мы построим готовое приложение чата в реальном времени. Мы реализуем переписку в реальном времени между пользователями, авторизацию, динамичный статус пользователей (онлайн\оффлайн), а также простого бота, чтобы пользователю было весело проводить время пока в чате никого нет.
Duration 05:25:53
16 1

Последнее добавленное

Жесткие части: cерверы и Node.js

Жесткие части: cерверы и Node.js

en
На этом семинаре мы пойдем под капот Node двумя противоположными способами - поняв разработку серверов на основе интуитивно понятных принципов (HTTP, TCP / IP, Ports, Loopback, SSH) и поняв функции JavaScript, составляющие Node (событие цикл, потоки, буферы, асинхронность, прототипы).
Microsoft Azure Инфраструктура и Развертывание - Экзамен AZ-100

Microsoft Azure Инфраструктура и Развертывание - Экзамен AZ-100

en
Этот курс предназначен для того, чтобы помочь вам выучить и развить необходимые навыки для сдачи сертификационного экзамена Microsoft Azure AZ-100. Экзамен AZ-100 проверяет ваши знания в области создания, настройки и управления ресурсами в облаке Azure, включая, помимо прочего: управление...
Сертифицированный специалист по безопасности информационных систем (CISSP)

Сертифицированный специалист по безопасности информационных систем (CISSP)

en
Чтобы получить сертификат CISSP, кандидаты должны сдать экзамен, состоящий в основном из вопросов с несколькими вариантами ответов. Цель этого курса - подготовить вас к сертификационному экзамену, познакомив вас с понятиями и терминологией, которые вам необходимо знать для прохождения.
Сертифицированный архитектор решений AWS - Professional

Сертифицированный архитектор решений AWS - Professional

en
AWS является одной из самых быстрорастущих платформ облачных сервисов, предлагаемых сегодня. Он используется во всем мире миллионами пользователей! Возможность получить сертификацию уровня CSA Pro является одним из главных достижений для любого облачного инженера. Учитывая это, это также один...
Тестирование мобильных приложений

Тестирование мобильных приложений

ru
В современном мире бизнес всё чаще обращает внимание на мобильные технологии. И в этом нет ничего удивительного. Рынок мобильных устройств растёт в разы быстрее рынка домашних компьютеров, позволяя реализовывать новые возможности для развития и продвижения самых передовых бизнес идей.
Фреймворк NuxtJS. Руководство по FullStack-разработке

Фреймворк NuxtJS. Руководство по FullStack-разработке

ru
Полное руководство по Nuxt. Почему стоит посмотреть этот курс? Полный охват теоретических и практических знаний с полным циклом разработки: клиентская и серверная части. Nuxt.js позволяет создавать SEO-дружественные приложения, которые можно продвигать в поисковых системах. По урокам курса...
Moscow Python Conf ++ 2019

Moscow Python Conf ++ 2019

ru
Конференция Moscow Python Conf ++ посвящена всему, что делают Python разработчики: backend и web, сбор и обработка данных, AI/ML, тестирование, DevOps, базы данных, IoT, infosec. Кроме этого, мы обсуждаем сам язык, его развитие, организацию проектов, управление зависимостями и лучшие практики...
Разработка PHP-пакетов (PRO версия)

Разработка PHP-пакетов (PRO версия)

en
Премиум видео курс по разработке пакетов для PHP и Laravel. "Я вроде уже делал такое, давайте я гляну на старых проектах." Знакомы такие слова ? Когда мне давали задание на моей работе, я обычно отправлялся на поиски доступного пакета с открытым исходным кодом на packagist.org - и если не было...
chat
logo