Ionic Creator é uma ferramenta de prototipagem drag & drop para criar aplicativos excelentes com Ionic, tudo através de uma interface.
Já adiantando o assunto pra você, a melhor forma de reduzir tempo e consequentemente o custo para criar protótipos de aplicativos móveis híbridos totalmente funcionais é com o Ionic Creator.
Se você ainda não conhece o Ionic, comece por esse outro post aqui: Ionic Framework – Desenvolvendo Mobile Apps
Vamos então começar a mexer com o Ionic Creator, para isso acesse aqui o link.
Conta Ionic Creator
Clique na imagem para ampliar
Se você ainda não tem conta, clique em Get Started.
O processo de criação de conta é bastante simples, basta preencher nome de usuário, nome completo, e-mail e senha.
É bem simples de preencher, mas se você tiver dúvida, pode deixar nos comentários. Depois que você criar conta e fizer login, vamos criar um projeto.
O Ionic Creator tem vários planos. O plano gratuito é interessante e você consegue prototipar e depois exportar o que você fez, que já é funcional, que é o principal objetivo da ferramenta.
Se você tiver realmente uma necessidade de mais recursos, dá uma olhadinha nos valores e funcionalidades aqui abaixo de cada plano.
Clique na imagem para ampliar
Criando Novo Projeto
Prefere aprender em vídeo?
Depois de criar a conta e fazer login, vamos criar seu primeiro projeto. Da mesma forma de quando criamos o projeto através da linha de comando, a primeira coisa que precisamos fazer é dizer o nome do projeto e escolher um dos templates disponíveis.
Clique na imagem para ampliar
Como exemplo, escolha o modelo Side Menu + Tabs e coloque o nome do projeto de IMC Felizardo.
Área de Trabalho
Clique na imagem para ampliar
Gestão de Páginas
Nesta área conseguimos criar novas páginas para o projeto, ou duplicar uma já existente. Também conseguimos dizer qual será a página padrão do aplicativo.
Clique na imagem para ampliar
Componentes
O que realmente facilita a prototipagem e o desenvolvimento, é a biblioteca de componentes do Ionic Creator. Você, vai poder desenvolver o componente que você quiser, totalmente customizado, através de HTML, CSS e JS, porém, a plataforma já traz pronto para você uma lista com várias funcionalidades.
Clique na imagem para ampliar
Customizando App de IMC
Vamos mudar a tab de Camera para Cálculo de IMC. Essa tab já é a página padrão do nosso app, ou seja, quando o app é carregado, ela é a primeira a aparecer.
Na área de gestão das páginas, que vimos anteriormente, clique sobre o Tabs Controller. Depois clique sobre o ícone da câmera, depois clique no painel ao lado. Em Title coloque Cálculo de IMC. Na opção Icon vamos utilizar um ícone de calculadora. Escolha o ícone que você achar mais legal e adequado pro nosso atual esquema de cores. Caso você quisesse, poderia colocar uma classe nesse botão, para poder acessá-lo depois, via CSS ou JavaScript.
Clique na imagem para ampliar
Se você clicar na primeira página – Camera Tab Default Page – vai perceber que nós mudamos apenas o ícone e o texto no controle das tabs. Vamos então nessa página e vamos customizá-la.
Troque o nome da página também para Cálculo de IMC.
Clique na imagem para ampliar
Miscellaneous
Na área de Miscellaneous, você consegue configurar algumas questões visuais da página que está sendo editada. Por padrão as opções de Padding, Scrolling e Header Margin já vem marcadas, e pra ficar bonitinho, eu aconselho você a manter. Se você conhece um pouco de CSS/inglês pode imaginar o que cada opção faz.
Heading
Vamos adicionar um título a página de cálculo de IMC, utilizando o componente Heading. Clique nele e arraste até dentro do celular, no centro da página.
Altere o texto para IMC Felizardo, a cor para #005BFF e o alinhamento para centralizado.
Clique na imagem para ampliar
Input
Agora vamos inserir dois inputs, um para digitar a altura, em centímetros e outro para digitar o peso, em kilos.
No campo de altura coloque a propriedade Title como Altura. A propriedade Type como Number, para que assim o usuário só consiga digitar números nesse input. A propriedade Placeholder preencha com centímetros, para que o usuário consiga entender como deve preencher o campo. A propriedade Name tem a função de colocar um nome, para que depois possamos recuperar o valor que foi digitado no campo com mais facilidade, para o nosso exemplo, digite altura. Por último, o Label Style é a forma como o rótulo do campo será exibido, escolha a opção Stacked.
Clique na imagem para ampliar
Faça a mesma coisa para o campo peso, se tiver dúvidas clique na imagem abaixo para ver como eu fiz.
Clique na imagem para ampliar
Button
Pra finalizar essa tela, precisamos ter um botão pra calcular o IMC, então vamos inserir um componente do tipo Button com o texto Calcular.
A propriedade Type nós não vamos alterar no momento, mas se quiséssemos colocar um link para outra página do nosso app, página externa, e-mail ou telefone, poderíamos usá-lo. Na propriedade Text, coloque Calcular. Na propriedade Size, que é o tamanho do texto, coloque 22px. Na propriedade Theme coloque Balanced, para o botão chamar a atenção do usuário. Por último Icon, vamos colocar um ícone que dê a visualização pro usuário de validação. Depois de inserir o ícone, troque a posição em que ele aparece no botão, logo abaixo.
Clique na imagem para ampliar
Como exercício para você pegar o jeito do Ionic Creator, exclua uma das outras duas abas, e a que restar transforme em uma aba sobre o desenvolvedor, VOCÊ!
Também, crie uma página para ser acessada através do menu, que explique o IMC e sua tabela. Mãos à obra!
Pra você dar uma olhada como o meu ficou, basta clicar aqui.
Qualquer dúvida pode deixar nos comentários ou falar comigo na minha página no Facebook!