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

1. Desenvolvimento de Aplicativos Híbridos
com NodeJS + Cordova/Phonegap +
AngularJS + Ionic Framework
Joelmir Ribacki
Dezembro, 2014

2. O que não será visto

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. APPs hibridas
● Sensha touch
● Jquery mobile
● Ionic Framework
● HTML 5
● AngularJS
● ...

5. Phonegap ou cordova
Phonegap ( Adobe ) Cordova ( Apache )

6. Tecnologias
● Cordova
● AngularJS
● Ionic Framework

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. http://localhost:8000/

9. Estrutura do projeto

10. Pasta www

11. E roda PHP? noooooo!!

12. Estrutura do AngularJS

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;
});

16. Two-Way Data Binding - na prática

17. Diretivas AngularJS

18. Criando Diretivas AngularJS

19. Ionic Framework

20. Ionic - docs

21. 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.

22. … ou Phonegap Build

23. APPs para diferentes plataformas
com o mesmo código

24. Opppaaa estagiário novo na empresa

25. Debugando...

26. Nem tudo vem free...
Apple
● $99/Ano
● Compilar local somente Xcode ( macOS )
● Emulador só no mac ou direto no aparelho
com IOS.

27. Nem tudo vem free...
Microsoft
● ~ $19/Ano (Pessoal)
● $ 99/Ano ( Empresarial )
● Visual Studio

28. Nem tudo vem free...
Android
● $25 uma vez na vida
● Uma maquina com muuuita memoria RAM
● Mensagens de atualização do Java

29. Agora eu vou fazer a minha APP
multi plataforma e ficar milionário

30. Recaptulando
● Nodejs - gerenciar pacotes
● Cordova/Phonegap - webview e acesso ao device
● AngularJS - negócio da aplicação
● Ionic - Interface
● Deploy

31. Perguntas?
Joelmir Ribacki
joelmir.ribacki@gmail.com
https://github.com/joelmir