O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Ionic Framework 
Desenvolvimento 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 Softwa...
Por onde iremos? 
● Origem do framework 
● Porque desenvolvimento híbrido? 
● Configurando o ambiente 
● Criando nossa apl...
Origem do Framework 
E no princípio, tudo era PhoneGap ... 
Foi um framework criado pela Nitobi Software, premiado 
pela O...
Origem do Framework 
Então Temos 
PhoneGap x Apache Cordova 
(Pago) (Gratuito) 
http://cordova.apache.org
Origem do Framework 
Twitter Bootstrap 
Uma coleção de ferramentas utilizadas para criação de 
websites e aplicações web r...
Origem do Framework 
AngularJS 
Framework Javascript mantido pela Google, criado para o 
desenvolvimento de SPAs (Single P...
Origem do Framework 
Ok, viemos falar de Ionic, mas até 
agora falamos de outros 3 
frameworks ...
Origem do Framework 
O Ionic Framework 
foi construído sobre 
estes outros 
poderosos 
frameworks 
http://www.ionicframewo...
Porque Desenvolvimento Híbrido? 
Há um tempo atrás … escrevi um post no linkedin, 
contando uma história sobre como eu enc...
Porque Desenvolvimento Híbrido? 
● Baixa curva de aprendizado 
● Menor custo no desenvolvimento 
● Mesmo código, várias pl...
Porque Desenvolvimento Híbrido? 
E porque o Ionic? 
1) MVC - quando se fala em aplicativos híbridos se fala em javascript,...
Porque Desenvolvimento Híbrido? 
E porque o Ionic? 
3) Produtivo! Como não me considero um ultra mega super expert em 
jav...
Configurando o Ambiente 
Começando pelo começo, hoje em dia tudo no universo 
javascript começa pela instalação do nodejs....
Configurando o Ambiente 
Vamos ver se tudo deu certo na instalação. 
Se estiver no windows,gosto não se discute, abra um 
...
Configurando o Ambiente
Configurando o Ambiente 
Se você estiver usando o windows (gosto não se discute), 
você pode ter se deparado com um erro s...
Configurando o Ambiente 
2) Próximo passo, instalar o cordova e o ionic: 
Ainda no shell (sim eu espero que você esteja nu...
Configurando o Ambiente 
3) Hora de instalar o Android SDK, escolhi o Android pela 
facilidade, pode ser baixado e compila...
Configurando o Ambiente 
Atenção, é muito importante configurar a variável de 
ambiente ANDROID_HOME no seu sistema. 
Para...
Configurando o Ambiente
Configurando o Ambiente 
Até aqui já seria possível: 
● Criar um projeto Ionic 
● Adicionar a plataforma android 
● Compil...
Configurando o Ambiente 
4) Vá até o site: 
ant.apache.org 
Basta fazer o download da última versão, descompactar 
em um d...
Configurando o Ambiente 
O que temos até aqui? 
O ambiente Ionic configurado, pronto para gerar nosso 
primeiro aplicativo...
Configurando o Ambiente 
Utilizaremos como IDE de desenvolvimento o Notepad++ 
ou o TextMate, que podem ser baixados respe...
Configurando o Ambiente 
Existe três possibilidades de iniciar um projeto Ionic: 
● ionic start <nome do aplicativo> blank...
Configurando o Ambiente
Configurando o Ambiente 
Testando tudo! 
Abra um shell (command) e digite: 
ionic start helloworld blank (um diretório cha...
Configurando o Ambiente 
Testando tudo! 
Dentro do diretório blank, pela linha de comando digite: 
ionic serve 
Caso seja ...
Configurando o Ambiente 
Testando tudo! 
Digite android na linha de comando, que o SDK Manager 
será exibido, precisamos a...
Configurando o Ambiente
Configurando o Ambiente 
Testando tudo! 
Beleza, último slide sobre o ambiente (prometo), na linha 
de comando dentro da p...
Configurando o Ambiente
Vamos ao que Interessa!
Criando nossa Aplicação 
Iremos criar um cadastro de cliente, que funcionará de sem 
depender da internet, e irá possuir o...
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 s...
Próximos SlideShares
Carregando em…5
×

36

Compartilhar

Baixar para ler offline

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

Baixar para ler offline

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

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

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
  • Kalanzans

    Feb. 13, 2020
  • seugonzalez

    Jul. 30, 2018
  • joelsonoliveirasilva5

    Jun. 5, 2017
  • marcelopspereira

    Mar. 20, 2017
  • fernando1104

    Mar. 10, 2017
  • VitorCardoso19

    Feb. 17, 2017
  • malliotti

    Dec. 14, 2016
  • murilozend

    Nov. 17, 2016
  • tianoski

    Nov. 1, 2016
  • FranciscoHenriquedaSilva

    Aug. 9, 2016
  • RafaelMartinelliCapi

    May. 25, 2016
  • AndreSeoane

    Apr. 19, 2016
  • GabrielLuis7

    Mar. 29, 2016
  • matheusdevsign

    Dec. 31, 2015
  • efcribeiro

    Nov. 9, 2015
  • CarlosEduardoSantos

    Oct. 24, 2015
  • andrearruda82

    Oct. 23, 2015
  • PabliusCardoso

    Oct. 18, 2015
  • teste007

    Sep. 17, 2015
  • diovanemonteiro

    Aug. 30, 2015

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

Vistos

Vistos totais

10.608

No Slideshare

0

De incorporações

0

Número de incorporações

115

Ações

Baixados

245

Compartilhados

0

Comentários

0

Curtir

36

×