Scout for Apps Big Brand Hackathon

10
SCOUT FOR APPS HTML5 Navigation Service $1000 Prize for Best app with Scout API integration Laura Della Torre Associate Director, Partner Marketing http://developer.telenav.com

Transcript of Scout for Apps Big Brand Hackathon

Page 1: Scout for Apps Big Brand Hackathon

SCOUT FOR APPS HTML5 Navigation Service

$1000 Prize for Best app with Scout API integration

Laura Della Torre

Associate Director, Partner Marketing

http://developer.telenav.com

Page 2: Scout for Apps Big Brand Hackathon

MAP SOLUTIONS | DEVELOPER CHALLENGES

2

Mobile map solutions are:

• Complex to integrate

• Platform or carrier dependent

• Expensive for developers

• Beta quality

• Unsafe or inconvenient for users

http://developer.telenav.com

Page 3: Scout for Apps Big Brand Hackathon

SCOUT FOR APPS | THE SOLUTION

World’s first embeddable free cross-platform revenue sharing voice-guided navigation

3

• Code any location or address• Simple URL hyperlink• One line of code

• HTML5 - No porting required• Supports mobile web & app • Browser or embedded WebView

Developer App or Mobile Site Launch Screen Navigation Session Route Summary

http://developer.telenav.com

Page 4: Scout for Apps Big Brand Hackathon

SCOUT FOR APPS | SAMPLE USE CASES

Travel: Increase loyalty with free navigation on all bookings.

Shopping: Confirm users get to your store or kiosk

Social: Increase time on your site by helping friends meet up.

Real Estate: Help buyers find your home listings

Entertainment: Sell more tickets & tables

4http://developer.telenav.com

Page 5: Scout for Apps Big Brand Hackathon

INSTRUCTIONS | OVERVIEW

5

1. Join and get a test key & token: http://developer.telenav.com2. Create a URL for your Scout button3. Get your production key

Start Here

Requirements:• An address or coordinates (latitude and longitude) to generate a route, URI encoded• Developer Test key, token & production keys• iOS 4+ and Android 2.2+ device with HTML5 compatible browser & GPS, location and audio enabled

http://developer.telenav.com

Page 6: Scout for Apps Big Brand Hackathon

CODE

6

http://apps.scout.me/v1/driveto?dt=<URI_encoded_address@lat,lon>&token=<

URI_encoded_token>&name=<URI_encoded_name>

Parameter Description Notes

token Your tokenRequired. Must be URI encoded to work. For example, if your token is

“AQAAATS1a5IIf//,”the URI-encoded version would be “AQAAATS1a5IIf%2F%2F”

dt AddressStreet address. For example "950 De Guigne Dr." street address should be combined

with city/state or zip code. Required to display during navigation.

Lat , lon

Destination coordinates. This field describes the latitude/longitude of the destination

address. The latitude/longitude is specified as a string. For example:

37.373846,-121.999036

The lat/lon can be provided without the address or after the address followed by an

“@”.

nameName of the

destination

Required to display during navigation. Every point of interest, whether it is a tourist

attraction, event venue, or store, typically has a name. Passing this name will help Scout

show the name to the user during navigation, upon arrival, and with their friends when

shared.

http://developer.telenav.com

Page 7: Scout for Apps Big Brand Hackathon

SAMPLE CODE

7

1. Coordinates Only 2. Name & Coordinates 3. Name & Address

1. http://apps.scout.me/v1/driveto?dt=37.36681,-122.00156&token=<token>

2. http://apps.scout.me/v1/driveto?dt=37.36904,-

121.978&token=<token>&name=Starbucks%20Coffee

3. http://apps.scout.me/v1/driveto?dt=460%20N%20MATHILDA%20AVE%2C%20SUNNYVALE

%20CA%[email protected],-121.978&token=<token>&name=Starbucks

Ok Better Best

URI Encode your token, address & name

URI Encoding: http://www.w3schools.com/tags/ref_urlencode.asp

Encoder/Decoder Tool: http://meyerweb.com/eric/tools/dencoder/

http://developer.telenav.com

Page 8: Scout for Apps Big Brand Hackathon

BEST PRACTICES | RUN IN WEBVIEW

8

To: Do this:

Show WebView optimized experience* Append user agent string “ TNS4A/1.0” to indicate WebView. See sample below.

Keep navigation running during trip Set backlight to “always on” when S4A WebView opens

Allow users to end trip Include a back button in your 44 pixel header

Optimize the map real estate Turn off landscape mode during Scout for Apps session

Track user activity within a session Add custom HTTP header “T-S4AID” with a unique ID or add it as a parameter on the query string,

Back Button

44 Pixels

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5 TNS4A/1.0

*Coming Soon

http://developer.telenav.com

Page 9: Scout for Apps Big Brand Hackathon

BEST PRACTICES | OPTIMIZE BUTTON LOCATION

9

Ok Better Best

Button Options:

Download Link: http://developer.telenav.com/sdkweb/sdkwe

b/downloads/ScoutDriveButtonImages.zip

Map InfoWindow Search Results Landing Page Email

See us for these new buttons

http://developer.telenav.com

Page 10: Scout for Apps Big Brand Hackathon

Free travel coffee mug for all who integrate Scout for Apps

$1000 Prize for Best app implementing Scout APIGood luck!

10

http://developer.telenav.comEmail: [email protected]

Twitter: @TelenavDev