Medusa JS - Guia de instalação

Usar um CMS sem cabeçalho oferece muitos benefícios, como arquitetura desacoplada e escalabilidade, a capacidade de escrever e implantar código em qualquer lugar e a capacidade de manter várias infraestruturas com menos código.

Neste artigo, exploraremos o Medusa, um CMS sem cabeçalho que atua como uma alternativa ao Shopify. Vamos começar!

O que é um CMS Headless?

O termo CMS Headless implica na construção de um repositório de conteúdo ou backend com a capacidade de se integrar com qualquer frontend de escolha (o head) usando APIs RESTful ou GraphQL.

Em resumo, um CMS Headless pode gerenciar conteúdo em um único lugar e implantá-lo com qualquer frontend.

Um CMS Headless é um sistema de gerenciamento de conteúdo apenas de backend, sem uma camada de apresentação integrada. Nos primeiros dias do CMS, a camada de apresentação estava fusionada com o conteúdo. No entanto, o advento da tecnologia Headless resultou em grandes melhorias na forma como os criadores de conteúdo gerenciam seu conteúdo a partir de uma arquitetura monolítica, que é a abordagem acoplada a um sistema de gerenciamento de conteúdo desacoplado ou Headless. Hoje em dia, os criadores podem implantar conteúdo por meio de APIs em vários canais, como aplicativos web, aplicativos móveis, sites e muito mais.

Vários CMSs Headless populares incluem Storyblok, Prismic, Medusa, Sanity e Contentful.

O que é Medusa?

Medusa é um egine de e-commerce Headless de código aberto que se orgulha de ser uma alternativa ao Shopify, o site de e-commerce de escolha para muitas empresas. Construído em Node.js com modificação em mente, Medusa é composto por três partes:

• Headless commerce (backend): o repositório que expõe a API REST

• Interface (frontend): você pode desenvolver a interface com Next.js, um gerador de sites estáticos como Gatsby, ou qualquer outro framework

• Painel de administração: os desenvolvedores podem usar o painel de administração do Medusa para personalizar e gerenciar as funcionalidades de seu e-commerce

Medusa vs. Shopify

Vamos revisar alguns parâmetros que podem servir como base de comparação para os desenvolvedores ao decidir entre vitrines Medusa e Shopify.

Custo

Para começar, consideraremos o custo; a plataforma Shopify oferece várias opções de preços que variam de $29 a $299, dependendo da seleção, de pacotes básicos a avançados, respectivamente. Por outro lado, Medusa é de código aberto e gratuito para usar. Portanto, Medusa se beneficia da contribuição da comunidade, enquanto Shopify não.

Personalização

Uma grande diferença entre Medusa e Shopify é que Medusa inclui mais opções de personalização para os comerciantes, entretanto, isso não ocorre com o Shopify. Por exemplo, os desenvolvedores podem personalizar a camada de dados ou o backend de um e-commerce Medusa com base na preferência de negócios para atender melhor seus clientes. Por exemplo, os usuários podem integrar com Strapi, Contentful, ou qualquer outro serviço CMS. Além disso, você pode integrar provedores de pagamento locais em qualquer e-commerce desenvolvida com Medusa. No entanto, fazer modificações personalizadas em ume-commerce Shopify é quase impossível. Shopify é uma escolha melhor quando um e-commerce não requer modificação personalizada.

Estrutura e plugins

Medusa é uma engine de e-commerce headless, enquanto Shopify não é compatível com o headless commerce. Isso implica que com Medusa, o backend é separado da camada de apresentação, ou interface, dando flexibilidade a qualquer loja de e-commerce desenvolvida com Medusa. Os clientes podem usar Next.js, Gatsby, ou qualquer outro framework de interface de sua escolha para a camada de apresentação.

Ao construir um e-commerce, a manutenibilidade e escalabilidade são características importantes a serem consideradas. Enquanto Shopify resolve problemas de escalabilidade e manutenibilidade fornecendo uma ampla gama de suporte, integrações, aplicativos e suporte para desenvolvedores, Medusa possui um recurso personalizável integrado que permite aos clientes personalizar seu e-commerce para atender a requisitos de negócios específicos.

Shopify e Medusa oferecem toneladas de aplicativos, plugins e extensões que ajudam a estender a funcionalidade de um e-commerce.

Multimoeda

Construir um e-commerce que permita ao cliente ver os preços em sua moeda local pode ser um divisor de águas, resultando em autenticidade e precisão de pagamento para os compradores. No momento da escrita, o suporte multimoeda do Shopify só está disponível se o comerciante habilitar o Shopify Market e o Shopify Payments, que são restritos a apenas 17 países. Mesmo com os dois habilitados, os comerciantes ainda precisam de um plano estabelecido para construir o formato de preço em diferentes moedas ou taxas de câmbio. Outra abordagem é usar o Shopify para criar vários e-commerces que fornecem aos usuários mais orientações sobre os custos do produto em moedas específicas.

Com Medusa, você pode criar diferentes regiões e selecionar suas moedas locais na mesma loja, acessando tudo por meio de um único painel de administração e definindo o custo do produto de forma independente para cada moeda.

Instalação do Medusa

Nesta seção, vamos construir uma vitrine básica usando Medusa e Next.js. Para acompanhar, você precisará ter o Node.js instalado em sua máquina. Execute o seguinte comando para confirmar o status da instalação do Node.js:

node -v

A saída deve ser a versão mais atual do Node.js no momento da escrita. Se o Node.js não estiver instalado em sua máquina, você pode baixá-lo e instalá-lo a partir do site oficial do Node.js.

Instalar o CLI do Medusa JS

Para começar a construir nosso e-commerce com Medusa, primeiro precisamos instalar o CLI (Interface de Linha de Comandos) do Medusa:

npm install @medusajs/medusa-cli -g

O comando acima instala o medusa-cli globalmente; a flag -g significa instalação global. Em seguida, crie um e-commerce Medusa (backend) usando o comando abaixo:

medusa new segdev-store --seed

O comando acima cria uma instalação Medusa no diretório segdedv-store. A flag --seed usada acima pré-popula o banco de dados do e-commerce com produtos de demonstração.

utilize as setas para escolher a opção change credentials e insira as suas credenciais configuradas.

Ao final da instalação, será necessário inserir as credenciais de acesso ao PostgreSQL:

user: postgres
password: ****
port: 5432
host: localhost

Estrutura do diretório do projeto Medusa JS

Para testar nosso servidor, mude os diretórios para o novo diretório e execute o servidor usando o comando abaixo:

cd segdev-store

medusa develop

Seu servidor deve estar rodando no localhost:9000

Teste-o com qualquer cliente de sua escolha, como Thunder Client, Postman, ou seu navegador usando a URL localhost:9000/store/products

Se você fez tudo certo até este ponto, uma lista de produtos no formato JSON deve ser retornada.

JSON retornado ao acessar a URL localhost:9000/store/products

Neste ponto, concluímos a parte do servidor, backend, ou headno contexto de Headless CMS. A seguir, vamos configurar e integrar a interface do e-commerce.

Configurando nossa interface (frontend)

Para construir nossa interface do e-commerce, usaremos o Next.js. Use o comando abaixo para instalar o Iniciador do Medusa para Next.js:

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-segdev-store

Eu escolhi my-segdev-store como o nome para meu e-commerce, mas você pode escolher outro nome. Supondo que esta seja a primeira vez que você está instalando o nextjs-starter-medusa, você verá uma notificação como a seguinte:

Nextjs Starter Medusa instalado Clique em Enter e continue. Dependendo da velocidade da sua internet, a instalação não deve demorar muito. Quando o pacote inicial do Next.js for instalado com sucesso, mude os diretórios para seu e-commerce usando o seguinte comando:

cd my-segdev-store

Certifique-se de que seu servidor está rodando, depois execute o comando abaixo:

npm run dev

Sua loja deve estar ativa em localhost:8000

Com isso concluído, temos atualmente nosso engine de e-commerce Medusa rodando localmente.

Lembre-se de que Medusa é dividido em três partes, o Headless commerce, o painel de administração e a interface. Nós integramos a interface e a parte sem cabeça e agora nos resta apenas a parte de administração.

Lista de Produtos de demonstração do Medusa

Para se inscrever e criar uma conta, clique em "conta" no canto superior esquerdo ao lado de "My Bag".

Formulário para criar conta na sua loja

Configurando o Painel Admin do e-commerce

Instale o Pacote no diretório do seu backend do Medusa, execute o seguinte comando para instalar o painel de administração:

npm install @medusajs/admin

Adicione o painel de administração às configurações do Medusa Em medusa-config.js, adicione o plugin do painel de administração no array de plugins:

const plugins = [
// ...
{
resolve: "@medusajs/admin",
/** @type {import('@medusajs/admin').PluginOptions} */
options: {
// ...
},
},
]

Ou descomente o código como na imagem abaixo:

Configure as opções do plugin do painel de administração O plugin aceita as seguintes opções:

• serve: (default: true) um booleano indicando se deve servir o painel de administração quando o backend do Medusa inicia.

• path: (default: app) uma string indicando o caminho que o servidor admin deve rodar quando estiver rodando o backend do Medusa em produção.

• outDir: Caminho opcional para onde enviar os arquivos de compilação do admin.

• autoRebuild: (default: false) um booleano indicando se a interface do admin deve ser reconstruída se houver qualquer alteração ou se uma compilação faltante é detectada quando o backend inicia.

Teste o Painel de Administração Se você desabilitou a opção serve, precisa rodar o painel de administração separadamente usando o comando dev.

Você pode testar o painel de administração executando o seguinte comando no diretório do backend do Medusa:

npx @medusajs/medusa-cli develop

Isso inicia o Backend do Medusa e o painel de administração. Por padrão, o admin estará disponível na URL localhost:9000/app. Se você definiu a opção de caminho, então o admin estará disponível em localhost:9000/<CAMINHO> com <CAMINHO> sendo o valor da opção de caminho.

Painel Admin da sua loja deve estar assim.

Com esses passos, você deve ter um painel de administração do Medusa instalado e funcionando.

Criar um novo usuário administrativo

Execute o seguinte comando no diretório que contém o seu backend do Medusa:

npx @medusajs/medusa-cli user -e algum@email.com -p alguma-senha

Neste comando, substitua "algum@email.com" pelo endereço de e-mail do novo usuário administrativo e "alguma-senha" pela senha que você deseja usar para este usuário. Este comando criará um novo usuário que você pode usar para acessar seu painel administrativo.

Usando o comando Seed

O comando Seed é usado para preencher o banco de dados do Medusa com dados de amostra, que podem ser úteis para testes e desenvolvimento.

Se você instalou os dados de demonstração quando instalou o backend do Medusa executando o comando:

npm run seed

você acessar o painel administrativo utilzando as seguintes credenciais:

email: admin@medusa-test.com

senha: supersecret

OBS: As senhas no Medusa são hash usando o scrypt-kdf, e o hash da senha é armazenado no banco de dados.

Para mais detalhes, você pode se referir à documentação oficial do Medusa.

Conclusão

Por fim, é importante destacar que, embora Medusa seja uma excelente alternativa ao Shopify devido à sua natureza de código aberto e personalizável, a escolha entre os dois deve ser baseada nas necessidades específicas do seu negócio. Shopify pode ser a escolha perfeita para empresas que não requerem muita personalização e preferem um modelo pronto para uso. Medusa, por outro lado, seria ideal para empresas que necessitam de uma solução altamente personalizável e de código aberto.