Como criar um software de contabilidade sem programar

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

Criar software de contabilidade Quickbooks - Tutoriais 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:

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.
Criar software de contabilidade Quickbooks - Tutoriais Bubble

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
  • Email
  • 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.
Criar software de contabilidade Quickbooks - Tipos de dados e campos

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 software de contabilidade Quickbooks - Tipos de dados e campos

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.

Criar aplicativo de finanças Quickbooks - Sem Codar

Uma vez que o botão adicionar cliente é clicado, irá disparar um novo workflow, criando o cliente no nosso banco de dados.

Criar aplicativo de finanças Quickbooks - Sem Codar

Dentro desse workflow, precisamos criar um item no banco de dados, configurando o tipo de dados para cliente.

Criar aplicativo de finanças Quickbooks - Sem Codar

Você então precisará combinar os inputs relevantes na sua página aos campos de dados do tipo cliente no seu banco de dados.

Criar aplicativo de finanças Quickbooks - Sem Codar

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.

Designing an invoice in Bubble’s Quickbooks no-code clone

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.

Configuring dynamic content of a menu in Bubble’s no-code editor

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.

Displaying dynamic customer content in a Quickbooks no-code clone

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.

Create a new workflow in Bubble’s no-code editor

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.

Create a new invoice in Bubble’s no-code Quickbooks clone app

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.

Sending a user between pages in a Quickbooks no code clone

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.

Sending Quickbook invoice data between pages

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.

Criar software de contabilidade Quickbooks Sem Codar

Uma vez que o tipo da página foi configurado, podemos começar a exibir o conteúdo dinâmico para a fatura.

Criar software de contabilidade Quickbooks Sem Codar

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

Criar software de contabilidade Quickbooks Sem Codar

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.

Adding a payment form to a no-code Quickbooks clone app

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.

Adding a Stripe payment token to a Quickbook invoice payment form

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.

Verifying the card details for a Stripe transaction in Bubble’s no-code workflow editor

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

Processing a payment for a Quickbooks invoice

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.

Making changes to a no-code Quickbooks database

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.

Updating the status of a no-code Quickbooks invoice

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.

Creating a new workflow using Bubble’s no-code editor

Dentro desse workflow, começaremos selecionando o evento exibir dados. Isso nos permite enviar dados para um elemento – nosso pop-up de checkout.

Displaying data on a no-code popup element

O dado que precisamos exibir é aquele da página de fatura atual.

Bubble no-code Quickbooks clone tutorial displaying dynamic invoice data

Após enviar os dados necessários, precisaremos exibir o elemento pop-up em si.

Displaying a Quickbooks checkout element to process customer invoices

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.

Criar aplicativo de faturas sem programar - Tutoriais Bubble

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.

Criar aplicativo de faturas sem programar - Tutoriais Bubble

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.

Criar aplicativo de faturas sem programar - Tutoriais Bubble

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.

Criar aplicativo de faturas sem programar - Tutoriais Bubble

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.

Criar aplicativo de faturas sem programar - Tutoriais Bubble

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.

Using Bubble’s no-code platform to add a line graph

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

Configuring a line graph to display a total of Quickbook invoice amounts

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.

Configuring the date range of a no-code line graph element

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.

Quickbooks no-code clone invoice total displayed on a line graph

Finalmente, precisaremos verificar os valores de nossos eixos X e Y. Esses serão os valores da fatura e as datas da fatura.

Bubble no-code Quickbooks clone invoice graph

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:

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/

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

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

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