Como pegamos uma ideia e criamos vários protótipos em menos de 2 horas.

Como pegamos uma ideia e criamos vários protótipos em menos de 2 horas.

Estivemos em uma Startup que nasceu na John Richard, a maior locadora de móveis do Brasil, há 20 anos no mercado e que é focada em soluções de mobiliário corporativo e residencial para expatriados conduzindo o processo de concepção da plataforma de locação de móveis inovadora no mercado brasileiro. A ideia deles é fazer locação de móveis para pessoas físicas que precisam mobiliar sua residência para eventos passageiros e não querem ter toda a dor de cabeça de comprar, montar e depois vender seus móveis.

A ideia da aplicação, que funcionará principalmente nos celulares, é facilitar, através de uma interface intuitiva e de um jeito prático, a escolha de maneira rápida de todos um móvel, de um cômodo inteiro, ou de uma residência inteira, de maneira prática e divertida, ajustando os produtos de acordo com a necessidade e personalidade de cada um.

E esse encontro proporcionou um processo de concepção diferente. Já se sabia o que a plataforma precisava fazer, mas como fazer isso? Qual o melhor jeito de fazer com que o usuário chegue ao objetivo dele?

Com a participação de dezoito pessoas, sendo nosso Diretor comercial Willian Polis, nosso Desenvolvedor Filipe Versehgi, e os demais, são atuais clientes e formadores de opinião, todos participaram dando ideias e prototipando, dando sua visão e seu pedaço de conhecimento.

Para guiar todo esse processo, foram utilizados alguns métodos e atividades encontrados no Hyper Island Toolbox, uma caixa de ferramentas com alguns workshops e ideias de dinâmicas de grupo, focados em prototipação e inovação.

Dividimos o encontro em três momentos, sendo iniciado por uma breve apresentação, uma quebra de gelo e por final a concepção de uma visão de como seria a plataforma.

Apresentação

O encontro foi iniciado por um coffee break, após isso cada um fez uma apresentação pessoal, onde cada um trabalha e o que faz.

O pensamento divergente e a criatividade

A atividade para abrir o evento dá introdução a linha chamada de “Pensamento Divergente”, a base de muitas metodologias, como o Design Sprint do Google, por exemplo. A ideia da atividade é fazer com que todo mundo fique aquecido para o resto do encontro, estando flexíveis e mais confiantes de que qualquer um pode ser criativo, desde que façamos muitas tentativas e colaboremos uns com os outros.

A atividade é de período curto de tempo com cerca de duração de dez minutos, onde os participantes deveriam fazer o maior número de desenhos de maçãs uma diferente da outra, para mostrar que:

  • Qualidade vem com a quantidade
  • Construir em cima de ideias boas dos outros do grupo
  • Dado várias tentativas, todos são capazes de chegar no resultado igual.

  Quando você coloca para fora um grande número de ideias e em cima dela faz um filtro, para então fazer mais ideias a partir desse ponto de sucesso, e num segundo funil, tenhamos uma ideia muito boa. Ou seja: todos somos capazes.

Concepção

Na reta final do encontro, foi o momento de fato de conceber uma versão mínima do que seria a Startup, com isso cada um focou em dizer qual necessidade mais importante do usuário eles queriam resolver, por exemplo praticidade, custo benefício, valor agregado, mostrar as usabilidades, facilidade, bom humor, etc.

 

 Com isso cada um criou um protótipo, através de várias e várias tentativas em um curto período de tempo, de como poderia ser o aplicativo, passando a ideia do papel para a tela. Esses protótipos então são apresentados, e todos conseguem se basear nas ideias dos outros para então sugerir algo melhor ainda, com os pontos mais fortes de cada um.

#liberdadeparamudar

Finalizamos o encontro fazendo o checkout, ou seja, cada um deixando mensagem do que mais gostou desse encontro, qual foi o ponto alto dos protótipos ou alguma outra coisa que se sentissem a vontade de falar, e todos se sentiram muito criativos e participaram se entregando de fato para essa experiência.

Esse encontro nos deixou extremamente felizes pois o contamos com a participação de empresários, jornalistas, arquitetos, ilustradores, arquitetos de informações, tanto dentro como fora da Startup #liberdadeparamudar, e o sentimento que eles nos retornaram foi de satisfação. E é exatamente isso que a Tegra faz, nós conduzimos o processo de concepção, tiramos o lado mais criativo que há nas pessoas e a partir desses encontros grandes ideias surgem e tornam nosso mundo melhor.

Se quiser conhecer melhor a Jhon Richard: www.johnrichard.com.br

Manipulando estado com Observables e Subjects usando RxJs

Manipulando estado com Observables e Subjects usando RxJs

Qualquer um que já começou a organizar uma aplicação que foi crescendo em tamanho se deparou com esse problema: Ou cada componente seu guarda seu estado e você se encontra em um mar de duplicações de valores, ou você passa prop do pai até o tataraneto só para poder acessar uma ação ou informação nos miolos dos seus componentes.

É por isso que precisamos conversar sobre “Centralização do Estado”, um dos modos de utilizar o conceito do SSOF (Single Source of Truth), e é por isso que existem bibliotecas fantásticas que realizam este tipo de trabalho, como o Flux, Redux, MobX, etc. Todas elas são ótimas libs mas dependem de você aprender uma outra arquitetura.

Se o seu caso é como o meu e do pessoal da Tegra que já trabalha com RxJs, saiba que é possível fazer a sua própria solução simples para armazenar e centralizar o estado da sua aplicação utilizando essa mesma lib.

Quando o React atualiza a interface?

É importante deixarmos bem claro que o React atualiza a interface na tela no navegador (aka Render) em duas situações:

  1. Se as Props do componente mudam.
  2. Se o Estado interno do componente muda.

Teoricamente, se você tem uma Stream de dados e, quando estes dados forem modificados, você pegar esta informação e passar como as Props do seu componente, o seu componente seria atualizado.

Para fazer esse tipo de magia, utilizamos um amigo nosso do RxJs muito útil, chamado de BehaviourSubject.

O que é o BehaviorSubject?

É meio complicado explicar o que é um Subject, mas um jeito muito prático é se você imaginar uma roda de conversa.

  1. Imagine uma roda de conversa entre amigos.
  2. Todos que estão na roda estão “inscritos” no Subject, portanto, recebem as informações que este Subject tem.
  3. Quando alguém fala: “Subject, o próximo assunto é Comida”, o Subject recebe a alteração e envia para todo mundo qual é o próximo assunto.
  4. Agora, todos sabem que o conteúdo do Subject é “Comida”
  5. Quando alguém novo chega e se inscreve no Subject, ele automaticamente recebe o valor “Comida”
  6. Alguém novamente diz: “Subject, o próximo assunto é Protecionismo Florestal”.
  7. Agora, todos, inclusive o recém chegado, recebem que o novo conteúdo do Subject é “Protecionismo Florestal”.

Traduzindo isso em código, seria mais ou menos assim (código do JsBin):

const roda$ = new BehaviorSubject('Animais');
const pessoa1 = roda.asObservable().subscribe(...);
const pessoa2 = roda.asObservable().subscribe(...);
const pessoa3 = roda.asObservable().subscribe(...);
roda$.next('Comida');
const pessoa4 = roda.asObservable().subscribe(...);
roda$.next('Protecionismo Florestal');

O BehaviorSubject faz a vez da Store

Deste modo, podemos utilizar o poder do Subject para realizar tudo o que nossa Store precisa fazer.

  • Nosso componente se inscreve (Subscribe) na Store e mapeia os dados dela para as props.
  • Quando a Store envia um novo valor (o novo estado), o componente é atualizado automaticamente
  • Quando o componente é destruido, ele faz o Unsubscribe na Store.

Criando sua Store com BehaviorSubject

Para criar uma Store que irá armazenar o estado da sua aplicação ou do seu módulo, é preciso que ela tenha alguns métodos básicos, como:

  • Criar a Store com dados iniciais.
  • Atualizar o estado
  • Pegar o estado atual

Portanto, criaremos uma Factory para que sempre que seja preciso criar uma nova Store, seja fácil como encher um copo de água na cozinha da sua empresa.

Algumas informações sobre o código acima:

  • Ele está escrito em Typescript, mas pode ser facilmente reconvertido para Javascript.
  • A const UpdateState aceita tanto um objeto literal ou uma função, assim como o setState do React faz.

Criando sua Store

Agora que temos nossa Factory, podemos criar nossa Store de uma maneira bem simples, e para isso, utilizaremos o exemplo de sempre: Um Contador.

  • Definimos uma Interface e criamos um objeto que representa os dados inicias da Store.
  • Após isso, inicializamos nossa Store e fazemos um destruct do objeto que ela nos retorna, tendo acesso ao Subject e aos handlers para atualizar e ler os dados.
  • Criamos nossas 3 ações: Incrementar, Decrementar e Resetar, todas elas atualizando o estado.
  • Definimos uma constante que contém todas estas ações
  • Exportamos nosso estado como Observable e nossas ações.

Conectando o Container Component na Store

Agora o Container Component só irá conectar as pontas de tudo:

  • Ele, ao montar, irá se inscrever na Store e colocar os dados dela no estado interno dele.
  • Os botões da interface irão chamar ações da const Actions que se encontra na store.
  • Quando as ações executarem, o componente será renderizado novamente.
  • Quando o componente for destruído, cancelamos nossa inscrição da Store.

Criando uma HOC

É possível ver que isso funcionou bem, porém, fica bem cansativo a cada Container, escrever toda essa lógica do Mount, Unmount e Subscribe, correto? Por isso que podemos fazer uma HOC (Higher Order Component) que recebe a lógica para processar mapear a Store e o Componente base, e nos retorna o mesmo componente já conectado com a Store (semelhante ao que o Connect do Redux faz)

O que fazemos aqui é o mesmo que foi feito antes, porém de uma maneira mais genérica:

  • Temos uma função que recebe dois parâmetros: O Componente e a Stream
  • O retorno dessa função é um PureComponent que, no seu DidMount, se inscreve na Stream, e ao ser destruído, cancela a inscrição da mesma.
  • Ele tem dois dados no estado dele: Se a Stream já carregou pela primeira vez e os dados que ele recebe da Stream
  • Ao receber os dados (no Subscribe), ele atualiza o seu estado interno.
  • No seu Render, ele renderiza o componente passado como parâmetro, passando os dados da Stream como Props.

E com isso, podemos simplificar ainda mais no nosso Container Component feito alí em cima:

Demo

Você pode conferir o Demo funcional com o código final em Javascript neste link no CodeSandbox.

Até o próximo,