Tutor dos Nerds: maio 2018

Password TextBox, desenvolva aplicativo com senha no thunkable/app inventor

Neste tutorial vamos aprender a usar o Password TextBox(Caixa de texto para senha), com este elemento será possível criar aplicativos com senha, muito útil para os dias atuais.

Ao longo do tutorial vamos aprender a comparar duas strings de texto e dizer ao usuário se elas correspondem ou não.

Vamos iniciar nossa aplicação e para isso vamos usar a plataforma de desenvolvimento online Thunkable, sem a necessidade de instalar qualquer programa no computador apenas um pequeno aplicativo no celular para emular a aplicação, e pode ser encontrado neste link app Thunkable..

Acessaremos a plataforma de desenvolvimento para PC neste link LINK Thunkable . .

(Se você não conhece a plataforma de desenvolvimento ou quer ver um tutorial bem básico de como usar o Thunkable acesse esse link "Tutorial básico thunkable" ).

Selecione a opção Android e faça login com o Google.

Clique em "create new app", e na janela que aparecer escreva Password TextBox e aperte OK.

Vai aparecer uma tela como essa, onde sera desenvolvida nossa aplicação.

Agora vamos adicionar os itens da parte gráfica, vamos utilizar o elemento "Password TextBox" também um "Button" e uma "Label" clique e arraste todas para a Screen1.

Selecione a Label da Screen vá em Text, na parte inferior direita e apague caixa.
A label mostrará uma mensagem caso a senha digitada esteja errada.

Selecione Button na Screen vá em Text, e renomeie para "Entrar"

Vá em add Screen, clique, e na janela que abrir, mantenha o nome, apenas aperte ok.

Vai abrir Screen2 que acabou de ser criada, adicione então uma Label, mude a fonte para 22 e renomeie o Text para "Acesso liberado"

Agora retorne para Screen1.

Pronto isso é tudo nesta etapa, nossa parte gráfica já esta pronta, e partiremos agora para os blocos que é onde faremos com que o aplicativo funcione de fato.
Abra o blocks.

Aparecerá uma tela como esta abaixo.

Vamos iniciar a variável que é onde vai ficar armazenado a senha padrão que será comparada a senha digitada.

Vá em Variables e pegue um initialize global, renomeie para "Minha senha"

Vá em Text, pegue uma caixa de texto vazia e escreva "1234", essa será nossa senha padrão, o que for digitada diferente disso não dará acesso ao aplicativo.

Em Button adicione o bloco "Click".

Em Control escolha o bloco de decisão if then, adicione dentro do bloco Click e selecione dentro da engrenagem do bloco if then e adicione uma else como ilustrado abaixo.

Em text, encontre o bloco "compare texts" e adicione no bloco if.

Em variables adicione o bloco get global Minha_senha e coloque dentro de "compare texts", é onde esta armazenada a senha padrão.

Em Password TextBox localize o bloco Text e também coloque dentro de "compare texts".

Este ultimo "Text" vai receber o Password digitado e será comparado com a senha padrão.

Agora vamos adicionar o elemento que vai abrir outra tela. Vá em Control e pegue o bloco "open another screen"

Vá em Text pegue uma caixa vazia e escreva "Screen2".

Se a senha digitada for igual a senha padrão, vai abrir outra tela.

Vá em Label pegue um bloco "set Text", e nela coloque uma caixa de texto, e escreva "senha errada".

Se a senha digitada for diferente da senha padrão, vai mostrar a mensagem Senha errada.

Neste momento sua aplicação já esta pronta, como pode observar, deverá ficar igual a ilustração abaixo.

Se a senha digitada for diferente da senha padrão, vai ser exibido na Label a mensagem "Senha errada"

Se a senha digitada estiver igual a senha padrão, será aberto outra tela com a mensagem "Acesso liberado".

É isso ai pessoal, um simples tutorial que nos mostra o funcionamento do elemento Password TextBox, com ele será possível criar aplicações com senhas.

Boa sorte agora, usem a imaginação para criar uma infinidade de aplicações.

Duvidas deixem no comentário.

Tutorial em vídeo

Como criar desenhos no lcd

Neste tutorial vou mostra como criar uma carinha no lcd juntamente com arduino, neste exemplo usaremos um LCD 16×2 .
Vamos precisar de um programa que faz desenhos no LCD, basta clicar com o mouse nos quadradinhos pra formar o desenho, e o programa o converte para binário, e depois é só copiar o código para o Arduíno.

Se seu LCD já funciona com Arduíno, não precisa mexer em nada.

Para este projeto precisaremos de;
1x Arduino
1x LCD 16x2
jumpers

Realize as conexões necessárias de acordo com a ilustração.
Se seu LCD já funciona com Arduíno, não precisa mexer em nada.

Link pra baixar o programa. Baixar

Para criar uma figura basta selecionar os quadradinhos com o mouse, quando terminar apenas copie o código gerado ao lado direito, começando por byte até o final.

EX; Olho
    byte newChar[8] = {
B11111,
B10001,
B10101,
B10101,
B10101,
B10101,
B10001,
B11111
};

  EX; Boca
byte newChar[8] = {
B00000,
B00000,
B00000,
B11111,
B11111,
B11111,
B00000,
B00000
};

Não se esqueça de renomear variável newChar para outro nome ex.  byte Olhor[8], para não haver erro por duplicidade.

Após ter criado sua figura vamos a programação.

Acompanhe os comentários dentro do código.

aqui

//inicio do código

 #include  <LiquidCrystal.h> //Biblioteca LCD

LiquidCrystal lcd(12, 11, 5, 4, 3, 2); //inicialização dos pinos de conexão



//  Aqui entra o código criado no programa



byte olho[8] = { 



  B11111,



  B10001,



  B10101,          //Olho



  B10101,



  B10101,



  B10101,



  B10001,



  B11111



};





byte boca[8] = {



  B00000,



  B00000,



  B00000,



  B11111,            //Boca



  B11111,



  B11111,



  B00000,



  B00000



};





void setup()



{



  lcd.begin (16,2); //Inicia LCD



lcd.createChar (0, olho); //Cria o objeto olho

lcd.createChar (1, olho);

lcd.createChar (2, boca); //Cria o objeto boca

lcd.clear();  //Limpa o LCD



}



void loop()



{

//olho direito

   lcd.setCursor(3, 0);  //Imprime o olho na posição 3 linha 0 do LCD

   lcd.write((byte)0);   //Objeto olho



//Olho Esquerdo

   lcd.setCursor(12, 0); //Imprime o olho na posição 12 linha 0 do LCD



    lcd.write((byte)1);   //Objeto olho



    //boca



    lcd.setCursor(5, 1); //Imprime parte da boca na posição 5 linha 1 do LCD

    lcd.write((byte)2);  //Objeto boca



     lcd.setCursor(6, 1); //Imprime parte da boca na posição 6 linha 1 do LCD

    lcd.write((byte)2);  //Objeto boca

    

     lcd.setCursor(7, 1); //Imprime parte da boca na posição 7 linha 1 do LCD

    lcd.write((byte)2);   //Objeto boca

    

     lcd.setCursor(8, 1); //Imprime parte da boca na posição 8 linha 1 do LCD

    lcd.write((byte)2);   //Objeto boca

    

     lcd.setCursor(9, 1);  //Imprime parte da boca na posição 9 linha 1 do LCD

     lcd.write((byte)2);   //Objeto boca



}



                                    //Fim do codigo

Compile e carregue.

O resultado deve ficar igual a esse .

Duvidas deixem no comentário.

Como usar o elemento Floating Action Button no Thunkable

Neste tutorial vou mostra como usar o Floating Action Button(Botão de ação flutuante) no Thunkable.
Como na tradução seu objetivo no aplicativo será o de exibir um ícone animado.

Vamos iniciar nossa aplicação e para isso vamos usar a plataforma de desenvolvimento online Thunkable, sem a necessidade de instalar qualquer programa no computador apenas um pequeno aplicativo no celular para emular a aplicação, e pode ser encontrado neste link app Thunkable..

Acessaremos a plataforma de desenvolvimento para PC neste link LINK Thunkable . .

(Se você não conhece a plataforma de desenvolvimento ou quer ver um tutorial bem básico de como usar o Thunkable acesse esse link "Tutorial básico thunkable" ).

Selecione a opção Android e faça login com o Google.

Clique em "create new app", e na janela que aparecer escreva Floating Action Button e aperte OK.

Vai aparecer uma tela como essa, onde sera desenvolvida nossa aplicação.

Agora vamos adicionar os itens da parte gráfica, vamos utilizar o elemento "Floating Action Button" clique e arraste para a Screen1.

Pronto isso é tudo nesta etapa, nossa parte gráfica já esta pronta, e partiremos agora para os blocos que é onde faremos com que o aplicativo funcione de fato.

Clique em Blocks, e aparecera uma tela como esta abaixo.

Em Floating Action Button selecione o elemento "Click" no menu lateral esquerdo e arraste para dentro do editor como na imagem abaixo.

Em Control escolha o bloco de decisão if then, adicione dentro do bloco Click e selecione dentro da engrenagem do bloco if then e adicione uma else como ilustrado abaixo.

Em text, encontre o bloco "compare texts" e adicione no bloco if.

Vá em Floating Action Button e adicione três blocos "Icon Name" e faça as conexões como mostrado na ilustração abaixo.

Pra finalizar vá em text e selecione Três caixas de texto vazias e renomeias para "add,remove e add" sempre em minusculo, e adicione aos blocos como mostrado abaixo.

Neste momento sua aplicação já esta pronta, como pode observar, deverá ficar igual a ilustração abaixo.

Iniciado como (+). por default .

Quando clicamos no botão seu simbolo muda para (-), se clicarmos novamente ele retorna para (+) .

É isso ai pessoal, um simples tutorial que nos mostra o funcionamento do elemento Floating Action Button, esse icone é bem interessante para bate-papos redes sociais ou para adicionar uma nova agenda por exemplo. Boa sorte agora, usem a imaginação para criar uma infinidade de aplicações.

Duvidas deixem no comentário.

Tutorial em vídeo