Ionicでモバイルアプリ開発のむずかしいを簡単に

Slide 1

Slide 1 text

Ionicでモバイルアプリ開発のむずかしいを簡単にのむずかしいを簡単にする会会

Slide 2

Slide 2 text

Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2

Slide 3

Slide 3 text

Mobile Apps 3

Slide 4

Slide 4 text

Native Mobile Apps ● High performance ● Different platforms and languages ○ Android: Kotlin/Java ○ iOS: Swift/Objective-C ○ Your code cannot be shared 4

Slide 5

Slide 5 text

HTML5 Mobile Apps ● Multi platform ● Built with HTML/CSS/JavaScript ○ You can share your code across platforms ☺ 5

Slide 6

Slide 6 text

Diﬃculties ● Performance (Note: HTML5 apps are performant in most use cases) ● Design system ○ Android: Material design ○ iOS: Human Interface Guidelines 6

Slide 7

Slide 7 text

How can we make it easy? 7

Slide 8

Slide 8 text

https://ionicframework.com/ 8

Slide 9

Slide 9 text

Ionic ● Mobile UI framework ● Supports both iOS and Android ● Built with Web Components (v4〜) ○ Framework agnostic 9

Slide 10

Slide 10 text

Page Button Template 10

Slide 11

Slide 11 text

11 Android iOS

Slide 12

Slide 12 text

● Better code splitting & rendering performance ● Archiving 60fps with ● Perceived performance improvement with skeltons Performance 12

Slide 13

Slide 13 text

13 https://ionicframework.com/blog/hot-take-dark-mode/ https://startrack-ng.firebaseapp.com/ Dark Mode

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Ionic CLI $ npm install -g ionic $ ionic start my-app $ cd my-app $ ionic serve $ ionic cordova build android --prod --release 15

Slide 16

Slide 16 text

● Mobile debugger ● Plugins included ○ Camera, Geolocation, BLE, Media, InAppBrowser, AdMob, ... $ ionic serve --devapp Ionic DevApp https://ionicframework.com/docs/appflow/devapp/ 16

Slide 17

Slide 17 text

import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; constructor(private camera: Camera) {} ... const options: CameraOptions = { destinationType: this.camera.DestinationType.FILE_URI, encodingType: this.camera.EncodingType.JPEG, } this.camera.getPicture(options).then(imageData => { let base64Image = 'data:image/jpeg;base64,' + imageData; }); Ionic Native 17

Slide 18

Slide 18 text

● Mobile friendly ● Performance ● Portability ● Plugin support ● Better tooling Why use Ionic? 18

Slide 19

Slide 19 text

Ionic is awesome! 19

Slide 20

Slide 20 text

Recap ● Ionic makes mobile app development easy ○ Supports famous frameworks ○ “One code base, any platform” ● Join Slack team https://ionic-jp.herokuapp.com/ ● Try it now! 20 $ npm -g ionic && ionic start