Desenvolvimento de Aplicativos Híbridos 
com NodeJS + Cordova/Phonegap + 
AngularJS + Ionic Framework 
Joelmir Ribacki 
De...
O que não será visto
Aplicativos mobiles 
Um sistema instalado em um celular, tablet, 
PDA ou até mesmo em Windows phone*. 
● Nativos 
● Hibrid...
APPs hibridas 
● Sensha touch 
● Jquery mobile 
● Ionic Framework 
● HTML 5 
● AngularJS 
● ...
Phonegap ou cordova 
Phonegap ( Adobe ) Cordova ( Apache )
Tecnologias 
● Cordova 
● AngularJS 
● Ionic Framework
Minha primeira app em 5 linhas 
1. # yum install nodejs 
2. # npm install -g cordova 
3. # npm install -g ionic 
4. # ioni...
http://localhost:8000/
Estrutura do projeto
Pasta www
E roda PHP? noooooo!!
Estrutura do AngularJS
E la vem código... 
angular.module('MyApp', [ 'MyApp.controllers', ‘MyApp.services’]); 
… 
angular.module('MyApp.controlle...
Two-Way Data Binding - na prática
Diretivas AngularJS
Criando Diretivas AngularJS
Ionic Framework
Ionic - docs
Tudo bonito, mas como mando para 
google play? apple store? Windows 
Store? 
● Compre um Mac. 
● Instale AVD do android. 
...
… ou Phonegap Build
APPs para diferentes plataformas 
com o mesmo código
Opppaaa estagiário novo na empresa
Debugando...
Nem tudo vem free... 
Apple 
● $99/Ano 
● Compilar local somente Xcode ( macOS ) 
● Emulador só no mac ou direto no aparel...
Nem tudo vem free... 
Microsoft 
● ~ $19/Ano (Pessoal) 
● $ 99/Ano ( Empresarial ) 
● Visual Studio
Nem tudo vem free... 
Android 
● $25 uma vez na vida 
● Uma maquina com muuuita memoria RAM 
● Mensagens de atualização do...
Agora eu vou fazer a minha APP 
multi plataforma e ficar milionário
Recaptulando 
● Nodejs - gerenciar pacotes 
● Cordova/Phonegap - webview e acesso ao device 
● AngularJS - negócio da apli...
Perguntas? 
Joelmir Ribacki 
joelmir.ribacki@gmail.com 
https://github.com/joelmir
Hybrid app   phonegap angular ionic
Hybrid app   phonegap angular ionic
Próximos SlideShares
Carregando em…5
×

Hybrid app phonegap angular ionic

757 visualizações

Publicada em

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

Publicada em: Dispositivos e hardware
1 comentário
0 gostaram
Estatísticas
Notas
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
757
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
38
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×