Hybrid app phonegap angular ionic
-
Upload
joelmir-ribacki -
Category
Devices & Hardware
-
view
249 -
download
1
Transcript of Hybrid app phonegap angular ionic
![Page 1: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/1.jpg)
Desenvolvimento de Aplicativos Híbridos com NodeJS + Cordova/Phonegap +
AngularJS + Ionic Framework
Joelmir Ribacki
Dezembro, 2014
![Page 2: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/2.jpg)
O que não será visto
![Page 3: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/3.jpg)
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.
![Page 4: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/4.jpg)
APPs hibridas
● Sensha touch● Jquery mobile● Ionic Framework● HTML 5● AngularJS● ...
![Page 5: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/5.jpg)
Phonegap ou cordova
Phonegap ( Adobe ) Cordova ( Apache )
![Page 6: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/6.jpg)
Tecnologias
● Cordova● AngularJS● Ionic Framework
![Page 7: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/7.jpg)
Minha primeira app em 5 linhas
1. # yum install nodejs2. # npm install -g cordova3. # npm install -g ionic4. # ionic start myApp sidemenu5. $ ionic serve
![Page 8: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/8.jpg)
http://localhost:8000/
![Page 9: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/9.jpg)
Estrutura do projeto
![Page 10: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/10.jpg)
Pasta www
![Page 11: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/11.jpg)
E roda PHP? noooooo!!
![Page 12: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/12.jpg)
Estrutura do AngularJS
![Page 13: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/13.jpg)
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; });
![Page 14: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/14.jpg)
![Page 15: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/15.jpg)
![Page 16: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/16.jpg)
Two-Way Data Binding - na prática
![Page 17: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/17.jpg)
Diretivas AngularJS
![Page 18: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/18.jpg)
Criando Diretivas AngularJS
![Page 19: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/19.jpg)
Ionic Framework
![Page 20: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/20.jpg)
Ionic - docs
![Page 21: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/21.jpg)
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.
![Page 22: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/22.jpg)
… ou Phonegap Build
![Page 23: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/23.jpg)
APPs para diferentes plataformas com o mesmo código
![Page 24: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/24.jpg)
Opppaaa estagiário novo na empresa
![Page 25: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/25.jpg)
Debugando...
![Page 26: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/26.jpg)
Nem tudo vem free...
Apple
● $99/Ano● Compilar local somente Xcode ( macOS )● Emulador só no mac ou direto no aparelho
com IOS.
![Page 27: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/27.jpg)
Nem tudo vem free...
Microsoft
● ~ $19/Ano (Pessoal)● $ 99/Ano ( Empresarial )● Visual Studio
![Page 28: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/28.jpg)
Nem tudo vem free...
Android
● $25 uma vez na vida● Uma maquina com muuuita memoria RAM● Mensagens de atualização do Java
![Page 29: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/29.jpg)
Agora eu vou fazer a minha APP multi plataforma e ficar milionário
![Page 30: Hybrid app phonegap angular ionic](https://reader031.fdocuments.net/reader031/viewer/2022031820/55a62a411a28abc0138b476a/html5/thumbnails/30.jpg)
Recaptulando
● Nodejs - gerenciar pacotes● Cordova/Phonegap - webview e acesso ao device● AngularJS - negócio da aplicação● Ionic - Interface● Deploy