Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How a small team built an e-commerce service w/ Ruby on Rails and Spree

How a small team built an e-commerce service w/ Ruby on Rails and Spree

Kei Shiratsuchi

September 16, 2012
Tweet

More Decks by Kei Shiratsuchi

Other Decks in Programming

Transcript

  1. How a small team built
    an e-commerce service
    w/ Ruby on Rails and Spree
    4QSFFͰ໿ϲ݄Ͱ
    Πν͔Β&ίϚʔεαʔϏεΛ
    ࡞Δ·Ͱ
    Sapporo RubyKaigi 2012, 2012.09.16(Sun)
    ന౔ ܛ, Shiratsuchi Kei, @kei_s
    Slides in English, Talk in Japanese.
    Thank you for helping English.
    @yuki24 @tenderlove @morgan_randy

    View Slide

  2. @kei_s
    • ന౔ ܛ Shiratsuchi Kei
    • Born in Sapporo!!
    • Web app engineer
    • http://github.com/kei-s

    View Slide

  3. How a small team built
    an e-commerce service
    w/ Ruby on Rails and Spree
    4QSFFͰ໿ϲ݄Ͱ
    Πν͔Β&ίϚʔεαʔϏεΛ
    ࡞Δ·Ͱ

    View Slide

  4. View Slide

  5. OhMyGlasses
    http://www.ohmyglasses.jp

    View Slide

  6. http://www.facebook.com/ohmyglassesjp
    Coupon Code: sprk2012
    !!! 12% OFF !!!

    View Slide

  7. View Slide

  8. •Closed β in December 2011
    •Public release in January 2012
    •Startup, 4 members+
    •Seen on TV, twice
    OhMyGlasses

    View Slide

  9. •Built on E-Commerce framework
    w/ PHP, Magento.
    •No engineers.
    (Yes, I wasn’t there.)
    OhMyGlasses
    Closed β in December 2011

    View Slide

  10. http://www.flickr.com/photos/betsyweber/6719452305/

    View Slide

  11. http://www.flickr.com/photos/betsyweber/6719452305/
    Get the first Feedback
    •“Are we able to sell glasses on the web?”
    •Many concerns.
    customers, products, operation ...

    View Slide

  12. View Slide

  13. Answer a Tough Question
    Use Feedback to evaluate
    Run Iterations before the deadline

    View Slide

  14. •Go with PHP Framework
    •or, rewrite everything with Ruby
    on Rails
    When I joined,
    I make a hard decision ...

    View Slide

  15. View Slide

  16. Spree E Commerce Platform
    Ruby On Rails
    100% Open Source

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Why Ruby/Rails?
    Why Spree?

    View Slide

  21. Why Ruby/Rails?
    •To run iterations faster,
    we need a familiar platform.
    •At least for me, it’s Ruby on Rails.
    •Why? I love coding in Ruby.

    View Slide

  22. Why Spree?
    •First time to develop
    an E-Commerce service.
    •We needed to build well structured
    cart/payment features.

    View Slide

  23. http://www.flickr.com/photos/ucumari/1985214623/

    View Slide

  24. Standing
    on the Shoulders
    of Giants
    http://www.flickr.com/photos/ucumari/1985214623/

    View Slide

  25. Spree’s structure
    Rails
    spree_core
    Ver 1.2.0
    spree_api spree_dash
    spree_promo spree_auth_devise
    spree_cmd
    Ruby

    View Slide

  26. Rails
    spree_core spree_cmd
    Ruby
    spree_api spree_dash
    spree_promo spree_auth_devise
    Spree’s structure
    Ver 1.2.0

    View Slide

  27. spree_api spree_dash
    spree_promo spree_auth_devise
    Rails
    spree_core spree_cmd
    Ruby
    Kaminari
    Paperclip
    ActiveMerchant
    Devise
    Cancan
    RSpec
    FactoryGirl
    Spree’s structure
    Ver 1.2.0

    View Slide

  28. Spree’s Entity-Relationship Diagram

    View Slide

  29. User
    Product
    Cart
    Payment
    Promotion
    Tracking
    Shipment
    Spree’s Entity-Relationship Diagram

    View Slide

  30. http://www.flickr.com/photos/pasukaru76/4370098141/

    View Slide

  31. http://www.flickr.com/photos/pasukaru76/4370098141/
    Inspect Giants

    View Slide

  32. •Only a little code descriptions are
    in the official documents.
    •So, I have to read code.
    Inspect Spree

    View Slide

  33. Inspect Code
    in RubyGems
    $ cd `bundle show spree_core`
    #=> /installed/gems/spree_core-1.2.0
    $ vim app/models/spree/order.rb
    •Add debug code into gem code,
    check changes in the app.

    View Slide

  34. Inspect Code
    def gateway_action(source, action, success_state)
    protect_from_connection_error do
    check_environment
    response = payment_method.send(action, (amount * 100).round,
    source,
    gateway_options)
    handle_response(response, success_state, :failure)
    end
    end
    spree_core/app/models/payment/processing.rb

    View Slide

  35. spree_core/app/models/payment/processing.rb
    Inspect Code
    def gateway_action(source, action, success_state)
    protect_from_connection_error do
    check_environment
    response = payment_method.send(action, (amount * 100).round,
    source,
    gateway_options)
    handle_response(response, success_state, :failure)
    end
    end
    ?
    ?

    View Slide

  36. spree_core/app/models/payment/processing.rb
    Inspect Code
    with tapp
    def gateway_action(source, action, success_state)
    protect_from_connection_error do
    check_environment
    response = payment_method.send(action, (amount * 100).round,
    source.tapp,
    gateway_options)
    handle_response(response.tapp, success_state, :failure)
    end
    end
    Pretty-print object on console
    Pretty-print object on console
    https://github.com/esminc/tapp

    View Slide

  37. spree_core/app/models/payment/processing.rb
    Inspect Code
    with tapp
    def gateway_action(source, action, success_state)
    protect_from_connection_error do
    check_environment
    response = payment_method.send(action, (amount * 100).round,
    source.tapp,
    gateway_options)
    handle_response(response.tapp, success_state, :failure)
    end
    end
    #
    #
    https://github.com/esminc/tapp

    View Slide

  38. http://www.flickr.com/photos/bartelomeus/4184705426/

    View Slide

  39. http://www.flickr.com/photos/bartelomeus/4184705426/
    Stay Focused

    View Slide

  40. •Develop features similar to the
    existing system.(exclude for operations)
    •No need to develop new features.
    (We can do after we ship it.)
    Focus & Ship

    View Slide

  41. One example

    View Slide

  42. Lens selection

    View Slide

  43. Lens selection
    Insert your own step in cart process
    Add lens price to total cost

    View Slide

  44. Insert your own step in cart process
    •Skip the detail :(
    •I implemented it at Spree Ver1.1.*.
    •You can do the same much easier
    with Ver1.2.0.

    View Slide

  45. Add lens price to total cost
    Order line_items
    1 *
    adjustments
    1
    *
    Product A :
    Product B :
    20000 JPY
    23000 JPY
    Shipping :
    Coupon :
    Tax :
    Item total : 43000 JPY
    500 JPY
    -3000 JPY
    (included) 0 JPY
    Total : 40500 JPY
    {
    {

    View Slide

  46. Add lens price to total cost
    Order line_items
    1 * Product A :
    Product B :
    20000 JPY
    23000 JPY
    Shipping :
    Coupon :
    Tax :
    Lens :
    Item total : 43000 JPY
    500 JPY
    -3000 JPY
    (included) 0 JPY
    1500 JPY
    Total : 42000 JPY
    adjustments
    1
    *
    {
    {
    Lens adjustment

    View Slide

  47. •Write minimum code to achieve the
    goal.
    •Find out where to change.
    Focus

    View Slide

  48. And so ...
    •Began rewriting in January 2012
    •Shipped the new version of the app
    at the end of March 2012

    View Slide

  49. How is Spree?
    building an EC web service?
    working for a Startup?

    View Slide

  50. Too Well structured cart/payment.
    Product part could be optional.
    Nice admin interface.
    How is Spree?

    View Slide

  51. •Fun to develop a B2C web service.
    •“Selling glasses with happiness is
    our goal”. Simple.
    How is building
    an EC web service?

    View Slide

  52. •I have a lot of things to do.
    •I can focus on what I really should do.
    •I have direct impact on the direction
    and results.
    How is working
    for a Startup?

    View Slide

  53. Repetition

    View Slide

  54. Answer a Tough Question
    Use Feedback to evaluate
    Run Iterations before the deadline

    View Slide

  55. Standing
    on the Shoulders
    of Giants
    http://www.flickr.com/photos/ucumari/1985214623/

    View Slide

  56. http://www.flickr.com/photos/pasukaru76/4370098141/
    Inspect Giants

    View Slide

  57. http://www.flickr.com/photos/bartelomeus/4184705426/
    Stay Focused

    View Slide

  58. And, We are hiring:
    Engineer, Designer
    Talk to @kei_s, @ikuma, @libkazz
    Thank you!

    View Slide