SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
Descomplicando o Mobile
com Ionic Framework
WebDevSummit 2015
Yan Borowski
Machado
Gerente de Desenvolvimento e
Projetos na AM4
2
Antes do Ionic, um pouco de
história...
3
Desenvolvimento Web ~ 10 anos
 Firefox (2004)
 Ajax / XMLHttpRequest (2005)
 Esboço da Especificação do HTML 5 (2008)
 Google Chrome (2008)
 Drag and Drop (2008)
 Geolocalização (2009)
 WebGL (2011)
 HTML 5: Processo de especificação concluído (2014)
4
5
6
Ionic Framework
Foco na construção do aplicativo,
não como um aplicativo deve
funcionar por trás
7
O que tem na caixinha?
8
Funcionamento
 Um único código fonte
 Acesso à APIs nativas através do CORDOVA
 Comandos simples via console
9
CORDOVA
 Touch ID
 Open Authentication
 Camera
 Push
 Geolocalização
 Health kit
 Giroscópio / Acelerómetro
 Etc, etc
10
Mais em: http://ngcordova.com/docs/plugins/
Comandos básicos
 $ npm install -g ionic cordova
 $ ionic start myapp sidemenu | blank | tabs
 $ cd myapp
 $ ionic platform add android | ios
 $ ionic serve
 $ ionic build android | ios
 $ ionic run android | ios
 $ ionic upload
11
Continuidade de
Plataforma
Fonte: http://ionicframework.com/blog/platform-continuity/
12
13
IonicView
Sem instalação de SDK
14
Firebase
<script>
var fb = new
Firebase("https://INSTANCE_ID_HERE.firebaseio.com/");
</script>
15
Hora da Demo
16
Simplicidade
“Simplicidade é o nível mais alto de sofisticação”
Leonardo da Vinci
“Menos é mais”
Ludwig Mies Van der Rohe
“KISS – Keep It Simple, Stupid!”
Kelly Johnson
17
Who to follow?
 Ionic - @ionicframework
 Adam Bradley - @adamdbradley
 Max Lynch - @maxlynch
 Bem Sperry - @benjsperry
 Drifty - @DriftyCo
18
Links úteis
 http://ionicframework.com/
 http://ionicframework.com/docs/overview/
 https://www.airpair.com/ionic-framework/posts/ionic-firebase-
password-manager
19
20
+
E ai, vamos começar?

Mais conteúdo relacionado

Mais procurados

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
 
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
 
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
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSWaldyr Felix
 
Testando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o KarmaTestando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o KarmaHenrique Limas
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Criciúma Dev
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci
 
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
 
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
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapMayron Cachina
 
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETProgressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETAndre Baltieri
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?akamud
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front endDouglas Matoso
 
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)

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
 
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)
 
Ionic Framework
Ionic FrameworkIonic Framework
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
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Testando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o KarmaTestando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o Karma
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
 
Phonegap
PhonegapPhonegap
Phonegap
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
 
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
 
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
 
Blazor #SnetTalks3
Blazor  #SnetTalks3Blazor  #SnetTalks3
Blazor #SnetTalks3
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGap
 
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETProgressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
 
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
 
[Geral] colaboradores engajamento
[Geral] colaboradores   engajamento[Geral] colaboradores   engajamento
[Geral] colaboradores engajamentoRangel Torrezan
 
Facilitando sua vida com WP Customizer
Facilitando sua vida com WP CustomizerFacilitando sua vida com WP Customizer
Facilitando sua vida com WP CustomizerEmerson Thompson
 
Contruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual StudioContruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual StudioWennder Santos
 
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015Rangel Torrezan
 
Offline apps Using Ionic Framework and PouchDB
Offline apps  Using Ionic Framework and PouchDBOffline apps  Using Ionic Framework and PouchDB
Offline apps Using Ionic Framework and PouchDBAlvaro Viebrantz
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 
Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!Eduardo Lieuthier
 

Destaque (10)

Ionic workshop
Ionic workshopIonic workshop
Ionic workshop
 
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
 
[Geral] colaboradores engajamento
[Geral] colaboradores   engajamento[Geral] colaboradores   engajamento
[Geral] colaboradores engajamento
 
Facilitando sua vida com WP Customizer
Facilitando sua vida com WP CustomizerFacilitando sua vida com WP Customizer
Facilitando sua vida com WP Customizer
 
Contruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual StudioContruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual Studio
 
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
 
Offline apps Using Ionic Framework and PouchDB
Offline apps  Using Ionic Framework and PouchDBOffline apps  Using Ionic Framework and PouchDB
Offline apps Using Ionic Framework and PouchDB
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 
Ionic framework for web developer
Ionic framework for web developerIonic framework for web developer
Ionic framework for web developer
 
Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!
 

Semelhante a Descomplicando o Mobile com Ionic Framework

Workshop de Firefox OS
Workshop de Firefox OSWorkshop de Firefox OS
Workshop de Firefox OSDavid Ruiz
 
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisApresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisÉdipo Souza
 
Vcl For The Web - Palestra sobre desenvolvimento web em Delphi
Vcl For The Web - Palestra sobre desenvolvimento web em DelphiVcl For The Web - Palestra sobre desenvolvimento web em Delphi
Vcl For The Web - Palestra sobre desenvolvimento web em DelphiWecsley Fey
 
HTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFHTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFLeonardo Balter
 
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
 
Ionic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvelIonic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvelGustavo Costa
 
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 HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryfelipebzr
 
Desenvolvendo para Firefox OS
Desenvolvendo para Firefox OSDesenvolvendo para Firefox OS
Desenvolvendo para Firefox OSDavid Ruiz
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic FrameworkJunior Abranches
 
Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web Jean Carlo Emer
 
Apresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - GoiâniaApresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - GoiâniaFrederico Maia Arantes
 
Html5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreirasHtml5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreirasHcode
 
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 HTML5Rafael Sakurai
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Loiane Groner
 
2010 - O ano das novidades
2010 - O ano das novidades2010 - O ano das novidades
2010 - O ano das novidadesalliston
 

Semelhante a Descomplicando o Mobile com Ionic Framework (20)

Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Mobile Dev - Aplicativos
Mobile Dev - AplicativosMobile Dev - Aplicativos
Mobile Dev - Aplicativos
 
Workshop de Firefox OS
Workshop de Firefox OSWorkshop de Firefox OS
Workshop de Firefox OS
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
 
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisApresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
 
Vcl For The Web - Palestra sobre desenvolvimento web em Delphi
Vcl For The Web - Palestra sobre desenvolvimento web em DelphiVcl For The Web - Palestra sobre desenvolvimento web em Delphi
Vcl For The Web - Palestra sobre desenvolvimento web em Delphi
 
HTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFHTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFF
 
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...
 
Ionic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvelIonic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvel
 
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
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
 
Iniciando com IphoneDev
Iniciando com IphoneDevIniciando com IphoneDev
Iniciando com IphoneDev
 
Desenvolvendo para Firefox OS
Desenvolvendo para Firefox OSDesenvolvendo para Firefox OS
Desenvolvendo para Firefox OS
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic Framework
 
Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web
 
Apresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - GoiâniaApresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - Goiânia
 
Html5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreirasHtml5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreiras
 
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
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
 
2010 - O ano das novidades
2010 - O ano das novidades2010 - O ano das novidades
2010 - O ano das novidades
 

Descomplicando o Mobile com Ionic Framework

Notas do Editor

  1. Ajax: Avanços feitos pelo Google em 2004 / 2005, Atigo “Ajax: A New Approach to Web Development” de Jesse James Garrett. Release do W3C em Apr 2006