Truck navigation app, SDK and server interface for professional users in telematics, logistics, trucking, 112, waste management and more.

Wie integriert man eine Navigation in eine Ionic-App?

Ein Kunde kontaktierte uns und fragte, ob er unsere GPS-Navigations-App MapTrip in seine Ionic-App integrieren könne. Seine App verwaltet eine Liste von Adressen, die ein LKW in einer bestimmten Reihenfolge anfahren muss. Wir haben ein bisschen recherchiert und dann unserem Praktikanten Hendrik die Aufgabe gegeben, eine Demo-App zu bauen.

Ein paar Tage nachdem er angefangen hatte, hatte er eine einfache Ionic-App zum Laufen gebracht. Er integrierte die MapTrip API in die App und konnte eine Koordinate an MapTrip übergeben, die Routenberechnung auslösen und die Zielführung starten. Seine Ionic-App kommuniziert mit der Navigation und erhält Informationen von ihr zurück. Er hat eine Zwei-Wege-Kommunikation aufgebaut.

Die App von Hendrik kann als Blaupause für jede andere Ionic-App dienen, die mit unserer GPS-App kommunizieren muss. Er hat sein Projekt auf unser GitHub-Konto hochgeladen, zusammen mit einer Beschreibung dessen, was er getan hat. Wir hoffen, dass dies Ihnen helfen wird, Ihre eigene Navigationsintegration in Ihre Ionic-App zu bauen. Bitte zögern Sie nicht, uns zu kontaktieren, wenn Sie Hilfe benötigen. Wir helfen Ihnen gerne!


Using the MapTrip GPS Navigation Interface (MTI) with Ionic

This project is meant to show how to integrate MTI with your Ionic cordova application.

This includes an example mti-plugin, which is necessary to call native java-code from your application, the ionic-wrapper to wrap the native-calls as Promises or Observables, and the Ionic-Project itself.

The available functionality is limited to sending a WGS84-Coordinate to MapTrip, calculating the route, starting the guidance and switching to MapTrip when the guidance has been started. With these examples you will learn how to send the MTI-requests to the native side of the app, and how to receive the necessary callbacks from MTI and handle them in your ionic-app.

Preparations

First of all you need the MapTrip application installed and running on your Phone.

To build this app, you’ll need to have npm installed.
With npm, install ionic and cordova globally:

npm install -g ionic   
npm install -g cordova 

If you want to create your own plugin, you’ll also need to have plugman installed:

npm install -g plugman

To create your own wrapper for your plugin, make sure gulp is also installed:

npm install -g gulp

and clone the ionic native repository. From there on, follow the instructions to create your wrapper.

Installing the Ionic App

After downloading the project, run

npm install

to create the node_modules directory and download all dependencies.

Next you’ll need to install @ionic-native/core.

npm install @ionic-native/core@latest

Now you have to download the ionic wrapper mti-demo-plugin from this repository, and copy it into the node_modules/@ionic-native directory, as seen here:

Please note that ‘npm install’ or adding / removing the plugin may delete the wrapper. If it does, simply copy it back into the directory before you build your apk.


To install the plugin you need to add android as platform in your ionic project:

ionic cordova platform add android

After running this command the following directory should have been created:

Now your ready to install the plugin itself. First download it from this repository. Afterwards, use either

ionic cordova plugin add <PathToPlugin>

or

plugman install --platform android --project ./platforms/android --plugin <PathToPlugin>

to add it to the project.

To confirm the installation, check

ionic cordova plugins list

to see all installed plugins.

You can also see if the plugin is installed in the platforms/android/app/src/main/java directory

and in the plugins directory.


Now that you have everything the app needs, you can run

ionic cordova build android 

to create an apk. Copy this apk on your phone, and install it.

Using The Ionic-Demo-App

Please note that the demo app expects an already running MapTrip, as it will not start MapTrip by itself.
By starting the demo app, the connection to MapTrip via MTI should already be established, and you will see this screen:

Now enter a valid WGS84-Coordinate and press “Start navigation”. The app will send those coordinates to MapTrip, and will show MapTrip automatically when the route has finished calculating and the navigation has been started.

If you switch back to the Ionic app, you will see a label, where current navigation-information (the next street on your route, and the distance to the crossing in meters) is being displayed.

Use Navigation Interface With Your Own Plugin

To use the MTI-functionality for your own plugin, you need to add the dependency. In this example we use a custom gradle-file, which gets compiled into the base gradle-file of your ionic/android project. It is located in MTIDemoPlugin/src/android/plugin.gradle.

To include plugin.gradle, you need to modify the plugin.xml located in the root directory of your plugin.

Simply add

<framework src="src/android/plugin.gradle" custom="true" type="gradleReference" />

to your plugin.xml, as seen here:

With this you will have full control of MapTrip from inside your ionic application!