React Native: Developing an app similar to Uber in JavaScript

React Native
Developing an app similar to Uber in JavaScript

Caio Ariede
Full Stack Developer at Parasail.com
2/16/2017
github.com/caioariede

Topics
● ECMAScript 6 (es6)
● React
● React Native
● Develop an app similar to Uber

ES6: Modules
// lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593
// someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

ES6: Classes
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
}

React: JSX
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)

React: Components
class Welcome extends React.Component {
render() {
return <h1>Welcome, {this.props.name}</h1>;
}
}
// <Welcome name="Fulano" />

React: State
class Counter extends React.Component {
state = {counter: 0}
onClick() {
this.setState({counter: this.state.counter+1})
}
render() {
return <div>
<span>{this.state.counter}</span>
<button onClick={this.onClick}>add</button>
</div>
}
}

React: VirtualDOM
Component VirtualDOM DOM (Browser)
render

React Native: Features
● Native apps (native UI components)
● No need to recompile every time
● Reusable code for iOS and Android (80%)
● Communication with native functions
○ Objective-C, Java

Fonte: https://speakerdeck.com/frantic/react-native-under-the-hood

Idea: App similar to Uber
● Login with Facebook
● Geolocation (passenger)
● Real-time updates (drivers)
● Trace/display route
● Nearest driver
Using only JavaScript

Getting Started
● npm install -g react-native-cli
● react-native init UberProject
● react-native run-ios

Project dependencies
● firebase: backend/database
● react-native-fbsdk: login with facebook
● react-native-maps: native map components
● geofire: location queries
● mapbox: calculate routes

Firebase: what's?
● Backend as a service
● Real-time database
● Handles authentication
○ oAuth, Facebook, Google, etc.

Firebase: authentication
OAuth token
Check token

Login
onClick() {
LoginManager.logInWithReadPermissions(['public_profile']).then(result => {
if (!result.isCancelled) {
} else {
console.log('login: user cancelled')
}
})
}
onClick() {
LoginManager.logInWithReadPermissions(['public_profile']).then(result => {
if (!result.isCancelled) {
AccessToken.getCurrentAccessToken().then(tokenResult => {
return auth.signInWithCredential(
facebook.credential(tokenResult.accessToken))
}).catch(err => console.log('login error: ' + err))
} else {
console.log('login: user cancelled')
}
})
}

● Login with Facebook √
● Geolocation (passenger)
● Nearest driver

Map
class Map extends Component {
state = {
passengerPosition: {latitude: 0, longitude: 0},
}
render() {
return (
<MapView>
<Marker coordinate={this.state.passengerPosition} />
</MapView>
)
}
}

watchPassenger() {
const positionOptions = {
enableHighAccuracy: true,
}
navigator.geolocation.watchPosition(pos => {
this.updatePassengerPosition({latitude: pos.latitude,
longitude: pos.longitude})
}, positionOptions)
}
updatePassengerPosition(passengerPosition) {
this.setState({passengerPosition})
}
Geolocation

Saving location to Firebase
updatePassengerPosition(passengerPosition) {
this.setState({passengerPosition})
const user = firebase.database().ref('users/' + this.userId)
user.update({passengerPosition})
}

● Geolocation (passenger) √
● Nearest driver

Real-time updates of drivers
watchDrivers() {
firebase.database().ref('drivers').on('child_changed', data => {
let drivers = this.state.drivers
drivers[driver.id] = {id: data.key, position}
this.setState({drivers})
})
}

Displaying drivers on map
renderDrivers() {
return this.state.drivers.map(driver => (
<Marker key={driver.id} coordinate={driver.position}
image={carIcon} />
))
}

● Real-time updates (drivers) √
● Nearest driver

Destination
class SetDestination extends MapMixin {
constructor(props) {
this.state.destinationPosition = randomPosition(
props.passengerPosition, 500) // 500 meters
}
renderDestinationPosition() {
return <Marker draggable image={markerIcon}
coordinate={this.state.destinationPosition} />
}
}

Trace route
calculateRoute() {
const mode = 'driving'
const origin = buildLngLat(this.state.pickupPosition)
const destination = buildLngLat(this.state.destinationPosition)
const accessToken = this.mapBoxAccessToken
const url = buildMapBoxUrl(mode, origin, destination, accessToken)
fetch(url).then(response => response.json()).then(json => {
this.setState({route: getCoordinates(json)})
}).catch(e => {
console.warn(e)
})
}

Display route
renderRoute() {
return (
<MapView.Polyline strokeWidth={4}
coordinates={[this.state.passengerPosition,
...this.state.route,
this.state.destinationPosition]} />
)
}

● Trace/display route √
● Nearest driver

GeoFire
geofire
key1: 37,-122
key2: lat, lng
key3: lat, lng
geoFire.set("key1", [37, -122])
listener geoquery
lat, lng
raio
geoquery
lat, lng
raio
Notify current geoqueries

Nearest driver
let radius = 0.1 // 100m
let currentLocation = [
passengerPosition.latitude,
passengerPosition.longitude,
]
let geoQuery = this.geoFire.query({center: currentLocation, radius})
let driversFound = []
geoQuery.on('key_entered', (key, location, distance) => {
driversFound.push({key, location, distance})
})
watchDriversFound()

Nearest driver
watchDriversFound() {
if (driversFound.length === 0) {
geoQuery.updateCriteria({radius: radius + 0.1})
} else {
let minDistance = -1, nearestDriver = null
driversFound.forEach(driver => {
if (driver.distance < minDistance || minDistance === -1)
minDistance = driver.distance, nearestDriver = driver
})
this.setState({nearestDriver: driver})
}
}

● Trace/display route √
● Nearest driver √

Questions?
caioariede
on github and twitter

React Native: Developing an app similar to Uber in JavaScript

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to React Native: Developing an app similar to Uber in JavaScript

Similar to React Native: Developing an app similar to Uber in JavaScript (20)

Recently uploaded

Recently uploaded (20)

React Native: Developing an app similar to Uber in JavaScript