Hybrid app phonegap angular ionic

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

Perguntas?

Joelmir Ribacki

joelmir.ribacki@gmail.comhttps://github.com/joelmir