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.

Hybrid app phonegap angular ionic

821 visualizações

Publicada em

Developing mobile applications with cordova (phonegap), Angular, Ionic and phonegap build

Publicada em: Dispositivos e hardware
  • Seja a primeira pessoa a gostar disto

Hybrid app phonegap angular ionic

  1. 1. Desenvolvimento de Aplicativos Híbridos com NodeJS + Cordova/Phonegap + AngularJS + Ionic Framework Joelmir Ribacki Dezembro, 2014
  2. 2. O que não será visto
  3. 3. Aplicativos mobiles Um sistema instalado em um celular, tablet, PDA ou até mesmo em Windows phone*. ● Nativos ● Hibridos ● Web * Todo mundo diz que é bom mas poucos tem e os que tem não acham APPs para instalar.
  4. 4. APPs hibridas ● Sensha touch ● Jquery mobile ● Ionic Framework ● HTML 5 ● AngularJS ● ...
  5. 5. Phonegap ou cordova Phonegap ( Adobe ) Cordova ( Apache )
  6. 6. Tecnologias ● Cordova ● AngularJS ● Ionic Framework
  7. 7. Minha primeira app em 5 linhas 1. # yum install nodejs 2. # npm install -g cordova 3. # npm install -g ionic 4. # ionic start myApp sidemenu 5. $ ionic serve
  8. 8. http://localhost:8000/
  9. 9. Estrutura do projeto
  10. 10. Pasta www
  11. 11. E roda PHP? noooooo!!
  12. 12. Estrutura do AngularJS
  13. 13. E la vem código... angular.module('MyApp', [ 'MyApp.controllers', ‘MyApp.services’]); … angular.module('MyApp.controllers', []).controller('driversController', function($scope) { $scope.name = “I’m Angular”; }); … angular.module('MyApp.services', []).factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } return ergastAPI; });
  14. 14. Two-Way Data Binding - na prática
  15. 15. Diretivas AngularJS
  16. 16. Criando Diretivas AngularJS
  17. 17. Ionic Framework
  18. 18. Ionic - docs
  19. 19. Tudo bonito, mas como mando para google play? apple store? Windows Store? ● Compre um Mac. ● Instale AVD do android. ● Rode pela primeira vez na vida o Visual Studio.
  20. 20. … ou Phonegap Build
  21. 21. APPs para diferentes plataformas com o mesmo código
  22. 22. Opppaaa estagiário novo na empresa
  23. 23. Debugando...
  24. 24. Nem tudo vem free... Apple ● $99/Ano ● Compilar local somente Xcode ( macOS ) ● Emulador só no mac ou direto no aparelho com IOS.
  25. 25. Nem tudo vem free... Microsoft ● ~ $19/Ano (Pessoal) ● $ 99/Ano ( Empresarial ) ● Visual Studio
  26. 26. Nem tudo vem free... Android ● $25 uma vez na vida ● Uma maquina com muuuita memoria RAM ● Mensagens de atualização do Java
  27. 27. Agora eu vou fazer a minha APP multi plataforma e ficar milionário
  28. 28. Recaptulando ● Nodejs - gerenciar pacotes ● Cordova/Phonegap - webview e acesso ao device ● AngularJS - negócio da aplicação ● Ionic - Interface ● Deploy
  29. 29. Perguntas? Joelmir Ribacki joelmir.ribacki@gmail.com https://github.com/joelmir

×