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
91
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
70
spontoreau
0
3
spontoreau
1
95
spontoreau
0
5
spontoreau
2
82
spontoreau
0
160
spontoreau
0
46
spontoreau
0
82
spontoreau
1
13
Other Decks in Technology
See All in Technology
pinboro
0
2k
vkbaba
0
110
takem001
0
870
ishiayaya
PRO
0
320
ray_30cm_ns
0
280
torisoup
0
270
cygames
1
340
soachr
1
150
kentaro
1
360
yasuakiomokawa
0
320
sat
1
980
hecateball
1
12k
Featured
See All Featured
geeforr
332
29k
kastner
54
1.9k
ddemaree
274
31k
smashingmag
229
18k
trallard
13
640
brianwarren
83
4.7k
chriscoyier
499
130k
holman
448
130k
brettharned
93
3k
davidbonilla
69
3.5k
addyosmani
494
110k
lara
172
9.5k
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