The presentation demonstrates some key points when developing an application similar to Uber using JavaScript and React Native.
Full presentation w/ animations: https://docs.google.com/presentation/d/1J9rjqxx2q7TZ87eZs4qlol3bkr59ABOCGeAkHlQtU7s/edit?usp=sharing
5. 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))
6. ES6: Classes
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
}
14. 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
36. Idea: App similar to Uber
● Login with Facebook √
● Geolocation (passenger) √
● Real-time updates (drivers) √
● Trace/display route √
● Nearest driver
37. 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
38. 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()