Você sabe como criar um sistema de login offline para o seu aplicativo pelo Sketchware? Caso a resposta seja não, fique tranquilo, pois neste artigo te mostrarei o passo a passo que eu utilizo em meus projetos para fazer esse sistema.
Dependendo do tipo de projeto que você esteja criando, esse sistema pode ser interessante para você implementar no seu app, seja para criar uma área apenas para administradores ou usuários premium.
O melhor disso tudo é que como tudo funciona de forma offline, você não precisa utilizar banco de dados, para fazer a validação de login, tudo é feito através de (if e else), basicamente a lógica é definir se usuário for tal e a senha for tal, ele executa algo.
Então dessa maneira, você não precisa ter um banco de dados online, para realizar esse sistema de validação, iremos apenas usar a estrutura de blocos dentro do própio Sketchware.
Criando a Interface do Login
Antes de partirmos para a parte da lógica, precisamos criar nossa tela, que é o principal, sem uma interface amigável e compreensível para o usuário, nada funciona corretamente.
Eu geralmente começo usando dois lineares horizontais um abaixo do outro, para colocar os elementos dentro deles, para não ficar torto ou algo do tipo, dentro desses lineares eu geralmente coloco os (textviews, edittexts, buttons).
Os TextView, serve para você colocar um texto na tela, ex: "olá gente", já os EditText, serve como uma caixinha para o usuário digitar algo, seja para colocar seu nome ou outra coisa que o sistema pedir, e o Button serve como o validador, e dentro dele que iremos aplicar toda lógica.
Vou deixar uma imagem abaixo, para vocês entenderem melhor como que funciona esse fluxo.
Após incluir todos os elementos que eu citei acima, tanto textviews, quanto os edittexts e button, agora podemos começar a parte da nossa lógica, e bem simples de se entender.
O mais comum é colocar toda a lógica desse sistema de login dentro do button, que é o nosso validador, é dentro dele que iremos incluir os blocos corretos para validar os dados que o usuário digitar nos campos, geralmente é dessa forma que eu faço em meus projetos.
Desenvolvendo o Sistema de Login
Para começar nossa lógica, você precisa clicar sobre o button que você colocou dentro da interface do app, após isso, vai exibir um menuzinho logo em baixo contendo 3 categorias, sendo elas (Basic, Recent, Event).
Por padrão, o próprio Sketchware deixa você dentro da aba "Basic" você precisa arrastar para o lado e ir até "Event".
Quando fizer isso, vai aparecer 2 opções de cliques do button sendo elas, "onLongClick" e o "onClick", o significado deles é bem simples de se entender, o LongClick é clique longo, já o onClick é clique direto.
Você aperta na opção de "onClick", assim que você apertar, já vai abrir direto a interface para inserirmos os blocos e começar nossa lógica.
Eu vou mostrar a forma de como eu aprendi, e que da certo comigo, a lógica é bem simples na realidade. Iremos precisar entrar na abinha "Control" e puxar o bloco de condição, o famoso "if e else", quem já manja um tico de programação já conhece esse cara.
Depois precisaremos ir em "Operator" é pegar o bloco de "or" e "equals" que basicamente significa, ou e igual.
Estando com todos esses blocos selecionados dentro da interface, agora iremos organiza-los corretamente, primeiro você coloca o bloco de "if e else" logo depois insere o bloco de "or" e em seguida 2 blocos do "equals".
Feito isso, precisamos pegar mais um bloquinho, esse fica por "último" mesmo, que é o de obter texto, basicamente ele vai pegar o que o usuário digitou para tornar a validação funcional.
Esse bloco fica dentro da "View" caso seu Sketchware não esteja traduzido para PT-BR ele aparecerá como "TextView getText" ou seja, obterTexto, você precisa coloca-lo dentro do bloco de "equals". No final a estrutura precisa ficar igual nessa imagem que deixei abaixo.
Lembre-se, tudo isso fica dentro do bloco de if e else.
Viu na imagem que dentro do "equals" ficou uma parte em branco? Então, é ali que a mágica vai acontecer, ali dentro desse espaço em branco, é que você vai definir a parte do login, seja um nome de usuário padrão ou uma senha padrão.
Clique dentro do bloco de "getText" e selecione pelo EditText que deseja definir como usuário ou senha, como colocamos 2, um será para nome de usuário e o outro para senha. No espaço em branco você coloca um nome de usuário e uma senha que vai servir como o login do usuário.
Como o sistema de login é offline, nós mesmos que iremos definir o usuário e a senha, até por que não precisa de banco de dados para isso. Após seguir esses passos acima, a sua estrutura de blocos precisa estar igual da imagem abaixo.
A última coisa que falta é colocarmos alguma mensagem para exibir para o usuário quando ele logar, seja uma mensagem "logado com sucesso" ou "deu certo", essa parte fica de sua preferência.
Um adendo bem importante é que a mensagem que deu certo o login, você coloca dentro do if, já a que deu errado por algum motivo, seja por ter digitado o usuário ou a senha errada, você coloca dentro do else.
No meu caso eu defini as minhas mensagens dentro do bloco de "toast" como "entrou" e para erro defini como "errou".
Para pegar esse bloco de "toast" você entra na aba "component" dentro do menu de blocos.
Ao final nossa lógica finalmente vai dar certo, eu executei esse projeto que criei junto com vocês e ele realmente funcionou, os dados foram validados só com essa estrutura de if e else com os blocos do Sketchware.
Aqui mais em baixo deixei uma printscreen da tela do meu projeto sendo executado e com os dados validados e as mensagens sendo exibidas corretamente.
