Ionic-Navi­ga­ti­on

Wie inte­griert man eine Navi­ga­ti­on in eine Ionic-App?

Ein Kun­de kon­tak­tier­te uns und frag­te, ob er unse­re GPS-Navi­ga­ti­ons-App Map­Trip in sei­ne Ionic-App inte­grie­ren kön­ne. Sei­ne App ver­wal­tet eine Liste von Adres­sen, die ein LKW in einer bestimm­ten Rei­hen­fol­ge anfah­ren muss. Wir haben ein biss­chen recher­chiert und dann unse­rem Prak­ti­kan­ten Hen­drik die Auf­ga­be gege­ben, eine Demo-App zu bauen.

YouTube

Mit dem Laden des Vide­os akzep­tie­ren Sie die Daten­schutz­er­klä­rung von You­Tube.
Mehr erfah­ren

Video laden

Ein paar Tage nach­dem er ange­fan­gen hat­te, hat­te er eine ein­fa­che Ionic-App zum Lau­fen gebracht. Er inte­grier­te die Map­Trip API in die App und konn­te eine Koor­di­na­te an Map­Trip über­ge­ben, die Rou­ten­be­rech­nung aus­lö­sen und die Ziel­füh­rung star­ten. Sei­ne Ionic-App kom­mu­ni­ziert mit der Navi­ga­ti­on und erhält Infor­ma­tio­nen von ihr zurück. Er hat eine Zwei-Wege-Kom­mu­ni­ka­ti­on aufgebaut.

Die App von Hen­drik kann als Blau­pau­se für jede ande­re Ionic-App die­nen, die mit unse­rer GPS-App kom­mu­ni­zie­ren muss. Er hat sein Pro­jekt auf unser Git­Hub-Kon­to hoch­ge­la­den, zusam­men mit einer Beschrei­bung des­sen, was er getan hat. Wir hof­fen, dass dies Ihnen hel­fen wird, Ihre eige­ne Navi­ga­ti­ons­in­te­gra­ti­on in Ihre Ionic-App zu bau­en. Bit­te zögern Sie nicht, uns zu kon­tak­tie­ren, wenn Sie Hil­fe benö­ti­gen. Wir hel­fen Ihnen gerne!


Ver­wen­dung der Map­Trip GPS Navi­ga­ti­on Inter­face (MTI) mit Ionic

Die­ses Pro­jekt soll zei­gen, wie Sie MTI in Ihre Ionic Cordo­va-Anwen­dung inte­grie­ren können.

Dies beinhal­tet ein Bei­spiel mti-plug­in, das not­wen­dig ist, um nati­ven Java-Code aus Ihrer Anwen­dung auf­zu­ru­fen, den ionic-wrap­per, um die nati­ven Auf­ru­fe als Pro­mi­ses oder Obser­v­a­bles zu ver­packen, und das Ionic-Pro­jekt selbst.

Die ver­füg­ba­re Funk­tio­na­li­tät beschränkt sich auf das Sen­den von WGS84-Koor­di­na­ten an Map­Trip, das Berech­nen der Rou­te, das Star­ten der Ziel­füh­rung und das Umschal­ten auf Map­Trip, wenn die Ziel­füh­rung gestar­tet wur­de. Mit die­sen Bei­spie­len wer­den Sie ler­nen, wie Sie die MTI-Anfra­gen an die nati­ve Sei­te der App sen­den und wie Sie die not­wen­di­gen Rück­ru­fe von MTI emp­fan­gen und in Ihrer Ionic-App ver­ar­bei­ten können.

Vor­be­rei­tun­gen

Zunächst müs­sen Sie die Map­Trip-Anwen­dung auf Ihrem Tele­fon instal­lie­ren und ausführen.

Um die­se Anwen­dung zu erstel­len, müs­sen Sie npm instal­liert haben.
Mit npm instal­lie­ren Sie ionic und cordo­va global:

npm install -g ionic   
npm install -g cordova 

Wenn Sie Ihr eige­nes Plug­in erstel­len wol­len, müs­sen Sie auch plug­man installieren:

npm install -g plugman

Um Ihren eige­nen Wrap­per für Ihr Plug­in zu erstel­len, stel­len Sie sicher, dass gulp eben­falls instal­liert ist:

npm install -g gulp

und klo­nen die ionic nati­ve repo­si­to­ry. Von da an fol­gen Sie den Anwei­sun­gen, um Ihren Wrap­per zu erstellen.

Instal­lie­ren der Ionic-App

Nach­dem Sie das Pro­jekt her­un­ter­ge­la­den haben, füh­ren Sie

npm install

um das Ver­zeich­nis node_modules zu erstel­len und alle Abhän­gig­kei­ten herunterzuladen.

Als näch­stes müs­sen Sie @ionic-native/core installieren.

npm install @ionic-native/core@latest

Nun müs­sen Sie den Ionic-Wrap­per mti-demo-plug­in aus die­sem Repo­si­to­ry her­un­ter­la­den und in das Ver­zeich­nis node_modules/@ionic-native kopie­ren, wie hier zu sehen:

Ionic-Navigation

Bit­te beach­ten Sie, dass ’npm install’ oder das Hinzufügen/Entfernen des Plug­ins den Wrap­per löschen kann. Soll­te dies der Fall sein, kopie­ren Sie ihn ein­fach zurück in das Ver­zeich­nis, bevor Sie Ihre apk erstellen.


Um das Plug­in zu instal­lie­ren, müs­sen Sie android als Platt­form in Ihrem Ionic-Pro­jekt hinzufügen:

ionic cordova platform add android

Nach der Aus­füh­rung die­ses Befehls soll­te das fol­gen­de Ver­zeich­nis erstellt wor­den sein:

Ionic-Navigation

Jetzt sind Sie bereit, das Plug­in selbst zu instal­lie­ren. Laden Sie es zunächst von die­sem Repo­si­to­ry her­un­ter. Danach ver­wen­den Sie entweder

ionic cordova plugin add <PathToPlugin>

oder

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

um es dem Pro­jekt hinzuzufügen.

Um die Instal­la­ti­on zu bestä­ti­gen, prü­fen Sie

ionic cordova plugins list

um alle instal­lier­ten Plug­ins zu sehen.

Sie kön­nen auch sehen, ob das Plug­in im Ver­zeich­nis platforms/android/app/src/main/java instal­liert ist

Ionic-Navigation

und im Plugins-Verzeichnis.

Ionic-Navigation

Jetzt, wo Sie alles haben, was die Anwen­dung braucht, kön­nen Sie die

ionic cordova build android 

um eine apk zu erstel­len. Kopie­ren Sie die­se apk auf Ihr Tele­fon und instal­lie­ren Sie sie.

Die Ionic-Demo-App verwenden

Bit­te beach­ten Sie, dass die Demo-App ein bereits lau­fen­des Map­Trip erwar­tet, da sie Map­Trip nicht von selbst star­tet.
Wenn Sie die Demo-App star­ten, soll­te die Ver­bin­dung zu Map­Trip über MTI bereits her­ge­stellt sein, und Sie wer­den die­sen Bild­schirm sehen:

Ionic-Navigation

Geben Sie nun eine gül­ti­ge WGS84-Koor­di­na­te ein und drücken Sie “Navi­ga­ti­on star­ten”. Die App sen­det die­se Koor­di­na­ten an Map­Trip und zeigt Map­Trip auto­ma­tisch an, wenn die Berech­nung der Rou­te abge­schlos­sen und die Navi­ga­ti­on gestar­tet ist.

Wenn Sie zurück zur Ionic-App wech­seln, sehen Sie ein Label, auf dem aktu­el­le Navi­ga­ti­ons­in­for­ma­tio­nen (die näch­ste Stra­ße auf Ihrer Rou­te und die Ent­fer­nung zur Kreu­zung in Metern) ange­zeigt werden.

Ver­wen­den Sie die Navi­ga­ti­ons­schnitt­stel­le mit Ihrem eige­nen Plugin

Um die MTI-Funk­tio­na­li­tät für Ihr eige­nes Plug­in zu nut­zen, müs­sen Sie die Abhän­gig­keit hin­zu­fü­gen. In die­sem Bei­spiel ver­wen­den wir eine benut­zer­de­fi­nier­te grad­le-Datei, die in die grad­le-Basis­da­tei Ihres ionic/an­droid-Pro­jekts kom­pi­liert wird. Sie befin­det sich in MTIDemoPlugin/src/android/plugin.gradle.

Um plugin.gradle ein­zu­bin­den, müs­sen Sie die plugin.xml, die sich im Stamm­ver­zeich­nis Ihres Plug­ins befin­det, ändern.

Ein­fach hinzufügen

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

zu Ihrer plugin.xml, wie hier zu sehen:

Ionic-Navigation

Damit haben Sie die vol­le Kon­trol­le über Map­Trip aus Ihrer Ionic-Anwen­dung heraus!

Zur Werkzeugleiste springen