Skip to content

Commit 19e5747

Browse files
author
roi
committed
added demo and updated readme
1 parent f26a494 commit 19e5747

File tree

2 files changed

+124
-0
lines changed

2 files changed

+124
-0
lines changed

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,13 @@ you can turn this on/off if using enable=true/false respectively.
149149

150150
## Examples
151151

152+
153+
### for an example of using our sdk with a simple google map see the customer-sdk-demo.html file attached
154+
##### don't forget you need to follow installation steps.
155+
##### don't forget to set your own keys and params.
156+
157+
158+
### here are few separated examples for commonly used scenarios
152159
##### This shows how to initialize and do a whole tracking experience using a provided share_uuid
153160
```
154161
BringgSDK.initializeBringg({share_uuid: YOUR_SHARE_UUID}, function(updatedConfiguration){
@@ -211,3 +218,7 @@ BringgSDK.setEventCallback({
211218
});
212219
213220
```
221+
222+
### Other tips and tricks
223+
##### disabling CORS while testing on localhost
224+
`open -a Google\ Chrome --args --disable-web-security --user-data-dir`

‎demo/customer-sdk-demo.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html doctype="">
3+
<head>
4+
<title>Demo SDK use</title>
5+
<script src="../bower_components/socket.io-client/socket.io.js"></script>
6+
<script src="bower_components/bringg-js-sdk/BringgSDK.js"></script>
7+
<script src="bower_components/jquery/dist/jquery.min.js"></script>
8+
<meta name="viewport" content="initial-scale=1.0">
9+
<meta charset="utf-8">
10+
<style>
11+
html, body {
12+
height: 100%;
13+
margin: 0;
14+
padding: 0;
15+
}
16+
#map {
17+
height: 100%;
18+
}
19+
</style>
20+
21+
<script type="text/javascript">
22+
var customer_access_token = null;
23+
var my_order_uuid = 'PLACE_A_SAMPLE_ORDER_UUID_HERE'; //note that this requires the 'UUID' attribute and not the 'ID'.
24+
25+
function orderUpdateCb(order){
26+
console.log('orderUpdateCb' + JSON.stringify(order));
27+
// do something with order here
28+
}
29+
30+
function locationUpdateCb(location){
31+
console.log('locationUpdateCb');
32+
if (location.lat() && location.lng() && map){
33+
// do something with location here
34+
35+
var center = new google.maps.LatLng(location.lat(), location.lng());
36+
map.panTo(center);
37+
}
38+
}
39+
40+
function etaUpdateCb(eta){
41+
console.log('etaUpdateCb');
42+
console.log(eta);
43+
// can do something with eta here
44+
}
45+
46+
function onTaskRatedCb(){
47+
console.log('onTaskRatedCb');
48+
// task rated successfully!
49+
// we can call BringgSDK.disconnect() for example.
50+
}
51+
52+
function onTaskEndedCb(){
53+
console.log('onTaskEndedCb');
54+
// task ended
55+
// we can call BringgSDK.disconnect() if we are not using a rating screen for example.
56+
}
57+
58+
function onConnect(){
59+
console.log('onConnect');
60+
BringgSDK.watchOrder({
61+
order_uuid: my_order_uuid
62+
}, function (result) {
63+
console.log('watch order result: ' + JSON.stringify(result));
64+
if (result && result.shared_location) {
65+
console.log('calling init bringg with ' + result.share_uuid);
66+
BringgSDK.initializeBringg({share_uuid: result.share_uuid}, onBringgInitSuccess, onBringgInitFailed);
67+
}
68+
});
69+
// alternatively here is an example for using share_uuid directly if you have it
70+
// BringgSDK.initializeBringg({share_uuid: PLACE_YOUR_SHARED_LOCATION_UUID_HERE}, onBringgInitSuccess, onBringgInitFailed);
71+
}
72+
73+
function onBringgInitSuccess(configuration){
74+
console.log('initializeBringg success');
75+
console.log(configuration);
76+
77+
// here we can do something with result.shared_location like storing it
78+
// in case we want to use the extra data later.
79+
}
80+
81+
function onBringgInitFailed(error){
82+
console.log('initializeBringg failed. error:' + error);
83+
}
84+
85+
var map;
86+
function initMap() {
87+
map = new google.maps.Map(document.getElementById('map'), {
88+
center: {lat: -34.397, lng: 150.644},
89+
zoom: 8
90+
});
91+
92+
// beside
93+
BringgSDK.connect(customer_access_token, onConnect);
94+
95+
// example for setting callbacks directly
96+
BringgSDK.setLocationUpdateCb(locationUpdateCb);
97+
BringgSDK.setETAUpdateCb(etaUpdateCb);
98+
BringgSDK.setOrderUpdateCb(orderUpdateCb);
99+
100+
// example for setting callbacks implicitly
101+
BringgSDK.setEventCallback({
102+
'taskRatedCb': onTaskRatedCb,
103+
'taskEndedCb': onTaskEndedCb
104+
});
105+
}
106+
</script>
107+
</head>
108+
<body>
109+
<div id="map"></div>
110+
<!-- see https://developers.google.com/maps/documentation/javascript/get-api-key for obtaining maps api key-->
111+
<script src="https://maps.googleapis.com/maps/api/js?&key=YOUR_GOOGLE_MAPS_KEY_HERE&callback=initMap" async defer></script>
112+
</body>
113+
</html>

0 commit comments

Comments
 (0)