Ionic FrameworkDesenvolvimento Mobile Híbrido Multi Plataforma

Por Fábio Godoy

Quem sou eu?Formado em Sistemas de Informação, especialista em Gerenciamento de Projetos.Gerente de Fábrica de Software da Betha Sistemas (www.betha.com.br), com as certificações: OCJP, OCWCD, OCBCD, CSM.

Por onde iremos?● Origem do framework● Porque desenvolvimento híbrido?● Configurando o ambiente● Criando nossa aplicação

Origem do FrameworkE no princípio, tudo era PhoneGap ...Foi um framework criado pela Nitobi Software, premiado pela O’Reilly Media em 2009, e aceito por grandes empresas do mercado móvel, como a Apple por exemplo.Em 2011 a Nitobi foi comprada pela Adobe, que cedeu o núcleo do PhoneGap para a Apache Foundation, dando origem a um novo projeto chamado Apache Cordova.

Origem do FrameworkEntão Temos

PhoneGap x Apache Cordova (Pago) (Gratuito)

http://cordova.apache.org

Origem do FrameworkTwitter Bootstrap

Uma coleção de ferramentas utilizadas para criação de websites e aplicações web ricas, contém um conjunto de componentes html, css e javascript.Foi criado e utilizado internamente pelo Twitter, que em 2011 abriu seu código para a comunidade, e 6 meses depois já era o projeto com maior número de estrelas no github.

http://www.getbootstrap.com

Origem do FrameworkAngularJS

Framework Javascript mantido pela Google, criado para o desenvolvimento de SPAs (Single Page Applications).Implementou na web o conceito two way databinding.

View reflete o ControllerController reflete a View

http://www.angularjs.org

Origem do Framework

Ok, viemos falar de Ionic, mas até agora falamos de outros 3

frameworks ...

Origem do FrameworkO Ionic Framework foi construído sobre estes outros poderosos frameworks

http://www.ionicframework.com

Porque Desenvolvimento Híbrido?

Há um tempo atrás … escrevi um post no linkedin, contando uma história sobre como eu encontrei o Ionic e os motivos que me levaram a optar por ele, abaixo o link para o artigo original (leiam irmãos!!) e um breve resumo.

https://www.linkedin.com/today/post/article/20140612154131-26248656-ionic-framework-porque-utilizar

Porque Desenvolvimento Híbrido?

● Baixa curva de aprendizado● Menor custo no desenvolvimento● Mesmo código, várias plataformas● Compatibilidade entre dispositivos

Porque Desenvolvimento Híbrido?

E porque o Ionic?

1) MVC - quando se fala em aplicativos híbridos se fala em javascript, simples assim e não tem jeito, então o framework precisa garantir uma arquitetura MVC para uma boa organização, leitura e entendimento do código fonte.

2) Boa Suíte de Componentes - pois bem, se vou escolher um framework, os componentes deste precisam ser muito parecidos, o ideal é que sejam iguais, aos nativos das plataformas e que sejam suficientes para minha app, um framework com dois ou três componentes não serviria.

Porque Desenvolvimento Híbrido?

E porque o Ionic?

3) Produtivo! Como não me considero um ultra mega super expert em javascript precisava de algo abstraísse o máximo possivel, para que meu foco fosse necessariamente o objetivo da minha app.

Para conferir o final dessa história emocionante, leia o post dos slides anteriores.

Configurando o AmbienteComeçando pelo começo, hoje em dia tudo no universo javascript começa pela instalação do nodejs.1) Vá para o site: http://nodejs.org, e siga os

procedimentos de instalação (se tiver dúvida me chame, se estiver vendo a apresentação pelo slideshare, bem aí só lamento =) ).

Configurando o AmbienteVamos ver se tudo deu certo na instalação. Se estiver no windows,gosto não se discute, abra um prompt do DOS, agora se tiver usando algum SISTEMA OPERACIONAL, abra um shell (terminal) digite npm e tecle enter.Você deve ter visto uma imagem semelhante a esta:

Configurando o Ambiente

Configurando o AmbienteSe você estiver usando o windows (gosto não se discute), você pode ter se deparado com um erro semelhante a este:Error: ENOENT, stat 'C:\Users\RT\AppData\Roaming\npm'

A correção é simples, a última pasta 'npm' não foi criada, é necessário copiar o caminho que deu o erro na sua máquina, e criar o diretório 'npm' manualmente.

Configurando o Ambiente2) Próximo passo, instalar o cordova e o ionic:Ainda no shell (sim eu espero que você esteja num shell).

npm install -g cordova ionic

Configurando o Ambiente3) Hora de instalar o Android SDK, escolhi o Android pela

facilidade, pode ser baixado e compilado em qualquer sistema operacional (até no windows) sem pagar nada.

Acesse o endereço: http://developer.android.com/sdk/index.html e clique no link get the sdk for an existing IDE.

Configurando o AmbienteAtenção, é muito importante configurar a variável de ambiente ANDROID_HOME no seu sistema.Para confirmar a correta instalação, digite no shell: androidDeverá ser aberto o sdk manager, conforme imagem.

Configurando o Ambiente

Configurando o AmbienteAté aqui já seria possível:

● Criar um projeto Ionic● Adicionar a plataforma android● Compilar um app nativo android (ops! para isto ainda

precisamos instalar mais uma ferramenta)

Configurando o Ambiente4) Vá até o site:

ant.apache.orgBasta fazer o download da última versão, descompactar em um diretório a sua escolha.IMPORTANTE: Você precisa configurar a variável de ambiente ANT_HOME, para que possamos compilar a app nativa.

Configurando o AmbienteO que temos até aqui?

O ambiente Ionic configurado, pronto para gerar nosso primeiro aplicativo híbrido e a partir dele gerar uma versão compilada para o Android.

Configurando o AmbienteUtilizaremos como IDE de desenvolvimento o Notepad++ ou o TextMate, que podem ser baixados respectivamente nos endereços abaixo:

http://macromates.com/ (MAC ou LINUX)http://notepad-plus-plus.org/ (windows)

Configurando o AmbienteExiste três possibilidades de iniciar um projeto Ionic:● ionic start <nome do aplicativo> blank● ionic start <nome do aplicativo> tabs● ionic start <nome do aplicativo> sidemenu

Configurando o Ambiente

Configurando o AmbienteTestando tudo!Abra um shell (command) e digite:ionic start helloworld blank (um diretório chamado 'helloworld' foi criada, e dentro dela o diretório 'www' onde iremos realizar o trabalho todo.

Configurando o AmbienteTestando tudo!Dentro do diretório blank, pela linha de comando digite:ionic serveCaso seja apresentado algumas opções escolha o número que corresponda a 'localhost'O navegador padrão será aberto com a aplicação e cada alteração feita no código, refletirá na hora no navegador, sem necessidade de recarregar

Configurando o AmbienteTestando tudo!Digite android na linha de comando, que o SDK Manager será exibido, precisamos adicionar um emulador para ver nossa app rodando, vá no menu "Tools" e escolha a opção Manage AVDs… e lá crie seu novo dispositivo.

Configurando o Ambiente

Configurando o AmbienteTestando tudo!Beleza, último slide sobre o ambiente (prometo), na linha de comando dentro da pasta 'helloworld' digite:● ionic platform add android (vai adicionar suporte ao

android)● ionic emulate android (resultado no próximo slide)

Configurando o Ambiente

Vamos ao que Interessa!

Criando nossa AplicaçãoIremos criar um cadastro de cliente, que funcionará de sem depender da internet, e irá possuir os seguintes atributos:Nome CompletoEmailTelefoneEndereço (uf, cidade, bairro, rua, nº, cep, complemento)Observação (informações úteis sobre o cliente)

Criando nossa Aplicação

Criando nossa Aplicação

Não se desespere!Vou mandar um passo a passo semelhante a este, para

criar a app que está no slide anterior.www.linkedin.com/in/fgodoy

@fabiorgodoy