Modelos de apps ionic para começar um novo projeto - parte I

 

    Saudações calorosas senhoras e senhores, neste post discutiremos os modelos que usamos para iniciar um novo projeto com o ionic framework, ele será divido em 2 partes para que não fique tãããão grande, ok!!!

    Quando comparamos o framework ionic com o microsoft word, por exemplo, conseguimos entender melhor estes modelos iniciais. Toda vez que vamos iniciar um documento no word, principalmente as versões mais atuais, ele pede que escolhamos um modelo, e geralmente escolhemos o modelo em branco e assim iniciamos um documento, no ionic a dinâmica é a mesma, possuímos 5 modelos que podemos iniciar nosso projeto que são: tabs, sidemenu, blank, list e my-first-app, e discutiremos cada um deles em detalhes logo abaixo!

    Comecemos pelo tabs, para criarmos um aplicativo com este modelo damos o seguinte comando no prompt de comando (se você chegou agora convido a ler este artigo para entender melhor esta parte):

ionic start nomeDoAplicativo01 tabs --type=angular

     Assim ele criará um projeto com este modelo, mas o que faz este modelo? Ele cria um aplicativo com 3 "abas", 3 botões na parte de baixo com ícone e texto, onde cada um leva para um tela diferente, mas os botões ou abas permanecem na parte de baixo, entre as diferentes telas, as imagens abaixo demonstram ele executado após o "ionic serve":

  

Tab 1:

Tab2:

Tab3:

    Muito bem! Vamos para o próximo modelo que é o sidemenu, para criá-lo dê o seguinte comando, no prompt de comando:

ionic start nomeDoAplicativo02 sidemenu --type=angular

    Desta maneira ele criará um aplicativo com uma tela inicial e na parte de cima um botão para acionar o menu do lado esquerdo, que também pode aparecer simplesmente arrastando da esquerda para a direita. O menu que aparecerá terá 2 conjuntos de componentes perceptíveis, o primeiro conjunto é clicável e leva para um tela correspondente ao clique o, segundo conjunto não é clicável sendo apenas ilustrativo. Seguimos então as respectivas telas: 

    

Primeira tela.

Menu esquerdo.

Tela que aparece quando se clica nos menus clicáveis.

    Por fim vamos ter contato ao mais utilizado que é o modelo blank. O blank equivale ao documento em branco do word que referenciamos acima, ele não possui nada apenas uma única tela com um texto ilustrativo central e um ion-toolbar (componente visual ionic que veremos futuramente) logo na parte de cima. O comando que cria um aplicativo com este modelo é:

  ionic start nomeDoAplicativo03 blank --type=angular

Tela do blank.

    Então com o modelo finalizamos a primeira parte deste artigo, em breve lançaremos a segunda parte finalizando os modelos iniciais de criação de aplicativos ionic, grande abraço e fiquem com Deus!!!