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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Why Ruby/Rails?
    Why Spree?

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. Spree’s Entity-Relationship Diagram

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  33. •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 full-size slide

  34. Lens selection

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. •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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide