Code Monkey home page Code Monkey logo

ffwdme.js's Introduction

ffwdme.js

ffwdme.js is a JavaScript toolkit that aims to bring interactive GPS driving directions to the mobile browser.

Short Demo

Introduction

For an introduction have a look at the guides.

Trying it out online

You can try a current build including a demo page online at dev.ffwdmejs.org

Please refer to this tutorial about how to get started with the demo application.

Requirements

The source code is built using browserify and gulp so you need a working node.js environment on your local machine. I'm using node v5.0.0 right now (you can see your version with node --version)

Check out the code from GitHub, e.g. by cloning the repository, and cd into the main directory of ffwdme.js.

To install all dependencies just do an npm install

Then you can run gulp for a local preview server: gulp

External API Services

To use the demo page on your local server, you need to sign up for some external services.

ffwdme.js uses the open source routing service GraphHopper for the route calculation. They are pretty awesome and provide us with a free demo API key to try things out. However, please be fair. Once your project gets more serious you should get in touch and obtain your own API key.

There is also a map component, that is powered by Mapbox. In order to use this, you have to sign up for a free plan and you need to get an access token.

Setup Credentials

Once you have your Mapbox access token ready, you can copy the file static/demo/credentials_example.js to static/demo/credentials.js.

Open the newly created file and fill in your own credentials.

Now you are ready to go!

Directory Structure

  • build - The generated JavaScript code and assets
  • gulp - The single gulp tasks to build and deploy the code/assets
  • spec - Spec suites and fixtures
  • src - Source code, divided in the packages core, components and debug
  • static - Root directory for the local preview server, that also holds the demo application
  • static/recorded_routes - This holds a collection of real world recorded GPS tracks, you can use to develop/debug your navigation system (see demo page)

Testing

ffwdme.js uses the following testing setup:

To run the specs, install the karma CLI helper globally

npm install -g karma-cli

Then make sure you have the development server running:

gulp

And then just call

karma start

Testing your local install on mobile devices

Please be aware that some browsers only allow the usage of HTML5 Geolocation API in a secure context. And while localhost is a secure context, serving you local install to a mobile device must be done via https, otherwise the access to the Geolocation API will be denied and ffwdme.js won't work.

Please have a look at this pull request fixing this for browsersync or make use of another tool like ngrok that provides https connections for the mobile testing device.

Special Thanks


ffwdme.js is an open source project by flinc.org and was initially created by Silvia Hundegger and Christian Bäuerlein

ffwdme.js's People

Contributors

fabrik42 avatar lesion avatar roxburghm avatar mrnugget avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.