Ionic Framework - Configuração do ambiente e a criação da primeira APP

8.769 visualizações

Publicada em

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

Publicada em: Software
8 comentários
34 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
8.769
No SlideShare
0
A partir de incorporações
0
Número de incorporações
108
Ações
Compartilhamentos
0
Downloads
219
Comentários
8
Gostaram
34
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ionic Framework - Configuração do ambiente e a criação da primeira APP

  1. 1. Ionic Framework Desenvolvimento Mobile Híbrido Multi Plataforma Por Fábio Godoy
  2. 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. 3. Por onde iremos? ● Origem do framework ● Porque desenvolvimento híbrido? ● Configurando o ambiente ● Criando nossa aplicação
  4. 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. 5. Origem do Framework Então Temos PhoneGap x Apache Cordova (Pago) (Gratuito) http://cordova.apache.org
  6. 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. 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. 8. Origem do Framework Ok, viemos falar de Ionic, mas até agora falamos de outros 3 frameworks ...
  9. 9. Origem do Framework O Ionic Framework foi construído sobre estes outros poderosos frameworks http://www.ionicframework.com
  10. 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. 11. Porque Desenvolvimento Híbrido? ● Baixa curva de aprendizado ● Menor custo no desenvolvimento ● Mesmo código, várias plataformas ● Compatibilidade entre dispositivos
  12. 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. 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. 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. 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. 16. Configurando o Ambiente
  17. 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. 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. 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. 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. 21. Configurando o Ambiente
  22. 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. 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. 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. 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. 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. 27. Configurando o Ambiente
  28. 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. 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. 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. 31. Configurando o Ambiente
  32. 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. 33. Configurando o Ambiente
  34. 34. Vamos ao que Interessa!
  35. 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. 36. Criando nossa Aplicação
  37. 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

×