Prototipando o App

Oi pessoal,  vamos começar a prototipar nosso aplicativo.  Algo que não comentei no post anterior é que o Ionic Creator é uma ótima ferramenta para este tipo de trabalho, pois apesar de não ser a melhor ferramenta de prototipação existente ela tem um número razoável de componentes, é fácil de operar e adianta boa parte da programação gerando todos o html das páginas e a configuração de roteamento entre elas.

Só relembrando, nós criamos um novo projeto e escolhemos o template que melhor se adapta ao nosso projeto.

No meu projeto escolhi o template tabs e irei criar um app que permite cadastrar o perfil do usuário, cadastrar contatos e conversar com seus contatos por mensagens de texto. Qualquer semelhança é mera coincidência.

Antes de começar a construir as telas vou alterar os labels e ícones das tabs.  Clicando sobre cada tab podemos ver que a barra à direita se altera e ali podemos alterar o texto e o ícone e também mover a tab para outra posição.

A imagem abaixo mostra a visualização em um smart phone Android.  Esta é uma das principais características da biblioteca de componentes de interface do Ionic, ele ajusta alguns componentes à plataforma independente de configuração. Neste caso a tab que na imagem anterior estava no rodapé datela, visto de um iPhone, agora no Android passou a ser visto no topo da tela. Esta visualização pode ser alterada no topo da tela do Creator, no item Device.

Feita a alteração nas tabs, vou para as telas agora. A primeira tela, cuja tab chamei de perfil, criarei uma consulta dos dados do usuário com informações básicas de contato. 

Lembrando que por enquanto não vamos nos preocupar em como irá funcionar, isto deixamos para o momento da programação.  Por agora só estamos preocupados com o que terá o app.  

Inserimos nesta tela uma área para a foto do usuário, e campos para nome, data de nascimento, fones, email, nome da empresa e função.  Do lado direito estão as barras de adição de telas (acima) e de componentes inseridos no protótipo (abaixo).  Neste momento encaramos a primeira deficiência desta ferramenta, pois ela não permite inserir ícones de botões na barra superior do app. Por conta disso vamos inserir um botão no topo da tela para permitir acesso à tela de edição dos dados e depois faremos a alteração para um botão "ícone" na header no app.

Para exibir os dados inserimos uma lista e em cada item da lista inserimos campos de texto.

 Tela de Dados do Perfil

Para criar a tela de edição podemos selecionar a tela de Consulta na aba de Pages e clicar no ícone "Duplicate".  Assim será criada uma nova tela com os mesmos componentes da anterior. Agora basta alterar alguns componentes.  Começamos removendo a lista e inserindo campos input. Após inserir os campos podemos escolher o tipo de dado de cada campo, tais como email, data, texto e fone.    

Tela de Edição do Perfil

Para fazer com que o click no botão Editar abra a tela de edição, você deve selecionar o componente na tela e na área Page, no item Link, selecione o nome da outra tela que deseja abrir. Esta configuração servirá para toda a navegação entre telas do aplicativo.

Recomendo que para todo componente inserido você explore a aba Page da direita e veja as possibilidades de customização.

Tela de  Contatos

Ainda criamos uma tela de conversas onde serão registradas todas as comunicações e uma tela de conversa com um contato em específico.

 Lista de conversas

Tela de conversa com um contato

Nosso trabalho com design do aplicativo não acaba aqui, mas com o Creator é o que conseguimos fazer. Qualquer melhoria no layout precisará ser feita mexendo diretamente no código que vamos baixar do Creator.  Este código engloba todas as telas do app criadas no creator, toda a configuração de navegação,  todas as imagens inseridas e o fonte básico do javascript para começar a programar.

Para baixar o código você só clica no ícone Export do Creator, será aberto um popup onde você seleciona a aba Zip File e clica no botão download.

Feito isto, seu código está na mãe e agora você deve descompactar e copiar todo o conteúdo para dentro da pasta www do projeto que criamos no post passado

pasta do projeto que acabamos de baixar do creator.

pasta www do projeto criado no computador (post passado)

Depois de copiados os arquivos do protótipo para dentro da pasta www do projeto, podemos testar se está tudo ok.  Para isso basta acessar a pasta do projeto pelo cmd ou console, no meu caso é digitando:

cd C:\Projetos\meuProjetoMobile

E em seguida escreva o comando

 ionic serve

executando o comando ionic serve

Ao executar este comando será aberto o seu browser e o seu app aparecerá rodando no browser. Umas das vantagens do desenvolvimento híbrido de aplicativos é que boa parte do app pode ser testada no browser.  Talvez o layout, principalmente as imagens, fiquem um pouco estranhas, mas pra resolver isto e ver seu app como se estivesse em um smartphone basta você acionar a inspeção do browser, ou modo debug.  Pra isso clique com o botão direito na tela do browser e selecione Inspecionar (Inspect).  Depois, se estiver no Chrome, você pode digitar Ctrl + Shift + M e poderá escolher no topo do browser um modelo de smart phone para ser simulado e poder visualizar como ficará seu aplicativo.

Tela do app vista no browser simulando um fone Galaxy S5

Ótimo que chegamos até aqui! A partir de agora já temos tudo pronto pra começar a mexer em definitivo no nosso aplicativo, colocar a mão na massa e programar.  

Obrigado por me acompanhar até aqui.  Espero você no próximo post!

Ionic: o que é e como começar

Como já mencionei anteriormente o Ionic é  mais que um framework, pois além disso ele também é uma ferramenta que estende funções do Apache Cordova trazendo mais recursos ao desenvolvedor.  Acho que a melhor definição para o ionic é  aquela que a própria empresa atribui. Eles dizem que o Ionic é uma SDK Web para para construção de aplicativos híbridos.  Mas porque SDK ?  Porque além das funcionalidades disponíveis o Ionic possui sua própria biblioteca de estilos e componentes para interface de usuário, assim como são os SDKs do iOS e Android. 

A estrutura de um aplicativo construído com Ionic é composta pelos elementos ilustrados na imagem abaixo:

Ionic: toda a parte de UI e os controles de reconhecimento de plataforma para definição de componente a apresentar.  Isto porque, para alguns componentes, o Ionic tem uma versão para cada plataforma tentando se aproximar da UI nativa do dispositivo

AngularJS: onde todas a funcionalidades são criadas, todo o  comportamento e ações são construídas e também onde todos os dados são gerenciados

WebView (Apache Cordova): é através da webview que o Cordava realiza a comunicação do codigo javascript com os plugins da plataforma permitindo o acesso aos recursos do dispositivo.

Neste detalhamento acima ficou parecendo que o Ionic fica só na parte de UI, mas não é só isso, pois o Ionic, por ser também a plataforma sobre a qual estaremos desenvolvendo, traz consigo uma série de recursos para facilitar toda a construção do aplicativo.
Veremos a seguir como iniciar na construção de uma aplicativo, quais passos devemos seguir, o que precisaremos instalar.

O que precisamos ?

Para iniciar precisaremos instalar o NODE.JS que é basicamente uma runtime javascript, ou seja, ele permite rodar programas em javascript sem estar num browser, mas utilizando o motor do browser para realizar esta função.  O nodejs será usado para instalação dos recursos necessários na construção do aplicativo, ele não é utilizado diretamente na programação ou execução do nosso app.  Com o nodejs todas as operações serão realizadas em linha de comando pelo console (Linux) ou janela cmd (Windows)

Acesse o site https://nodejs.org e baixe o node específico para o S.O. de seu computador. 

A versão L.T.S do nodejs deve ser suficiente, que hoje está na 4.5.0

Feita a instalação do node, vamos verificar se está tudo ok. Abra o console se estiver no linux ou o "cmd" se estiver no Windows e primeiramente  verifique se o node está instalado corretamente, digite

 node --version

Caso tenha como resposta a versão do node recém instalada então está ok.

Outra instalação necessária é a da SDK para qual será feira a geração do aplicativo. Trabalharemos com Android, uma vez que este está disponível para todas as plataformas, mas caso você tenha um mac, basta baixar o XCode e a SDK do iOS estará junto.

Baixe e instale apenas a SDK Android ou se preferir baixe e instale o  Android Studio que já vem com a SDK. Ambos estão disponíveisem https://developer.android.com/studio/index.html.

Depois de instalar a SDK, faça a atualização da versão do Android através do SDK Manager, que pode ser acessado pela interface do Android Studio ou executando o programa "SDK Manager" na pasta do SDK.

No SDK Manager, na pasta Tools, faça a instalação ou atualização das últimas versões do "Android SDK Tools",  "Android SDK Platform-tools" e "Android SDK Build-tools". Na pasta Android 'X' (API YZ) faça a instalação de todos os itens do maior 'X' disponível, isto vai garantir que você terá todos os recursos disponíveis da última versão da plataforma. Na pasta Extras recomendo que você instale ao menos os itens "Android Support Library" e "Google Play services"

Agora que já temos a SDK instalada e atualizada podemos partir para a instalação do Ionic.  Para isso é  simples, basta digitar no console ou cmd

npm install -g cordova ionic 

Este comando fará a instalação dos módulos node do Ionic e do Cordova, que apesar de trabalharem juntos tem a instalação separada.  Por enquanto é disso que precisamos, agora vamos criar nosso projeto de aplicativo e para isso, voltamos ao console ou cmd, acessamos a pasta onde queremos que o projeto seja criado e digitamos o comando abaixo:

ionic start meuProjetoMobile blank

O comando ionic start faz a criação do projeto e copia todos os arquivos necessários.  A palavra meuProjetoMobile é o nome do projeto, mas não se preocupe pois o nome do projeto não é necessariamente o nome final do aplicativo, depois podemos alterar e eu mostrarei como fazer isto.  Já a palavra blank define qual o template do Ionic utilizaremos, estes templates são modelos de interface para o aplicativo e estão disponíveis as interfaces com abas (tabs), menu lateral (sidemenu) e em branco (blank).

comando executado no cmd

Enfim temos o projeto do aplicativo criado, mas ainda não vamos programar, pois eu gostaria de apresentar mais uma ferramenta muito útil e a primeira ferramenta online do Ionic que veremos.  Será o Creator, um prototipador de aplicativos que permite ao desenvolvedor, após construir o protótipo e validar com seu cliente, fazer download do projeto criado e Voilà, tem-se o código do projeto para dar início à programação, com todas as telas e navegação construída.
Para criar seu protótipo, acesse https://creator.ionic.io/app/login , faça seu cadastro e acesse.  A maior parte dos serviços online do ionic são pagos, mas possuem um acesso gratuito com uso limitado.  No caso do Creator, a limitação para o acesso free é o número de projetos que pode ser criado, no caso apenas um, e alguns recursos da ferramenta como a inclusão de mapas no protótipo.

   Dê um nome para seu novo projeto, escolha o template e clique em "Create Projetct".  Mesmo que você tenha criado seu projeto com template blank na sua máquina, aqui você pode definir qual será seu modelo realmente.

Já temos bastante coisa para fazer e várias instalações para executar, então vou encerrando este post por aqui e no próximo veremos como construir nosso protótipo no Ionic Creator, baixar o código fonte que ele disponibiliza e aplicar ao projeto que criamos no computador. Até mais e obrigado!