Blog

Postado em em 8 de dezembro de 2023

App de Finanças Pessoais no Power Apps – Crie do Zero!

Aprenda a criar um app de finanças pessoais no Power Apps do zero, com um passo a passo completo!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

App de Finanças Pessoais no Power Apps – Crie do Zero!

Na aula de hoje, vou te guiar na criação de um app de Finanças Pessoais no Power Apps a partir do zero, com um passo a passo completo.

Com esse aplicativo, você terá a capacidade de registrar todas as entradas e saídas de dinheiro, proporcionando um controle total sobre suas finanças.

Utilizaremos o SharePoint para criar a base de dados e, em seguida, exploraremos o Power Apps para desenvolver as telas do aplicativo. Criaremos páginas de extrato e movimentações.

Obs.: Se você ainda não sabe como acessar o Power Apps ou não tem uma conta criada, sugiro que dê uma olhada nessa postagem para realizar essa etapa inicial antes de prosseguir com esta aula.

Criar Site no SharePoint – Banco de Dados

O SharePoint é uma opção bastante prática e útil para utilizar como banco de dados para nossos aplicativos no Power Apps.

Para acessá-lo, basta clicar no menu no canto superior esquerdo dentro do Power Apps e selecionar o SharePoint entre os aplicativos da Microsoft disponíveis.

SharePoint

Dentro do SharePoint, criaremos um ambiente, uma espécie de site, onde registraremos todo o banco de dados deste aplicativo que estamos construindo.

Vamos clicar em Criar site, selecionar Site de equipe e nomeá-lo como Finanças.

Criar Finanças

O nome do site não precisa ser o mesmo do aplicativo, porém, isso facilita a organização.

Além disso, vamos mudar o idioma para Português (Brasil) e avançar. Antes de concluir a criação, você pode adicionar novos membros da sua empresa para gerenciar e ter acesso a esse banco de dados com você.

Depois, basta clicar em Concluir, e nosso banco de dados estará criado e pronto para uso.

Embora o SharePoint tenha sido desenvolvido principalmente para a criação de sites, o utilizaremos como um banco de dados. Para isso, vamos criar uma nova lista. Clique em Novo e selecione Lista.

Nova lista

Vamos criar nossa Lista em Branco e nomeá-la de lista_movimentacoes.

Lista em Branco

Observe que por padrão, o SharePoint também cria uma coluna chamada Título, mas não iremos utilizá-la.

Para armazenar as informações, precisamos criar algumas colunas dentro do nosso banco de dados. Clique em Adicionar coluna, selecione o tipo Data e Hora e clique em Avançar.

Criar Colunas

Essa será a nossa primeira coluna, chamada de Data_movimentacao.

Criando coluna

Feito isso, vamos criar mais três colunas: uma do tipo Moeda, chamada Valor_movimentacao, outra do tipo Texto, chamada Categoria_movimentacao, e por fim, outra do tipo Texto chamada Descricao_movimentacao.

Descricao_movimentacao

Essa é a nossa lista de movimentações. Além dela, vamos criar uma nova lista chamada lista_categorias que só terá uma informação, uma única coluna do tipo Texto chamada nome_categoria.

Diferente da lista de movimentações, em que cada pessoa vai cadastrar suas despesas e receitas, a lista de categorias terá opções fixas. Podemos adicioná-las diretamente pelo SharePoint. Basta clicar em Novo.

lista de categorias

E na janela que será aberta, preencher o nome da categoria.

nome da categoria

O Título pode ser deixado em branco, pois não iremos utilizar essa coluna. Ela está presente porque o SharePoint a cria por padrão.

Como Nome_categoria, iremos criar as categorias de receitas: Salário, Renda Extra e Rendimentos. E as categorias de despesas: Lazer, Moradia, Carro, Educação, Saúde e Outros.

criar as categorias

Essas serão as categorias que exibiremos em nosso aplicativo quando o usuário for registrar suas movimentações.

Criando um Aplicativo em Branco no Power Apps

Para iniciar a criação do nosso aplicativo, na página principal do Power Apps, clique em Criar e, em seguida, selecione Aplicativo em branco.

Aplicativo em branco

Opte pela opção de aplicativo para telefone e atribua um nome a ele, como Tarefas. Sinta-se à vontade para escolher o nome que mais lhe agrada.

aplicativo para telefone

Telas Necessárias para o App de Finanças Pessoais no Power Apps

Com nosso aplicativo criado, podemos definir as telas que utilizaremos nele. A primeira tela, que já estará criada, podemos renomear (clicando duas vezes sobre o nome dela) de Screen1 para tela_extrato.

tela_extrato

Feito isso, podemos clicar em Nova tela e criar mais duas telas para o nosso aplicativo: tela_nova_movimentacao e tela_analises.

Nova tela

Layout Padrão das Telas para o Aplicativo de Finanças Pessoais

Vamos estabelecer um tema e um layout padrão para o nosso app de finanças pessoais no Power Apps. Para isso, clique em Tema e escolha o tema Vermelho para toda a aplicação.

Layout Padrão das Telas

Com o tema definido, podemos adicionar dois retângulos, que já virão na cor vermelha, na nossa tela. Vamos criar um retângulo na parte superior para inserir o título de cada tela, e um retângulo na parte inferior para adicionar algum botão posteriormente.

Para realizar isso, basta clicar em Inserir e depois selecionar Retângulo.

Inserir retângulo

Dimensione os retângulos da maneira desejada para a exibição na nossa primeira tela e, em seguida, copie e cole para as outras duas.

Layout Padrão das Telas

Para adicionar os títulos em cada tela, vá em Inserir e clique em Rótulo de Texto.

Rótulo de Texto

Na tela de extrato, dê o título de Seu Extrato; na de movimentação, Movimentações; e na de análises, Análises. Vamos centralizar o texto, utilizar a fonte Georgia, tamanho 50 e a cor cinza escuro.

telas

Com isso, já estabelecemos a base visual do nosso aplicativo. Sinta-se à vontade para personalizar o seu da forma que preferir.

Tela de Movimentações – Aplicativo de Finanças Pessoais

Vamos agora criar a tela de movimentações, onde o usuário preencherá a data, o valor movimentado, a categoria e a descrição da movimentação a ser inserida.

Essa tela será responsável por preencher a lista_movimentacoes criada no SharePoint.

A maneira mais prática de criar um formulário no Power Apps que preencha uma tabela no SharePoint é através da ferramenta Formulário de Edição, que pode ser adicionada em Inserir.

Formulário de Edição

Após adicionar o formulário de edição, precisaremos conectar nosso aplicativo ao banco de dados do SharePoint. Em Adicionar dados, busque por SharePoint e selecione a opção correspondente.

Adicionar dados

Em seguida, volte à página inicial do site do SharePoint, copie o endereço da página (a URL).

endereço da página

Cole no Power Apps e clique em Conectar.

Conectar

Ao fazer isso, o Power Apps se conectará ao nosso banco de dados no SharePoint e exibirá as listas que criamos. Podemos marcar ambas e clicar novamente em Conectar.

Listas criadas

Em seguida, podemos selecionar nosso formulário e alterar a fonte de dados para lista_movimentacoes. Assim, teremos um formulário criado automaticamente com todas as informações que o usuário precisa preencher.

lista_movimentacoes

Além dos campos necessários para o formulário, o Power Apps criará os campos Título e Anexos, que não utilizaremos.

Para removê-los, clique em Editar campos abaixo de Fonte de dados. Na lista de campos, clique nos três pontinhos ao lado do nome dos campos e selecione Remover.

Editar campos

Também podemos alterar a ordem dos campos; para isso, arraste o campo Valor_movimentacao para baixo na lista.

Ordenando os campos

Selecione novamente o formulário, mude o Modo Padrão para Novo.

Modo Padrão para Novo

Vá em Editar campos. No campo Categoria_movimentacao, altere o Tipo de controle de Editar texto para Valores Permitidos.

Editar texto para Valores Permitidos

Agora, selecione apenas a caixa referente a Categoria_movimentacao, clique em Desbloquear para alterar propriedades em Avançado.

Desbloquear para alterar propriedades

Em Dados, altere Items para lista_categorias e Value para Nome_categoria. Isso fornecerá as opções da coluna Nome_categoria do SharePoint para o formulário.

Nome_categoria

Além de atualizar essas propriedades, modifique a propriedade Update, que será responsável por enviar informações para o SharePoint. Para essa propriedade, insira DataCardValue17.Selected.Nome_categoria.

DataCardValue17.Selected.Nome_categoria

Isso indica que o Power Apps deve pegar o valor da coluna Nome_categoria selecionado no DataCardValue17, que é o nome da caixa referente a Categoria_movimentacao.

Altere também o nome do formulário para form_movimentacoes para torná-lo mais intuitivo.

form_movimentacoes

Agora, clique em Inserir e adicione um botão à tela, abaixo do formulário.

Adicionar botão

Esse botão será responsável por enviar as informações do formulário para o SharePoint. Renomeie-o para Inserir e atribua a seguinte função.

SubmitForm(form_movimentacoes);; Notify("Movimentação Cadastrada! ");; Navigate(tela_extrato)

Função do botão

Essa função envia o formulário via SubmitForm, exibe uma mensagem na tela com Notify e, por fim, muda para a tela de extrato com Navigate.

Para testar se essa tela já está funcionando, podemos rodar o aplicativo clicando no ícone de Play no canto superior direito.

ícone de Play

O aplicativo exibirá a tela do formulário, e após clicar no botão Inserir, mudará para a tela de Extrato.

botão Inserir, mudará para a tela de Extrato

No SharePoint, a informação será registrada corretamente:

Informação registrada

Tela de Extrato – Aplicativo de Finanças Pessoais

Agora que as movimentações estão sendo registradas e enviadas para o SharePoint, precisamos adicionar a funcionalidade de puxar essas informações do SharePoint para o aplicativo através da tela de Extrato.

Em Inserir vamos adicionar uma Galeria Vertical.

Galeria Vertical

Com a galeria adicionada, selecione-a e, em Fonte de dados, defina a opção como lista_movimentacoes.

lista_movimentacoes

Em Layout, definiremos que essa galeria pode exibir Imagem, título, subtítulo e corpo.

Definindo exibição da galeria

E em Editar Campos, escolhemos quais valores queremos exibir na nossa galeria. Como queremos as informações das movimentações, definiremos o título como sendo a categoria, o subtítulo a data e o corpo como sendo o valor.

Editar campos

Para melhorar a visualização do valor dentro da nossa galeria, clique sobre a caixa referente a ele, vá em Função e insira o texto que queremos exibir antes do valor:

"R$ " & ThisItem.Valor_movimentacao

texto que queremos exibir antes do valor

O & usamos para unir o texto R$ com o valor da movimentação.

Podemos fazer o mesmo com o título, adicionando além da categoria o campo de descrição. Selecione o título e, na função, insira a seguinte fórmula:

ThisItem.Categoria_movimentacao & " - " & ThisItem.Descricao_movimentacao

Ajustando título

Agora podemos executar novamente nosso aplicativo de finanças pessoais para testar essa funcionalidade. Após adicionar um novo valor na tela de movimentação, seremos direcionados para a tela de Extrato, com todos os valores cadastrados.

tela de Extrato

Ajuste de Receitas e Despesas – Inserindo Imagem

Nosso aplicativo de finanças pessoais no Power Apps está funcionando corretamente, porém, até o momento não temos nada identificando o que são despesas e o que são receitas dentro dele.

Para resolver isso, vamos começar a inserir as despesas com o sinal de menos () antes do valor e atribuir uma imagem para distinguir as despesas das receitas.

Dessa forma, quando o valor for negativo, teremos a imagem de uma seta vermelha para baixo, e quando o valor for positivo, ele será identificado com uma seta verde para cima.

Para utilizar imagens dentro do seu aplicativo no Power Apps, você precisa primeiro carregá-las para dentro da plataforma. Faremos isso clicando em Mídia e subindo as imagens desejadas.

Carregando imagens

Com as imagens carregadas, podemos definir a fórmula que irá determinar se será exibida a seta vermelha ou verde ao lado da movimentação na tela de extrato.

Então, na tela de Extrato, marque uma das caixas referentes às imagens e defina a seguinte fórmula:

IF(ThisItem.Valor_movimentacao<0; 'seta vermelha '; 'seta verde ')

Função IF

Essa é uma função IF, ela verifica a condição solicitada, nesse caso, se o Valor da movimentação é menor do que zero. Se for verdadeiro, atribui o primeiro resultado; caso contrário, atribui o segundo resultado.

Nesse caso, verificamos se o valor é menor do que zero. Se verdadeiro, exibiremos a seta vermelha; se falso, exibiremos a seta verde.

Resultado das imagens

Botões para Alterar Entre as Telas do Aplicativo de Finanças Pessoais

Para finalizar nosso app de Finanças Pessoais no Power Apps, só precisamos adicionar os botões responsáveis por navegarmos entre as telas do aplicativo.

Podemos inserir um ícone de Adicionar (+) na tela de Extrato para sermos levados para a tela de movimentações.

ícone de Adicionar

Com o ícone posicionado e formatado na nossa tela, vamos adicionar a função responsável por nos levar para a tela de Movimentações:

Navigate(tela_nova_movimentacao);; NewForm(form_movimentacoes)

Função

Com essa fórmula, além de navegarmos para a tela de movimentação, estamos definindo para ela ser carregada com um novo formulário de movimentações para ser preenchido.

Tela de extrato

Para finalizar, precisamos adicionar um ícone na tela de Movimentações que nos permita voltar para a tela de Extrato. Vamos inserir um ícone de seta e definir a seguinte fórmula:

Navigate(tela_extrato)
navigate

Assim, nosso aplicativo de finanças pessoais estará com as duas telas prontas, totalmente funcionais e permitindo navegarmos de uma tela para a outra facilmente.

Telas finais

Conclusão – App de Finanças Pessoais no Power Apps – Crie do Zero!

Na aula de hoje, você aprendeu como criar um App de Finanças Pessoais no Power Apps do zero, seguindo um passo a passo completo!

Com esse aplicativo de finanças pessoais, você será capaz de registrar todas as entradas e saídas de dinheiro, proporcionando um controle completo de suas finanças.

Além disso, é possível personalizá-lo, alterando tanto o layout quanto adicionando mais informações e funcionalidades, tornando sua aplicação ainda mais completa e adequada às suas necessidades.

Hashtag Treinamentos

Para acessar outras publicações de Power Apps, clique aqui!


Quer aprender mais sobre Power BI com um minicurso básico gratuito?