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

Sapporo RubyKaigi 2012

http://sapporo.rubykaigi.org/2012/en/schedule/details/47.html

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