InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado
•
3 recomendaciones•1,034 vistas
Fluxos Dinâmicos no Front-end Controlados pelo Back-end
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (14)
Similar a InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado
Similar a InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado (20)
Más de iMasters
Más de iMasters (20)
Último
Último (20)
InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado
- 1. BE LIKE WATER FRONTEND CONTROLLED BY THE BACKEND Fuad Saud • Thales Machado
- 2. INTRODUCTION Nubank Card • Documents • Address • Shipping Address • Due date • Pin • Etc…
- 3. Acquisition On Nubank = 24 to 37 screens (and some with more than one state) INTRODUCTION Nubank Acquisition
- 4. Let’s take a deeper look INTRODUCTION Nubank Acquisition
- 5. Acquisition Features • CPF • Password • Account created warning • RG • RG issuer • Marital Status • Cell phone number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due day • PIN • Summary • Signature • Terms n Conditions • Date of birth
- 6. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth WHAT DO THEY HAVE IN COMMON?
- 7. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth THEY ARE SIMPLE QUESTION AND ANSWER SCREENS
- 8. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth DO WE NEED THAT MANY?
- 9. Acquisition Features CPF Password RG CEP Address City State Camera Permission Warning Docs Front Docs Back Selfie Limit range Due day PIN Terms n Conditions Date of birth DO WE NEED THAT MANY?
- 10. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth HOW CAN THE APP DECIDE?
- 11. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth CHANGES ALWAYS REQUIRE A NEW VERSION + PEOPLE UPDATING THE APP
- 12. Acquisition Desired Solution The backend can know all this information • Easy to add, change or remove one STEP in the flow • Easy to do A/B testing • Centralized logic • Changes do not need to depend on customers updating the app
- 13. Don't get set into one form, adapt it and build your own, and let it grow, BE LIKE WATER - Bruce Lee
- 14. Navigational flow • A flow is divided in chunks, which is a set of steps • A flow is non linear, that is, it can have bifurcations • A flow should follow a communication protocol in order to navigate
- 15. What is a flow nit
- 16. What is a Chunk
- 17. Step
- 19. Flow Graph A B C G D E F H I
- 20. Flow Graph A B C G D E F H I
- 21. Flow Graph C G D E F H IBA
- 22. Flow Graph C G D E F H IA B
- 23. Flow Graph C G D E F H IA B
- 24. Flow Graph C G D E F H IA B
- 25. Flow Graph C G D E F H I sync sync A B
- 26. Flow Graph C G D E F H I sync sync chunk A B
- 28. Submit Responses POST /api/chunks/<chunk-id> 202 Accepted
- 32. Flow Redirect
- 33. Flow Graph C G D E F H I sync sync A B
- 34. Flow Graph C G D E F H I sync sync A B
- 35. Flow Graph C G D E F H I sync sync A B
- 36. Flow Graph C G D E F H I sync sync chunk A B
- 37. Flow Graph C G D E F H I sync sync A B
- 38. Flow Graph C G D E F H I sync sync A B
- 39. Flow Graph C G D E F H I sync sync chunk A B
- 40. Backwards Compatibility C E D F GA B new step type (unsupported by client) step type supported by client supports destination step? yes! no
- 41. STEPS DEFINITIONS IN DEEP
- 42. Acquisition Steps Steps • Represent a single piece of information on the flow • Can be a question or an announcement • Can generate an answer • Is the base of all the flow • Is represented as a JSON document
- 43. Step Definition in the Backend
- 44. JSON Step
- 45. Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Text Inputs
- 46. Acquisition Steps Text Inputs • Need to conform to different masks: • Phone • CEP • CPF • Date of Birth • etc… • Can have more than one per Screen • Complex validation
- 47. Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Read Only
- 48. Acquisition Steps Read Only • Do not generate an answer • Normally used as warnings • Can be used to establish decision points (flow bifurcation)
- 49. Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Multiple Choice
- 50. Acquisition Steps Multiple Choice • Can be restricted into one or more selections • A cell click can redirect • Can be shown as a list or a matrix (e.g due day)
- 51. Acquisition Steps And it goes on… Limit range Summary Pin Photo SlideShow
- 52. Acquisition Steps Steps • Represent a single piece of information on the flow • Can be a question or an announcement • Can generate an answer • Is the base of all the flow • Is represented as a JSON document • Can have it’s text fully customizable inside a guideline
- 53. Acquisition Numl • Some are base tags, which define the base color, font and size for that text • The others define the emphasis they will act upon Separated into a semantical meaning <h1> <h2> <h6> <label> <p> <small> ColorEmphasis FontEmphasis StyleEmphasis <i> <em> <b> <span> <strong> <a>
- 54. Acquisition Numl