O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Fake It While We Make It (Data-Driven Prototyping)

4.108 visualizações

Publicada em

“Can you make this?” Our manager slides over a screenshot from Tron/Oblivion/Any Sci-fi movie with a sticky note that says “our data here” and pitches us an idea.

We are stuck between a cool idea and tons of unknowns. We know that the availability, accuracy, and nature of our data will directly affect the quality and outcome of our project. So how do we begin developing? We fake it while we make it.

This is what the talk is about: the importance of developing with fake data, the types of data we can fake, and some useful strategies for getting up and running with fake data.

http://www.okcruby.org/blog/2015/02/05/february-2015-meeting/

Publicada em: Design
  • Entre para ver os comentários

Fake It While We Make It (Data-Driven Prototyping)

  1. 1. Fake it While We Make it featuring rails-api and ember.js
  2. 2. “Can you make this?” Our manager slides over a screenshot from Tron/ Oblivion/Any Sci-fi movie with a sticky note that says “our data here” and pitches us an idea.
  3. 3. We are stuck between a cool idea and tons of unknowns. We know that the availability, accuracy, and nature of our data will directly affect the quality and outcome of our project. So how do we begin developing? We fake it while we make it.
  4. 4. Designer, “No problem”— makes prototype
  5. 5. We can too.
  6. 6. WHOAMI Ryan LaBouve (@ryanlabouve)
  7. 7. HOLYARCHERS
  8. 8. RyanLaBouve.com
  9. 9. Agenda: I. What & Why II. Our Toolbox III. Practical
  10. 10. What & WHY Part 1 a brief exploration of prototyping
  11. 11. “faking it while we make it” =technical prototyping
  12. 12. Prototyping Defined
  13. 13. Prototype —Greek Derivative— Primitive Form
  14. 14. Low-Fidelity = Primitive Form We usually think of…
  15. 15. Old Version = Primitive Form
  16. 16. Smoke And Mirrors = Primitive Form
  17. 17. Effectively, Prototyping Can Be All Three
  18. 18. In the year 2000, Douglas Caldwell was successfully petitioned by his teenage son to see the film X-Men. Douglas wasn’t really a fan of sci-fi, but wanted to spend time with his son, so he agreed to go. Watching the film, he was amazed to see a solution to a 2,000- year-old problem that he dealt with every day. As Cyclops describes the mission they are about to undertake, the map changes shape, as if it was made of hundreds of tiny pins, each rising and falling to form the topography needed (Figure 1.5). Douglas was that he worked for the US Army Topographic Engineering Center. Part of his job was to create 3D maps and ship them to generals in the field, so they could study the theater of battle and consider tactics. These maps are called “sand tables” because they were originally created by generals thousands of years ago using actual trays of sand. Military leaders still do the same thing when they don’t have a better map on hand DANGER ROOM
  19. 19. Old Product Lo-Fidelity Product Reinventing Sandtables Smoke & Mirrors
  20. 20. Reinventing Lightsabers This only kind of relates…
  21. 21. The Nature of Prototyping
  22. 22. The Goal is not to be Vague
  23. 23. Prototype —> Product It focuses on the core problem and gradually moves towards an ideal solution
  24. 24. Specific Goals
  25. 25. Catch Obvious Mistakes Early goal 1
  26. 26. quickly bridge imagination to potential solutions (aka: cheap wins) goal 2
  27. 27. Reimagine the OU Site (timeline: 1 night)
  28. 28. Modern/Traditional Sturdy and Approachable Techie and Scientific Classic Rock. Magazine Ready. Honest and Trendy
  29. 29. Modern with Traditional Roots
  30. 30. Actually Harvard…
  31. 31. Sturdy and Approachable
  32. 32. Actually Bates University…
  33. 33. Techie and Scientific
  34. 34. Actually University of Michigan
  35. 35. Classic
  36. 36. Actually Cornell…
  37. 37. Rock. Magazine Ready.
  38. 38. This thing…
  39. 39. Honest and Trendy
  40. 40. Australian Catholic University
  41. 41. Avoid Late Blow-Back from MGMT (aka. Swoop & Poop) goal 3
  42. 42. Because, why spend 6 weeks getting an idea rejected from stakeholders? Aka…
  43. 43. swoop and poop —Getting Agile With—
  44. 44. Explore weird solutions goal 4
  45. 45. Because sometimes they are radically better solutions. “If I had asked my customers what they wanted they would have said a faster horse.” — Probably Henry Ford
  46. 46. How this applies specifically to, Application Development, API’s, and Data
  47. 47. Problems & Tools Part 2
  48. 48. Data Tools Rails-API activemodel adapter/serializer db seeds + faker ** (screen scraping) (api scraping) UI Tools Ember.js Fixtures Interactions
  49. 49. Even though this is my toolbox, it’s often 1-to-1 to switch it with others
  50. 50. Common Problems
  51. 51. Data Problems I. States II. Bootstrapping III. Realistic Data IV. Scale V. Relationship VI. Variance
  52. 52. Ember States —vs—
  53. 53. TodoMVC Flat mockup -> Interactive. 1 hour max?
  54. 54. http://todomvc.com/
  55. 55. Fixtures Bootstrapping —vs—
  56. 56. Rails-API Bootstrapping —vs—
  57. 57. Solving the Same Problem With Ember+Rails API
  58. 58. From `rails-api new` to running
  59. 59. Active Model Serializer
  60. 60. Active Model Serializer Before Active Model Serializer
  61. 61. Add to gemfile (throwing faker in too) Generate Serializer (The Serializer)
  62. 62. Active Model Serializer After Active Model Serializer
  63. 63. For the Ember Side
  64. 64. Proxy For Convenience Swap Ember Adapter
  65. 65. Faker Realistic Data —vs—
  66. 66. faker gem https://github.com/stympy/faker
  67. 67. From Fake Company Stuff Fake address information and more
  68. 68. The faker and ffaker APIs are mostly the same, although the API on ffaker keeps growing with its users additions. In general, the only difference is that you need to ffaker gem https://github.com/EmmanuelOga/ffaker
  69. 69. Add some todos to db/seeds.rb Seed Database
  70. 70. Active Model Serializer Fancy Latin Todos
  71. 71. Fancy Latin Todos (in the app)
  72. 72. Rails-API Scale —via—
  73. 73. What if we do 2,000+ todos?
  74. 74. This will begin to change what we’re making
  75. 75. Impacts our Decisions Early On
  76. 76. Other APIs Realistic Data —vs—
  77. 77. Latin Means Nothing (ad maiorem partem populi)
  78. 78. Instead, StackOverflow Articles Read vs. Unread
  79. 79. After adding HTTPart to gem file
  80. 80. AnswerMePlz (powered by stack overflow)
  81. 81. Edge Cases Variance —and—
  82. 82. Exploring Edge Cases http://robots.thoughtbot.com/ember-for-designers-alternate-states
  83. 83. Has Many Relationship —like—
  84. 84. splitticket.herokuapp.com TodoList HasMany Todos
  85. 85. Practical Part 3
  86. 86. Scenario: You are a Pug Enthusiast
  87. 87. And you want to bootstrap an edgy startup…
  88. 88. It’s like tinder meets zazzle for pug-enthusiasts mug-enthusiasts.
  89. 89. PUGMUG
  90. 90. Goals: Fresh Pug Pics General App Flow
  91. 91. rails-api new pugmug-api cd pugmug-api/ rails-api g scaffold --help rails-api g scaffold pug url:string title:string rake db:migrate New API
  92. 92. To Gemfile: gem 'active_model_serializers', '~> 0.8.1' Then rails g serializer Pug url title More Rails…
  93. 93. ember new pugmug-ember ember serve --proxy http://localhost:3000 ember g adapter application (switch adapter to ActiveModelAdapter) ember g resource pugs ember g controller pugs Ember
  94. 94. The End

×