Turn by Turn Navigation in the Browser

Vorstellung von instantnavi.com bei RheinMainJS im Dezember 2012.

Mit instantnavi kann man eigene Turn-by-Turn Navigationssysteme
erstellen, die man auf jedem iPhone und Android Gerät nutzen und teilen kann.

instantnavi ist eine HTML5 web app, die man auf dem HomeScreen des Gerätes speichern kann.

Transcript

1. View Slide

2. Christian Bäuerlein
   JavaScript / Ruby Developer @flinc
   2
   Hallo RheinMainJS!!!
   

   View Slide

3. Turn by Turn Navigation
   3
   

   View Slide

4. HTML5
   Geolocation API
   4
   

   View Slide

5. View Slide

6. Turn by Turn Navigation
   im Browser
   6
   

   View Slide

7. View Slide

8. Turn by Turn Navigation
   im Browser
   8
   

   View Slide

9. 9
   Warum?
   

   View Slide

10. 10
    Ein neues Konzept
    für Echtzeit-Navigation
    

    View Slide

11. Throwaway Navigation
    11
    

    View Slide

12. Where is Navigation at?
    12
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. 16
    Mind the Gap!
    

    View Slide

17. View Slide

18. View Slide

19. 19
    Party at my house!
    This is how you
    get here...
    

    View Slide

20. Throwaway Navigation
    20
    

    View Slide

21. One Navi for
    One Destination
    21
    

    View Slide

22. Navigation
    for purpose
    22
    a single
    

    View Slide

23. Navigation
    for purpose
    23
    YOUR
    

    View Slide

24. 24
    Your Party
    

    View Slide

25. 25
    Your Restaurant
    

    View Slide

26. 26
    Your Company
    

    View Slide

27. 27
    Your Place To Be
    

    View Slide

28. View Slide

29. Do it in the Browser!
    29
    

    View Slide

30. Your Navi
    30
    

    View Slide

31. Your Navi = a URL
    31
    

    View Slide

32. No Installing
    No Closing of Apps
    No Context Switch
    32
    

    View Slide

33. Customize it!
    33
    

    View Slide

34. Customize it!
    34
    

    View Slide

35. Share it!
    35
    

    View Slide

36. Integrate it!
    36
    

    View Slide

37. View Slide

38. View Slide

39. ZOMG Live Presentation!
    39
    

    View Slide

40. View Slide

41. Tech Background
    41
    

    View Slide

42. View Slide

43. ffwdme.js
    43
    JavaScript Framework for Turn-by-Turn Navigation Systems
    

    View Slide

44. ffwdme.js
    44
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Widget-/
    Event-Based
    

    View Slide

45. ffwdme.bind(‘navigation:onroute‘, cb);
    45
    

    View Slide

46. View Slide

47. ffwdme.js
    47
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Widget-/
    Event-Based
    Rich Event-Data
    

    View Slide

48. {
    nextDirection: ..., // next street
    distance: 200, // meters to turn
    duration: 15, // secs to turn
    ratio: 0.71 // route completed
    }
    48
    

    View Slide

49. 49
    Widget:
    10-50 LOC
    

    View Slide

50. ffwdme.js
    50
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Extendable
    Widget-/
    Event-Based
    Rich Event-Data
    

    View Slide

51. ffwdme.js
    51
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Extendable
    Modular
    Widget-/
    Event-Based
    Rich Event-Data
    

    View Slide

52. ffwdme.js
    52
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Extendable
    3+ Routing Services
    Modular
    Widget-/
    Event-Based
    Rich Event-Data
    

    View Slide

53. Was kann ich
    damit anfangen?
    53
    

    View Slide

54. instantnavi.com/developers
    54
    

    View Slide

55. http://instantnavi.com/to/mynavi
    55
    

    View Slide

56. http://instantnavi.com/to/mynavi
    ?destination[lat]=49.9
    &destination[lng]=8.85
    &destination[street]=HoheStrasse
    &destination[city]=Dieburg
    56
    

    View Slide

57. 57
    mehr-tanken
    

    View Slide

58. mehr-tanken
    58
    

    View Slide

59. mehr-tanken
    59
    

    View Slide

60. mehr-tanken
    60
    

    View Slide

61. mehr-tanken
    61
    

    View Slide

62. View Slide

63. @fabrik42
    github.com/fabrik42
    christian@instantnavi.com
    63
    

    View Slide

64. Let‘s talk!
    64
    

    View Slide

65. instantnavi.com
    @instantnavi
    facebook.com/instantnavi
    65
    

    View Slide

66. View Slide