SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
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 nodejs 
2. # npm install -g cordova 
3. # npm install -g ionic 
4. # ionic start myApp sidemenu 
5. $ 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.com 
https://github.com/joelmir

Mais conteúdo relacionado

Mais procurados

Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}
Sinesio bittencourt - Ionic framework  {Aplicações móveis híbridas}Sinesio bittencourt - Ionic framework  {Aplicações móveis híbridas}
Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}Sinesio Bittencourt
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.Sinesio Bittencourt
 
Phonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorPhonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorAfonso Fernandes
 
Criando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkCriando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkJoão Gabriel Lima
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapThiago Colares
 
instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1Afonso Fernandes
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkCristian Dean
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicFelipe Renan Vieira
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSWaldyr Felix
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapMayron Cachina
 
Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Luiz Gavinho
 
Porque você deveria usar IONIC
Porque você deveria usar IONICPorque você deveria usar IONIC
Porque você deveria usar IONICDan Jesus
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5Rodrigo Cascarrolho
 

Mais procurados (20)

Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}
Sinesio bittencourt - Ionic framework  {Aplicações móveis híbridas}Sinesio bittencourt - Ionic framework  {Aplicações móveis híbridas}
Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
 
Phonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorPhonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emulador
 
Criando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkCriando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic Framework
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
 
instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1
 
FabricApp - Equipa A
FabricApp - Equipa AFabricApp - Equipa A
FabricApp - Equipa A
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
 
Phonegap
PhonegapPhonegap
Phonegap
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGap
 
Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!
 
Porque você deveria usar IONIC
Porque você deveria usar IONICPorque você deveria usar IONIC
Porque você deveria usar IONIC
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
 

Destaque

Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Intel Software Brasil
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoWilliam Ribeiro da Silva
 
Desenvolvimento de Aplicativo Multiplataforma com Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com  Intel® XDKDesenvolvimento de Aplicativo Multiplataforma com  Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com Intel® XDKEvandro Paes
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache CordovaIvano Malavolta
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao PhonegapLoiane Groner
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksJuarez Filho
 
Novidades Angular 4.x e CLI
Novidades Angular 4.x e CLI Novidades Angular 4.x e CLI
Novidades Angular 4.x e CLI Loiane Groner
 

Destaque (11)

Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
 
Ionic workshop
Ionic workshopIonic workshop
Ionic workshop
 
Desenvolvimento de Aplicativo Multiplataforma com Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com  Intel® XDKDesenvolvimento de Aplicativo Multiplataforma com  Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com Intel® XDK
 
Minicurso Intel XDK
Minicurso Intel XDKMinicurso Intel XDK
Minicurso Intel XDK
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
Novidades Angular 4.x e CLI
Novidades Angular 4.x e CLI Novidades Angular 4.x e CLI
Novidades Angular 4.x e CLI
 

Semelhante a Hybrid app phonegap angular ionic

Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Marcelo Marques Gonçalves
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2Ricardo Netto - MCP, MSP
 
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Pedro Edson Silva Barros
 
la 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gapla 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gapRoberson Alves
 
Imersão hybrid apps
Imersão   hybrid appsImersão   hybrid apps
Imersão hybrid appsAdalto Junior
 
Android: Conheça o Futuro Inevitável
Android: Conheça o Futuro InevitávelAndroid: Conheça o Futuro Inevitável
Android: Conheça o Futuro InevitávelCampus Party Brasil
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Loiane Groner
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Henrique Dezani
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React NativeLeonardoPrange
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas MobileHugo Iuri
 
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...DevCamp Campinas
 

Semelhante a Hybrid app phonegap angular ionic (20)

Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2
 
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
 
Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01
 
la 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gapla 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gap
 
UFABC React Native
UFABC React NativeUFABC React Native
UFABC React Native
 
Ionic 2 na pratica!
Ionic 2 na pratica!Ionic 2 na pratica!
Ionic 2 na pratica!
 
Curso Básico Android - Aula 01
Curso Básico Android - Aula 01Curso Básico Android - Aula 01
Curso Básico Android - Aula 01
 
Imersão hybrid apps
Imersão   hybrid appsImersão   hybrid apps
Imersão hybrid apps
 
Android: Conheça o Futuro Inevitável
Android: Conheça o Futuro InevitávelAndroid: Conheça o Futuro Inevitável
Android: Conheça o Futuro Inevitável
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
 
Front7 React Native
Front7 React NativeFront7 React Native
Front7 React Native
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React Native
 
Mobile Dev - Aplicativos
Mobile Dev - AplicativosMobile Dev - Aplicativos
Mobile Dev - Aplicativos
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
 
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
 

Hybrid app phonegap angular ionic