Como criar um aplicativo de investimentos sem código

Aprenda a criar um aplicativo de investimentos, gestão de portfólio e mercado financeiro, usando o editor visual web do Bubble.

Criar aplicativo investimentos e finanças usando o 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:

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.

Design App investimentos e finanças sem programar

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.
Bubble no code Apple Stocks clone tutorial with user data type and fields

Tipo de dado: Ação

Campos:

  • Preço atual – Lista de preços das ações
  • Símbolo
Bubble no code Apple Stocks clone tutorial with stock data type and fields

Tipo de dado: Preço da ação

Campos:

  • Preço atual
  • Ação original – ação
Bubble no code Apple Stocks clone tutorial with stock price data type and fields

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.

Busca de Ações - Aplicativo Investimentos e Finanças

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.

Exibindo Ações com o Bubble- Aplicativo Investimentos e Finanças

Você então precisará escolher um fornecedor de API – o Financial Data – Latest Stock Price

Fetching stock price data using Bubble’s no-code API tool

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.

Searching for a stocks price in Bubble’s no-code editor

Finalmente, precisaremos confirmar qual dado gostaríamos de busca da API. Nessa instância, será o preço da ação.

Displaying a stocks price in Bubble’s no-code Apple Stocks clone app

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.

Configuring the current time of a stock recorded in an Apple Stocks clone app

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.

Adicionando Ações à lista do Usuário - Criar App de investimentos e Finanças No Code

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.

Salvando Ações na lista do Usuário - Criar App de investimentos e Finanças No Code

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.

Fetching stock data from an external API using Bubble’s no-code workflows

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.

No-code Apple Stocks clone app searching for a stocks symbol

Finalmente, iremos verificar novamente que estaremos gravando o preço das ações.

Recording a stocks price in Bubble’s no-code Apple Stocks clone app

Agora, também iremos ligar este preço de ação à ação que acabamos de criar no passo 1 do nosso workflow.

Connecting a stock to a real-time price in a no-code Apple Stocks clone app

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.

Making changes to an item in Bubble’s no-code database

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.

Saving a stock to a users watchlist in an Apple Stocks clone app

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.

Exibindo Lista de Ações - Aplicativo de Investimentos e Finanças No Code

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.

Exibindo Lista de Ações - Aplicativo de Investimentos e Finanças No Code

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.

Apple Stocks no-code clone app displaying a stock price

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.

Displaying a stock price graph in Bubble’s no-code Apple Stocks clone app

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.

Labelling the expressions of a line graph in Bubble’s no-code tool

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.

Criar Aplicativo de Investimentos e Finanças - Workflow API Back-End

Uma vez ativado, você pode clicar através do seu editor back-end no menu suspenso principal.

Criar Aplicativo de Investimentos e Finanças - Workflow API Back-End

Daqui, podemos criar um novo evento endpoint de API.

Criar Aplicativo de Investimentos e Finanças - Workflow API Back-End

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.

Criar Aplicativo de Investimentos e Finanças - Adicionando Parâmetros

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.

Configuring a custom API parameter to send data in a no-code Apple Stocks app

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.

Fetching the latest stock price using Bubble’s no-code API editor toolset

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.

Creating an event trigger in Bubble’s no-code workflow editor

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).

Configuring the time interval for a no-code workflow trigger

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.

Using Bubble’s no-code workflow editor to schedule an API event

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.

Configuring an API event to fetch stock prices within a no-code Apple Stocks app

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.

Labelling an API event to fetch stock prices in an Apple Stocks clone app

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:

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/

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email

FIQUE POR DENTRO DAS NOVIDADES

Cadastre-se Gratuitamente