Ionic-Navigation
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!
Verwendung der MapTrip GPS Navigation Interface (MTI) mit Ionic
Dieses Projekt soll zeigen, wie Sie MTI in Ihre Ionic Cordova-Anwendung integrieren können.
Dies beinhaltet ein Beispiel mti-plugin, das notwendig ist, um nativen Java-Code aus Ihrer Anwendung aufzurufen, den ionic-wrapper, um die nativen Aufrufe als Promises oder Observables zu verpacken, und das Ionic-Projekt selbst.
Die verfügbare Funktionalität beschränkt sich auf das Senden von WGS84-Koordinaten an MapTrip, das Berechnen der Route, das Starten der Zielführung und das Umschalten auf MapTrip, wenn die Zielführung gestartet wurde. Mit diesen Beispielen werden Sie lernen, wie Sie die MTI-Anfragen an die native Seite der App senden und wie Sie die notwendigen Rückrufe von MTI empfangen und in Ihrer Ionic-App verarbeiten können.
Vorbereitungen
Zunächst müssen Sie die MapTrip-Anwendung auf Ihrem Telefon installieren und ausführen.
Um diese Anwendung zu erstellen, müssen Sie npm installiert haben.
Mit npm installieren Sie ionic und cordova global:
npm install -g ionic
npm install -g cordova
Wenn Sie Ihr eigenes Plugin erstellen wollen, müssen Sie auch plugman installieren:
npm install -g plugman
Um Ihren eigenen Wrapper für Ihr Plugin zu erstellen, stellen Sie sicher, dass gulp ebenfalls installiert ist:
npm install -g gulp
und klonen die ionic native repository. Von da an folgen Sie den Anweisungen, um Ihren Wrapper zu erstellen.
Installieren der Ionic-App
Nachdem Sie das Projekt heruntergeladen haben, führen Sie
npm install
um das Verzeichnis node_modules zu erstellen und alle Abhängigkeiten herunterzuladen.
Als nächstes müssen Sie @ionic-native/core installieren.
npm install @ionic-native/core@latest
Nun müssen Sie den Ionic-Wrapper mti-demo-plugin aus diesem Repository herunterladen und in das Verzeichnis node_modules/@ionic-native kopieren, wie hier zu sehen:
Bitte beachten Sie, dass ’npm install’ oder das Hinzufügen/Entfernen des Plugins den Wrapper löschen kann. Sollte dies der Fall sein, kopieren Sie ihn einfach zurück in das Verzeichnis, bevor Sie Ihre apk erstellen.
Um das Plugin zu installieren, müssen Sie android als Plattform in Ihrem Ionic-Projekt hinzufügen:
ionic cordova platform add android
Nach der Ausführung dieses Befehls sollte das folgende Verzeichnis erstellt worden sein:
Jetzt sind Sie bereit, das Plugin selbst zu installieren. Laden Sie es zunächst von diesem Repository herunter. Danach verwenden Sie entweder
ionic cordova plugin add <PathToPlugin>
oder
plugman install --platform android --project ./platforms/android --plugin <PathToPlugin>
um es dem Projekt hinzuzufügen.
Um die Installation zu bestätigen, prüfen Sie
ionic cordova plugins list
um alle installierten Plugins zu sehen.
Sie können auch sehen, ob das Plugin im Verzeichnis platforms/android/app/src/main/java installiert ist
und im Plugins-Verzeichnis.
Jetzt, wo Sie alles haben, was die Anwendung braucht, können Sie die
ionic cordova build android
um eine apk zu erstellen. Kopieren Sie diese apk auf Ihr Telefon und installieren Sie sie.
Die Ionic-Demo-App verwenden
Bitte beachten Sie, dass die Demo-App ein bereits laufendes MapTrip erwartet, da sie MapTrip nicht von selbst startet.
Wenn Sie die Demo-App starten, sollte die Verbindung zu MapTrip über MTI bereits hergestellt sein, und Sie werden diesen Bildschirm sehen:
Geben Sie nun eine gültige WGS84-Koordinate ein und drücken Sie “Navigation starten”. Die App sendet diese Koordinaten an MapTrip und zeigt MapTrip automatisch an, wenn die Berechnung der Route abgeschlossen und die Navigation gestartet ist.
Wenn Sie zurück zur Ionic-App wechseln, sehen Sie ein Label, auf dem aktuelle Navigationsinformationen (die nächste Straße auf Ihrer Route und die Entfernung zur Kreuzung in Metern) angezeigt werden.
Verwenden Sie die Navigationsschnittstelle mit Ihrem eigenen Plugin
Um die MTI-Funktionalität für Ihr eigenes Plugin zu nutzen, müssen Sie die Abhängigkeit hinzufügen. In diesem Beispiel verwenden wir eine benutzerdefinierte gradle-Datei, die in die gradle-Basisdatei Ihres ionic/android-Projekts kompiliert wird. Sie befindet sich in MTIDemoPlugin/src/android/plugin.gradle.
Um plugin.gradle einzubinden, müssen Sie die plugin.xml, die sich im Stammverzeichnis Ihres Plugins befindet, ändern.
Einfach hinzufügen
<framework src="src/android/plugin.gradle" custom="true" type="gradleReference" />
zu Ihrer plugin.xml, wie hier zu sehen:
Damit haben Sie die volle Kontrolle über MapTrip aus Ihrer Ionic-Anwendung heraus!