A Complete Guide to the JAMstack and React E-Commerce
Udemy - Zachary Reece
Будьте готовы создать самую современную, всеобъемлющую, многофункциональную платформу электронной коммерции с полным набором функций, чем в любом онлайн-курсе! К концу этого курса вы будете полностью уверены в самостоятельном создании больших приложений со сложной функциональностью. Это полноценный мастер-класс, состоящий из более чем 75 часов содержания и более чем 475 лекций!
Я научу вас всему, что нужно знать о создании мощных full stack приложений с нуля на основе архитектуры JAMstack следующего поколения.
JAMstack - это следующий шаг в эволюции архитектуры веб-приложений. Он устраняет многие ограничения и недостатки традиционных full stack приложений. В отличие от традиционного стека, JAMstack не является конкретным набором определенных инструментов, таких как MERN. Вместо этого JAMstack - это набор концепций, философия, лежащая в основе построения современных full stack приложений для повышения производительности, безопасности и масштабируемости при одновременном значительном улучшении взаимодействия с разработчиками, что значит лучшее программное обеспечение для наших пользователей и более простое программирование для себя.
Это означает, что существует несколько разных JAM-стеков, использующих разные наборы инструментов. Для нашего JAMstack мы будем использовать React с Gatsby, Material-UI, Strapi, Stripe и Netlify. Мы будем использовать эти инструменты для создания готовой к работе платформы электронной коммерции, которая будет более всеобъемлющей и полной функций, чем в любом другом онлайн-курсе! Наш проект включает в себя все, что вы можете себе представить о продаже продуктов в Интернете, например, группирование их по категориям, применение настраиваемой сортировки и фильтрации, оставление обзоров, добавление продуктов в список избранных и подписки для регулярной доставки продуктов! Чтобы включить все эти мощные функции, мы интегрируем полную систему аутентификации с авторизацией / регистрацией, забытым / сбросом пароля и аутентификацией в социальных сетях. Это также будет включать создание страницы пользовательских настроек, позволяющей пользователям изменять свой пароль, а также любую сохраненную информацию о доставке или оплате. Затем нам просто нужно создать полностью настраиваемую корзину и сделать процесс оформления заказа, чтобы наши клиенты могли совершать покупки с помощью своих кредитных карт и получать квитанции по электронной почте.
Это масштабный проект, который проведет вас через процесс разделения сложной функциональности на управляемые пошаговые планы действий. Позже вы научитесь думать о крупномасштабных проектах и о том, как принимать архитектурные решения, упрощающие ваши системы. Несмотря на то, что этот курс ориентирован на электронную коммерцию, вы все равно узнаете все основные концепции, которые будут перенесены в каждый full stack проект.
Один из основных принципов JAMstack - обслуживать только статически сгенерированные файлы. Традиционно в React, как и в случае с create-react-app, сервер, на котором размещен ваш проект, отправляет ваш пакет JavaScript для обработки и отображения браузером клиента. Мы изменим этот процесс с помощью генератора статических сайтов Gatsby. Гэтсби возьмет наш код React и сгенерирует для нас результирующие статические HTML-файлы, которые могут быть предоставлены непосредственно нашим пользователям для молниеносной производительности и повышенной безопасности. Gatsby - очень мощная и обширная система с исключительно полезными функциями, такими как программное создание страниц, автоматическое расширение специальных возможностей и мощная оптимизация изображений.
Мы увидим, как Material-UI может максимизировать нашу продуктивность и упростить создание невероятных интерфейсов с помощью React. Мы смягчим шаблонный код и начнем работать быстрее, используя его обширную библиотеку компонентов, состоящую из всех общих элементов, имеющихся в большинстве веб-приложений. Затем мы можем воплотить наши проекты в жизнь с помощью системы стилей Material-UI для полной настройки этих компонентов и ее системы тем для объединения наиболее часто используемых стилей. Помогает нам продемонстрировать нашу упорную работу система компоновки, которая последовательно размещает наши компоненты на экране. Наконец, система адаптивного дизайна гарантирует, что наши дизайны будут идеально смотреться на самых больших экранах и на самых маленьких мобильных устройствах. В Material-UI есть все необходимое для создания потрясающего интерфейса с JAMstack.
Strapi - это будущее серверной разработки. Strapi - это автономная CMS, которая в одиночку революционизирует и оптимизирует все серверные процессы. Headless CMS также отделяет серверную часть от внешнего интерфейса на сайте JAMstack, который намного более гибок и удобен в обслуживании. Strapi предоставляет нам очень простой пользовательский интерфейс для управления нашим внутренним контентом и данными, а затем автоматически создает API-интерфейсы со встроенной системой аутентификации на основе JWT с ролями и разрешениями для взаимодействия с этим контентом. В традиционных архитектурах полного стека создание моделей базы данных для представления вашего контента, ввод всех ваших данных, создание API-интерфейсов для обслуживания этого контента и настройка этих API-интерфейсов с безопасностью и аутентификацией были полностью отдельными задачами, на выполнение которых уходили дни, если не недели. Если вы никогда не занимались full stack или бэкэнд-разработкой, трудно по-настоящему выразить сложность этих задач! Большинство full stack курсов заставят вас проработать все эти процессы вручную, потому что до сих пор не было другого способа!
Благодаря Strapi весь этот утомительный и повторяющийся код будет мгновенно автоматизирован. Однако все стандартные модели баз данных полностью неизменны и настраиваются для проектов, требующих более сложных конфигураций. Strapi поддерживает большинство основных баз данных, но в этом курсе мы будем использовать MongoDB, хотя это не имеет большого значения благодаря абстракциям Strapi. Strapi также имеет открытый исходный код и построен на React, поэтому его можно полностью настраивать и расширять. Strapi - лучшая Headless CMS для JAMstack!
Stripe - одна из ведущих платежных систем для онлайн-продавцов, которую используют такие технологические гиганты, как Lyft, Shopify и Zoom. Stripe предлагает один из самых гибких и мощных платежных API с обширной и подробной документацией. Используя Stripe Elements, вы можете настроить защищенное поле кредитной карты за секунды, а Stripe PaymentIntents API поддерживает наш полностью настраиваемый процесс оформления заказа для завершения заказа. Использование Stripe обеспечивает такие функции, как безопасное сохранение платежной информации клиентов для использования в будущем и отслеживание истории заказов.
Как только наш проект будет построен, мы развернем его как действующий рабочий веб-сайт на Netlify. Netlify, без сомнения, лучшая хостинговая платформа для сайтов JAMstack. Их генеральный директор и соучредитель Матиас Бийльманн на самом деле придумал этот термин! Это означает, что Netlify специально оптимизирован для сайтов JAMstack для обеспечения высочайшей производительности, безопасности и масштабируемости за счет автоматического применения наших лучших практик JAMstack, таких как атомарное развертывание, аннулирование кеша, использование CDN и CI / CD на основе git.
Мы также рассмотрим дополнительные темы, такие как SEO в React, React Hooks, React Context, создание гибких и привлекательных интерфейсов с анимацией, pagination, webhooks, query strings, tabular data, form handling и многим другим!
Материал на английском языке
Продажник:
Скачать курс:
Udemy - Zachary Reece
Будьте готовы создать самую современную, всеобъемлющую, многофункциональную платформу электронной коммерции с полным набором функций, чем в любом онлайн-курсе! К концу этого курса вы будете полностью уверены в самостоятельном создании больших приложений со сложной функциональностью. Это полноценный мастер-класс, состоящий из более чем 75 часов содержания и более чем 475 лекций!
Я научу вас всему, что нужно знать о создании мощных full stack приложений с нуля на основе архитектуры JAMstack следующего поколения.
JAMstack - это следующий шаг в эволюции архитектуры веб-приложений. Он устраняет многие ограничения и недостатки традиционных full stack приложений. В отличие от традиционного стека, JAMstack не является конкретным набором определенных инструментов, таких как MERN. Вместо этого JAMstack - это набор концепций, философия, лежащая в основе построения современных full stack приложений для повышения производительности, безопасности и масштабируемости при одновременном значительном улучшении взаимодействия с разработчиками, что значит лучшее программное обеспечение для наших пользователей и более простое программирование для себя.
Это означает, что существует несколько разных JAM-стеков, использующих разные наборы инструментов. Для нашего JAMstack мы будем использовать React с Gatsby, Material-UI, Strapi, Stripe и Netlify. Мы будем использовать эти инструменты для создания готовой к работе платформы электронной коммерции, которая будет более всеобъемлющей и полной функций, чем в любом другом онлайн-курсе! Наш проект включает в себя все, что вы можете себе представить о продаже продуктов в Интернете, например, группирование их по категориям, применение настраиваемой сортировки и фильтрации, оставление обзоров, добавление продуктов в список избранных и подписки для регулярной доставки продуктов! Чтобы включить все эти мощные функции, мы интегрируем полную систему аутентификации с авторизацией / регистрацией, забытым / сбросом пароля и аутентификацией в социальных сетях. Это также будет включать создание страницы пользовательских настроек, позволяющей пользователям изменять свой пароль, а также любую сохраненную информацию о доставке или оплате. Затем нам просто нужно создать полностью настраиваемую корзину и сделать процесс оформления заказа, чтобы наши клиенты могли совершать покупки с помощью своих кредитных карт и получать квитанции по электронной почте.
Это масштабный проект, который проведет вас через процесс разделения сложной функциональности на управляемые пошаговые планы действий. Позже вы научитесь думать о крупномасштабных проектах и о том, как принимать архитектурные решения, упрощающие ваши системы. Несмотря на то, что этот курс ориентирован на электронную коммерцию, вы все равно узнаете все основные концепции, которые будут перенесены в каждый full stack проект.
Один из основных принципов JAMstack - обслуживать только статически сгенерированные файлы. Традиционно в React, как и в случае с create-react-app, сервер, на котором размещен ваш проект, отправляет ваш пакет JavaScript для обработки и отображения браузером клиента. Мы изменим этот процесс с помощью генератора статических сайтов Gatsby. Гэтсби возьмет наш код React и сгенерирует для нас результирующие статические HTML-файлы, которые могут быть предоставлены непосредственно нашим пользователям для молниеносной производительности и повышенной безопасности. Gatsby - очень мощная и обширная система с исключительно полезными функциями, такими как программное создание страниц, автоматическое расширение специальных возможностей и мощная оптимизация изображений.
Мы увидим, как Material-UI может максимизировать нашу продуктивность и упростить создание невероятных интерфейсов с помощью React. Мы смягчим шаблонный код и начнем работать быстрее, используя его обширную библиотеку компонентов, состоящую из всех общих элементов, имеющихся в большинстве веб-приложений. Затем мы можем воплотить наши проекты в жизнь с помощью системы стилей Material-UI для полной настройки этих компонентов и ее системы тем для объединения наиболее часто используемых стилей. Помогает нам продемонстрировать нашу упорную работу система компоновки, которая последовательно размещает наши компоненты на экране. Наконец, система адаптивного дизайна гарантирует, что наши дизайны будут идеально смотреться на самых больших экранах и на самых маленьких мобильных устройствах. В Material-UI есть все необходимое для создания потрясающего интерфейса с JAMstack.
Strapi - это будущее серверной разработки. Strapi - это автономная CMS, которая в одиночку революционизирует и оптимизирует все серверные процессы. Headless CMS также отделяет серверную часть от внешнего интерфейса на сайте JAMstack, который намного более гибок и удобен в обслуживании. Strapi предоставляет нам очень простой пользовательский интерфейс для управления нашим внутренним контентом и данными, а затем автоматически создает API-интерфейсы со встроенной системой аутентификации на основе JWT с ролями и разрешениями для взаимодействия с этим контентом. В традиционных архитектурах полного стека создание моделей базы данных для представления вашего контента, ввод всех ваших данных, создание API-интерфейсов для обслуживания этого контента и настройка этих API-интерфейсов с безопасностью и аутентификацией были полностью отдельными задачами, на выполнение которых уходили дни, если не недели. Если вы никогда не занимались full stack или бэкэнд-разработкой, трудно по-настоящему выразить сложность этих задач! Большинство full stack курсов заставят вас проработать все эти процессы вручную, потому что до сих пор не было другого способа!
Благодаря Strapi весь этот утомительный и повторяющийся код будет мгновенно автоматизирован. Однако все стандартные модели баз данных полностью неизменны и настраиваются для проектов, требующих более сложных конфигураций. Strapi поддерживает большинство основных баз данных, но в этом курсе мы будем использовать MongoDB, хотя это не имеет большого значения благодаря абстракциям Strapi. Strapi также имеет открытый исходный код и построен на React, поэтому его можно полностью настраивать и расширять. Strapi - лучшая Headless CMS для JAMstack!
Stripe - одна из ведущих платежных систем для онлайн-продавцов, которую используют такие технологические гиганты, как Lyft, Shopify и Zoom. Stripe предлагает один из самых гибких и мощных платежных API с обширной и подробной документацией. Используя Stripe Elements, вы можете настроить защищенное поле кредитной карты за секунды, а Stripe PaymentIntents API поддерживает наш полностью настраиваемый процесс оформления заказа для завершения заказа. Использование Stripe обеспечивает такие функции, как безопасное сохранение платежной информации клиентов для использования в будущем и отслеживание истории заказов.
Как только наш проект будет построен, мы развернем его как действующий рабочий веб-сайт на Netlify. Netlify, без сомнения, лучшая хостинговая платформа для сайтов JAMstack. Их генеральный директор и соучредитель Матиас Бийльманн на самом деле придумал этот термин! Это означает, что Netlify специально оптимизирован для сайтов JAMstack для обеспечения высочайшей производительности, безопасности и масштабируемости за счет автоматического применения наших лучших практик JAMstack, таких как атомарное развертывание, аннулирование кеша, использование CDN и CI / CD на основе git.
Мы также рассмотрим дополнительные темы, такие как SEO в React, React Hooks, React Context, создание гибких и привлекательных интерфейсов с анимацией, pagination, webhooks, query strings, tabular data, form handling и многим другим!
Материал на английском языке
Продажник:
Скачать курс:
Последнее редактирование модератором:
