Главная страница>Связанные с программированием>Другой исходный код
Скачать

Веб-сайт электронной коммерции Amazona

Амазона

Учебное пособие по React и Node. Полная электронная коммерция за 9 часов [2021]

Добро пожаловать в мое руководство по React и Node, посвященное созданию полнофункционального веб-сайта электронной коммерции, такого же, как Amazon. Откройте редактор кода и следуйте за мной в течение следующих часов, чтобы создать веб-сайт электронной коммерции с использованием стека MERN (MongoDB, ExpressJS, React и Node.JS).

Демо-сайт

  • Героку: https://react-amazona.herokuapp.com

  • Зеркало Heroku: https://react-amazona-mirror.herokuapp.com

Вы научитесь

  • HTML5 и CSS3: семантические элементы, CSS Grid, Flexbox

  • React: компоненты, реквизиты, события, хуки, маршрутизатор, Axios.

  • Redux: хранилище, редукторы, действия

  • Node и Express: веб-API, анализатор тела, загрузка файлов, JWT

  • MongoDB: Mongoose, агрегация

  • Разработка: ESLint, Babel, Git, Github,

  • Развертывание: Хероку

  • Посмотрите руководство по React и Node

Запускать локально

1. Клонирование репозитория 

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2. Настройка MongoDB

  • Локальная база данных MongoDB

    • Установите его отсюда

    • Создайте файл .env в корневой папке.

    • Установите MONGODB_URL=mongodb://localhost/amazona.

  • Атлас Cloud MongoDB

    • Создайте базу данных на https://cloud.mongodb.com.

    • Создайте файл .env в корневой папке.

    • Установите MONGODB_URL=mongodb+srv://your-db-connection

3. Запустите серверную часть 

$ npm install
$ npm start

4. Запустите интерфейс 

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. Пользователи семян и продукты

  • Запустите это в Chrome: http://localhost:5000/api/users/seed

  • Он возвращает адрес электронной почты администратора и пароль

  • Запустите это в Chrome: http://localhost:5000/api/products/seed.

  • Создает 6 образцов продуктов

6. Вход администратора

  • Запустите http://localhost:3000/signin.

  • Введите адрес электронной почты и пароль администратора и нажмите «Войти».

Поддерживать

  • Вопросы/ответы: https://webacademy.pro/amazona

  • Связаться с инструктором: Басир

Уроки

  1. Введение в этот курс

    1. что ты построишь

    2. что ты научишься

    3. кто такие зрители

  2. Установить инструменты

    1. Редактор кода

    2. Веб-браузер

    3. Расширение кода VS

  3. Шаблон сайта

    1. Создать папку Амазона

    2. создать папку шаблонов

    3. создать index.html

    4. добавить HTML-код по умолчанию

    5. ссылка на style.css

    6. создать заголовок, основной и нижний колонтитул

    7. элементы стиля

  4. Показать продукты

    1. создать раздел продуктов

    2. добавить атрибуты продукта

    3. добавить ссылку, изображение, имя и цену

  5. Создать приложение React

    1. Интерфейс создания приложения npx create-react-app

    2. запуск НПМ

    3. Удалить неиспользуемые файлы

    4. скопировать содержимое index.html в App.js

    5. скопировать содержимое style.css в index.css

    6. заменить класс на имя класса

  6. Поделиться кодом на Github

    1. Инициализировать репозиторий git

    2. Зафиксировать изменения

    3. Создать аккаунт на GitHub

    4. Создать репозиторий на github

    5. подключить локальный репозиторий к репозиторию GitHub

    6. отправить изменения на github

  7. Создать рейтинг и компонент продукта

    1. создать компоненты/Rating.js

    2. создать div.рейтинг

    3. стиль div.rating, интервал и последний интервал

    4. Создать компонент продукта

    5. Использовать компонент рейтинга

  8. Создание экрана продукта

    1. Установите реакцию-маршрутизатор-дом

    2. Используйте BrowseRouter и Route для главного экрана

    3. Создать HomeScreen.js

    4. Добавьте сюда код списка продуктов

    5. Создать ProductScreen.js

    6. Добавьте новый маршрут из сведений о продукте в App.js.

    7. Создайте 3 столбца для изображения продукта, информации и действий.

  9. Создать Node.JS-сервер

    1. запустить npm init в корневой папке

    2. Обновить тип набора package.json: модуль

    3. Добавьте .js в импорт

    4. npm экспресс-установка

    5. создать server.js

    6. добавить команду запуска в качестве узла backend/server.js

    7. требуют экспресс

    8. Создать маршрут для/обратного бэкэнда готово.

    9. перенести продукты.js из внешнего интерфейса в серверный

    10. создать маршрут для /api/products

    11. возврат продуктов

    12. запустить npm start

  10. Загрузка продуктов из серверной части

    1. редактировать HomeScreen.js

    2. определить продукты, загрузку и ошибку.

    3. создать useEffect

    4. определить async fetchData и вызвать его

    5. установить аксиомы

    6. получить данные из /api/products

    7. покажи их в списке

    8. создать загрузочный компонент

    9. создать компонент окна сообщения

    10. используйте их на HomeScreen

  11. Установите ESlint для проверки кода

    1. установить расширение VSCode eslint

    2. npm установить -D eslint

    3. запустите ./node_modules/.bin/eslint --init

    4. Создайте ./frontend/.env

    5. Добавьте SKIP_PREFLIGHT_CHECK=true.

  12. Добавить Redux на главный экран

    1. npm установить Redux

    2. Создать store.js

    3. initState= {продукты:[]}

    4. редуктор = (состояние, действие) => переключатель LOAD_PRODUCTS: {products: action.payload}

    5. экспортировать по умолчанию createStore(reducer, initState)

    6. Изменить HomeScreen.js

    7. shopName = useSelector(state=>state.products)

    8. константная отправка = useDispatch()

    9. useEffect(()=>dispatch({type: LOAD_PRODUCTS, payload: data})

    10. Добавить магазин в index.js

  13. Добавьте Redux на экран продукта

    1. создавать константы, действия и редукторы для сведений о продукте

    2. добавить редуктор в store.js

    3. использовать действие в ProductScreen.js

    4. добавьте /api/product/:id во внутренний API

  14. Ручка кнопки «Добавить в корзину»

    1. Обработка добавления в корзину в ProductScreen.js

    2. создать CartScreen.js

  15. Реализация действия «Добавить в корзину»

    1. создавать константы, действия и редукторы addToCart

    2. добавить редуктор в store.js

    3. использовать действие в CartScreen.js

    4. визуализировать carsItems.length

  16. Создание экрана корзины

    1. создайте 2 столбца для товаров корзины и действия корзины

    2. carItems.length === 0 ? корзина пуста

    3. показать изображение товара, название, количество и цену

    4. Кнопка «Перейти к оформлению заказа»

    5. Реализовать действие «Удалить из корзины»

  17. Реализация действия «Удалить из корзины»

    1. создавать константы, действия и редукторы RemoveFromCart

    2. добавить редуктор в store.js

    3. использовать действие в CartScreen.js

  18. Создание образцов пользователей в MongoDB

    1. npm установить мангуста

    2. подключиться к монгодбу

    3. создать config.js

    4. npm установить dotenv

    5. экспортировать MONGODB_URL

    6. создать модели/userModel.js

    7. создать userSchema и userModel

    8. создать userRoute

    9. Данные образцов семян

  19. Создайте образцы продуктов в MongoDB

    1. создать модели/productModel.js

    2. создать схему продукта и модель продукта

    3. создать маршрут продукта

    4. Данные образцов семян

  20. Создать серверную часть входа

    1. создать /signin API

    2. проверьте электронную почту и пароль

    3. генерировать токен

    4. установить веб-токен JSON

    5. установить дотенв

    6. вернуть токен и данные

    7. проверьте это с помощью почтальона

  21. Дизайн экрана входа в систему

    1. создать экран входа

    2. отображать поля электронной почты и пароля

    3. создавать константы входа, действия и редукторы

    4. Обновить заголовок на основе входа пользователя

  22. Реализация действия входа в систему

    1. создавать константы входа, действия и редукторы

    2. добавить редуктор в store.js

    3. использовать действие в SigninScreen.js

  23. Создать экран регистрации

    1. создать API для /api/users/register

    2. добавить нового пользователя в базу данных

    3. вернуть информацию о пользователе и токен

    4. создать Регистрационный экран

    5. Добавить поля

    6. Поля стиля

    7. Добавить экран в App.js

    8. создать действие регистрации и редуктор

    9. проверить проверку и создать пользователя

  24. Создать экран доставки

    1. создать компонент CheckoutSteps.js

    2. создать поля доставки

    3. реализовать константу доставки, действия и редукторы

  25. Создать экран оплаты

    1. создать поля оплаты

    2. реализовать константу доставки, действия и редукторы

  26. Экран оформления заказа на дизайн

    1. Поля сводки заказа на проектирование

    2. действие заказа на проектирование

  27. Создать API заказа размещения

    1. API createOrder

    2. создать модель заказа

    3. создать заказМаршрутизатор

    4. создать маршрут почтового заказа

  28. Реализация действия PlaceOrder

    1. нажать кнопку разместить заказ

    2. создать константы порядка размещения, действие и редуктор

  29. Экран создания заказа

    1. построить API заказа для /api/orders/:id

    2. создать OrderScreen.js

    3. действие сведений о заказе на отправку в useEffect

    4. загрузить данные с помощью useSelector

    5. показывать данные, такие как экран размещения заказа

    6. создать детали заказа, константу, действие и редуктор

  30. Добавить кнопку PayPal

    1. получить идентификатор клиента от PayPal

    2. установите его в файл .env

    3. создать форму маршрута /api/paypal/clientId

    4. создать getPaypalClientID в api.js

    5. добавить скрипт оформления заказа PayPal в OrderScreen.js

    6. показать кнопку PayPal

  31. Осуществить оплату заказа

    1. обновить заказ после оплаты

    2. создать payOrder в api.js

    3. создать маршрут для /:id/pay в orderRouter.js

    4. повторная обработка заказа после оплаты

  32. Отображение истории заказов

    1. API создания заказов клиентов

    2. создать API для getMyOrders

    3. показывать заказы на экране профиля

    4. заказы стиля

  33. Показать профиль пользователя

    1. создать API данных пользователя

    2. показать информацию о пользователе

  34. Обновить профиль пользователя

    1. создать API обновления пользователя

    2. обновить информацию о пользователе

  35. Создать представление администратора

    1. Создать меню администратора

    2. Создание промежуточного программного обеспечения администратора в серверной части

    3. Создать маршрут администратора во внешнем интерфейсе

  36. Список продуктов

    1. Экран создания списка продуктов

    2. Добавить редуктор в магазин

    3. показывать товары на экране

  37. Создать продукт

    1. создать API продукта

    2. создать кнопку «Создать продукт»

    3. определить продукт, создать константу, действие и редуктор

    4. использовать действие на экране списка продуктов

  38. Экран редактирования продукта сборки

    1. создать экран редактирования

    2. определить состояние

    3. создавать поля

    4. загрузить сведения о продукте

    5. добавить в маршруты

  39. Обновить продукт

    1. определить API обновления

    2. определить константу обновления продукта, действие и редуктор

    3. использовать действие на экране редактирования продукта

  40. Загрузить изображение продукта

    1. npm установить несколько раз

    2. определить маршрутизатор загрузки

    3. создать папку загрузок

    4. Обрабатывать интерфейс

  41. Удалить продукт

    1. создать API удаления в бэкэнде

    2. создать константы удаления, действие и редуктор

    3. используйте его на экране списка продуктов

  42. Список заказов

    1. создать API списка заказов

    2. создать экран списка заказов

    3. Добавить редуктор в магазин

    4. показывать товары на экране

  43. Удалить заказ 2. создать действие удаления заказа и редуктор 3. добавить действие удаления заказа в список заказов

  44. Доставить заказ

    1. создавать константы, действия и редукторы для порядка доставки

    2. добавить действие доставки заказа на экран сведений о заказе

  45. Публикация в Heroku

    1. Создать git-репозиторий

    2. Создать учетную запись героку

    3. установить Heroku CLI

    4. вход в героку

    5. приложения Heroku: создать Amazona

    6. Отредактируйте package.json для сценария сборки.

    7. Создать профиль

    8. Создать базу данных атласа mongodb

    9. Установите соединение с базой данных в переменных env Heroku

    10. Зафиксируйте и нажмите

  46. Получение списка пользователей

    1. создать API для пользователей списков

    2. Экран создания списка пользователей

    3. создать детали заказа, константу, действие и редуктор

  47. Удаление пользователей

    1. создать API для удаления пользователей

    2. создать детали заказа, константу, действие и редуктор

    3. Использовать действие в UserListScreen

  48. Изменить пользователя

    1. создать API для пользователей обновлений

    2. создать пользовательский интерфейс экрана редактирования

  49. Внедрить представление продавца

    1. добавить меню продавца

    2. создать маршрут продавца

    3. список товаров для продавца

    4. список заказов для продавца

    5. добавить продавца в список продуктов и на экран сведений

  50. Создать страницу продавца

    1. создать страницу продавца

    2. обновить компонент продукта и экран продукта

    3. обновить маршруты продуктов

  51. Добавить карусель самых продаваемых товаров

    1. установить карусель реагирования

    2. реализовать действия и редукторы для лидеров продаж

    3. используйте карусель реагирования с данными на главном экране

  52. Принудительный заказ товаров у одного продавца

    1. обновить действие addToCart для покупки у одного продавца по заказу

  53. Создать окно поиска и экран поиска

    1. создать панель поиска в Header.js

    2. добавить стиль

    3. обрабатывать форму отправки

    4. отредактируйте URL-адрес синтаксического анализа, чтобы получить строку запроса

    5. обновить API списка продуктов для поиска по названию

  54. Добавить фильтр расширенного поиска 1. фильтровать по категории 2. фильтровать по диапазону цен 3. фильтровать по среднему рейтингу

  55. Полный расширенный поиск 1. фильтровать по цене 2. фильтровать по рейтингу 3. сортировать по цене, рейтингу, ...

  56. Оценивайте и просматривайте продукты 1. оценивайте продукты 2. создавайте действия и редукторы

  57. Выберите адрес на карте Google 1. создайте учетные данные карты Google 2. обновите файл .env с помощью ключа API Google 3. создайте API для отправки API Google во внешний интерфейс 4. создайте экран карты 5. получите API Google 6. getUserLocation 7. установите @react- google-maps/api 8. используйте его на экране доставки 9. примените карту к экрану оформления заказа

  58. Исправление ошибки: запуск локально без проблем

    1. добавить информацию о продавце в data.js

    2. данные о продукте семян с информацией администратора в качестве продавца

    3. исправить isSeller и isAdmin при обновлении пользователя

    4. удалить авторизацию из данных пользователя

  59. Реализация нумерации страниц

    1. добавить нумерацию страниц в маршрутизатор продукта в серверной части

    2. применить номер страницы к действиям и редукторам во внешнем интерфейсе

    3. показывать номера страниц на экране поиска

  60. Квитанция о заказе по электронной почте от mailgun 1. создайте учетную запись mailgun 2. добавьте и подтвердите свой домен в mailgun 3. установите mailgun-js 4. установите ключ API в файле env 5. измените порядок оплаты в orderRouter 6. отправьте электронное письмо

  61. Создать экран информационной панели

    1. Создание данных диаграммы в серверной части

    2. Экран построения диаграммы

  62. Внедрить онлайн-чат с клиентами

    1. используйте сокет io для создания бэкэнда

    2. создать компонент окна чата

    3. создать экран поддержки

  63. Обновите до React 17, Router 6, Mongoose 6

    1. Бэкэнд

    2. Удалить и установить все пакеты

    3. удалить параметры в mongoose Connect

    4. обернуть mailgun в try catch в orderRouter

    5. Внешний интерфейс

    6. Удалить и установить все пакеты

    7. удалить в поле поиска

    8. завернуть все в

    9. заменить на <Route element={}>

    10. заменить на <Route element={ }/>

    11. заменить и тоже

    12. Обновите PrivateRoute, AdminRoute и SellerRoute.

    13. замените push() на Navigation() из useNavigate

    14. замените props.match.params.id на const params = useParams();

    15. замените props.location.search на const {search} = useLocation(); и URLSearchParams

    16. замените props.match.path на const {pathname} = useLocation();

    17. поместите userInfo в useEffect в ChatBox, SupportScreen

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все