criando aplicações mobile híbridas com ionic framework

48
Criando aplicações mobile híbridas com Ionic Framework João Gabriel Lima @jgabriel_lima [email protected] linkedin.com/in/joaogabriellima

Upload: joao-gabriel-lima

Post on 18-Feb-2017

828 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Criando Aplicações Mobile Híbridas com Ionic Framework

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

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

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

Aplicativos híbridos, como isso funciona?

Page 5: Criando Aplicações Mobile Híbridas com Ionic Framework

Aplicativos híbridos, como funciona?

Page 6: Criando Aplicações Mobile Híbridas com Ionic Framework

Ok! Mas porque “híbrido”?

Page 7: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 8: Criando Aplicações Mobile Híbridas com Ionic Framework

Como o phonegap trabalha?

Page 9: Criando Aplicações Mobile Híbridas com Ionic Framework

phonegap.com

Page 10: Criando Aplicações Mobile Híbridas com Ionic Framework

A Plataforma Ionic.io@alpha

Page 11: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 12: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 13: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 14: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 15: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 16: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 17: Criando Aplicações Mobile Híbridas com Ionic Framework

Iniciando uma aplicação Ionic

http://goo.gl/PFCGr3

Page 18: Criando Aplicações Mobile Híbridas com Ionic Framework

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

ionic resources --icon(192 x 192)

ionic resources --splash(2208 x 2208)

Page 20: Criando Aplicações Mobile Híbridas com Ionic Framework

E os recursos?

Page 21: Criando Aplicações Mobile Híbridas com Ionic Framework

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

Quando devo utilizar o Ionic?

Nativo vs Híbrido

Page 23: Criando Aplicações Mobile Híbridas com Ionic Framework

● 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

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
Page 26: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 27: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 29: Criando Aplicações Mobile Híbridas com Ionic Framework

Entendendo a estrutura da aplicação

Page 30: Criando Aplicações Mobile Híbridas com Ionic Framework

Ionic 2 @alpha

Page 31: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 32: Criando Aplicações Mobile Híbridas com Ionic Framework

Nova estrutura

Mais flexibilidade

Melhor desempenho

Componentes modernos

http://ionicframework.com/docs/v2/

Page 33: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 34: Criando Aplicações Mobile Híbridas com Ionic Framework

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

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
Page 37: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 38: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 39: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 40: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 41: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 42: Criando Aplicações Mobile Híbridas com Ionic Framework

Eu quero aprender, mas quem poderá me ajudar?

Page 43: Criando Aplicações Mobile Híbridas com Ionic Framework

Consultoria em Tecnologia e Inovação

Page 44: Criando Aplicações Mobile Híbridas com Ionic Framework

Treinamentos:

Curso “Full-stack mobile developer” com Ionic Framework, Nodejs e

MongoDB

Page 45: Criando Aplicações Mobile Híbridas com Ionic Framework
Page 46: Criando Aplicações Mobile Híbridas com Ionic Framework

Interessou? Fale conosco!

[email protected]

Page 47: Criando Aplicações Mobile Híbridas com Ionic Framework

Consultoria em Tecnologia e Inovação

Page 48: Criando Aplicações Mobile Híbridas com Ionic Framework

Criando aplicações mobile híbridas com Ionic Framework

João Gabriel Lima

@[email protected]/in/joaogabriellima