Experiências na construção de um home broker

Matuzalém Teles
Tableless
Published in
7 min readJan 7, 2017

Uma das melhores experiências que tive na construção de um sistema desktop, utilizando a tecnologia Electron, em um sistema de simulação de um home broker para o projeto da faculdade de Sistema de Informação. Nele, tive a liberdade de utilizar varias tecnologias, que citarei ao longo do texto.

Vou descrever como foi a minha experiência no desenvolvimento deste programa e os desafios que tive para gerenciar uma equipe de 6 pessoas, pouco experientes nesta área e as falhas que cometemos na apresentação final do projeto.

Primeiros dias

O primeiro dia foi bem intenso e fiquei bem animado com a proposta do professor na construção de um home broker, mas com poucas funcionalidades como: compra e vendas de ações, operar vendido, lista dos ativos, carteira do trader, envio de ordens e entre outros detalhes.

Enfim, separei a minha equipe, composta por 6 pessoas, onde eu era o líder e tinha a tarefa de guiar los. Alguns nunca mexerão com programação a este nível de desenvolvimento. Como estavam no 2º semestre e pegando matéria de Programação estruturada, digo com convicção, que não tinham capacidade para criar algo do tipo, mas conseguimos e alguns se esforçaram, para ajudar de alguma maneira.

Equipe

Mesmo que, praticamente toda a minha equipe, não tinha uma base em programação, diferente de algumas das outras equipes da sala, eu tinha em mãos pessoas com características diferentes, para poder explorar. Algumas delas são: pessoas carismáticas e que falam bonitooo de mais, especialista em matemática e conhecimentos em redes. Contribuíram muito na construção do projeto e na apresentação do mesmo.

Deixo o meu singelo agradecimento por ter conhecido estas pessoas, um muito obrigado a Leonardo Reis (Mestre em apresentação!! 👏🏼👏🏼), Caio Moreira, Rogério Venas, Valmir Wilker, Paulo Natã e Lucas Setubal.

Estudos sobre home broker

Tivemos o auxilio do nosso professor, explicando superficialmente e dando uma visão rápida e básica de como é o funcionamento de uma bolsa de valores.

Comecei a separar as metas de cada membro da equipe para estudar a fundo algumas partes das funcionalidades do sistema e do que eu precisava para iniciar a prototipação do software.

Foram entregues a mim varias informações sobre o que é o home broker (Confesso que até o momento, não fazia ideia do que era e como o mesmo se comportava) e visões sobre a bolsa de valores em geral.

Fase de prototipação

Antes de iniciar a criação da interface e trabalhar na experiência do usuário, gosto muito de ver designers concepts de alguns artistas, para servir como inspiração, acesso bastante e acompanho alguns artistas no Dribbble.

Utilizei o Photoshop CC como a principal ferramenta na criação das telas, mas comecei a utilizar a nova ferramenta da Adobe, o Adobe XD.

Definido o que queria fazer, comecei a elaborar a logo e o nome do projeto, afim de deixar mais profissional. Com algumas inspirações foi definido três variações da logo.

By Matuzalém Teles

Na primeira variação utilizamos na tela de login do sistema, como capa e na entrega de documentos, caso necessitasse. Para a segunda variação, utilizamos o vídeo introdutório e os slides da apresentação. A terceira, veremos mais à frente.

A construção da interface foi pensada em facilitar o uso de um home broker para iniciantes que seja o mais clean possível e de fácil acesso às informações mais importantes.

Foram utilizadas 3 cores principais e 4 cores secundárias para trabalhar em cima da interface e da entidade visual do sistema. Abusei da cor branca em muitas partes do sistema e para diferenciar os componentes, utilizei sombras cinza claro.

Fase inicial da tela de login do Stock Exchange.

A tela de login foi uma das primeiras a ser trabalhada. A tela atual teve pequenos toques, suaves, nos campos e foi adicionando alguns detalhes importantes. (A tela atual pode ser vista, no inicio deste texto)

Logo na horizontal do Stock Exchange

A terceira variação da logo é utilizada nas telas pós login do software.

Depois de elaborar toda a prototipagem do sistema, comecei a criar as micro interações da plataforma. Na abertura de caixas de informações e outros pequenos detalhes para que ficasse tudo muito suave.

Processo de desenvolvimento

Depois de ter compreendido boa parte do funcionamento de um home broker, comecei a criar o ambiente de desenvolvimento. primeiro definindo quais seriam as minhas ferramentas, entre elas o Electron, como plataforma principal por ter a capacidade e facilidade de utilizar linguagens Web em desktops e por ser multi-plataforma podendo, a minha aplicação funcionar em macOS, Windows e Linux.

Optei por utilizar o AngularJS para poder construir uma experiência mais agradável ao usuário e pela facilidade de poder consumir a API (Que falo logo a frente). Pensei em utilizar VueJS por ser bem melhor em lidar com componentes e organização, mas não tinha tanta experiência e decidi não arriscar, por não ter muito tempo.

No meu workflow coloquei o Gulp para automatizar as minhas tarefas com o pre-processador Sass e minificar os arquivos CSS, juntamente com o JavaScript e o AngularJS. Dessa forma, foi possível obter maior flexibilidade para organizar os arquivos e separar por componentes. Também foi utilizado o Yarn, como gerenciador de pacotes, para garantir mais confiabilidade na instalação das dependências do projeto.

Com a arquitetura definida ao lado do cliente, comecei a elaborar como fazer a parte do back-end e do servidor, E decidir tecnologia utilizar. Fiquei na dúvida de construir API Restful com PHP, utilizando a framework Kep, ou construir com a tecnologia NodeJS e utilizar ExpressJS.

Optei por utilizar o NodeJS com ExpressJS por ser bem mais rápido e poder ter um leque de recursos que o Node disponibiliza, Ele garante uma confiabilidade maior nos dados transitados e tem mais facilidade na integração com o Socket.io. Assim, é possível trabalhar facilmente com os dados em tempo real, certificando que o home broker funcione como deveria e que chegue perto da realidade.

Desafios na liderança da equipe

Minha primeira experiência como líder de uma equipe, obtive grandes experiências positivas, mas também negativas para se corrigir.

No meu primeiro momento, tive certas dificuldades para administrar o que cada componente iria fazer, como não tinha tantos recursos em mãos e acabei ficando com a maior parte do projeto sendo esta, o planejamento e desenvolvimento do sistema. Dessa forma, acabei ficando um pouco sobrecarregado, atrapalhando a minha liderança e responsabilidade de passar para cada um e cobrar pelas mesmas.

Ao longo do projeto consegue me administrar neste aspecto. Criei uma pasta no Dropbox Paper, um Changelog do projeto, para que todos acompanhassem e estivessem a par dos avanços. Organizei as metas de cada um, por semana, para que todos ficarem cientes dos seus deveres dentro projeto.

Decidimos que tudo seria pesquisado e se houvesse uma nova ideia a ser trabalhada, colocaríamos no Paper como documento para que pudéssemos discutir.

Apresentação

Para apresentar o nosso projeto segui a linha de uma apresentação profissional de um grande evento, me inspirando nas Keynotes da Microsoft e Apple. Claro que o resultado ficou distante das , mas tentamos chegar perto e conseguimos colocar algumas coisas bem legais.

Primeiro, elaboramos um vídeo introdutório, com a penas 46 segundos, para dar uma visão geral do nosso sistema. Com uma música bem bacana, troca de cenas rápidas e levando quem assiste a entender de modo geral o nosso sistema. Mostramos que a pessoa pode utilizar o nosso sistema em qualquer lugar e que é possível manuseá-lo facilmente.

Para inicio de nossa apresentação, deixamos a frente da sala vazia, sem mesa, apenas projetando os slides na parede e com luzes apagadas. Iniciamos com o vídeo de introdução, sem qualquer componente a frente para falar algo. Logo depois de o vídeo terminar, o nosso amigo Leonardo foi a frente para dar inicio a introdução do programa e falar algo a mais.

Utilizamos os sliders sem textos, apenas com imagens, para podermos explicar com detalhes.

Fizemos um estilo diferente, cada membro da nossa equipe ficou com algumas telas importantes para falar sobre o programa. Sempre que um componente terminava sua apresentação, o mesmo chamava a próxima pessoa a frente e o aplaudia. O seguinte então, dava continuidade a apresentação.

Sendo 7 pessoas para apresentar, que foi onde erramos, algumas pessoas de nossa equipe não souberam explicar bem os sliders e mostrar como realmente o nosso sistema funciona, passando um entendimento diferente em alguns momentos.

Conclusão

Obtive grandes avanços tanto em programação como em liderar uma equipe e tomar decisões importantes no desenvolvimento do projeto.

Aprimorei os meus conhecimentos sobre o uso do Electron e semântica do HTML. Utilizei bastantes Micro interações em toda aplicação.

No final de tudo consegui compreender como funciona a bolsa de valores e o home broker. A partir disso, comecei a investir também. rsrsrs`

Muito obrigado por ter lido até aqui! Se gostou, compartilhe e mostre para os seus amigos como é importante se desafiar com coisas que você nunca criou e se aprofundar em novos assuntos. Se quiser tirar algumas duvidas sobre programação ou bater um papo sobre tecnologias, me siga no twitter ou me mande um email.

--

--

Matuzalém Teles
Tableless

Frontend infrastructure engineer at Liferay and passionate about photographs.