Maxim Salnikov
@webmaxru
We need a mobile app
Products from the future
UI Engineer at ForgeRock
Hybrid
Web
RWD
Native
The biggest mistake we’ve made as a company is betting on HTML5 over native.
One code base. Running everywhere.
Open source framework for building truly native mobile apps
Learn once, write anywhere
Reliable, Fast, Engaging
App
Service worker
<ion-header>
<ion-navbar>
<ion-title>Ionic Blank</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="content">
<h2>Tap the button</h2>
<button primary>TAP</button>
<div class="message">16 taps left</div>
</ion-content>
<ActionBar title="NativeScript Blank"></ActionBar>
<StackLayout>
<Label text="Tap the button" class="title"></Label>
<Button text="TAP"></Button>
<Label [text]="message" class="message"></Label>
</StackLayout>
import React, { Component } from 'react';
import { View, Button, AppRegistry } from 'react-native';
class MainApp extends Component {
render() {
return (
<View>
<Button title="Press me" color="#841584" />
</View>
);
}
}
AppRegistry.registerComponent('MainApp', () => MainApp);
import React, { Component, PropTypes } from 'react';
import { NavigatorIOS, Text } from 'react-native';
export default class NavigatorIOSApp extends Component {
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyScene, title: 'My Initial Scene',
}}
/>
);
}
}
render: function() {
return (
<ToolbarAndroid
logo={require('./app_logo.png')}
title="AwesomeApp"
actions={[{
title: 'Settings',
icon: require('./icon.png')
}]}
/>
)
}
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
import { Camera, CameraOptions } from '@ionic-native/camera';
constructor(private camera: Camera) { }
...
const options: CameraOptions = {
quality: 100,
...
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
$ npm install nativescript-camera --save
import { Component } from "@angular/core";
import { ImageAsset } from "image-asset";
import { takePicture, requestPermissions, isAvailable } from "nativescript-camera";
@Component({
moduleId: module.id,
templateUrl: "./using-camera.component.html"
})
export class UsingCameraExampleComponent {
public imageTaken: ImageAsset;
onTakePhoto() {
let options = {
width: 600,
height: 300,
...
};
takePicture(options)
.then(imageAsset => {
this.imageTaken = imageAsset;
console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
}).catch(err => {
console.log(err.message);
});
}
}
$ npm install react-native-camera --save
$ react-native link react-native-camera
import React, { Component } from 'react';
...
import Camera from 'react-native-camera';
class BadInstagramCloneApp extends Component {
render() {
return (
<View>
<Camera
ref={(cam) => {
this.camera = cam;
}}
aspect={Camera.constants.Aspect.fill}>
<Text onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
</Camera>
</View>
);
}
takePicture() {
const options = {};
//options.location = ...
this.camera.capture({metadata: options})
.then((data) => console.log(data))
.catch(err => console.error(err));
}
}
AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
We need a mobile app