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

9298dcce5b2b0e88d8ffbb837192ca98?s=128

Sylvain Pontoreau

April 27, 2017
Tweet

Transcript

  1. None
  2. None
  3. None
  4. That's great !

  5. It's interesting !

  6. Swift XCode Java A.Studio

  7. None
  8. Which one is hybrid ? This one !

  9. None
  10. None
  11. Today, we won't talk about this one !

  12. 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
  13. 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
  14. • 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 • …
  15. None
  16. <ion-toggle [(ngModel)]="cachePolicy"></ion-toggle>

  17. Action Sheet Toast Popover Navigation Modal Loading

  18. 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(); } }
  19. Bonjour Hello

  20. https://github.com/Vtek/IonicCognitiveTranslator

  21. None
  22. None