Se você procura ideias para começar uma startup do zero, ou se está pensando em aprender a programar para criar um app que melhore a comunicação e a produtividade na empresa em que trabalha, está aqui uma excelente ideia:
Uma ferramenta para envio de orçamentos por WhatsApp, feita sem precisar aprender a programar!
Criei esse software utilizando o Bubble (uma plataforma para criar softwares semutilizar código), para uma empresa que trabalhava com vendas de bens de alto valor, e agregava muito a experiência do cliente poder montar um orçamento na hora, já com as personalizações, preços, todas as possibilidades de financiamento, e então a grande tacada – para receber o orçamento, o cliente precisa informar o WhatsApp dele.
E assim a equipe de vendas começou a aumentar sua base de leads em uma velocidade astronômica toda vez que participava de um evento.
Se você quer desenvolver um aplicativo para equipes de vendas de carros, imóveis, barcos, seja como um app de vendas por si só, ou como parte de um CRM, veja como fazer este aplicativo utilizando somente ferramentas gratuitas:
Fique à vontade para assistir o vídeo acima, ou ver em mais detalhes no texto abaixo como fiz para criar o aplicativo do zero.
1. Banco de Dados
O primeiro passo, até mesmo para que a gente consiga desenhar o layout, é criar os campos do banco de dados que vamos precisar.
Na aba “Data” do Bubble, digite Carro em New type, e clique em Create (criar). Pronto! Você criou um novo tipo de dado para inserir os carros. Agora insira os campos:
Dentro do tipo de dados “Carro” agora, precisamos criar somente 3 campos (basta clicar em Create a new field):
- Desconto (campo tipo number/número), que é o desconto que pode ser concedido no carro;
- Modelo (campo tipo text/texto), que é o nome do modelo do carro à venda;
- Preco (campo tipo number/número), que é o valor de venda normal do carro.
Pronto, agora que temos o tipo de dados CARRO, com os 3 campos DESCONTO, MODELO e PREÇO, já podemos começar a desenhar o nosso aplicativo.
2. Design / Layout
Primeiro, a tela principal do aplicativo precisa conter esses 12 elementos:
- Cabeçalho – Insira o cabeçalho que desejar, é meramente ilustrativo. Neste caso, veja que reproduzi as mesmas cores do Whatsapp Web, para ficar com um layout bonito. Você pode encontrar o esquema de cores do WhatsApp aqui no site da marca deles (Whatsappbrand.com).
- Botão ➕ Incluir Novo Carro – Esse botão é o que vai abrir o Popup onde iremos inserir os carros para popular o banco de dados. Logo abaixo mostraremos melhor.
- Dropdown Modelo do Carro – Esse Dropdown é onde você irá selecionar quais dos carros que já estão no banco de dados você irá orçar. Type of choices (tipo de escolhas) será “Carro” (o tipo que criamos no banco de dados no passo anterior), a Choices source (fonte das escolhas) será um “Do a search for…” e “Carros”, ou seja, para fazer uma busca por todos os carros no banco de dados, e por fim o Option caption (texto da opção) será “Current option’s Modelo”, ou seja, queremos que apareça ali o campo Modelo do carro, e não o Preço ou Desconto (que são os outros campos do banco de dados para cada carro).
- Input Valor Entrada – Um input de tipo “Currency”, onde o usuário irá digitar o valor da entrada que o cliente quer dar para comprar o carro. Eu coloquei um “Initial content” com o Preço do carro dividido por 10, ou seja, como se fosse um padrão de 10% de entrada:
- Input Valor Normal – Input tipo Currency, em R$, com o Initial Content “Dropdown Modelo do Carro’s Value’s Preco” (a partir daqui já não vou mais postar imagem de todos os inputs pra não ficar tão poluído).
- Input Valor da Entrada – Input tipo Currency, em R$, com o Initial Content “Input Valor Entrada’s value”.
- Input Saldo – Input tipo Currency, em R$, com Initial Content: “Input Valor Normal’s value – Input Valor Entrada’s value”. Note que o “-” é um sinal matemático de subtração. Ou seja, você está simplesmente pegando o valor normal do carro, e subtraindo o valor de entrada, restando o saldo a pagar no financiamento.
- Input Saldo12 – Input tipo Currency, em R$, com Initial Concent: “Input Saldo’s value / 12”. Note que, igual no input anterior, o “/” é uma expressão matemática de divisão. Ela é facilmente encontrada quando você está montando a expressão dinâmica.
- Input Saldo24 – Input tipo Currency, em R$, com Initial Concent: “Input Saldo’s value / 24”.
- Input Saldo36 – Input tipo Currency, em R$, com Initial Concent: “Input Saldo’s value / 36”.
- Input AVista – Input tipo Currency, em R$, com Initial Concent: “Input Valor Normal’s value – Dropdown Modelo do Carro’s value’s Desconto”. Ou seja, calculamos o valor do carro, menos o desconto informado para pagamento à vista.
- Botão 📞 Enviar por WhatsApp – Esse botão irá abrir o Popup para enviar a mensagem por Whatsapp. Abaixo mostro melhor.
Pronto! Layout da página principal criado! Vamos agora criar os 2 Popups que precisamos, um deles pra adicionar carros no banco de dados (ou seja, como se fosse o estoque da loja), e o outro Popup para enviarmos por Whatsapp.
POPUP ADICIONAR CARRO NO BANCO DE DADOS:
- a. Input Carro – Input tipo texto. Onde o usuário irá digitar o modelo do carro.
- b. Input Preco – Input tipo Currency, em R$. Onde o usuário irá digitar o valor normal / preço cheio do carro.
- c. Input Desconto – Input tipo Currency, em R$. Onde o usuário irá digitar o valor do desconto máximo que pode ser concedido para pagamento à vista.
- d. Botão Incluir Carro – É o botão que irá criar um novo CARRO no banco de dados. Explicaremos no 3° passo (Ações e Lógica).
POPUP ENVIAR ORÇAMENTO POR WHATSAPP:
- i. Input Nome Cliente – Input tipo texto.
- ii. Input Telefone – Input tipo texto.
- iii. Link Abrir WhatsApp – Essa é a principal ação do aplicativo. Ela é que vai pegar todos os dados que inserimos até o momento e enviar pro cliente. Vamos descrever passo a passo:
- Apesar de ter cara de botão, este elemento na verdade é um LINK (você irá encontrar na seção Elementos do Bubble).
- Ele irá redirecionar o cliente para o endereço na internet que vamos agora desmembrar passo a passo:
- https://wa.me/55 – o Wa.me é o URL que o Whatsapp disponibiliza para que possamos fazer uma solicitação de mensagem. Ou seja, se colocarmos ali no campo URL do navegador que você está usando o endereço https://wa.me/5511991919191?text=Oi, já abrirá uma tela do Whatsapp com o número de telefone (11) 99191-9191, já com o texto pronto “Oi”. Veja que nosso começo de texto já tem o 55, que é o DDI do Brasil. A partir daí, começamos a personalizar o que vamos enviar.
- Input Telefone’s value – Aqui já é o número de telefone que digitamos no campo Input acima.
- find&replace – Você está vendo 4 “find&replace” (buscar&substituir) logo após o número de telefone, correto? O objetivo é corrigir o número de telefone que o usuário possa ter digitado com caracteres que não são número. Por exemplo, o primeiro Find&Replace procura todos os espaços em branco no campo telefone, e troca por nada, ou seja, ele RETIRA os espaços em branco. O segundo e o terceiro Find&Replace localizam todos os “(” e “)” caso o usuário tenha colocado o DDD entre parênteses, e retira. E o quarto e último Find&Replace localiza todos o “-” caso o usuário tenha colocado o hífen no meio do telefone, e retira também.
- ?text= – aqui é onde termina o telefone e começa o URL, igual mostramos acima.
- MultilineInput TextoZap’s value:formatted as URL – Esse é o texto que consta no Multiline Input (Input com várias linhas) que vamos explicar logo aqui abaixo. Apenas uma observação: veja que ao final do texto colocamos um “Formatted as URL”, que é um processo chamado de URL Encoding que o próprio Bubble já disponibiliza. Basta clicar em “Formatted as…” e “URL Encoded” e ele faz tudo automaticamente. Como não podemos colocar caracteres especiais e espaços no campo URL do navegador, ele converte para códigos automaticamente, trocando, por exemplo um espaço em branco por “%20”, ou um “á” (a com acento) por “%C3%A1”, Na prática, é pra você poder mandar o texto intacto e o Whatsapp entender.
- iv. Multiline Input TextoZap – Aqui está o texto que vai ser enviado para o cliente, e que você pode personalizar como desejar. Você provavelmente já sabe disso mas o texto branco é o texto estático, e o texto azul é o texto dinâmico, ou seja, que irá mudar de acordo com qualquer variável, pode ser o texto de um campo Input, ou um dado do banco de Dados, ou o que desejar. Veja que utilizei emojis para dar uma cara mais nativa do Whatsapp no texto (para puxar um emoji no Windows, basta apertar tecla Windows+.(ponto) , que irá abrir uma telinha com todos os emojis), ilustrei bastante colocando alguns textos em negrito (se você colocar qualquer texto entre *asteriscos*, o Whatsapp deixa em negrito), outros em itálico (colocar o texto entre _underlines_), enfim, o céu é o limite, use e abuse da criatividade e do conhecimento de mercado do usuário para saber qual o formato mais agradável pro cliente receber o orçamento.
3. Ações / Lógica
Na aba de ações, temos somente 3 ações:
- Botão Enviar Whatsapp is clicked – Quando o usuário clicar no botão “Enviar por WhatsApp”, irá abrir o Popup Enviar por WhatsApp:
- Botão Incluir Carros is clicked – Quando o usuário clicar no botão “Incluir Novo Carro”, abre o Popup AdicionarCarro:
- Botão Incluir Carro no Banco de Dados is clicked (Dentro do Popup AdicionarCarro) – Quando clicar no botão para incluir um novo carro com os dados de Modelo, Preço e Desconto no Popup AdicionarCarro, três passos irão acontecer:
- 1. Criar um novo item no banco de dados Carros, com o “Modelo” igual ao Input Carro’s value, o “Preco” igual ao Input Preco’s value, e o “Desconto” igual ao Input Desconto’s value.
- 2. Reset relevant inputs, ou seja, ele irá apagar o texto que foi digitado nos inputs para que, ao abrir o Popup novamente, os inputs estejam vazios.
- 3. Hide Popup AdicionarCarro, ou seja, esconder o Popup para voltarmos à tela principal.
E…. PRONTO!
Temos o aplicativo pronto, com o banco de dados preparado, o layout organizado e as ações construídas. Agora é só clicar no PREVIEW e ver como ficou e se está funcionando!
Ficou com dúvidas? Tem sugestões? Errei em alguma coisa? Fale comigo pelo email renato@semcodar.com.br ou deixe aqui nos comentários e prometo responder!
LINKS:
Acesse aqui o Orçamento Boladão de Carros por WhatsApp (aplicativo pronto) para ver como ficou
Editor do Bubble com toda a lógica por trás do funcionamento do software
Bubble.io – A ferramenta sem código que utilizo para desenvolver os aplicativos web
