criando aplicações mobile híbridas com ionic framework
TRANSCRIPT
![Page 1: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/1.jpg)
Criando aplicações mobile híbridas com Ionic Framework
João Gabriel Lima
@[email protected]/in/joaogabriellima
![Page 2: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/2.jpg)
http://github.com/jgabriellima
IT Hacker, Arquiteto de soluções, Instrutor
em treinamentos e Co-fundador da Huddle3.
Mestre em Computação Aplicada com
ênfase em Inteligência Artificial, Mineração de
Dados e BigData.
![Page 3: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/3.jpg)
Ionic é um framework para desenvolvimento de aplicações para dispositivos móveis que tem como principal objetivo o
desenvolvimento de apps híbridas e forma rápida e facilitada.
![Page 4: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/4.jpg)
Aplicativos híbridos, como isso funciona?
![Page 5: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/5.jpg)
Aplicativos híbridos, como funciona?
![Page 6: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/6.jpg)
Ok! Mas porque “híbrido”?
![Page 7: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/7.jpg)
![Page 8: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/8.jpg)
Como o phonegap trabalha?
![Page 9: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/9.jpg)
phonegap.com
![Page 10: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/10.jpg)
A Plataforma Ionic.io@alpha
![Page 11: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/11.jpg)
![Page 12: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/12.jpg)
![Page 13: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/13.jpg)
![Page 14: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/14.jpg)
![Page 15: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/15.jpg)
![Page 16: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/16.jpg)
![Page 17: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/17.jpg)
Iniciando uma aplicação Ionic
http://goo.gl/PFCGr3
![Page 18: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/18.jpg)
ionic start <app>
ionic upload
ionic platform add android [ios]
ionic serve --lab
ionic run android [ios]
![Page 19: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/19.jpg)
ionic resources --icon(192 x 192)
ionic resources --splash(2208 x 2208)
![Page 20: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/20.jpg)
E os recursos?
![Page 21: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/21.jpg)
Action SheetAdMobApp AvailabilityApp RateApp VersionBadgeBackground GeolocBattery StatusBarcode ScannerCalendarCameraCaptureGoogle AnalyticsHealthKitiBeaconImage PickerIn App BrowserInstagramGlobalization
MediaNative AudioNetworkOAuthPin DialogPreferencesPrinterProgress IndicatorPush NotificationsSMSSocial SharingSpinner DialogSplashscreenSQLiteStatusBarToastTouchIDVibrationZIP
ClipboardContactsDate PickerDeviceDevice MotionDevice OrientationDialogsEmail ComposerFacebookFileFile TransferFileOpener2FlashlightGeolocationGlobalizationKeyboardKeychainLaunch NavigatorLocal Notification
Recursos
![Page 22: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/22.jpg)
Quando devo utilizar o Ionic?
Nativo vs Híbrido
![Page 23: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/23.jpg)
● Provas de Conceito
● MVP
● Startups
● Forte equipe web
● Experiência
● Domínio das tecnologias da OpenWeb Platform
● Distribuição imediata para diversas plataformas:
![Page 24: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/24.jpg)
Quando não é indicado o uso?
● Fluxo intenso de dados
● Massiva manipulação de mídias
● Necessidade de recursos do dispositivo muito recentes
● Pouca experiência com as tecnologias Web
![Page 25: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/25.jpg)
![Page 26: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/26.jpg)
![Page 27: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/27.jpg)
![Page 28: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/28.jpg)
https://github.com/jgabriellima/tasafoconfapp
![Page 29: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/29.jpg)
Entendendo a estrutura da aplicação
![Page 30: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/30.jpg)
Ionic 2 @alpha
![Page 31: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/31.jpg)
![Page 32: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/32.jpg)
Nova estrutura
Mais flexibilidade
Melhor desempenho
Componentes modernos
http://ionicframework.com/docs/v2/
![Page 33: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/33.jpg)
![Page 34: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/34.jpg)
Então quer dizer que se eu souber apenas HTML, CSS e Javascript, eu posso construir aplicativos para
dispositivos móveis?
![Page 35: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/35.jpg)
Desde 2013, os carros da GM já vêm com um SDK para desenvolvimento de aplicativos para seus veículos, utilizando HTML5, CSS3 e JS...
![Page 36: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/36.jpg)
![Page 37: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/37.jpg)
![Page 38: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/38.jpg)
![Page 39: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/39.jpg)
![Page 40: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/40.jpg)
![Page 41: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/41.jpg)
![Page 42: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/42.jpg)
Eu quero aprender, mas quem poderá me ajudar?
![Page 43: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/43.jpg)
Consultoria em Tecnologia e Inovação
![Page 44: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/44.jpg)
Treinamentos:
Curso “Full-stack mobile developer” com Ionic Framework, Nodejs e
MongoDB
![Page 45: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/45.jpg)
![Page 47: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/47.jpg)
Consultoria em Tecnologia e Inovação
![Page 48: Criando Aplicações Mobile Híbridas com Ionic Framework](https://reader031.vdocuments.mx/reader031/viewer/2022021918/58a825d51a28abbe408b4711/html5/thumbnails/48.jpg)
Criando aplicações mobile híbridas com Ionic Framework
João Gabriel Lima
@[email protected]/in/joaogabriellima