Crie um APP de controle de despesas em OutSystems

quanto que foi aquele almoço da semana passada não posso esquecer de pagar a parcela do carro quando será que termina o financiamento do apartamento Meu Deus assim eu vou enlouquecer de tanta coisa na cabeça eu preciso de alguma forma criar um aplicativo para gerenciar as despesas Ah esse é o lado bom de ser desenvolvedor Vamos criar junto comigo um aplicativo fala pessoal é o Andrade aqui na área tudo bem com vocês comigo tá tudo bem e para construir esse aplicativo para gerenciar despesas eu vou usar a out Systems para ajudar você que tá estudando essa

tecnologia mas vale lembrar que isso só tá sendo possível Graças ó eu pus até a camisa deles aqui ó ais Manager a maior parceira out Systems do Brasil você quer trabalhar com out System segue esses managers no Linkedin e fica de olho lá porque eles estão sempre postando vagas sem contar que tem os workshops gratuitos que eles fazem volta e meia então você pode participar E aí e ficar no radar do pessoal da Sis Manager para poder aí quem sabe conquistar a tão sonhada vaga para trabalhar com essa tecnologia então não deixa de seguir esses

managers estão proporcionando eu tô errando o lugar aqui proporcionando esses vídeos de Out Systems aqui do canal Eu tô batendo aqui por causa que eu olho o retorno da câmera e eu acho que tá desse lado mas tá desse lado aqui enfim bom vamos fazer o negócio acontecer aqui o negócio é é Mãos à Obra mãos na massa out Systems na faca na caveira tá que que eu vou fazer aqui eu vou criar esse aplicativo e eu vou eu resolvi dividir ele em camadas tá eu não vou usar o canva lá eá enfim eu vou

dividir ele em camada Então vou separar a parte de core né onde vai ter o banco enfim da parte de fronte que é onde tem as telas tá então vou fazer essa separação então isso já é pensar um pouquinho de como eu posso dividir a minha aplicação em camadas então primeiro eu vou criar a parte de core desse controle de despesa e depois eu vou criar a parte de reactive web que é a parte que tem as telas dessa desse carinha aí tá a gente pode até de repente já criar aqui ó começando ó vamos

vir aqui em new application a gente começa por aqui criando os dois projetos tá então vem ó em from Scratch vou clicar em next E aí o primeiro vai ser o Core então eu vou selecionar o service aqui ó service vou clicar em next e vou chamar ele de controle de despesas Core tá vou criar esse cara aqui eu vou deixar com Underline no Core aqui ó só para ficar mais bonitinho tá e vou criar esse meu módulo aqui Maravilha tá criando repara que ele não tem ó a aba interface porque ele é dedicado somente

para o cor do negócio coração da aplicação né eu vou dar um publish já para essa aplicação já ser instanciada lá e para que depois a gente possa continuar trabalhando nela depois eu volto eu vou criar outra camada deixar criadinha eu volto para começar a desenvolver por ela tá pela pelo backend vamos chamar assim né ó Prontinho vamos voltar aqui ó voltar aqui vamos voltar para cá ele vai aparecer aqui agora né ó carregou onde é que está onde é que está onde é que está me perdi aqui ó veio aqui num tipo de um

vermelhinho né Beleza vou criar uma outra aplicação também Scratch só que dessa vez vai ser reactive web app vou clicar em next e vou chamar ele de controle de despesas tá vou simplesmente chamar puramente assim vou colocar um mesmo tom para ficar parecido asos dois ali tá E aqui eu vou deixar só com esse carinha aqui mesmo então o o o título Sem o sem mais nada é o é a aplicação é a parte do de usuário Vamos pensar assim tá beleza vou fazer a mesma coisa vou publicar para ele já deixar essa aplicação no

ar né já preparada lá já estanci bonitinha tá beleza agora vamos voltar para esse módulo Core aqui que é aqui que a gente vai começar a brincadeira então primeiro vou começar criando o banco de dados tá então venho aqui em data e vou começar a construção vou ter na verdade duas tabelinhas só tá então adicionar uma entidade e vou chamar ela de despesa tá despesa quais os campos que eu vou ter aqui quais os campos eu preciso então eu vou ter hã descrição descrição dessa despesa vou também colocar data tá a data eu vou mudar

aqui ó para date tá date Belê que mais que mais vou colocar também aqui ó o valor né poxa sem valor como é que a gente faz não faz né tem que ter valor pô ô Ô amigo tem que ter valor eh o valor eu vou colocar um decimal Maravilha beleza essa é a minha tabela principal eu vou criar uma segunda tabela que vai ser a seguinte vai ser a tipo de recorrência E aí eu vou explicar o que que eu vou fazer agora então eu vou criar uma uma aplicação onde vai ter a onde

eu vou poder adicionar as despesas E aí eu vou ter a despesa simples que e aquela despesa que eu paguei uma vez e não tem mais nada mas vai ter a despesa recorrente que pode ser ah sei lá mensal ou anual por exemplo ou diária de repente E aí a ideia é eu lanço essa despesa por exemplo parcela do carro eu lanço essa despesa e falo ó tem quero tenho mais tantas parcelas então ele vai criar no na tabela de despesa todas essas despesas lá com as suas datas correspondentes tá então Então a gente vai

fazer isso aqui vamos ter que usar um pouquinho de lógica né ah a tipo de recorrência eu criei errado tá pessoal vou apagar e vou criar como static então Ó tipo despesa Espero que ele não coloque o 01 ali no final não colocou vou adicionar aqui ó os registros o primeiro vai ser diária despesas diárias né todos os dias tem despesa e mensal e anual dependendo da Necessidade aí pode existir né anual beleza a diária dificilmente tem assim né então colocando só por colocar mesmo tá certo Agora tenho que fazer uma coisa importante tá pessoal

como eu tô trabalhando com módulos né separando em camadas eu vou pegar essas entidades e vou vir aqui embaixo ó em Public e vou colocar como Yes ó Yes Deixa eu subir isso aqui ó Yes tá vou fazer a mesma pra despesa ó venho aqui e coloco Yes E aí ó na despesa eu vou vou dizer que ó tem que deixar como Yes aqui esse expose read only que quer dizer eu vou expor mas eu não vou permitir o outros módulos gravarem direto nessa tabela eles vão ter que ter uma um serviço que a gente

vai criar aqui depois tá então dessa forma eu faço essa proteção eu vou fazer um publish porque eu tenho toque perfeito Agora vamos pra parte de criar as ações que a gente vai precisar depois para usar lá na na parte de fronte tá vamos em Logic E aí eu vou usar aqui ações ó do tipo service E aí eu vou criar as ações do tipo service Actions essas ações elas são como se fossem end points né de como se fossem apis tá então é a melhor forma aqui da gente utilizar eu vou criar aqui a

primeira então criar ação e vou chamar de criar eu poderia até fazer o seguinte depois eu faço vai criar despesa recorrente tá que eu ia fazer que eu tinha falado é adicionar um uma folder e colocar aqui ó despesas ou despesa por que isso para se depois eu precisar adicionar mais coisas vai ficar organizadinho aqui né Então essa primeira ação vai ser a para criar eh despesa recorrente mas eu vou criar uma outra que vai ser o criar despesa simples que é aquela despesa única né Por que que eu tô criando duas para não não

colocar muita responsabilidade para uma ação só então eu tô colocando ações com pequenas responsabilidades tá Então essa é uma uma das premissas aí para você não não criar um monstro né um monstrinho aí tá então vamos começar a construir essas essas ações aqui primeira coisa que eu vou fazer nessa de recorrente eu vou adicionar parâmetro de entrada o primeiro parâmetro que eu vou colocar vai ser o despesa tá que na verdade esse despesa é o objeto da entidade ó objeto despesa Então vou vou esperar receber para poder criar essa essa despesa aqui né outro que

eu vou colocar como parâmetro de entrada o tipo de recorrência para eu poder saber qual é o tipo se é sei lá se é AD Ária se é mensal e assim por diante esse cara viu como texto Provavelmente o nome que eu colo tem alguma coisa errada no nome ali do tipo ah eu chamei de tipo despesa né A aqui é tipo recorrência legal acontecer isso porque eu já venho Já arrumo aqui também tá tipo de recorrência agora vai aparecer aqui o tipo que eu quero então vou deixar deste mesmo tipo da entidade tá vou

adicionar mais um parâmetro que vai ser a quantidade vou colocar qtd tá qtd recorrência E aí eu vou mudar aqui para inteiro ou seja quantas recorrências tem tá e vou adicionar mais um parametro Zinho que vai ser vou chamar ele de D zero e esse parâmetro vai ser um boolean que vai permitir verdadeiro ou falso que que é esse D zero é assim imagina que eu tô criando uma uma despesa recorrente e eu quero que essa despesa seja a partir de hoje vai então lancei que a despesa dia 10/10 eu quero que ela comece essa

recorrência ela comece hoje ou não então o d zer vai ser para dizer se eu Quero que comece hoje sen não ele vai começar já daqui a um mês dessa data que eu coloquei tá beleza eu vou partir agora para criar os parâmetros de entrada lá do outro da despesa simples tá então despesa simples eu vou ter dois parâmetros primeiro é a própria despesa tá verificar aqui se ele pegou o mesmo a entidade e a segunda Na verdade eu vou retornar aqui um ID nem precisaria tá pessoal nem precisaria mas eu vou colocar aqui o

ID E aí aí eu vou dizer que vai ser o ID da despesa tá nem precisaria de novo falando tá e eu vou começar construindo despesa simples que é mais rápido tá então o que que o despesa simples tem ele vai criar ele precisa criar uma despesa Então vou vir aqui ó na entidade despesa vou pegar o método Create or update vou colocá-lo aqui aqui no sece eu vou pegar o parâmetro de entrada despesa e depois eu vou vir aqui no assign ó eu vou colocar um assign aqui e vou pegar no ID que é

o retorno né a parâmetro de saída e vou colocar o que retornou daqui pronto o Create despesa simples é só isso basicão tá agora o outro Ah meu amigo minha amiga o outro é é é faca na caveira o outro é faca na caveira por qu vamos lá deixa eu já abrir o outro aqui criar despesa recorrente porque o que que vai acontecer a despesa recorrente nesse momento ela pode ter três opções ela pode ser diária pode ser mensal ou pode ser anual Então dependendo da despesa eu vou mudar a frequência de como que eu

vou pular as datas né então ah se for mensal eu vou ter que pular 30 dias mais 30 dias e assim sucessivamente então eu tenho que fazer uma mudança na hora de gravar Então para simplificar ou melhor para deixar mais organizado Na verdade eu vou criar aqui ó vou criar aqui uma validação então eu vou colocar aqui ó um sutch e nesse sut eu vou verificar o tipo de recorrência E aí dependendo do tipo eu gravo ou não tá ou não não eu falei ou não Ou não falei ou não na verdade eu gravo eu

decido de que forma que eu gravo né E aí para não fazer o negócio ficar grande aqui repetitivo Tá o que que eu vou fazer pessoal eu vou fazer o seguinte ó eu vou vir aqui em server Action eu vou adicionar uma folder aqui chamada despesa E aí eu vou criar aqui ó uma server Action chamada criar recorrência vou começar pelo anual vai anual tá esse método essa ação eu vou ter como entrada Opa despesa do tipo despesa né eu vou ter quantidade quantidade do tipo inteiro certo eu vou ter também d0 para saber se

começa em D zer ou não Lembrando que é buan tá E aí vamos construir já esse cara aqui então Ó aqui nesse meu amiguinho deixa eu dar um zoomzin aqui eu vou fazer o seguinte eu preciso fazer um laço de repetição para gravar esses registros né então para isso eu vou criar uma variável nesse método chamado adivin adivin Qual o nome da variável count e vai ser do tipo inteiro Tá eu vou começar esse count aqui ó então aqui ó vou começar esse assign atribuindo um valor ao count né então ó esse assign aqui eu

vou pegar o count e vou atribuir D zer para Ah eu fiz uma coisa errada Na verdade o d zer eu não vou usar o bulan eu vou usar um inteiro mesmo tá então aqui ó todos os D zeros vai ser um inteiro tá então aqui ó no D zer vai ser é um inteiro tá bom e aí o que que eu vou fazer se se dependendo do que do que foi escolhido lá eu ponho valor ou não ponho né eu ponho um eu ponho zero ou eu ponho um se for zero ele começa hoje

Se for um ele começa na já na próxima né então Eh já resolve o meu problema tá então count vai ser igual a d0 Tudo bem então count começa como D zero agora eu vou fazer o meu laço de repetição e eu não vou usar o for it porque eu não tenho não tenho uma lista então eu vou usar um Ah meu amigo if Pois é vamos usar um if porque aí a gente faz um lacinho de repetição com o if Vamos colocar uma condição zinha aqui a condição vai ser a seguinte Eh caso o

count seja menor ou igual à quantidade pronto tá feito tá matado a charada aí ele repete tá ele vai repetir e vai gravando o que for necessário eu vou pegar aqui vou colocar um Create our update Maravilha vou puxar esse cara para cá tá E aí eu vou editar esse carinha aqui ao invés de eu colocar despesa aí eu vou fazer um truque ó vou vir aqui tem um sinalzinho de mais vou expandi e vou preencher manual primeiro deles eu vou colocar o id como New identifier a descrição eu vou colocar despesa pon descrição a

data eu já vou mexer e o valor vou colocar valor aí eu vou abrir aqui ó clicando duas vezes sobre data para poder fazer o seguinte na data eu vou usar uma função chamado add esse aqui é o de de anual add ear ou seja ele vai adicionar anos a o quê a despesa pon datata então ele vai adicionar ano na data e eu vou colocar aqui o count então o contador vai ser o grande responsável por adicionar anos então aquilo que eu falei se o d zer começar com zero ele não vai adicionar nenhum

ano na data vai ser a data escolhida se ele começar com um pronto ele vai p a a data e colocando um na data né perfeito maravilha então cliquei aqui em Ok o próximo passo vai ser colocar um assign vou pegar e vou puxar para cá e para cá então ele faz o loop o que que eu vou colocar nesse assign eu vou pegar na variável e vou falar assim olha count É iG a count mais 1 Pronto ele vai somar um a count e vai continuar o processo que tem tá ótimo legal disso é

que eu preciso de mais duas ações como essa mas eu vou o qu control ctrl v control V agora eu vou só alterando então anual mensal e o outro vai ser o diário perfeito que que eu tenho que mudar para cada um deles só aqui ó então eu venho aqui no data e ao invés esse aqui é o mensal ou é o diário não esse é o diário então aqui eu vou colocar add Days e o mensal eu vou colocar aqui ó nem vou abrir ó vou por aqui mesmo ó add months não tem agora

sim não tem aquele ó tá perfeito então criei aí três métodos pronto Maravilha e já tá foi pau no gato né que que a gente tem que fazer agora agora a gente tem que voltar naquele nesse service Action vou criar resposta recorrente e vamos fazer a ligação então eu vou precisar aqui ó do anual do diário e do mensal Vou tirar isso aqui daqui chatinho e vou ligar esse Switch esse Opa esse switch e esse Switch aí eu vou colocando as condições já já mas já para deixar bonitinho Depois daqui eu vou colocar um end

e vou fazer assim ó piic pique e Pique Tá bom agora eu tenho o que colocar a condição então clica no Switch a condição aqui embaixo Qual que é a condição vou até abrir aqui a condição é a seguinte se o tipo então eu cliquei no primeira condição que é o anual se o tipo de recorrência ID for igual ao entities pon tipo recorrência ponto anual significa que é anual eu até posso colocar aqui ó anual tá Opa acabei não colocando na verdade aqui na Label anual tá aí fica mais bonitinho aqui é só comparação

né tipo de recorrência tipo de recorrência tá então se um for anual cai para lá o dois vai ser bem parecido Então vou copiar vou colocar aqui e vou trocar de anual para diária e o outro vai ser a mesma coisa só que eu vou colocar aqui para mensal tudo bem maravilha agora aqui eu tenho que atribuir os valores né então despesa eu tenho quear ligar com despesa e e o restante né então despesa eu vou pegar o parâmetro de entrada desse service Action quantidade a mesma coisa e d zer a mesma coisinha Tá bom

então o que ele receber ele passa paraa frente vou fazer para todos os outros aqui ó quantidade de zero próximo despesa quantidade e de zero Prontinho temos aí já o service Prontinho eu vou publicar e agora é partir pra camada visual da nossa solução então ele tá publicando ali deixa ele terminar e a gente continua maravilha vamos vamos lá PR para outro pro outro módulo no outro módulo a primeira coisa que a gente vai fazer vai vir aqui em gerenciar dependências e vamos procurar aquele módulo lá que a gente acabou de criar que chama-se controle

de despesa Core ó aqui ó e vou selecionar tudo eu quero usar tudo vou clicar em aplicar Ele trouxe para cá agora então se a gente vi aqui ó controle de despesa ó o nosso amiguinho aqui se virem lógica ó os nossos amiguinhos aqui ó aqui não aparece né porque eu não deixei exposto então só aparece esse aqui aqui ó despesa ó eles aqui ah gente não é feitiçaria é tecnologia pô vamos lá vamos começar a construção primeira primeira coisa de tudo vou criar uma tela Então vou pegar aqui ó screen vou pum colocar aqui

e vou chamar ela de despesas tá ah le Por que que você não fez em mobile e tal é igual o processo vai ser o mesmo tá muito parecido aqui eu vou escrever despesas eu vou colocar aqui uma table né para trazer os dados vou colocar um botão e vou colocar um popup para inserir as despesas aí nesse popup vai ter um fru fruin tá então para começar eu vou vir aqui ó em despesas e vou clicar com o direito e vou falar ó fat data from Database venho aqui e vou puxar o meu amigão

lá ó o despesas e vou puxar ele para cá ó plá trouxe volto pra minha tela tenho ele aqui e aí eu vou fazer o seguinte eu vou colocar aqui ó uma table tá E vou pegar esse get despesa e vou arrastar para cá pronto Se eu precisar mudar alguma coisa de lugar eu mudo senão tá tudo certo e bola pra frente já vou adicionar aqui um popup Então cadê popup Aqui ó vou adicionar um popup tá um popup vai precisar de uma variável para exibi-lo ou não então vou criar aqui ó variable local e

vou colocar assim mostrar opa não renomeou mostrar popup Isso aqui vai ser um bullan tá E aí eu venho no popup e já digo olha mostrar popup Eu uso esse cara ah uma coisa que eu preciso fazer mostrar popup que já começa como falso tá bom começa como falso para fechar o popup você vem aqui ó colapse e vamos colocar já um botãozinho aqui ó botão ó Puxa um botão coloca aqui esse botão vai ser o add tá add despesa despesa ou incluir despesa ionar despesa vou dar um duplo clique e nesse cara eu vou

pedir para abrir o popup então basta a gente pegar uma assign e fazer o seguinte vir aqui ó mostrar o popup e mudar para true com isso ele vai fazer o popup aparecer é bem tranquilo tá lógica de programação se você não estudou isso estude Não deixe de estudar já falo pular etapa dificulta mais do que te ajuda Tá bom Agora vamos fazer o popup né o formulário desse popinho aqui para isso eu vou vir aqui ó eu vou vir em data e vou criar uma estrutura tá vou vir aqui eu já vou explicar o

porqu vou criar uma estrutura essa estrutura vou chamar de criar despesa vou vir aqui ó adicionar estrutura né adicionar tributo e vou começar a adicionar atributos aqui então vou colocar um atributo de data mudando aqui para date tá vou criar um atributo inscrição tá texto mesmo vou criar um outro atributo que vai ser de o valor então você tá reparando o que que eu tô fazendo eu tô criando como se fosse uma classe né para você que entende sobre orientação objeto e uma classe um modelo né de alguma coisa muito similar ao modelo da da

entidade onde vai gravar os dados tá então é isso que eu tô fazendo aqui esse aqui é um decimal tá bom ah que mais eu vou adicionar tudo que eu preciso na aquele formulário então eu vou colocar aqui ó eh recorrente esse recorrente eu vou dizer que que é bulen Tá ok então vou colocar inclusive que ele começa como falso aqui ó valor padrão começa como falso depois eu vou adicionar um próximo que aí vai ser o tipo tipo recorrência E aí o recorrente ele vai ser um cheque Zinho se ele clicar em recorrente Elí

vai aparecer para ele selecionar o tipo de recorrência Essa é a minha minha ideia aqui tá vou adicionar mais um cara que vai ser a quantidade tá então tenho que mudar aqui para inteiro então se ele clicar no recorrente habilita para ele selecionar um tipo de recorrência a quantidade e vou adicionar já aqui um ah D zer tá esse esse D zer sim é que é bullan que foi o que eu tinha me confundido lá no outro tá por padrão vem falso E aí se ele selecionar significa que é d zero e aí ele manda

Zero ao invés de um tá agora a gente tem esse modelo vamos lá pro popup então clica aqui abre o popup e vamos colocar um formulário aqui ó então ah vou colocar primeiro um texto aqui qualquer ó deixa eu ver se ele deixa a às vezes ó popup dá esse problema tá vendo ó é um bugzinho aqui ó que a gente tem ó eu tô tentando colocar ele aqui em cima do pop-up ele não vai então eu vou fazer o seguinte popup selecionado pera aí ó ó o outro bug aí out System Me ajuda aí

hein oh meu deus selecionei o popup interface aqui ó aqui eu vou adicionar ó ah vou vir aqui inserir e vou colocar um contêiner porque agora eu vou conseguir colocar já vou colocar um segundo contêiner aqui também então tenho dois contêiners no primeiro eu vou colocar um texto e vou dizer que é o criar despesa nesse texto eu posso inclusive vir aqui dar uma estilizada aumentar o tamanho da fonte sei lá 18 colocar bold enfim faço o que eu quiser no segundo contêiner eu vou trazer um forme para cá ó esse formulário vai servir de

molde ali para eu poder usar a minha estrutura só que para eu poder usar aquela estrutura eu preciso criar uma variável Então vou vir aqui ó adicionar uma variável local e vou chamar de criar despesa ele Já identificou a estrutura para mim se ele não identificar você tem que selecionar senão não vai funcionar tá tá pega essa variável e arrasta ela aqui para dentro do formulário até ficar azulzinho soltou ele vai montar o formulário pra gente ó basicamente do jeito que a gente quer a única coisa que ele não trouxe foi o tipo de recorrência

isso a gente vai ter que fazer agora tá então já para mexer aqui ó eu vou pegar o contêiner que Abraça a quantidade e vou fazer assim ó vou diminuir aqui para uns três tá esse contêiner aqui do d zer eu vou diminuir ir aqui para dois tá E aí para facilitar eu vou vir aqui na árvore de elementos e vou trocar a posição desses caras então aqui ó vou identificar onde é que tá os contêiners ó então o d0 tá aqui e eu vou puxar ele para cá então vai ficar D zer quantid e

tipo de recorrência e depois quantidade eu vou até duplicar aqui esse esse carinha aqui ó ah copiar não dá para copiar não dá para duplicar né e colar vou pegar esse contêiner e vou arrastar ele para cá E aí eu vou apagar esse checkbox aqui tá aqui eu vou mudar para tipo de recorrência o título e esse contêiner eu vou ampliar ele para ficar maiorzinha tá agora eu preciso trazer um elemento para cá que é uma listagem E aí para isso eu também tenho que fazer a listagem Então vou vir aqui ó com o botão

direito Fit from Database e vou buscar agora H os tipos de recorrência Então vou pegar aqui ó arrastei para cá voltando lá paraa minha telinha aqui na minha telinha ó que que eu vou fazer eu vou puxar aqui ó esse tipo de recorrência deixa eu ver se ele vai deixar eu fazer assim ó se ele deixar vai me facilitar opa deu um crepe aqui né Jesus eu vou colocar na mão tá eu vou fazer assim ó vou pegar aqui um drop Down ã drop Down aqui ó drop Down Cadê você e vou colocar dentro desse

contêiner ó Show perfeito com esse drop Down agora eu venho eou configurar onde que ele vai guardar os o que for selecionado ele vai guardar no criar despesa tipo de recorrência ID Tá qual que vai ser a lista que ele vai mostrar desse combobox vai ser o tipo de recorrência list E o restante já tá já foi já tá ok o que eu preciso aqui é essa Lab eu tenho que mudar aqui qual que é o IDG que ela tá presa né Então tá presa ao drop Down Tá bom então basicamente a gente já fez

o que precisava aqui eu vou puar esse contêiner para cá pronto então ficou de zero tipo de recorrência e quantidade quando eu selecionar tipo de recorrente recorrente eu quero que habilite essa opção aqui embaixo Então olha só o que eu vou fazer ó eu vou pegar esses três contêiners aqui ó e vou selecionar os três juntos e vou falar ó coloque todo mundo dentro desse contêiner ó e aí eu vou dizer que esse contêiner que tem os três ele vai ser visível somente se o criar despesa recorrente for true não precisa nem colocar nada ele

já entende ele já Olha o true e considera o true tá for verdadeiro e aí com isso ele vai fazer aparecer esse cara então se ele for falso ele deixa o carinha sem aparecer dá duplo clique aqui no vou mudar o nome aqui para gravar e vou dar um duplo clique no gravar perfeito aí aqui ó nesse gravar ele já tem o o validation do form maravilha agora eu vou fazer colocando um para começar um if aqui e o if eu vou fazer a seguinte pergunta o criar despesa recorrente é é recorrente melhor dizendo se

sim eu vou pegar o criar despesa recorrente meu serviço e vou ligar ele aqui sen não é uma despesa Simples então eu ponho ali para baixo tá o despresa simples eu tenho que passar a despesa Então cadê a despesa Cadê a despesa aí é que tá eu vou ter que fazer a ligação aqui Manual então ó abre aqui e vamos lá no identifier descrição é igual a descrição data é igual a data e valor é igual a valor pronto Já tá feito tá recorrente vou fazer a mesma coisa despesa dá para eu selecionar não dá

então eu vou abrir aqui a despesa vou colocar ID no identifier descrição descrição data data valor valor tem que fazer assim tá não tem jeito tipo de recorrência tem aqui ó quantidade de recorrência tem aqui e o desero que a gente vai ter que fazer um negocinho Então vamos abrir o dzer e vamos colocar aqui um if ó porque o deer da tela é um buan né então vou colocar um if e vou olhar pro d0 da tela aqui ó d0 dentro desse if Então se o d zer for verdadeiro Que número que eu passo

zer sen não eu passo um é só isso então se for zero zer for verdadeiro passa zero senão eu passo o número um pra frente depois depois eu preciso atualizar os dados da tela então eu vou dar um refresh data na no get despesa pronto e aí agora eu vou ligar esse cara para cá pum então saiu dali veio para cá atualiza a tela e o último passo que não pode faltar é mostrar o pop-up igual a falso para ele tirar o pop-up da tela se eu não esqueci de nada a gente já tem o

negócio Funcionando aqui tá então eu vou dar um publish para fazer o teste e dar uma revisada caso eu tenha esquecido de algo bom vamos testar mas antes disso se você não se inscreveu no canal depois de uma aula como essa aqui ainda tem mais um pouquinho que eu quero fazer mais um detalhe para deixar mais completinho o negócio Pô você tá me sabotando tá me sabotando Então se inscreve no canal ativa as notificações dê o seu like compartilhe bastante bastante bastante Tá bom então beleza só para você tomar um susto vamos lá vamos testar

aqui ó vamos abrir ó caiu na minha outra tela deixa eu trazer para cá e vamos lá vou adicionar despesa e agora vai funcionar o teste todo então vou colocar aqui despesa dia 7 descrição sei lá é almoço almoço valor 45 recorrente não vamos gravar gravou tá demor um pouquinho porque eu tô usando a a internet para gravar aqui então demora um pouquinho mesmo vou adicionar despesa eu poderia depois fazer um limpar esse formulário aí depois você pode fazer mais caprichadinho tá vamos testar tá aqui o recorrente ó habilitou aqui embaixo eu vou colocar aqui

carro tá o carro sei lá 560 recorrente Sim d0 vou colocar não e recorrência mensal quantidade ã 32 tá e vou mudar aqui sei lá data dia 15 tá e vou gravar ó foi até mais rápido agora ó lá o que ele fez ó 15 de Janeiro 15 de fevereiro 15 de Março par Parará bem legal isso né pessoal bem legal então tá funcionando o que que eu quero adicionar aqui um filtro para não mostrar tudo junto para mostrar por mês que você acha será que você merece Diz aí comenta bastante aí se você merece

eu fazer isso para você aqui para te mostrar mas você merece sim pô você me segue aqui acompanha todo o conteúdo já compartilhou para um monte de gente já deu o like já tá inscrito já pediu inscrição para outras pessoas certeza vamos lá ó vou voltar aqui na tela vou aqui na árvore na árvore esse table eu vou adicionar aqui colocar dentro de um contêiner e vou adicionar ao m aqui outro contêiner tá e vou puxar esse contêiner lá para cima esse contêiner eu vou fazer o seguinte ã que que eu vou que que eu

vou fazer não sei que que eu vou fazer ã vou adicionar dentro dele mais um mais dois contêiners tá ó T dois containers o primeiro eu vou colocar aqui com sei lá oito e o segundo com quatro e aí vai ficar um do lado do outro se depois se eu quiser colocar alguma coisa aqui beleza mas aqui eu vou colocar um elemento que vai ser um elemento de meses ó ó Mouth picker vou colocar esse elemento aqui ó ó que lindão Então esse cara aqui ele só seleciona meses né Então essa é a ideia então

só só vou selecionar ano mês e ano né E ae vai eu quero que ele filtre por mês e ano tá aqui eu vou precisar criar um evento Então eu vou pedir para ele criar ó um New client tá criou daqui a pouco eu volto aqui tá deixa ele por enquanto aí vamos voltar pra despesa que eu quero fazer um ajuste adicionar um negocinho aqui ó eu vou adicionar um filtro nessa consulta aqui tá no despesa aqui então eu vou criar uma variável local chamado data selecionada E aí com essa data selecionada eu vou vir

aqui no get despesa e vou vir aqui em filtro ó e vou adicionar um filtro aqui ó vou colocar o seguinte ó se a data pera aí aqui ó data criar aqui ó despesa ponto data se se o se a data da despesa for maior ou igual que a data selecionada eu quero pegar o a data toda tá então eu quero fazer essa brincadeira aqui quero que ele pegue a data o mês mês completo tá então ah se a data selecionada for for maior ou igual e e eu vou pegar o Range o Range aqui

eh se a despesa data for menor ou igual vou pular a linha aqui que eu vou ter que fazer um uma continha de data aqui eu vou usar aqui um date time porque o que eu vou usar al ele vira um date time tá aí eu vou fazer o seguinte ó adicionar dias vou tentar deixar isso claro para vocês tá adicionar dias e vou adicionar mês agora vou tentar explicar já já para vocês tá nesse adicionar mês eu vou pegar data selecionada tá data selecionada e adicionar um mês então peguei a data e adicionei um

mês vamos supor dezembro Então adicionei um mês ele foi para janeiro então ele vai executar o que tá por dentro aqui matematics aqui ó por dentro tá então ele adiciona o mês foi para Janeiro tudo bem beleza aí eu vou vir aqui em dias ó vou vir aqui em adicionar dias e ao invés de de eu colocar um eu vou colocar menos um então ele vai em janeiro e ele vai voltar um dia ou seja vai ser o dia o último dia do ano daqu mês da data selecionada mais ou menos essa lógica que eu

usei aqui espero não acho que vai funcionar assim tá então ele vaiar dia 1 e dia e dia 30 ou dia1 e vai pegar só o que tá dentro desse Range tá fazer a seleção oal é que essa data selecionada Viesse a dia um da data corrente né então enfim depois a gente pode pensar nisso também vamos voltar pra telinha e aqui ó e esse componente de mth speaker ele tem o componente como um todo que a gente já criou aqui ó o evento mas tem um input E aí no input eu vou colocar aqui

eu vou selecionar data selecionada que foi aquele carinha que eu acabei de criar tá aqui agora eu vou no evento naquele evento de quando eu mudar a data aqui então Ó no Mouth Pier on selected e aqui eu vou fazer o seguinte eu vou pegar aqui ó vou colocar uma Ass e vou modificar vai ser o momento de eu modificar a data selecionada E aí ó deixa eu abrir aqui para ficar mais fácil eu vou criar uma nova data New date dizendo que eu vou pegar ó o mês selecionado aqui ó tá vendo mês selecionado

no mês selecionado tem um ano eu vou criar uma data aqui tá vou criar uma data justamente para criar data com o dia um desse desse mês específico para poder funcionar meu filtro lá depois tá E aí eu vou pegar aqui o m ã ord né que é mês por ordem e depois Opa depois da vírgula o um ou seja o dia um desse mês aqui e aí vai servir lá na minha consulta depois tá depois de eu ter feito isso última coisa que eu tenho que fazer é fazer um refresh data nesse get aqui

para ele fazer o a busca de novo eu acho que vai funcionar talvez tenha um detalhe outro ali que tenha que depois procurar eh na hora dele que ele vai começar essa variável talvez com o dia de hoje talvez seja isso ou não não nem com o dia de hoje ele vai começar aquela data com como nulo né e o nulo é tipo 1900 é uma coisa assim tá vamos vamos abrir aqui a aplicação atualizar ó tá vendo inclusive ele não trouxe nada mas se eu vier aqui agora vou pegar dezembro ó Foi vamos pegar

Janeiro de 2024 ó Foi Vamos criar mais despesa aqui ó Então vamos criar uma despesa aqui chamada é 13 Vou colocar aqui apartamento sei lá 1300 recorrente vou dizer que é mensal que vou começar de zero e vou colocar 45 gravar vai criar aí 45 recorrências foi rápido né ó caiu aqui em janeiro e tem que cair em Dezembro também que eu coloquei D zero né ó tá lá o almoço o ap Aqui também tá bacana né A única coisa é aquela questão a gente poderia de repente criar o mês Eh vamos voltar aqui deixa

eu tentar fazer aqui ã aqui na data selecionada o default value aqui ó eu acho que eu posso fazer assim ó na New date eu tenho que eu tenho que criar uma data né então eu posso usar aqui ó eh ear aqui eu tenho que saber um pouco de a Systems tá esse ear aqui eu passando o current date ele vai pegar o ano da data corrente vírgula mth ele vai pegar o meio da data corrente cor Date o ruim é que ele não me mostra se tá errado né e vírgula um vai pegar o

primeiro dia beleza Bom espero que funcione tem erros temos erros deixa eu ver qual qual é o erro aqui deve ser aqui certeza de certeza ó New date Será que eu que eu coloquei coisas a mais é ele realmente não deixa a gente fazer isso deixa eu ver o que a gente poderia fazer de repente de repente deixa eu sair aqui de cima criar um evento aqui initialize será que ele deixa iniciar pode inicializar variáveis locais então aqui ó eu vou pegar essa data selecionada e vou fazer aquilo que eu tinha proposto Deixa eu ver

se eu copiei ah copiei ó Pronto acho que com isso aqui eu vou resolver é resolve mais rápido mas eu queria resolver direto na linha ali né você papum Mas beleza show vamos fazer o último teste aqui pra gente finalizar que já passou da hora hein Já passou da hora estamos grandes aqui o Marcos vai ficar maluco ó acho que agora já foi ó tá vendo 12 já veio selecionad bonitinho deixa eu virar aqui Maio ó Maravilha pau no gato ou seja turma ah a gente fez aqui passo a passo esse projetinho dividindo em camada

usando algumas coisas um pouquinho mais complicadas para você começar a enxergar as possibilidades e começar a treinar um pouco mais aí também se você quiser aprender mais sobre out Systems sobre tecnologia low code tecnologias low code no code O lugar é na desenvolva desenvolva uma escola de tecnologia especializada em tecnologias low code e no code a gente ensina você a desenvolver olver sistemas com Essas tecnologias as principais do mercado você faz uma assinatura você tem acesso a tudo que tem lá dentro Isso é incrível Porque dependendo no momento que você esteja você pode precisar de

alguma outra tecnologia e a gente já vai ter lá para que você possa aprender e utilizar também tá o link tá aqui embaixo basta você conhecer e tornar parte desse repleto team dessa comunidade que cresce dia após dia e que vem cada dia mais pessoas incríveis aprender e depois compartilhar o conhecimento conosco também isso é muito legal tá bom se você ficou com alguma dúvida desse vídeo deixa embaixo nos comentários não esquece isso ajuda bastante isso é muito importante outra coisa não esquece de seguir Assis Manager nas redes sociais fica ligado Assis Manager sempre contrata

pessoas de todos os níveis Junior plo Senior de Out Systems e você pode ser um dessas pessoas contratadas Tá bom então fica ligado é isso gente qualquer coisa Não esqueça a descrição tem tudo várias coisas vários negócios legais importantes relevantes tem a tem meus links as minhas redes sociais tá tudo lá embaixo tá bom Espero que vocês tenham gostado ficou um pouquinho grande mas foi legal o vídeo né é isso gente meu muito muito obrigado grande abraço F com Deus e até o próximo [Música] vídeo