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:

• solidus_api (RESTful API)
• solidus_frontend (Cart e storefront)
• solidus_backend (Admin area)
• solidus_core (Essential models, mailers, classes)
• solidus_sample (Sample data)

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)

best dating sim

Contribuições no Solidus (best dating websites for free)

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.

• Neste artigo usamos a versão 2.5.0 do Ruby e a versão 5.1.4 do Ruby On Rails.
• Solidus (http://www.solidus.io)
• Ruby (https://www.ruby-lang.org/en/news/2017/12/25/ruby-2-5-0-released/)
• Ruby On Rails (https://rubygems.org/gems/rails/versions/5.1.4)

Não perca nenhum conteúdo

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

Isso é obrigatório.

Me Inscrever

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:

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:

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:

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. 👏

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 😎

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 também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
 📱  • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂

Bem-vindo à família OneBitCode o/