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 - Configuração do ambiente e a criação da primeira APP

10.329 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • esse é meu professor!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • OI poderia me passar o link da criação do app do slide ? Abraços
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Onde consigo o tutorial com a criação do app?
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Muito bom Godoy, vamos ver se funciona agora ;)
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

×