Criando Dashboard de Finanças pessoais com Xamarin.Forms

Fala galera. Hoje vou falar um pouco de como o processo que utilizei para a criação da minha contribuição para o Snppts. Quem me conhece sabe que não sou um mestre das UI, porém tenho me esforçado para melhorar. Então eu aproveitei a oportunidade de contribuir, para me desafiar a idealizar e construir uma UI “legal”.

A primeira coisa que fiz foi decidir sobre qual seria o objetivo do app. E ai foi que lembrei que por várias vezes tive a vontade de criar um app de finanças pessoais meu, feito do jeito que eu acho que se adeque a mim. Então surgiu a ideia de fazer o app MyDimDim.

Com a ideia do app definida, a próxima ação foi definir qual parte dele eu iria desenvolver para gerar a minha contribuição. Assim depois de olhar alguns exemplos de apps de finanças pessoais e também de pensar no que eu gostaria de ter em um app, decidi que iria fazer a UI de dashboard.

Beleza defini a ideia do app e defini qual UI eu iria fazer, e agora? Bom eu tinha que fazer o “projeto” da tela do jeito que eu queria que ela fosse não é? Então foi o que eu tentei fazer. Peguei papel e caneta e bora “desenhar”. Depois de um tempinho pensando e rabiscando, saiu essa maravilha abaixo.

Nesta image está sendo exibida uma folha de papel com o desenho do projeto da tela do app.
Incrível projeto da tela do app.

Meu protótipo ficou lindão, só que não, kkk. Bom agora que eu tinha o “protótipo” era só fazer né. Então fui lá abri o Visual Studio, criar o projeto do app, adicionei o Prism, criei as 3 abas e ai veio a pergunta. Por onde eu começo a fazer a tela? A primeira resposta que veio a cabeça foi, pelo primeiro card o de saldo. Mas ai eu lembrei que eu não tinha escolhido a cor do app. Bom parei, pensei um pouco e escolhi a cor que no caso foi um verde, assim configurei as cores no resource do arquivo App.xaml do projeto.

Agora sim, com o “estilo” do app definido realmente comecei a criar a tela. E aí foi o card de saldo. Para deixar ele um pouco mais bonito eu utilizei o pacote nuget XF.Material Library. Comecei organizando o layout com um Grid e fui adicionando os demais controles e testando, foi ai que o Hot Reload fez a diferença, pois ficou muito mais fácil de verificar se as alterações no layout estão ficando da forma que queremos.

Outra coisa que fiz foi criar as propriedades na DashboardViewController para fazer o binding nos controles da DashboardView.

Com o primeiro card pronto, a próxima ação era criar o gráfico de despesas. Para gerar o gráfico eu usei o nuget do Microcharts. Essa parte até que foi simples, pois o Chart é configurado na ViewModel.

O próximo item foi a lista das movimentações para os próximos 7 dias. Para este caso eu optei por utilizar uma CollectionView com a orientação dos itens na horizontal. Mas Ricardo porque você não utilizou o CarouselView? Bom por que eu testei com o CollectionView e que a meu ver gerou um resultado satisfatório.

E por último mas não menos importante, eu fiz a implementação da listagem dos cartões de crédito. Para isto eu utilizei a mesma ideia das próximas movimentações.

Com este último item e tinha finalizado o que tinha proposto a fazer. Bom eu sei que essa UI pode ser melhorada, tando na ideia quanto no código que constrói ela. Mas realmente fiquei muito contente, não só pelo resultado final e ter minha contribuição aceita, mas principalmente pelo processo de criação. Por mais que tenha sido um processo rápido, coisa de uma noite, me proporcionou uma experiência única.

Nesta imagem temos o resultado final nas plataformas Android e iOS da implementação do projeto, onde pode ser visto o card de saldo, gráfico de movimentações por categoria, lista de movimentações dos próximos 7 dias e os cartões de crédito.
Resultado final

Bom galera por hoje é isso. Espero que gostem desse relato e quem estiver curioso para ver o app é só ir na no meu Github. Até a próxima.

2 comentários sobre “Criando Dashboard de Finanças pessoais com Xamarin.Forms

Deixe uma resposta para Ricardo Prestes Cancelar resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.