Criando um e-commerce com Spree em 15 minutos!

O que é o Spree?

O Spree é uma plataforma de e-commerce criada usando Ruby On Rails e vem evoluindo constantemente. Ela possui diversas extensões que ajudam na customização do e-commerce gerado e possui uma grande versatilidade na hora das customizações.

Exemplos de  lojas usando

• Urban Ladder
• Nigra Mercato

O que vamos Aprender?

1. Como gerar um e-commerce usando o Spree
2. Como traduzir esse e-commerce para Português
3. Como criar páginas estáticas dentro desse e-commerce
4. Como customizar esse e-commerce
   • Adicionar Css
   • Deface

Ingredientes

1. ruby 2.3.1
2. rails 4.2.6
3. PostgreSql 9.5
4. Spree 3.1.0
5. Spree Static Content 3.1.0
6. https://onebitcode.com/dating-in-atlanta-over-60/

Código completo

Como de costume, você pode acessar o código desenvolvido durante o tutorial no GitHub para realizar comparações caso você tenha alguma dúvida :), acessa aqui o código e já me segue por lá.

Lista de comandos usados no Screencast em ordem

Parte 1:  Como gerar um e-commerce usando o Spree

1. Primeiro instalando  o ImageMagic
   • Linux
     
     Ruby

     sudo apt-get install imagemagick

     1	sudo apt-get install imagemagick

   • Mac
     
     Ruby

     brew install imagemagick

     1	brew install imagemagick

   • Windows (Mude para um sistema unix e seja mais feliz 🙂 )
     • http://www.imagemagick.org/script/binary-releases.php
2. Instalar a versão do Rails certa
   
   Ruby

   gem install rails --version=4.2.6 --no-ri --no-rdoc

   1	gem install rails --version=4.2.6 --no-ri --no-rdoc

3. Criar o Projeto Rails 4.2.6
   
   Ruby

   rails _4.2.6_ new my_store

   1	rails _4.2.6_ new my_store

4. Criando o banco de dados
   
   Ruby

   rake db:create

   1	rake db:create

5. Colocar as Gems no Gemfile (copie e cole no Gemfile)
   
   Ruby

   gem 'spree', '~> 3.1.0' gem 'spree_auth_devise', '~> 3.1.0' gem 'spree_gateway', '~> 3.1.0'

   1 2 3

   gem 'spree', '~> 3.1.0' gem 'spree_auth_devise', '~> 3.1.0' gem 'spree_gateway', '~> 3.1.0'

6. Instalar as Gems
   
   Ruby

   bundle install

   1	bundle install

7. Rodar os generates do Spree
   Ruby

   rails g spree:install --user_class=Spree::User rails g spree:auth:install rails g spree_gateway:install

   1 2 3

   rails g spree:install --user_class=Spree::User rails g spree:auth:install rails g spree_gateway:install

8. Rodar o servidor
   
   Ruby

   rails s

   1

   rails s

Parte 2: Como traduzir esse e-commerce para Português

1. Colocar no gem file  (copie e cole no Gemfile)
   
   Ruby

   gem 'spree_i18n', github: 'spree-contrib/spree_i18n', branch: '3-1-stable'

   1	gem 'spree_i18n', github: 'spree-contrib/spree_i18n', branch: '3-1-stable'

2. Instalar a Gem
   
   Ruby

   bundle install

   1	bundle install

3. Rodar o instalador
   
   Ruby

   bundle exec rails g spree_i18n:install

   1	bundle exec rails g spree_i18n:install

4. Adicionar sobrescrita manual do locale em “config/initializers/spree.rb”
   
   Ruby

   Spree::Frontend::Config[:locale] = 'pt-BR' Spree::Backend::Config[:locale] = 'pt-BR'

   1 2	Spree::Frontend::Config[:locale] = 'pt-BR' Spree::Backend::Config[:locale] = 'pt-BR'

5. Rodar o servidor
   
   Ruby

   rails s

   1

   rails s

Parte 3: Como criar páginas estáticas dentro desse e-commerce

1. Colocar no gem file  (copie e cole no Gemfile)
   
   Ruby

   gem 'spree_static_content', github: 'spree-contrib/spree_static_content', branch: '3-1-stable'

   1	gem 'spree_static_content', github: 'spree-contrib/spree_static_content', branch: '3-1-stable'

2. Intalar a Gem
   
   Ruby

   bundle install

   1	bundle install

3. Rodar o instalador
   
   Ruby

   bundle exec rails g spree_static_content:install

   1	bundle exec rails g spree_static_content:install

4. Rodar o servidor
   
   Ruby

   rails s

   1

   rails s

Parte 4: Como customizar o  e-commerce

1. Css customizado (Criar o arquivo e adicionar em “vendor/assets/stylesheets/spree/frontend/bar_color.css”)
   
   CSS

   #spree-header{ background: grey; }

   1 2 3

   #spree-header{     background: grey; }

2. Deface (Criar o arquivo e adicionar em “app/overrides/inicio.rb”)
   
   Ruby

   Deface::Override.new(:virtual_path => "spree/shared/_main_nav_bar", :replace_contents => "#home-link", :text => "<a href='/sobre'>Inicio</a>", :name => "change_link")

   1 2 3 4

   Deface::Override.new(:virtual_path => "spree/shared/_main_nav_bar", :replace_contents => "#home-link", :text => "<a href='/sobre'>Inicio</a>", :name => "change_link")

 

Referências

• Spree 3.1.0
• Spree Static Content 3.1.0
• https://onebitcode.com/dating-in-atlanta-over-60/
• date blink social relationship single dating site usa
• Deface

Conclusão

O Spree é uma plataforma bem legal e você pode criar lojas virtuais incríveis usando ele, se você quiser saber mais, dê uma olhada na documentação oficial (clicando aqui), comenta aí em baixo ou me adiciona no Facebook (clicando aqui).

Se você gostou desse Screencast não se esqueça de se inscrever no canal do Youtube (Clicando aqui) e de dar um Like no vídeo pra aumentar o número de pessoas que vão se beneficiar com o conteúdo dele :), ajuda bastante!

Se você não viu o Screencast da semana passado sobre “Autenticação usando o Facebook com devise + omniauth” dá uma olhada lá (clicando aqui).

Muito obrigado por acompanhar o blog e pelos feedbacks, se você tiver alguma dúvida ou precisar de ajuda comenta aí em baixo.

Um grande Abraço,
Leonardo Scorza.

 

---

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/