Ionic Framework

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.


Vamos começar as coisas com ionic, né?

Se você nunca desenvolveu para mobile, talvez esse guia seja de grande ajuda. Uma das perguntas que você pode estar a se fazer é: O Ionic é a melhor opção? A resposta é NÃO! O Ionic não consegue aproveitar os recursos dos dispositivos Mobile como os Aplicativos Nativos. O que significa que se seu interesse está no melhor desempenho possível, o Ionic, infelizmente, não é a resposta.

E por que eu deveria utilizar Ionic?

Bom, a princípio, por praticidade. O Ionic vai permitir que com apenas 1 codebase, você compile aplicativos para os principais sistemas operacionais do mercado. Um outro ponto positivo, se você é programador web, é que você não vai precisar aprender nada novo, Ionic é Web App, e utiliza TypeScript, HTML5, SCSS e Angular.

E por onde começar?

Primeiro você vai ter que instalar algumas coisas. E você que não instale não... Ó o link.

Instalados, você vai chegar no terminal e lançar:

$ npm install -g cordova ionic

O `-g` vai instalar o ionic e o cordova globalmente, mas você pode instalar apenas no repositório do projeto, removendo o `-g`.

OLHE, você leia com atenção a documentação do npm, ou isso pode custar muito caro... Ninguém quer formatar o PC quando está prestes a descobrir um novo mundo, não é? Fica a dica.
DICA: Se você tiver que dar `sudo npm -g install ionic`, você deve ter feito algo errado, e vai ter um pouco de dor de cabeça. O correto é chegar no fim, e não precisar de sudo para executar instalações com npm.

É hora do SHOW!

Ambiente de desenvolvimento devidamente configurado, precisamos iniciar o nosso projeto. Se segura.

$ ionic start --v2 myApp sidemenu

O que é isso?

Ué, `ionic start` é o comando para iniciar o projeto, `--v2` é a versão do ionic que você vai utilizar, 'myApp' é o nome do novo aplicativo, e `sidemenu` é o template base que estamos adotando.

E PRONTO. É isso mesmo que você ouLeu!

$ cd myApp $ ionic serve

Contemple esse aplicativo que está vivo no seu navegador. HEHE. Agora se ligue, eu recomendo que você utilize o Google Chrome para auxiliar nos testes. Daí, se ele não for o seu navegador padrão:

$ ionic serve -w google-chrome

E essas pastas todas?

O importante é que a gente vai trabalhar com o conteúdo da pasta src. Em src encontramos nosso código bruto, não compilado. Quando executamos ionic serve, nosso código dentro de src é compilado para a versão de Javascript e CSS que os navegadores entendem. E aí podemos trabalhar em um nível mais alto usando TypeScript e SCSS ou SASS, mas compilar para baixo.

O que é que a app tem?

A app é uma espécie de repositório de configuração.

O app/module.ts é o portão de entrada, pae. Todas as páginas devem ser declaradas nesse arquivo, como no modelo que foi gerado quando você criou o app. Aqui definiu-se o component root como sendo a classe MyApp que se encontra em app.component.ts;

O app/app.component.ts é a primeira coisa que vai ser carregada no seu aplicativo. Então se você quiser que alguma coisa execute primeiro, essa coisa deve ser escrita aqui. Como por exemplo, a configuração dinâmica do menu. Por falar em menu, ele está no arquivo app/app.html no nosso exemplo. O app/app.html é o template do nosso app.component.

E se eu quiser criar qualquer página aí, eu posso?

Pode.

$ ionic g page home

Aí veja os arquivos gerados em src/pages. Você vai tornar sua nova página ativa adicionando-a ao arquivo app.module.ts, e a referência para isso será o nome da classe de home.ts

... 4. import { HomePage } from '../pages/home/home'; ...

Depois adicione-a à lista de declarations.

8. declarations: [ 9. ....MyApp, 10.....HomePage, 11.],

E à lista de entryComponents.

17.entryComponents: [ 18.....MyApp, 19.....HomePage, 20.],

Agora que sua página realmente existe...

Vamos adicioná-la ao menu.

Lá no seu app.component.ts, adicione a página.

... 4. import { HomePage } from '../pages/home/home'; ...

Depois repare que na própria app.component.ts existe uma lista de objetos chamada pages dentro do construtor. Experimente adicionar a HomePage nessa lista, e repare que na app.html tem um bloco com algo muito interessante. Algo como:

*ngFor="let p of pages" (click)="openPage(p)"

O for está percorrendo a variável pages do app.component? SIM! E a openPage é uma função que foi declarada lá. Bom, analise o código da app.component.ts e da app.html e tire suas conclusões. Veja o código das páginas de exemplo também.

A documentação do Ionic tem um mundo de possibilidades para você montar seu App. Analise com atenção, ela é bem simples e intuitiva. ;)

E aí, a introdução ao Ionic é isso aí.

Esse guia não substitui de maneira nenhuma a documentação oficial do Ionic Framework.

ionicframework.com/docs/
Silhueta de rosto de mulher