Aprenda a criar um aplicativo de finanças tipo Quickbooks, usando o editor visual web do Bubble.

Ferramentas como o Quickbooks fizeram possível para donos de negócios rapidamente preparar e enviar faturas para os clientes. Embora você possa comprar essa solução de prateleira, também é possível criar rapidamente seu próprio software de contabilidade usando ferramentas sem código como o Bubble.
Usando nossa ferramenta de programação visual, estamos capacitando criadores de qualquer origem para criar belos softwares. Independente de estar criando uma loja virtual, uma rede social, ou um aplicativo móvel, usamos o pacote de ferramentas do Bubble para criar ricas experiências de aplicativo.
Relacionado: Aprenda a criar qualquer aplicativo web sem programar com a nossa série Como Criar.
Ao longo deste post, iremos descobrir o processo de usar o Bubble para criar sua própria versão do Quickbooks, tudo sem escrever uma única linha de código.
Se você está interessado em criar um dedicado softare de contabilidade, ou apenas interessado em utilizar alguns dos recursos principais do Quickbooks, este guia irá compartilhar como começar a criar os workflows subjacentes para um MVP.
Os passos para criar um software de contabilidade 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. Agora você pode acompanhar enquanto criamos nosso aplicativo juntos.
Faça seu cadastro gratuito no Bubble.
Quando estiver iniciando seu projeto, você pode escolher começar fazendo o protótipo do design do seu aplicativo, ou criar os campos necessários dentro do seu banco de dados.
Neste caso, começaremos usando a ferramenta de design visual Bubble para moldar a interface de usuário da nossa plataforma. Se você está replicando uma versão do Quickbooks, algumas das páginas principais que vai querer incluir são:
- Painel de controle do usuário: Usado para exibir uma lista de faturas do usuários e dados de renda.
- Criar cliente: Uma página para criar um novo cliente.
- Criar fatura: Uma página para criar e gerar uma fatura.
- Página de fatura: Usada para exibir o conteúdo de uma fatura individual.
Uma característica importante no Bubble é a habilidade de enviar dados entre as páginas. Isso permite que você crie uma versão genérica da página, e então mostre dinamicamente o conteúdo relevante do seu banco de dados quando requisitado.
No caso do seu aplicativo de finanças, você só precisa criar uma página para hospedar cada fatura individualmente. Podemos então escrever a lógica necessária para exibir apenas o conteúdo relevante em cada página quando necessário (vamos cobrir isso com mais detalhes em breve).
Configure seu banco de dados
Uma vez que você mapeou a exibição do seu aplicativo, podemos focar nos campos de dados necessários para criar seu software de contabilidade. Vamos depender desses campos para conectar o workflow por trás do seu aplicativo.
Criar um banco de dados no Bubble é um processo simples. Comece listando os seus tipos de dados de nível superior, e então adicione os campos necessários em cada categoria.
Ao replicar o Quickbooks como um MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de Dado: Cliente
Campos:
- Nome
- Endereço de cobrança
- ID da empresa
- Faturas: Lista de faturas. Nota: Criar um campo baseado em lista em um tipo de dados separado permite a integração perfeita de todos os campos de dados relevantes.
Tipo de dado: Fatura
Campos:
- Número da fatura
- Produto/Serviço
- Quantidade
- Cliente – cliente
- Descrição
- Data-da-fatura
- Data-de-vencimento
- Data-de-pagamento
- Status (pago) – sim/não com o ‘não’ como padrão
Criar os workflows para um software de contabilidade
Agora que você estruturou ambos o design e o banco de dados do seu aplicativo, é hora de começar a colocar tudo junto para deixar seu app funcional.
No Bubble, a maneira principal de fazer isso é com workflows. Cada workflow acontece quando um evento ocorre (ex.: o usuário clica em um botão), e então executa uma série de “ações” em resposta (ex.: “inscreva o usuário”, “faça uma mudança no banco de dados”, etc.)
Criando um novo cliente
A primeira funcionalidade que criaremos será um portal para adicionar novos clientes ao nosso banco de dados de faturamento. Isso nos permitirá quantificar e rastrear faturas de clientes específicos.
Na sua página criar-cliente, você pode começar mapeando os inputs relevantes requeridos de cada cliente. Você pode adicionar quantos campos quiser, mas por causa do nosso MVP, iremos apenas incluir os detalhes mais essenciais do cliente.
Uma vez que o botão adicionar cliente é clicado, irá disparar um novo workflow, criando o cliente no nosso banco de dados.
Dentro desse workflow, precisamos criar um item no banco de dados, configurando o tipo de dados para cliente.
Você então precisará combinar os inputs relevantes na sua página aos campos de dados do tipo cliente no seu banco de dados.
Criando uma fatura
Após criar o workflow para um novo cliente, podemos criar uma funcionalidade que gera uma nova fatura do cliente.
O processo para criar esse recurso seguirá um workflow similar àquele que usamos para criar um cliente.
Na nossa página criar-fatura, mapearemos os inputs necessários para uma fatura.
Quando usando um menu suspenso para selecionar um cliente, vamos precisar configurar este elemento para exibir uma lista dinâmica de todos os clientes existentes em nosso banco de dados.
Comece selecionando o tipo de conteúdo desse elemento como cliente.
Agora vamos procurar por todos os clientes no banco de dados, e então escolhemos exibir seus nomes corretamente dentro do elemento.
Após um cliente ser selecionado da lista, podemos usar esse dado para pré-preencher os elementos na fatura, ajudando a agilizar o processo de completar um novo formulário.
Simplesmente adicione o valor da lista suspensa no campo conteúdo inicial (Initial content) do Input, então este elemento irá atualizar dinamicamente cada vez que um cliente único é selecionado.
Uma vez que um usuário adicionou os detalhes relevantes da fatura no formulário, precisaremos gerar a fatura em si. Através deste workflow, seguiremos o mesmo processo que usamos para criar um cliente.
Vamos começar criando um gatilho de workflow quando o botão gerar fatura é clicado.
Depois de optar por criar um item novo, vamos precisar novamente combinar os inputs na página com os campos de dados necessários para nossa fatura.
Uma vez que uma fatura foi gerada, precisaremos exibir o documento final em uma página web.
Adicionando um evento de navegação ao nosso workflow, podemos redirecionar um usuário para nossa página de fatura.
Quando direcionando um usuário para essa página, também podemos enviar com eles os dados de nossas novas faturas. Isso permitirá ao editor do Bubble exibir conteúdo dinâmico de uma fatura relevante.
Exibindo conteúdo de página dinâmica
Uma vez que uma fatura foi gerada e nosso workflow direciona um usuário para a página de fatura dedicada, precisaremos exibir o conteúdo dessa nova fatura.
Quando criamos nossa página de fatura, primeiro necessitamos configurar o tipo de página como fatura. Isso permitirá ao editor Bubble enviar e receber dados de fatura através dos nossos workflows.
Uma vez que o tipo da página foi configurado, podemos começar a exibir o conteúdo dinâmico para a fatura.
Quando adicionando um status de fatura à nossa página, usaremos uma condição para atualizar o texto de acordo. Condições são maneiras poderosas de mudar a exibição dos elementos baseado em comportamentos únicos.
Começaremos adicionando um elemento de texto que rotula a fatura como ‘não pago’.
Daqui, adicionaremos uma condição a esse elemento que classifica quando o status-de-pagamento da fatura é ‘sim’.
Quando essa condição é cumprida, atualizaremos o texto desse elemento para exibir as faturas como ‘pagas’.
Aceitando pagamentos por uma fatura
Quando um cliente receber um link para uma página de fatura, precisamos criar um recurso que lhes permite pagar sem problemas por estes.
No Bubble, é possível aproveitar o poder de vários plugins para facilitar transações de pagamento. Neste guia, utilizaremos o plugin Stripe.js para processar pagamentos de cartão de crédito através do Stripe.
Nota: Após integrar esse plugin, você precisará primeiro configurar suas chaves de API nas configurações do plugin.
Uma vez que adicionamos o plugin Stripe, podemos então começar a criar a interface para nossa solução de pagamento. Para nosso MVP, usaremos um elemento pop-up para exibir um formulário de pagamento.
Elementos pop-up tornam possível exibir informação sem direcionar o usuário para fora de uma página.
No nosso pop-up, mapearemos um formulário de pagamento onde o usuário pode adicionar seus detalhes de pagamento. Neste ponto, também precisaremos configurar o tipo de conteúdo do pop-up como fatura.
No nosso pop-up, também precisará incluir um elemento de token Stripe próximo do formulário de pagamento. Esse elemento não será visível para os usuários finais, mas é essencial para impulsionar uma nova transação no Stripe.
Quando o botão pagar fatura é clicado, criaremos um novo workflow que dispara um pagamento via Stripe para completar o processo de checkout.
Dentro desse workflow, comece selecionando o evento ‘converter cartão para Stripetoken A’. Nesse evento, você precisará configurar seus inputs para combinar com a estrutura de pagamento Stripe.
Pocessando o token da conta do usuário
Uma vez que um cartão foi convertido para token Stripe, você precisará criar um workflow adicional que processa automaticamente esse token de uma conta bancária do usuário.
Usando o evento ‘Stripe.js – Carregar – Criar’, você verificará o token Stripe, assim como a quantia final a ser paga (incluindo a moeda).
Após o pagamento ser processado, precisamos adicionar mais um passo ao nosso workflow que gera mudanças em um item no banco de dados.
O item que queremos mudar é a fatura do grupo principal, atualizando o status-de-pagamento para ‘sim’, e a data de pagamento para a atual data/hora.
Agora que criamos workflows necessários para processar um pagamento, precisaremos voltar para nossa página de fatura e criar um workflow adicional que dispara a exibição do nosso pop-up de pagamento.
Quando o botão de pagar fatura é clicado, vamos acionar um novo workflow para executar.
Dentro desse workflow, começaremos selecionando o evento exibir dados. Isso nos permite enviar dados para um elemento – nosso pop-up de checkout.
O dado que precisamos exibir é aquele da página de fatura atual.
Após enviar os dados necessários, precisaremos exibir o elemento pop-up em si.
Enviando dados da nossa página, permitimos que nosso pop-up mantenha os detalhes da nossa fatura, incluindo o número e quantia da fatura.
Após completar esse workflow, nossa experiência de checkout está pronta para ser usada pelos clientes.
Criar o painél de faturas para um software de contabilidade
Agora vamos criar o último recurso do nosso software de contabilidade: um painel para que os usuários monitorem e meçam suas faturas históricas.
Na nossa página do painel, começaremos adicionando um grupo repetidor para exibir todas as faturas existentes do usuário.
Grupos repetidores são elementos poderosos que podem exibir dinamicamente uma lista de dados do seu banco de dados.
Quando adicionando esse grupo repetidor, primeiro necessitamos configurar o tipo de conteúdo que será exibido – faturas.
Depois, configuramos a fonte de dados, permitindo a exibição de todas as faturas que um usuário criou. Simplesmente configure a fonte de dados do grupo repetidor para procurar todas as faturas.
Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido dentro de cada grade. Simplesmente mapeie a linha superior com o conteúdo relevante que quer mostrar, e então esse elemento poderoso vai popular as colunas restante com base nos seus dados existentes.
Com um grupo repetidor, também é possível criar eventos baseados dentro de cada linha individual. Esse recurso é útil quando criando um botão para ver faturas.
Criando outro evento navegacional onde o botão de ver fatura é clicado, você pode enviar dados da célula atual da fatura para nossa página de fatura.
Abaixo da nossa grade de faturas, também adicionaremos um gráfico de linhas e gráficos de dados adicionais, rotulando a quantia total que um usuário recebe ou tem devido.
Procurando a soma total de todas as faturas que tem o status de pagamento como ‘sim’, exibirá quanto o usuário pagou.
Para encontrar a soma total das faturas devidas, você pode replicar essa fórmula, mas apenas procure por faturas onde o status de pagamento é ‘não’.
Criar gráficos utilizando um plugin em nosso software de contabilidade
Finalmente, também usaremos o plugin de elemento gráfico para criar um gráfico de todos os pagamentos de fatura de um usuário.
Quando adicionando este elemento, comece configurando o tipo de gráfico como gráfico de linha. Você também precisará optar por um tipo de dados agrupado.
Em seguida, você vai começar configurando a fonte de dados do gráfico procurando por todas as faturas cujo status de pagamento seja ‘sim’.
Agora, precisamos rotular qual ponto de dado gostaríamos de agrupar e gravar da nossa lista de faturas pagas.
Optando por agrupar nossas faturas por datas de pagamento, exibirá o valor de uma fatura apenas quando for paga.
Nós também precisamos adicionar o intervalo para quantos dias queremos agrupar essas faturas. Nesse caso, nosso intervalo será 1, registrando-as de dia a dia.
Ao definir as configurações de data, você precisará selecionar uma data de início inicial. Você pode escolher isso selecionando da atual data/hora, e, em seguida, subtraindo o período de tempo que você quer começar a rastrear os dados.
Depois de estruturar a linha do tempo para nosso gráfico de linha, adicionaremos valores pelos quais mediremos esses dados. Nesse caso, queremos medir a soma total da quantidade de faturas pagas.
Se duas faturas de R$1.000 foram pagas no mesmo dia, ele as agrupará em uma única, no valor de R$2.000.
Finalmente, precisaremos verificar os valores de nossos eixos X e Y. Esses serão os valores da fatura e as datas da fatura.
Embora este elemento possa parecer bastante complexo, é uma maneira eficaz de monitorar os dados em tempo real no aplicativo.
Criar recursos adicionais para um software de contabilidade
Agora você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico. Podemos começar a adicionar novas funcionalidades ao nosso aplicativo:
- Crie perfis individuais de clientes para quantificar e exibir uma lista de suas faturas
- Criar uma ferramenta de rastreamento e gráficos para monitorar despesas de negócios
- Usar o elemento gráfico de maneiras únicas para exibir diferentes relatórios de fatura
Veja também:
- [TUTORIAL BUBBLE] Para iniciantes – Como criar uma tabela com cores alternadas no seu aplicativo
- Quanto vale minha ideia?
- Bubble em Português? – Saiba como traduzir o Editor
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-quickbooks-clone/