268 views

O Poder dos Templates Wakanda

English

Uma das melhores novidades e funcionalidades do Wakanda 2 é a possibilidade de usar de Templates de aplicações.

O que? Templates de aplicações? Isso mesmo! Você ouviu direito! Templates de aplicações!!

Agora, vamos explorar um exemplo de template muito útil que inclui frontend e backend.

Neste artigo vamos construir o frontend do nosso App usando Angular/Ionic que receberá os dados vindos do backend do nosso Wakanda Server (backend).

Você verá que é possível baixar um template, criar a base e executar o App em menos de 15 minutos! O template já vem com tela de login, menu, profile, configurações e splash screen com fotos e informações! Veja nas telas abaixo:

Login com Wakanda, Angular e Ionic

 

 

 

 

 

 

 

 

 

 

Instalando…

Para seguir este tutorial, será necessário baixar o Wakanda. Se você ainda não tem o Wakanda, clique aqui, baixe e instale em sua maquina.

Dentro do Wakanda Studio, instalar um template é um procedimento simples e rápido. Para este exemplo, precisamos de um modelo para o backend e outro modelo para o frontend.

Vamos usar um modelo de backend do GitHub, do nosso amigo Ricardo Mello:

https://github.com/rmello4d/EmployeeCompanyLogin

E o template do App mobile no repositório GitHub abaixo:

https://github.com/rmello4d/MobileLoginWakandaExample

Depois de baixar os projetos do Git, instale os templates da seguinte forma:

1. Para o template EmployeeCompanyLogin

No Wakanda 2.2 ou superior:

Copie o diretório /EmployeeCompanyLogin para Documents/Wakanda/templates/backend/EmployeeCompanyLogin

No Wakanda 2.0 ou 2.1x:

Copie o diretório /EmployeeCompanyLoginn para [Local do Wakanda Studio]/Contents/Extensions/wakanda-extension-templates/templates/backend

2. Para o template MobileLoginWakandaExample

No Wakanda 2.2 ou superior:

Copie o diretório/login-with-list para Documents/Wakanda/templates/mobile/login-with-list

No Wakanda 2.0 ou 2.1x:

Copie o diretório /login-with-list para [Local do Wakanda Studio]/Contents/Extensions/wakanda-extension-templates/templates/mobile

Iniciando seu projeto…

Depois de de instalar os templates, você poderá criar um novo projeto baseado no template baixado anteriormente, diretamente na caixa de dialogo do Wakanda Studio:

 

Então, percebemos acima que:

  • Deixaremos a opção “WEB” sem seleção;
  • Selecionaremos BACKEND com a opção: “Login + Emp-Comp Gen”, para o backend;
  • Selecionaremos MOBILE com a opção: “Login with a List (Cards)”, para o frontend;

Uma vez que você clicar em “Create”, o Wakanda Studio deve te mostrar a seguinte tela e mensagens:

 

Executando…

Agora, você está pronto para executar o projeto. Os templates do Wakanda permitem ter um backend pronto para ação e um frontend que será alterado à medida que avançamos nosso exemplo.

Depois de clicar no botão ‘Run’, o template do backend irá gerar um modelo de dados baseado em uma relação Employee-Company (Empregado/Empresa), um exemplo clássico. (DICA: ele usa os arquivos armazenados no diretório: backend/modules/fakedata para adicionar as imagens!).

Verifique no console. Lá você deve ver o seguinte log:

 

Perceba que o template gerará mais de 2000 registros de funcionários, mais de 100 registros de empresas e mais de 10 registros de países.

Você ainda pode verificar esta estrutura de dados no editor de modelos, conforme abaixo:

 

Você notará que, no diálogo relacionado ao desenvolvimento de frontend, suas “Tasks” irão instalar todas as dependências do Angular e do Ionic que o projeto necessita. Se você precisar de mais informações sobre todas as bibliotecas que estão sendo instaladas, verifique no arquivo: /mobile/package.json

 

A primeira vez que você executar sua solução, a Wakanda levará alguns minutos para baixar todas as dependências (DICA: isto ocorre apenas uma vez). Depois de alguns minutos, você deve ver a seguinte tela:

 

Perceba que no Template do Wakanda, o backend já criou um usuário e senha para nós (DICA: olhe o arquivo /backend/Workers/initData.js).

Digite como usuário e senha:

demo@wakanda.io
123

Após o login, você deverá ver a seguinte tela (Home):

 

Você também pode navegar pelo no menu e ver algumas opções do App de demonstração.

 

 

 

 

 

 

 

 

 

Legal, né?! Perceba que os templates tem o poder de deixar tudo pronto para você começar um novo App de forma rápida! Imagine como isso pode ajudar time de desenvolvimento. Já pensou em quantas horas de configuração e apontamentos você economizará cada vez que tiver um novo desenvolvedor em seu time ou um novo projeto?

 

Carregando os dados…

Agora vamos carregar todos os registros dos funcionários criados pelo meu modelo de backend na tela inicial! Até agora havia apenas um cartão chamado demo, porém agora vamos customizar para ver toda a lista dos funcionários, conforme tela abaixo:

 

 

Lista de funcionários…

Bem, já temos os dados criados no banco de dados (através do backend). Agora tudo o que precisamos fazer é dizer ao frontend Angular/Ionic onde encontrar estes dados.

Então, edite o arquivo /mobile/src/pages/_home/home.ts

Esse é o arquivo TypeScript responsável pela página inicial.

O template já definiu o ambiente para você assim:

1. importando o serviço Wakanda

import { Wakanda } from ‘../../app/wakanda.service’

2. definindo o provedor Wakanda

@Component({ selector: ‘page-home’, templateUrl: ‘home.html’, providers:[Wakanda] })

3. adicionando o construtor do Wakanda

constructor( public navCtrl: NavController, public wakanda: Wakanda, public menuCtrl: MenuController, public modalCtrl: ModalController

DICA: O arquivo home.ts “SABE” como encontrar e usar o backend do Wakanda!

Na primeira vez que você executar este modelo, você terá um cartão de “demonstração” na página inicial, certo? No construtor, a variável cards será usada pelo Angular para atualizar o conteúdo na tela inicial. Vá em frente e exclua essas linhas, já não as precisamos mais delas (depois de trazer os dados reais!)

apague estas linhas

 

 

 

 

 

Agora, precisamos atualizar os cartões variáveis para armazenar os valores provenientes do nosso banco de dados. Primeiro, descomente esse código localizado no construtor:

clique aqui para ver a imagem

 

 

 

 

 

 

Vamos agora alterar este código:

1. Mantenha a linha: this.wakanda.getCatalog()

Não altere esta linha, isso é apenas para informar o App de que estamos solicitando o catálogo de banco de dados para o Wakanda

2. Altere a linha 38 para: ds.Table.query() ==> ds.Employee.query()

Como o template é genérico (DICA: você pode usá-lo para outros projetos!), então você deve especificar a tabela do banco que deseja obter as informações. Neste caso, gostaríamos de consultar a tabela Employee (DICA: verifique o modelo do Wakanda)

3.Altere a linha 42 para: imageUrl: entity[”].uri  ==> imageUrl: entity[‘photo’].uri

Na tabela Employee, temos o atributo ‘photo’, vamos carregar as fotos dos funcionários na nossa matriz  de cartões!

4.Altere a linha 43 para:  title: entity[”]  ==>title: entity[‘title’]

Na tabela Employee, temos o atributo ‘title’, vamos carregar também este atributo na nossa matriz de cartões!

5.Por último altere a linha 44 para:  description: entity[”]  ==>description: entity[‘fullName’]

Na tabela Employee, temos o atributo ‘fullName’, vamos carregar por último na nossa matriz o nome completo do funcionário!

Então, o código final deve ficar assim:

clique aqui para ver a imagem

 

Agora, clique no botão “Save” e o Wakanda Studio irá reorganizar tudo! Existem links em cada foto que mostrará mais informações e gráficos (DICA: estas estão da disposição para você estender e implementar como você quiser!).

 

 

Precisa de ajuda?

 

Se tiver dúvidas após instalar e usar estes modelos, você pode clicar neste link e agendar um horário comigo e eu te ajudo: Agende um horário clicando AQUI!.

Marcamos uma chamada de vídeo, responderei todas as suas perguntas e te apoiarei com todos os detalhes desta postagem
PS. a reserva leva menos de 1 minuto, então me chama e a gente conversa!

 

 

 

 

DICA: Avance e comece um projeto com outros templates disponíveis.
Existem vários bem legais e que vão te ajudar a ser mais produtivo!

Agora … Não seria legal criar uma versão web?

Fique atento, uma nova publicação está em breve