Um passo a passo detalhado sobre a configuração do ambiente, tratando possíveis erros, sobre como desenvolver aplicativos híbridos utilizando o Ionic Framework

1. Ionic Framework
Desenvolvimento Mobile Híbrido Multi Plataforma
Por Fábio Godoy

2. 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.

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

4. Origem do Framework
E 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.

5. Origem do Framework
Então Temos
PhoneGap x Apache Cordova
(Pago) (Gratuito)
http://cordova.apache.org

6. Origem do Framework
Twitter 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

7. Origem do Framework
AngularJS
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 Controller
Controller reflete a View
http://www.angularjs.org

8. Origem do Framework
Ok, viemos falar de Ionic, mas até
agora falamos de outros 3
frameworks ...

9. Origem do Framework
O Ionic Framework
foi construído sobre
estes outros
poderosos
frameworks
http://www.ionicframework.com

10. 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

11. Porque Desenvolvimento Híbrido?
● Baixa curva de aprendizado
● Menor custo no desenvolvimento
● Mesmo código, várias plataformas
● Compatibilidade entre dispositivos

12. 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.

13. 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.

14. Configurando o Ambiente
Começ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 =) ).

15. Configurando o Ambiente
Vamos 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:

16. Configurando o Ambiente

17. Configurando o Ambiente
Se 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:UsersRTAppDataRoamingnpm'
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.

18. Configurando o Ambiente
2) 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

19. Configurando o Ambiente
3) 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.

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

21. Configurando o Ambiente

22. Configurando o Ambiente
Até 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)

23. Configurando o Ambiente
4) Vá até o site:
ant.apache.org
Basta 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.

24. Configurando o Ambiente
O 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.

25. Configurando o Ambiente
Utilizaremos 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)

26. Configurando o Ambiente
Existe 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

27. Configurando o Ambiente

28. Configurando o Ambiente
Testando 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.

29. Configurando o Ambiente
Testando tudo!
Dentro do diretório blank, pela linha de comando digite:
ionic serve
Caso 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

30. Configurando o Ambiente
Testando 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.

31. Configurando o Ambiente

32. Configurando o Ambiente
Testando 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)

33. Configurando o Ambiente

34. Vamos ao que Interessa!

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

36. Criando nossa Aplicação

37. 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