Construindo um site de comércio eletrônico baseado em React e GraphQL usando o Pickbazar
Publicados: 2022-10-18Existem muitos modelos de compras disponíveis em vários mercados. Mas escolher o caminho certo é muito difícil. Hoje falaremos sobre um modelo de compras ou comércio eletrônico chamado "PickBazar" desenvolvido pela RedQ Inc. É um novo modelo publicado no mercado Envato.
O que é React e por que devemos usá-lo?
React é uma biblioteca JavaScript baseada em componentes para gerar interfaces de usuário e é introduzida pelo Facebook. Ele nos permite criar componentes encapsulados que gerenciam seu estado e os compõe para criar interfaces de usuário complexas. O ReactJS é uma das bibliotecas de interface do usuário amplamente usadas que auxilia na criação de belos aplicativos da Web que exigem esforço e codificação mínimos.
O que é GraphQL e por que o implementamos?
O GraphQL foi desenvolvido em 2012, internamente pelo Facebook antes de ser lançado publicamente em 2015. O GraphQL é uma linguagem de consulta e manipulação de dados de código aberto para APIs e um tempo de execução para atender consultas com dados existentes. O GraphQL suporta leitura, gravação e assinatura de alterações nos dados (atualizações em tempo real – mais comumente implementadas usando WebHooks). Os servidores GraphQL estão disponíveis para vários idiomas. Ele permite que os clientes definam a estrutura de dados necessária, e a mesma estrutura de dados é retornada do servidor, por isso evita que quantidades excessivamente grandes de dados sejam retornadas.
Quem seria beneficiado pelo modelo PickBazar?
Hoje em dia, os negócios de supermercados, farmácias, eletrônicos e telefones celulares tendem a ser totalmente operáveis por meio de uma presença online. Se um empreendedor deseja operar um novo negócio por meio da presença online, seu primeiro requisito seria um site bem projetado para funcionar sem problemas. Neste ponto, o PickBazar está aqui para fornecer uma solução completa para o dono de uma loja administrar seus negócios sem obstáculos. A princípio, ele precisa comprar esse modelo no mercado Envato. Estamos discutindo a implementação básica real deste modelo. Então vamos começar neste artigo.
Campos de Benefícios
Mercado
Os itens de mercearia naturalmente se enquadram nas necessidades diárias. Assim, os clientes que vierem comprar qualquer coisa em sua mercearia on-line receberão um sistema completo de gerenciamento de estoque. Um conhecimento abrangente deve ser fornecido a ele sobre o produto fora de estoque ou disponível. O PickBazar está aqui para manter o sistema de gerenciamento de estoque do seu site.
Farmacia
Os produtos farmacêuticos são naturalmente essenciais nos dias de hoje, nesta situação do COVID19. Um dono de loja de farmácia definitivamente precisará de um sistema de gerenciamento de categorias para demonstrar diferentes tipos de medicamentos, produtos para bebês e itens essenciais para mulheres separados, para que um cliente em potencial possa encontrar seu produto rapidamente. Se você utilizar o PickBazar para sua loja de farmácia on-line, poderá erradicar esse problema.
Entrega de alimentos
A entrega de alimentos é um negócio lucrativo se você puder mantê-lo por meio de uma presença online ousada; O PickBazar está aqui para ajudá-lo com esse aspecto. O PickBazar possui um excelente sistema de gerenciamento de entregas e gerenciamento de rastreamento de pedidos. Assim, você pode administrar seu negócio de entrega de alimentos do zero com a implementação do modelo PickBazar.
Livraria
Livraria é um lugar onde as pessoas vão para comprar livros, mas têm que perder muito tempo encontrando o livro fisicamente, ou é difícil conhecer o autor de qualquer livro antes de comprar. Portanto, se você utilizar o PickBazar para sua loja de livros para ter uma presença online, o PickBazar definitivamente o ajudará a atrair os clientes em potencial. Com o gerenciamento de autor, cada livro tem a chance de exibir os detalhes sobre o autor e o gerenciamento de categorias o ajudará a categorizar seus livros disponíveis de acordo com seu gênero.
Alguns recursos do Generalize
O sistema de gerenciamento de checkout é um recurso do PickBazar para qualquer tipo de loja online. Com esse recurso, clientes e lojistas podem manter uma conexão comercial. Quero dizer, endereço de entrega, pagamento e rastreamento de pedidos, tudo isso é possível através do sistema de gerenciamento de checkout.
O PickBazar Dashboard é um ótimo recurso oferecido pelo modelo. É um recurso obrigatório para o proprietário de uma loja online. Receita total, pedido total, novo cliente, entrega total, vendas de mídia social, histórico de vendas, cálculo de lucros e perdas, metas semanais e mensais, todas essas opções são visíveis e gerenciáveis através do painel do PickBazar.
Crie seu próprio site de comércio eletrônico com o modelo React PickBazar
Modelo de e-commerce mais rápido construído com React, NextJS, TypeScript, GraphQL, Type-GraphQL e Styled-Components. É fácil de usar, e os desenvolvedores usaram GraphQL e type-GraphQL, você pode construir seu esquema com muita facilidade. O GraphQL Playground faz sua própria documentação e sua equipe de front-end vai adorar usá-la. Criar uma loja online seria mais fácil do que nunca.
Se você implementar este modelo, poderá aumentar suas vendas com certeza. Para uma operação suave e manuseio de um grande volume de dados de venda e rastreamento de pedidos, o "PickBazar" seria a escolha mais significativa.
Ver demonstração
Por que usar o modelo de compras React PickBazar?
Desenvolvido com tecnologia Bleeding Edge para o projeto altamente escalável.
Vitrine
- Em seguida, JS, React Apollo e GraphQL são usados.
- Todos os componentes são escritos em TypeScript.
- Monorepo suportado com configuração Lerna.
- Suporte SSR para criar aplicativos altamente escaláveis.
Painel da loja
- Create React App (CRA), React Apollo e GraphQL são usados.
- Os componentes são escritos em TypeScript e Base Web React UI Framework.
- Crie facilmente produtos no back-end.
- React Hooks Form para manipulação de formulários.
Crie seu próximo aplicativo de comércio eletrônico com o Pickbazar.
Crie uma bela experiência de comércio usando a estrutura Next.js renderizada pelo servidor universal. É muito fácil de usar, a RedQ Inc. usou GraphQL e type-GraphQL.
Integração de pagamento fácil com Stripe!
Stripe é a melhor plataforma de software para administrar um negócio na Internet. O Stripe cria as ferramentas mais poderosas e flexíveis para o comércio na Internet. RedQ Inc. integra Stripe com seu template PickBazar.
Recursos do modelo do React PickBazar
Tecnologia de Bleeding Edge
Next JS, React Apollo e GraphQL são usados para construir um projeto de e-commerce super-rápido.
Reagir Apolo
O React Apollo permite buscar dados do seu servidor GraphQL e usá-los na construção de interfaces de usuário complexas e reativas.
Desempenho rápido
Otimizado para tamanho de compilação menor, compilação de desenvolvimento mais rápida e dezenas de outras melhorias.
Componentes integrados
Os componentes são escritos em TypeScript e Base Web React UI Framework. Os componentes são fáceis de entender.
Pronto para implantação
O desenvolvedor RedQ Inc. tornou o processo de implantação limpo e simples. Você pode implantar o modelo com Now.sh.
Suporte ao Autor Elite
A RedQ Inc. pode garantir o suporte adequado do Elite Author e uma resposta mais rápida para seus produtos.
Introdução e instalação
Para começar com o modelo, você deve seguir o procedimento abaixo. Primeiro, navegue até o PickBazar
diretório. Em seguida, execute o comando abaixo para começar com uma parte específica.
// no diretório pickbazar yarn
Administrador
Para iniciar a parte do painel de administração com os dados da API correspondentes, execute os comandos abaixo.
// para o modo dev execute abaixo do comando yarn dev:admin
// para o modo de produção execute abaixo do comando yarn build: admin
Comprar
Configure a chave da API Stripe em /packages/shop/next.config.js. Na seção env, defina STRIPE_PUBLIC_KEY para sua chave pública de distribuição.
Para iniciar a parte da loja com a API correspondente, execute os comandos abaixo.
// para o modo dev execute abaixo do comando yarn dev:shop
// para o modo de produção execute abaixo do comando yarn build:shop
Se você quiser testar seu administrador de compilação de produção ou comprar no ambiente local, execute os comandos abaixo.
Administrador
// constrói admin para produção yarn build: admin
// executa a API da loja que é necessária para testes locais yarn dev:API-admin
// inicia o admin na produção yarn serve:admin
Comprar
// constrói loja para produção de fios build:shop
// executa a API da loja necessária para testes locais yarn dev:api-shop
// inicia a loja na produção yarn serve:shop
Estrutura e personalização de pastas
/packages/admin: Nesta parte, toda a codificação e funções relacionadas ao painel de administração.
/packages/shop: Toda a codificação e funções relacionadas à loja.
/packages/api : código relacionado à API para a seção de administração e loja.
os códigos de API relacionados ao admin estão na pasta admin.
os códigos relacionados à loja estão na pasta da loja.
Configuração e implantação
agora.sh
Se você deseja hospedar o modelo em now.sh, siga o comando abaixo.
API
- Navegue até pacotes/API
- Agora execute o comando abaixo
agora
Administrador
- Depois de implantar a API, você obterá o URL do endpoint da API. Coloque essa URL em packages/admin/.env
REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;
- Navegue até pacotes/admin
- Agora execute o comando abaixo
agora
Comprar
Depois de implantar a API, você obterá o URL do endpoint da API. Coloque esse URL no
packages/shop/next.config.js
env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',
API_URL: '{put_your_api_url_here.}/shop/graphql', },
Navegue até pacotes/loja
Agora execute o comando abaixo
agora
Conclusão
Agora chegamos ao ponto final deste artigo. Esperamos que você tenha uma ideia sobre o modelo de compras PickBazar react GraphQL eCommerce. Sem qualquer hesitação, você pode usar este modelo de compras para sua loja de comércio eletrônico. Muito obrigado por ler este artigo. Se você realmente gosta deste artigo, deixe um comentário na seção de comentários ou nos dê uma boa classificação. Isso é tudo por hoje. Tenha um lindo dia!
Comprar modelo
Leia mais: 10 melhores painéis de administração do React Redux 2020