Crie um e-commerce com Rails usando Solidus em poucos minutos

Crie um e-commerce com Rails usando Solidus em poucos minutos

Neste artigo veremos uma introdução ao Solidus, uma solução para e-commerce Rails que pode ser desenvolvida rapidamente. Se você precisa ter uma loja e vender produtos on-line, Solidus pode ajudar nesse contexto.

Neste artigo veremos como instalar, configurar e customizar uma aplicação com o Solidus.

Sigam o passo a passo e construam a aplicação na seção “Passo a Passo da criação do APP”. Assim, os conceitos, como o padrão de arquitetura do Solidus, a integração com Rails, e alguns outros detalhes podem ficar mais claros.

Talvez este material ajude você a criar uma lojinha on-line. 😉

Espero que gostem  😉

 

O que é o Solidus ?

Solidus é uma gem open source para e-commerce, construída em Ruby On Rails e é uma continuação, um fork, de outro produto open source chamado Spree, também escrito em Rails.

Esta solução, Solidus, foi projetada para atender a um grande volume de vendas no mercado varejista e consiste de várias gems, que combinadas, oferecem uma plataforma completa de e-commerce.

Instalando a gem Solidus, automaticamente as gems que o compõe são instaladas, que são:

 

Estas gems foram construídas para trabalharem juntas, no entanto, não é obrigatório usa-las sempre juntas.

Poderíamos, por exemplo, instalar somente a gem “solidus_core” e combina-la com um front-end próprio e não usar a gem “solidus_frontend”.

Solidus ou Spree?

Como já foi dito o Solidus nasceu de um fork do Spree (versão 2.4) e continuou se desenvolvendo (assim com o Spree), então eles possuem uma base bem similar, porém como podemos ver nos gráficos a baixo desde 2015 o Solidus vem recebendo muito mais contribuições no github e isto sugere que ele esteja recebendo mais atualizações e melhorias.


Contribuições no Spree (github)

spree

 

Contribuições no Solidus (github)

solidus

 

O que vamos criar?

Vamos criar uma aplicação de e-commerce chamada SolidusShop, baseada na gem Solidus.

Para explorar alguns conceitos, vamos manipular nossa aplicação SolidusShop, com customizações bem simples e mostrar o SolidusShop em funcionamento.

Durante o item “Passo a Passo da criação do APP SolidusShop” vamos baixar a própria solução Solidus, usando o comando “git clone”, para facilitar a customização por sobrescrita, que explicaremos posteriormente.

 

Ferramentas

Solidus depende do Imagemagick para manipular imagens, mas neste artigo não usaremos esse recurso para imagens, portanto não precisamos instala-lo.

Como banco de dados podemos usar Postgres, MySql ou Sqlite, mas usaremos o Sqlite para simplificar.



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/



Passo a Passo da criação do APP SolidusShop

I – Instalação

01) Para começar nosso projeto, vamos criar uma pasta e entrar dentro dela.

02) Execute este passo somente se você usa o gerenciador de versões Ruby, RVM:

03) Agora vamos efetivamente criar nossa aplicação Rails.

04) No arquivo Gemfile, inclua as gems:

05) Agora instale os módulos do Solidus na aplicação, com o comando:

06) E agora o comando para criar o banco:

07) Continuando a instalação, agora vamos executar os generators para criar os arquivos de configuração e as migrations necessárias.

Responda e-mail e senha de administrador quando solicitado ou enter para assumir defaults.

08) Agora é o momento de saber se o e-commerce está funcionando 😏 …. suba o servidor Rails e chame o endereço abaixo usando seu browser preferido.

09) Visite no seu browser: http://0.0.0.0:3000

Se as coisas estão funcionando, uma tela parecida com a tela a seguir será apresentada:

solidus


Agora sim, você tem um website tipo e-commerce, pronto para começar a customizar com o Solidus e Ruby On Rails 🙋

 

II – Customização

Nessa parte vamos implementar uma pequena modificação no design da página principal desta plataforma de e-commerce, que criamos agora.

Este processo de modificação de design, é chamado de customização. Mas aqui vamos apenas “começar” a customizar, para termos uma ideia de como funciona.


Trocando o logo do projeto

Uma das primeiras coisas que pensamos numa personalização de tema, é a “identidade” da empresa ou do produto de e-commerce.

Para que nosso projeto SolidusShop tenha um logo próprio, vamos fazer aparecer na tela principal, o logo abaixo:

 

 

Para baixa-lo clique aqui \o/

01) No arquivo
solidusshop/config/initializers/spree.rb, inclua a linha:

02) Crie a nova pasta “logo”

03) Agora você terá que copiar o arquivo “solidusshop_logo.png” para a pasta: solidusshop/app/assets/images/logo/

04) Em seguida, compile os assets do projeto para que o novo arquivo seja carregado para a página principal:

05) Suba o servidor Rails e chame o endereço abaixo usando seu browser preferido.

06) Visite no seu browser: http://localhost:3000

 

Se tudo ficou dentro do esperado, sua aplicação apresentará o novo logo:

solidus e-commerce

Ordenando produtos por nome (customização por sobrescrita)

Continuando nossa personalização, vamos organizar os produtos que estão sendo exibidos na página principal, por ordem alfabética crescente.

Para que isto aconteça, vamos “personalizar” apenas o controller “home_controller”, responsável por fornecer a lista de produtos para a view da página principal.

Mas essa customização é diferente da customização do logo feita anteriormente. Essa customização faz uma sobrescrita para alterar o comportamento do “home_controller”.

Agora é necessário baixar, ou seja, fazer um “clone” do repositório do próprio projeto Solidus para sua máquina, assim, será possível copiar somente o controller que iremos personalizar, do projeto Solidus para o projeto SolidusShop.

 

01) Faça um clone do projeto Solidus pois iremos copiar e personalizar um controller dele:

⇒ Fique atento para não confundir pois agora existem duas pastas bem parecidas.  A pasta “solidus” e a do nosso projeto personalizado, “solidusshop”.

02) Voltando ao nosso projeto, entre na solidusshop e crie as pastas necessárias:

03) Vamos copiar o controller do projeto Solidus para o SolidusShop:

04) Agora você terá o fonte conforme a imagem a seguir. Apenas complemente a linha 10, com o método “ascend_by_name”, que é responsável por ordenar os produtos por nome:solidus customization

05) Suba o servidor Rails e chame o endereço abaixo usando seu browser preferido.

06) Visite no seu browser: http://localhost:3000

 

Mostrando o Resultado

Se tudo deu certo, o e-commerce estará conforme mostrado a seguir, com o novo logo e produtos por ordem alfabética de nome. 👏

rails solidus

Conclusão

Neste artigo aprendemos o que é a gem Solidus (e como ela pode nos ajudar a criar um e-commerce rails em poucos minutos), criamos um pequeno e-commerce como exemplo (passo a passo) e aprendemos a customizá-lo.

Caso você tenha se interessado em desenvolver um e-commerce usando essa gem vale a pena dar uma olhada na documentação com calma e se você quiser ver mais tutoriais sobre ela aqui no OneBitCode, comenta aí em baixo 😛

Se você gostou desse tutorial também vai gostar do nosso Screencast sobre a criação de um e-commerce rails com a gem Spree: Criando um e-commerce com Spree em 15 minutos!

Espero que o artigo seja útil em algum momento e que tenham gostado! 👍

Até breve 😎

 


Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo? O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

março 3, 2018

13
Deixe um comentário

avatar
8 Comment threads
5 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
KaioCarlos Fagiani JuniorLeonardo Scorzageraldo santosNelcifran Pires Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
James Dias
Visitante
James Dias

Gostei muito!

Eduardo
Membro
Eduardo

Muito bom o artigo! Criei o exemplo na minha máquina em poucos minutos mesmo!! Quero aprender a integrar formas de pagamento também… se não me engano, tem artigo sobre isso também… vamo q vamo! Parabéns pelo trabalho!!

Sergio Lima
Visitante
Sergio Lima

Pessoal, obrigado pelas mensagens. Esse feedback é muito importante para nós 😉 … continuem enviando mensagens!

Marcio
Visitante
Marcio

Muito legal o artigo parabéns. Porém gostaria de ver como personalizar os formulários.

Leonardo Scorza

Legal a sugestão Marcio,
Vamos tentar trazer em uma continuação do artigo 🙂

Matheus Fernandes
Visitante
Matheus Fernandes

Legal o artigo , estou precisando criar um ecommerce , qual a facilidade de integrar um gateway de pagamento com o solidus? vlw

Leonardo Scorza

E ai Matheus, beleza?
Cara é tranquilo fazer a integração (mesmo caminho do spree)
Vamos ver se trazermos isso como continuação do post 🙂

Nelcifran Pires
Visitante

Bem interresante!
Queria ve com os métodos de pagamento.

Leonardo Scorza

E ai Nelcifan,
Essa pode ser uma continuação interessante para o post 🙂

geraldo santos
Membro
geraldo santos

Seria super util uma continuaçao, de como integrar os meios de pagamento e como fazer a mudança nos produtos default para produtos reais a serem utilizados,

Leonardo Scorza

Bacana Geraldo,
Vamos trazer a parte de pagamentos 🙂

Kaio
Visitante
Kaio

Leonardo algum plano de quando vao trazer essa parte?

Carlos Fagiani Junior
Visitante
Carlos Fagiani Junior

Muito interessante, e bem didático… Vou testar essa gem logo logo

Feito com s2 por OneBitCode
%d blogueiros gostam disto: