Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Meetup Paris TypeScript #9 - Let's talk about Ionic
Sylvain Pontoreau
April 27, 2017
Technology
0
93
Meetup Paris TypeScript #9 - Let's talk about Ionic
Présentation et démo de Ionic
Sylvain Pontoreau
April 27, 2017
Tweet
Share
More Decks by Sylvain Pontoreau
See All by Sylvain Pontoreau
spontoreau
0
82
spontoreau
0
5
spontoreau
1
110
spontoreau
0
6
spontoreau
2
93
spontoreau
0
200
spontoreau
0
51
spontoreau
0
98
spontoreau
1
14
Other Decks in Technology
See All in Technology
lambda
0
220
oztick139
0
610
soracom
0
800
tutsunom
1
140
ayatokura
0
230
lain21
12
5.1k
vkbaba
0
230
finengine
0
130
charity
8
8k
oracle4engineer
1
430
dsalo
0
140
daisukehirama41
1
290
Featured
See All Featured
roundedbygravity
242
21k
kastner
54
2k
jcasabona
8
590
zenorocha
296
40k
imathis
479
150k
eitanlees
115
10k
lauravandoore
440
28k
productmarketing
6
760
62gerente
587
200k
hursman
107
9.3k
jensimmons
208
10k
keavy
107
14k
Transcript
None
None
None
That's great !
It's interesting !
Swift XCode Java A.Studio
None
Which one is hybrid ? This one !
None
None
Today, we won't talk about this one !
Application Mobile OS Web App Plugins HTML Renderer (WebView) HTML
CSS JS Resources + config.xml Camera Storage Geoloc … HTML APIs Cordova APIs Cordova Native APIs OS APIs OS APIs
import { Platform } from 'ionic-angular'; import { BatteryStatus, BatteryStatusResponse
} from '@ionic-native/battery-status'; class MyComponent { constructor(private platform: Platform, private batteryStatus: BatteryStatus) { platform.ready().then(() => { //ready corresponding to the deviceready event from Cordova this.batteryStatus.onChange().subscribe(status: BatteryStatusResponse => { //do something here }); }); } } Plugin callbacks are wrapped in Promises/Observables
• Battery • Calls • Pushes • Camera • Gyroscope
• CoucheBase / SQLite • File • … Specific Cross-platform • 3d Touch (iOS) • Video player (Android) • File chooser (Android) • Touch ID (iOS) • … Third party • AdMob • Twitter • Facebook • Google Map • PayPal • Linkedin • …
None
<ion-toggle [(ngModel)]="cachePolicy"></ion-toggle>
Action Sheet Toast Popover Navigation Modal Loading
import { LoadingController } from 'ionic-angular'; export class MyPage {
constructor(public loadingCtrl: LoadingController) { } login() { let loader = this.loadingCtrl.create({ content: "Please wait...", duration: 3000 }); loader.present(); } }
Bonjour Hello
https://github.com/Vtek/IonicCognitiveTranslator
None
None