Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

Site de comércio eletrônico da Amazon

Amazonas

Tutorial React & Node - Comércio eletrônico completo em 9 horas [2021]

Bem-vindo ao meu tutorial React e Node para construir um site de comércio eletrônico totalmente funcional, exatamente como o Amazon. Abra seu editor de código e siga-me pelas próximas horas para construir um site de comércio eletrônico usando pilha MERN (MongoDB, ExpressJS, React e Node.JS).

Site de demonstração

  • Heroku: https://react-amazona.herokuapp.com

  • Espelho Heroku: https://react-amazona-mirror.herokuapp.com

Você aprenderá

  • HTML5 e CSS3: elementos semânticos, grade CSS, Flexbox

  • React: Componentes, Props, Eventos, Ganchos, Roteador, Axios

  • Redux: Loja, Redutores, Ações

  • Node e Express: API Web, analisador de corpo, upload de arquivo, JWT

  • MongoDB: Mongoose, Agregação

  • Desenvolvimento: ESLint, Babel, Git, Github,

  • Implantação: Heroku

  • Assista ao tutorial de React e Node

Execute localmente

1. Clonar repositório 

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

2. Configure o MongoDB

  • MongoDB local

    • Instale-o aqui

    • Crie o arquivo .env na pasta raiz

    • Definir MONGODB_URL=mongodb://localhost/amazona

  • Atlas Cloud MongoDB

    • Crie banco de dados em https://cloud.mongodb.com

    • Crie o arquivo .env na pasta raiz

    • Defina MONGODB_URL=mongodb+srv://sua-conexão-db

3. Execute o back-end 

$ npm install
$ npm start

4. Execute o front-end 

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

5. Usuários e produtos iniciais

  • Execute isto no Chrome: http://localhost:5000/api/users/seed

  • Ele retorna e-mail e senha do administrador

  • Execute isto no Chrome: http://localhost:5000/api/products/seed

  • Ele cria 6 produtos de amostra

6. Login de administrador

  • Execute http://localhost:3000/signin

  • Digite o e-mail e a senha do administrador e clique em entrar

Apoiar

  • Perguntas/Respostas: https://webacademy.pro/amazona

  • Instrutor de contato: Basir

Lições

  1. Introdução a este curso

    1. o que você vai construir

    2. o que você aprenderá

    3. quem é o público

  2. Instalar ferramentas

    1. Editor de código

    2. Navegador da Web

    3. Extensão de código VS

  3. Modelo de site

    1. Criar pasta amazona

    2. criar pasta de modelo

    3. criar index.html

    4. adicionar código HTML padrão

    5. link para estilo.css

    6. criar cabeçalho, principal e rodapé

    7. elementos de estilo

  4. Exibir produtos

    1. criar div de produtos

    2. adicionar atributos do produto

    3. adicione link, imagem, nome e preço

  5. Criar aplicativo React

    1. interface npx create-react-app

    2. npm início

    3. Remova arquivos não utilizados

    4. copie o conteúdo index.html para App.js

    5. copie o conteúdo style.css para index.css

    6. substitua classe por className

  6. Compartilhe código no Github

    1. Inicializar repositório git

    2. Confirmar alterações

    3. Criar conta no GitHub

    4. Criar repositório no github

    5. conectar o repositório local ao repositório do github

    6. enviar alterações para o github

  7. Criar classificação e componente de produto

    1. criar componentes/Rating.js

    2. criar div.rating

    3. estilo div.rating, span e último span

    4. Criar componente de produto

    5. Usar componente de classificação

  8. Construir tela do produto

    1. Instale react-router-dom

    2. Use BrowserRouter e Route para tela inicial

    3. Crie HomeScreen.js

    4. Adicione o código da lista de produtos lá

    5. Crie ProductScreen.js

    6. Adicionar nova rota dos detalhes do produto ao App.js

    7. Crie 3 colunas para imagem, informações e ação do produto

  9. Criar servidor Node.JS

    1. execute npm init na pasta raiz

    2. Atualizar tipo de conjunto package.json: módulo

    3. Adicione .js às importações

    4. npm instalar expresso

    5. criar servidor.js

    6. adicione o comando start como nó backend/server.js

    7. exigir expresso

    8. criar rota para / retornar backend está pronto.

    9. mover products.js do front-end para o back-end

    10. criar rota para /api/produtos

    11. devolver produtos

    12. execute npm start

  10. Carregar produtos do back-end

    1. editar HomeScreen.js

    2. definir produtos, carregamento e erro.

    3. criar useEffect

    4. defina fetchData assíncrono e chame-o

    5. instalar eixos

    6. obter dados de /api/produtos

    7. mostre-os na lista

    8. criar componente de carregamento

    9. criar componente de caixa de mensagem

    10. use-os na tela inicial

  11. Instale ESlint para código Linting

    1. instale a extensão VSCode eslint

    2. npm instalar -D eslint

    3. execute ./node_modules/.bin/eslint --init

    4. Crie ./frontend/.env

    5. Adicione SKIP_PREFLIGHT_CHECK=true

  12. Adicionar Redux à tela inicial

    1. npm instalar redux reagir-redux

    2. Crie store.js

    3. initState= {produtos:[]}

    4. redutor = (estado, ação) => switch LOAD_PRODUCTS: {produtos: action.payload}

    5. exportar createStore padrão (redutor, initState)

    6. Editar HomeScreen.js

    7. shopName = useSelector(estado=>estado.produtos)

    8. const expedição = useDispatch()

    9. useEffect(()=>dispatch({tipo: LOAD_PRODUCTS, carga útil: dados})

    10. Adicionar loja ao index.js

  13. Adicionar Redux à tela do produto

    1. criar constantes, ações e redutores de detalhes do produto

    2. adicione redutor ao store.js

    3. usar ação em ProductScreen.js

    4. adicione /api/product/:id à API de back-end

  14. Lidar com o botão Adicionar ao carrinho

    1. Lidar com Adicionar ao carrinho em ProductScreen.js

    2. crie CartScreen.js

  15. Implementar ação Adicionar ao carrinho

    1. criar constantes, ações e redutores addToCart

    2. adicione redutor ao store.js

    3. usar ação em CartScreen.js

    4. renderizar cartItems.length

  16. Construir tela de carrinho

    1. crie 2 colunas para itens do carrinho e ação do carrinho

    2. cartItems.length === 0? carrinho está vazio

    3. mostrar imagem do item, nome, quantidade e preço

    4. Botão Prosseguir para Checkout

    5. Implementar ação de remoção do carrinho

  17. Implementar ação Remover do carrinho

    1. criar constantes, ações e redutores removeFromCart

    2. adicione redutor ao store.js

    3. usar ação em CartScreen.js

  18. Crie usuários de exemplo no MongoDB

    1. npm instalar mangusto

    2. conectar-se ao mongodb

    3. crie config.js

    4. npm instalar dotenv

    5. exportar MONGODB_URL

    6. criar modelos/userModel.js

    7. crie userSchema e userModel

    8. criar userRoute

    9. Dados de amostra de sementes

  19. Crie produtos de amostra no MongoDB

    1. criar modelos/productModel.js

    2. crie productSchema e productModel

    3. criar productRoute

    4. Dados de amostra de sementes

  20. Criar back-end de login

    1. criar/fazer login na API

    2. verificar e-mail e senha

    3. gerar token

    4. instalar token web json

    5. instalar dotenv

    6. retornar token e dados

    7. teste-o usando o carteiro

  21. Tela de login do design

    1. criar tela de login

    2. renderizar campos de e-mail e senha

    3. criar constantes de login, ações e redutores

    4. Atualizar cabeçalho com base no login do usuário

  22. Implementar ação de login

    1. criar constantes de login, ações e redutores

    2. adicione redutor ao store.js

    3. usar ação em SigninScreen.js

  23. Criar tela de cadastro

    1. criar API para /api/users/register

    2. inserir novo usuário no banco de dados

    3. retornar informações do usuário e token

    4. criar tela de registro

    5. Adicionar campos

    6. Campos de estilo

    7. Adicionar tela ao App.js

    8. criar ação de registro e redutor

    9. verifique a validação e crie o usuário

  24. Criar tela de envio

    1. criar componente CheckoutSteps.js

    2. criar campos de envio

    3. implementar constantes de envio, ações e redutores

  25. Criar tela de pagamento

    1. criar campos de pagamento

    2. implementar constantes de envio, ações e redutores

  26. Projetar tela de pedido

    1. campos de resumo do pedido de design

    2. ação de ordem de projeto

  27. API de criação de pedido

    1. API createOrder

    2. criar modelo de pedido

    3. criar pedidoRouter

    4. criar rota de pós-pedido

  28. Implementar ação PlaceOrder

    1. lidar com o botão fazer pedido, clique

    2. criar constantes de ordem de lugar, ação e redutor

  29. Tela Criar Pedido

    1. construir API de pedido para /api/orders/:id

    2. crie OrderScreen.js

    3. ação de detalhes do pedido de envio em useEffect

    4. carregar dados com useSelector

    5. mostrar dados como tela de pedido

    6. criar detalhes do pedido constante, ação e redutor

  30. Adicionar botão PayPal

    1. obter ID do cliente do paypal

    2. configure-o no arquivo .env

    3. criar formulário de rota /api/paypal/clientId

    4. crie getPaypalClientID em api.js

    5. adicionar script de checkout do PayPal em OrderScreen.js

    6. mostrar botão do paypal

  31. Implementar pagamento de pedidos

    1. atualizar pedido após pagamento

    2. crie payOrder em api.js

    3. crie rota para /:id/pay em orderRouter.js

    4. renderizar novamente após ordem de pagamento

  32. Exibir histórico de pedidos

    1. criar API de pedidos de clientes

    2. criar API para getMyOrders

    3. mostrar pedidos na tela do perfil

    4. pedidos de estilo

  33. Exibir perfil de usuário

    1. criar API de detalhes do usuário

    2. mostrar informações do usuário

  34. Atualizar perfil de usuário

    1. criar API de atualização de usuário

    2. atualizar informações do usuário

  35. Criar visualização de administrador

    1. Criar menu de administração

    2. Crie middleware administrativo no back-end

    3. Criar rota administrativa no frontend

  36. Listar produtos

    1. Criar tela de lista de produtos

    2. Adicionar redutor à loja

    3. mostrar produtos na tela

  37. Criar produto

    1. construir criar API de produto

    2. construir Botão Criar Produto

    3. definir produto criar constante, ação e redutor

    4. usar ação na tela de lista de produtos

  38. Tela de edição do produto de construção

    1. criar tela de edição

    2. definir estado

    3. criar campos

    4. carregar detalhes do produto

    5. adicionar às rotas

  39. Atualizar produto

    1. definir API de atualização

    2. definir constante de atualização do produto, ação e redutor

    3. usar ação na tela de edição do produto

  40. Carregar imagem do produto

    1. npm instalar multer

    2. definir roteador de upload

    3. criar pasta de uploads

    4. Lidar com front-end

  41. Excluir produto

    1. criar API de exclusão no back-end

    2. criar constantes de exclusão, ação e redutor

    3. use-o na tela da lista de produtos

  42. Listar pedidos

    1. criar API de lista de pedidos

    2. criar tela de lista de pedidos

    3. Adicionar redutor à loja

    4. mostrar produtos na tela

  43. Excluir pedido 2. criar ação de exclusão de pedido e redutor 3. adicionar ação de exclusão de pedido à lista de pedidos

  44. Entregar pedido

    1. criar constantes, ações e redutores para entrega do pedido

    2. adicionar ação de entrega do pedido à tela de detalhes do pedido

  45. Publicar no Heroku

    1. Criar repositório git

    2. Criar conta heroku

    3. instalar Heroku CLI

    4. login do heroku

    5. aplicativos heroku:crie a Amazon

    6. Edite package.json para script de construção

    7. Criar perfil

    8. Criar banco de dados atlas mongodb

    9. Defina a conexão do banco de dados nas variáveis ​​​​env do heroku

    10. Comprometa-se e empurre

  46. Listar usuários

    1. construir API para usuários de lista

    2. Criar tela UserList

    3. criar detalhes do pedido constante, ação e redutor

  47. Excluir usuários

    1. construir API para excluir usuários

    2. criar detalhes do pedido constante, ação e redutor

    3. Use ação em UserListScreen

  48. Editar usuário

    1. construir API para atualizar usuários

    2. criar interface de tela de edição

  49. Implementar visão do vendedor

    1. adicionar menu do vendedor

    2. criar rota do vendedor

    3. listar produtos para vendedor

    4. listar pedidos para o vendedor

    5. adicionar vendedor à lista de produtos e tela de detalhes

  50. Criar página do vendedor

    1. criar página de vendedor

    2. atualizar componente do produto e tela do produto

    3. atualizar rotas de produtos

  51. Adicionar carrossel mais vendido

    1. instalar carrossel de reação

    2. implementar ações e redutores para os mais vendidos

    3. use o carrossel de reação com dados na tela inicial

  52. Forçar itens de pedido de um vendedor

    1. atualize a ação addToCart para comprar de um vendedor em um pedido

  53. Criar caixa de pesquisa e tela de pesquisa

    1. criar barra de pesquisa em Header.js

    2. adicionar estilo

    3. lidar com formulário de envio

    4. edite o URL de análise para obter a string de consulta

    5. atualizar API da lista de produtos para pesquisa por nome

  54. Adicionar filtro de pesquisa avançada 1. filtrar por categoria 2. filtrar por faixa de preço 3. filtrar por classificação média

  55. Pesquisa avançada completa 1. filtrar por preço 2. filtrar por classificação 3. classificar por preço, classificação, ...

  56. Avalie e avalie produtos 1. avalie produtos 2. crie ações e redutores

  57. Escolha o endereço no mapa do Google 1. crie credenciais de mapa do Google 2. atualize o arquivo .env com a chave da API do Google 3. crie uma API para enviar a API do Google para o frontend 4. crie a tela do mapa 5. busque a API do Google 6. getUserLocation 7. instale @react- google-maps/api 8. use-o na tela de envio 9. aplique o mapa na tela de checkout

  58. BugFix: executando localmente sem problemas

    1. adicione informações do vendedor ao data.js

    2. semear dados do produto com informações do administrador como vendedor

    3. corrigir isSeller e isAdmin na atualização do usuário

    4. remover autenticação dos detalhes do usuário

  59. Implementar paginação

    1. adicione paginação ao roteador do produto no back-end

    2. aplicar número de página a ações e redutores no frontend

    3. mostrar números de página na tela de pesquisa

  60. Recibo de pedido por e-mail pelo mailgun 1. crie uma conta mailgun 2. adicione e verifique seu domínio no mailgun 3. instale o mailgun-js 4. defina a chave da API no arquivo env 5. altere a ordem de pagamento no orderRouter 6. envie o e-mail para

  61. Criar tela do painel

    1. Crie dados de gráfico no back-end

    2. Tela Construir Gráfico

  62. Implementar chat ao vivo com clientes

    1. use socket io para criar back-end

    2. criar componente de caixa de bate-papo

    3. criar tela de suporte

  63. Atualize para React 17, Roteador 6, Mongoose 6

    1. Back-end

    2. Desinstale e instale todos os pacotes

    3. remover opções no mongoose connect

    4. envolva mailgun em try catch em orderRouter

    5. Front-end

    6. Desinstale e instale todos os pacotes

    7. remover na caixa de pesquisa

    8. envolva tudo

    9. substitua por <Route element={}>

    10. substitua por <Route element={ }/>

    11. substituir e também

    12. Atualizar PrivateRoute, AdminRoute e SellerRoute

    13. substitua push() por navigation() de useNavigate

    14. substitua props.match.params.id por const params = useParams();

    15. substitua props.location.search por const {search} = useLocation(); e URLSearchParams

    16. substitua props.match.path por const {pathname} = useLocation();

    17. coloque userInfo em useEffect no ChatBox, SupportScreen

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos