Criando serviço de login com Appery.io

Olá Pessoal, aqui neste post mostrarei rapidamente como faremos para criar um serviço completo de login usando a plataforma do Appery.io, que já explicamos, que se trata de um serviço auxiliar ao desenvolvedor, que trás consigo, ferramentas de criação rápida de aplicativos mobile Multiplataforma.

1.     Criar novo App

2.     Criar Banco de Dados

3.     Criar Usuário de Teste

4.     Importar Database Services

5.     Criar UI

6.     Criar e inicializar Restful Service

Antes de tudo, se você não viu o post anterior recomendo que você veja.
Crie bons apps com o Appery.io

1. Criar novo App

Como já é de costume, e apenas temos a conta gratuita na plataforma, iremos exportar nosso projeto anterior nos diversos formatos, e excluir. Criamos então, um novo App, onde o nomeamos de Login App. 

2. Criar Banco de Dados

Bom Pessoal, neste ponto iremos abrir a fonte de dados da nossa aplicação. Ela se comunica com nosso App através de requisições HTTP, e recebendo JSON, e o mais interessante, tudo por JavaScript.

Portanto, antes de abrirmos o painel de desenvolvimento, clicamos na aba de Database, e criamos um novo Banco.

 
Note que após criarmos o banco, por default, temos tabelas ou melhor, Collectionspré-criadas pela plataforma. 
Com isso nós usaremos a Collection de Users.

3. Criar Usuário de Teste

Ainda na aba de Databases, abrimos a Collection Users, e em seguida clicamos em +Row, onde iremos adicionar uma linha na tabela, que será referente ao nosso usuário de teste. Tenha criatividade e seja lire para escrever um username e password. Ao terminar pressione ENTER ou clique num espaço em branco, para que ele crie o _id do nosso usuário.

4. Importar Database Services

Agora, entraremos na melhor parte, o painel de desenvolvimento. Antes, já citado em posts anteriores, o Appery.io fornece uma gama de ferramentas de desenvolvimento, e entre elas está a possibilidade de integração com os bancos de dados criados por você mesmo. E aproveitando essa facilidades, temos em seguida:

Abra o painel de desenvolvimento. 

Clique em > Create New. Em seguida, > Import Database Services. 
E portanto selecione a fonte de dados que criamos anteriormente.

Neste ponto acabamos de integrar ao nosso Projeto as funcionalidades de acesso ao banco. Porém ainda estão paradas, pois não há quem as execute.

5. Criar User Interface

Neste ponto seja livre para conhecer toda a ToolBox da plataforma. Nós fomos bastante minimalistas na nossa criação, portanto você tem a liberdade de criar diversas UI's que achar necessário. Neste ponto, apenas criamos uma pagina, que possui a seguinte configuração.

1.   Dois Inputs com margins 10, 10, 10, 10.

2.   Um Button com margins 10, 10, 10, 10.

3.   Setamos o cabeçalho: Login

4.   Setamos os placeholders dos Inputs: user, password

5.   Setamos o title do button: Enter

Até agora está ficando bom, porém vamos torná-lo melhor. 
Na aba >DATA, abaixo de >DESIGN, que é onde você está atualmente, entre em Add Datasource, e selecione Service. 
Note que há o item Device, porém este não é aplicável no momento, e eu estarei fazendo um tutorial de como utilizá-lo. 
Ao selecionar Service, ao lado, selecione {nomedoseubanco}_login_service e clique em Add.

Neste ponto estamos criando o serviço de verificação ao banco. É como se estivessemos criando uma função em JavaScript que iria realizar toda esta operação. Mas ainda não temos o que manda na requisição HTTP. Para isso clicamos no botão Mapping na linha de Before Send.

Então vamos mapear o que deve ser enviado para o servidor em nossa requisição, ou seja, perguntar se há algum User na collection de Users, passando como parâmetro os itens username e password.

Para mapear basta arrastar da esqueda para a direita, pois representa seu content para a requisição, respectivamente. 
Puxe direto dos Text dentro dos inputs que você criou.

E termine a criação da função com Save and return.

Ainda em DATA, veja que mapeamos a nossa função porém veja que existe outros 3 itens. Em Sucess, não precisamos mapear nada, até porque a função retorna um _idque será util em outro contexto (Salvar o _id em cookies, para controle de sessão). 
Porém, podemos Add um invoke service ou até mesmo inflar um popUp, porém neste caso colocar um Navigate to Link, que ao logar irá redirecionar para o nosso Blog.

E no item de Error colocamos para inflar um PopUp. Observe que este PopUp está criado préviamente lá em Design.

6. Inicializar Restful Service

Com toda a aplicação preparada, falta apenas inicializar a função que criamos, de comunicação com o servidor da nossa fonte de dados. 
Para isso clicamos no nosso Button criado, e então, criamos um evento de click, onde ele irá invocar um serviço quando clicado, serviço esse que se resume apenas em nossa função de comunicação criado. 

Com isso, salvamos o projeto, e > TEST.

Dúvidas? Comente!!!

CODIGO DE EXEMPLO: https://github.com/codificandotudo/Comments-Manager