intercon 2017 - fluxos dinâmicos no front-end controlados pelo back-end - fuad saud & thales...
TRANSCRIPT
BE LIKE WATERFRONTEND CONTROLLED BY THE BACKEND
Fuad Saud • Thales Machado
INTRODUCTION Nubank Card
• Documents
• Address
• Shipping Address
• Due date
• Pin
• Etc…
Acquisition
On Nubank
= 24 to 37 screens
(and some with more than one state)
INTRODUCTION Nubank Acquisition
Let’s take a deeper look
INTRODUCTION Nubank Acquisition
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
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?
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
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?
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?
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?
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
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
Don't get set into one form, adapt it and build your own, and let it grow,
BE LIKE WATER- Bruce Lee
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
What is a flow
Init
What is a Chunk
Step
Entry Point
GET /api/flows/<flow-name>/owners/<owner-id>
Flow Graph
A B C
G
D E F
H I
Flow Graph
A B C
G
D E F
H I
Flow Graph
C
G
D E F
H IBA
Flow Graph
C
G
D E F
H IA B
Flow Graph
C
G
D E F
H IA B
Flow Graph
C
G
D E F
H IA B
Flow Graph
C
G
D E F
H I
sync
sync
A B
Flow Graph
C
G
D E F
H I
sync
syncchunk
A B
Acquisition Chunks
CPF PasswordRead Only
Chunk
Submit Responses
POST /api/chunks/<chunk-id>
202 Accepted
Response Processing
async
Polling
GET /api/flows/<flow-name>/owners/<owner-id>
202 Accepted
Finished Processing
GET /api/flows/<flow-name>/owners/<owner-id>
200 OK
Flow Redirect
Flow Graph
C
G
D E F
H I
sync
sync
A B
Flow Graph
C
G
D E F
H I
sync
sync
A B
Flow Graph
C
G
D E F
H I
sync
sync
A B
Flow Graph
C
G
D E F
H I
sync
sync
chunkA B
Flow Graph
C
G
D E F
H I
sync
sync
A B
Flow Graph
C
G
D E F
H I
sync
sync
A B
Flow Graph
C
G
D E F
H I
sync
syncchunk
A B
Backwards Compatibility
C
E
D
F GA B
new step type(unsupported by client)
step typesupported by client
supports destination
step?yes!
no
STEPS DEFINITIONS IN DEEP
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
Step Definition in the Backend
JSON Step
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
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
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
Acquisition Steps Read Only
• Do not generate an answer
• Normally used as warnings
• Can be used to establish decision points (flow bifurcation)
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
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)
Acquisition Steps
And it goes on…
Limit range Summary Pin Photo SlideShow
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
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>
Acquisition Numl
QUESTIONS
WE ARE HIRING!https://nubank.workable.com/
THANKS!
[email protected]@nubank.com.br