Aprenda a criar um aplicativo de investimentos, gestão de portfólio e mercado financeiro, usando o editor visual web do Bubble.
Independente de você estar fazendo sua primeira pesquisa de mercado, ou se é um negociante de tempo integral, aplicativos mobile Android e Apple como o Apple Stocks, Kinvo, Real Valor, Gorila Invest e outros apps de investimentos deixaram mais fácil do que nunca tomar decisões bem informadas baseadas em dados financeiros em tempo real.
Se você já esteve interessado em criar seu próprio aplicativo de investimentos, em princípio necessitaria de um grupo de engenheiros de software com experiência em usar APIs avançadas.
Contudo, com o movimento sem código crescendo, nesse sentido, podemos criar seu softwares poderoso e gratuitos sem precisar programar códigos.
A ferramenta de programação visual do Bubble é a porta de entrada para os criadores do amanhã. Podemos usar o Bubble para criar marketplaces, aplicações web, aplicativos Mobile Android e Apple, e até mesmo redes sociais.
Ao longo deste artigo, iremos descobrir o processo por trás de criar um aplicativo de investimentos usando o Bubble. Se você procura replicar completamente o aplicativo, ou apenas tem interesse em algumas das ferramentas chave da plataforma, este guia compartilhará como começar seus workflows iniciais.
Os passos para criar um aplicativo de investimentos, gestão de portfólio e mercado financeiro sem programar incluem:
Índice
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Clique no link para começar, e então poderemos criar nosso app de investimentos e gestão financeira juntos.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do seu aplicativo ou criando os inputs necessários dentro do seu banco de dados. (Nós recomendamos pensar nos seus dados primeiro!)
Nesse caso, começaremos usando a ferramenta de design visual do Bubble para modelar a interface do usuário de nossa plataforma. Se você está criando um aplicativo de investimentos, precisa apenas criar uma homepage principal.
Configurando o banco de dados para criar um aplicativo de investimentos
Mesmo se não finalizou a exibição do seu app, você pode focar em fazer os inputs necessários para alimentar sua aplicação. Vamos depender desses inputs para conectar o workflow por trás do seu app.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Quando criamos com o Apple Stocks como MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Usuário
Campos:
- Ações – Lista de ações. Nota: Criando um campo baseado em lista em um tipo separado de dado permite a integração perfeita de todos os campos de dados relevantes.
Tipo de dado: Ação
Campos:
- Preço atual – Lista de preços das ações
- Símbolo
Tipo de dado: Preço da ação
Campos:
- Preço atual
- Ação original – ação
Criando os workflows necessários para um aplicativo de investimentos
Uma vez estruturados o design e o banco de dados da sua aplicação, é hora de começar a costurar tudo junto e deixar seu aplicativo funcional.
No Bubble, o jeito principal de fazer isso é com workflows. Cada workflow acontece quando um evento ocorre (ex.: o usuário clicou em um botão), e então executa uma série de “ações” em resposta (ex.: “inscreva o usuário”, “faça uma alteração no banco de dados”, etc.)
Procurando por uma ação (dado de uma API externa)
O primeiro recurso que criaremos é uma função que permite ao usuária procurar uma ação individual, e então salvá-la em uma lista de observação.
Na nossa página inicial, começaremos usando um input de texto para criar uma experiência de barra de pesquisa para os símbolos das ações.
Abaixo, também adicionaremos dois inputs adicionais. Estes serão usados para exibir os preços atuais da ação, e a data/hora atual.
A fim de buscar os preços de ações em tempo real no nosso aplicativo de investimentos, precisaremos instalar o plug-in Financial Data.
Nota: Uma vez instalado esse plugin, você também precisará configurar as chaves da API dentro das configurações do plug-in.
Daqui, podemos criar um recurso para exibir o preço atual da ação quando o usuário realiza uma busca pelo símbolo. Dentro da entrada do preço da ação, atualizaremos o campo conteúdo inicial para incluir esse dado.
Quando configurando esse conteúdo inicial, comece selecionando a opção obter dados de uma API externa.
Você então precisará escolher um fornecedor de API – o Financial Data – Latest Stock Price
Em seguida, indicaremos qual dado de ação específica gostaríamos de buscar. Neste caso, escolheremos o valor do elemento de entrada de pesquisa do símbolo da ação.
Finalmente, precisaremos confirmar qual dado gostaríamos de busca da API. Nessa instância, será o preço da ação.
Agora, também precisaremos configurar o elemento de entrada de data/hora para gravar a hora do preço atual das ações.
Dentro deste elemento, atualizaremos o campo de conteúdo inicial para gravar a data/hora atual.
Como não precisaremos exibir este elemento na interface do usuário, também iremos desmarcar a opção de exibir este elemento quando a página é carregada. Isso fará o elemento ficar invisível.
Adicionando uma nova ação a uma lista de observação.
Uma vez que o usuário procurou por uma ação individual, podemos agora criar um workflow que salva este item em sua lista de observação total de ações.
Faremos este workflow criando um gatilho quando adicionar à lista de observação é clicado.
Quando criamos o workflow para este recurso, começaremos optando por criar um item no banco de dados.
Nesse caso, queremos criar uma nova ação. Quando criando esta ação, iremos combinar o elemento de símbolo da ação on-page com o campo correspondente em nosso banco de dados.
Em seguida, precisaremos criar um novo item – um preço de ação.
Quando armazenando o preço atual da ação, necessitamos novamente solicitar dados de nossa API externa.
Como antes, buscaremos dados do fornecedor da API que exibe os últimos preços das ações. O símbolo de ação que estaremos requisitando dados é o valor da nossa barra de busca on-page.
Finalmente, iremos verificar novamente que estaremos gravando o preço das ações.
Agora, também iremos ligar este preço de ação à ação que acabamos de criar no passo 1 do nosso workflow.
E então precisaremos realizar um último passo nesse workflow – adicionando esta ação a uma lista de ações do usuário.
Comece optando por realizar ações a um item no seu banco de dados.
O item que você vai querer mudar é a lista de ações atuais do usuário, adicionando à ela a ação que criamos no passo 1.
Sempre que o workflow executar, ele vai criar uma nova ação em nosso aplicativo de investimentos.
Exibindo uma lista de ações
Após o usuário começar a adicionar ações na lista de observação, precisaremos exibi-la na sua página inicial. Podemos fazer isso usando nosso elemento de Grupo Repetidor.
Grupos Repetidores são poderosas maneiras de exibir uma lista dinâmica de dados do seu banco de dados.
Com o grupo repetidor adicionado, precisamos configurar o tipo de dado como ação.
Com o tipo de dados definido, será necessário identificar qual dado você gostaria de exibir do seu banco de dados. Neste caso, exibiremos todas as ações das ações atuais dos usuários.
Após configurarmos os dados para nosso grupo repetidor, podemos começar a adicionar conteúdo dinâmico que será exibido dentro do elemento.
Simplesmente mapeie a linha superior, e o elemento irá preencher as colunas restantes.
Como os dados de preços de ações e ações individuais são armazenados separadamente, precisaremos usar um input de tabela de pesquisa quando exibindo o preço de cada célula de ação.
Procurando por todos os preços de ações onde as ações originais são as mesmas que as células de ação atuais, podemos exibir o último preço registrado para esta ação.
Adicionando um gráfico através de plug-in
O último recurso que adicionaremos em uma lista de ações dos usuário é um gráfico que mostra o histórico de preços de cada item.
Usando o plug-in de elemento gráfico do Bubble, é possível adicionar perfeitamente um gráfico de linha nas nossas células de grupo repetidor.
Quando adicionando esse item, também precisamos configurar os dados exibidos.
Neste caso, começamos configurando o tipo de dado do gráfico como preço de ação.
Em seguida, configuramos novamente a fonte de dados para buscar por preço de ações onde a ação original é no valor da célula de ação atual.
Usando a plataforma sem código do Bubble para configurar um elemento de gráfico de linha dinâmico.
Finalmente, vamos configurar o rótulo e expressões de valores para exibir os pontos atuais de preço de ação, assim como os pontos atuais de data modificada.
Agora este gráfico de linha irá mostrar a trajetória histórica de todos os preços das ações registradas por data/hora.
Buscando dados de preço das ações (agendando um workflow em uma API back-end)
Uma vez configurado nosso grupo repetidor para exibir uma lista do histórico de preços das ações, precisamos criar em nosso aplicativo de investimentos um workflow que busca constantemente e atualiza estes preços com os novos dados. Isto pode ser realizado usando a ferramenta API Bubble de agendamento.
Usando o editor Bubble, é possível se conectar com endpoints externo da API.
Quando trabalhando com APIs, precisamos quebrar o processo em dois estágios separados.
Primeiro, precisamos criar um evento da API usando o editor back-end do Bubble, depois criaremos um gatilho no editor front-facing que chama por esse evento.
Nota: Você pode acessar o editor de workflow back-end do Bubble após ativar as configurações da API no seu projeto.
Uma vez ativado, você pode clicar através do seu editor back-end no menu suspenso principal.
Daqui, podemos criar um novo evento endpoint de API.
Quando criando este evento, precisamos fornecer um nome para ele. Este nome é o que usaremos como referência para chamar a API nos nossos workflows front-end.
Em seguida, é necessário adicionar um parâmetro customizado à este workflow. Adicionar um parâmetro permite ao editor Bubble interpretar quais dados procurar na API, e a melhor maneira de enviar esses dados a campos relevantes do banco de dados do aplicativo.
Para nossa aplicação, iremos criar um parâmetro customizado chamado ‘ação’ e configurá-lo como dado do tipo preço de ações.
Enviando dados através do aplicativo
Uma vez que um parâmetro foi definido, podemos começar a identificar qual dado específico iremos enviar através da nossa aplicação.
Criando um item no banco de dados, podemos criar uma entrada em nosso banco de dados com o último preço da ação cada vez que a API é chamada.
Quando criamos este evento, precisamos de um novo preço de ação em nosso banco de dados.
Mais uma vez, você também precisa indicar qual símbolo de ação irá procurar na API de finanças. Neste caso, estaremos procurando pelo símbolo de ação que é ligado ao atual parâmetro de ação.
Sempre que o workflow é chamado, ele procura por uma ação específica, buscando o último preço, depois criando uma nova entrada no banco de dados sob o símbolo da ação.
Após criar esse evento da API no nosso editor back-end, podemos terminar este recurso criando um workflow front-end que chama nosso novo evento da API.
Para disparar este evento da API, começaremos criando um workflow do evento que implanta uma ação a cada 5 segundos.
Quando usando este evento como gatilho, é possível configurar manualmente a duração de implante. Para o bem do nosso MVP, teremos esta rotina executando a cada hora (3600 segundos).
Dentro deste workflow, vamos querer usar a agendamento de API para um evento da lista. Agendando a API para uma lista, permitimos que nossa API de finanças puxe dados de todas as ações salvas de um usuário ao mesmo tempo.
Quando criarmos este chamado de API, precisamos indicar qual data queremos passar do nosso evento de back-end. Para este workflow, definiremos o tipo de dado como preço de ação.
Os preços de ações que gostaríamos que nossa API de finanças buscasse são apenas aqueles símbolos de ação que o usuário atual salvou em sua lista de ações.
Finalmente, vamos indica qual evento da API gostaríamos de chamar (busca-preço-ação), e então corresponder nosso parâmetro personalizado às ações em uma lista de observação do usuário.
Após criar este workflow, nosso aplicativo de investimentos irá classificar todas as ações salvas de um usuário, e então buscar os últimos preços de ações a cada hora.
Como nosso gráfico de linha também agrupa preços de ações pelos símbolos, ele vai mostrar um gráfico histórico de preços de ações específicos baseado na linha do tempo de cada solicitação da API.
Criar recursos adicionais para aplicativo de investimentos
Agora que você está familiarizado com a criação de campos de dados customizados e exibição e conteúdo dinâmico, pode começar a criar novas experiências em seu aplicativo de investimentos, gestão de portfólio e mercado financeiro, você pode:
- Usar gráficos diferentes para exibir dados de ações únicas.
- Usar a API de finanças para puxar e exibir mais dados relevantes de ações.
Aprenda ainda mais sobre como criar aplicativos sem programar e o Movimento Sem Codar com os posts:
- Aplicativo Mercado Bitcoin – Criando um APP de Cotações em Tempo Real
- 13 Startups Criadas com Bubble.io
ATENÇÃO: Este é um tutorial traduzido para português a partir do original em Inglês. O Bubble possui dezenas de tutoriais ensinando a criar aplicativos de forma 100% visual, sem precisar digitar uma linha de código.
Acesse aqui todos os tutoriais: https://bubble.io/how-to-build
Acesse aqui a versão original desse tutorial em inglês: https://bubble.io/blog/build-stocks-app-no-code/
