Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meetup Paris TypeScript #9 - Let's talk about Ionic

Meetup Paris TypeScript #9 - Let's talk about Ionic

Présentation et démo de Ionic

Sylvain PONTOREAU

April 27, 2017
Tweet

More Decks by Sylvain PONTOREAU

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. • 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 • …
  4. 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(); } }