hybrid app phonegap angular ionic
TRANSCRIPT
Desenvolvimento de Aplicativos Híbridos com NodeJS + Cordova/Phonegap +
AngularJS + Ionic Framework
Joelmir Ribacki
Dezembro, 2014
O que não será visto
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.
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 nodejs2. # npm install -g cordova3. # npm install -g ionic4. # ionic start myApp sidemenu5. $ ionic serve
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.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; });
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.● Rode pela primeira vez na vida o Visual Studio.
… 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 aparelho
com IOS.
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 Java
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 aplicação● Ionic - Interface● Deploy