Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Mobile Apps mit Cordova

Cordova im Zusammenspiel mit ergänzenden Frameworks und APIs

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Cordova eignet sich hervorragend, um über JavaScript auf die Hardware eines mobilen Geräts sowie damit korrespondierende Objekte zuzugreifen. Zusätzlich gibt es weitere APIs wie Kartendienste, die oft sehr nützlich sind.
06:38

Transkript

Cordova ist ein hervoragendes API, um per Javascript und anderen Webtechnologien native Apps zu erzeugen und eben per Javascript auch auf die Hardware von einem mobilen Gerät zugreifen zu können. Aber Cordova hilft nicht allzu viel bei der Erstellung von Oberflächen oder dem Umgang mit Javascript auf eine einfache Art und Weise. Deswegen ist es sehr oft sinnvoll ergänzende Frameworks oder APIs zu benutzen, wenn Sie eine Cordova-App erzeugen. Wir haben ja hier beispielsweise einen Kartendienst mit eingebunden. Das heißt, das ist kein Cordova, was die Karte anzeigt. Cordova wird hier nur die Position bestimmen, bzw. mit Cordova bestimmen wir die. Und dann nehmen wir eine ergänzende Struktur, ein API in dem Fall, einen Kartendienst um diese Karte anzuzeigen und diesen Pointer hier zu setzen an den ermittelten Koordinaten. Zum besseren Umgang mit Javascript und der Gestaltung schöner mobilen Oberflächen bieten sich jetzt Javascript-Frameworks an. Und ein sehr bekanntes Framework heißt jQuery und dessen darauf aufsetzende Erweiterung jQuery mobile. Und jQuery mobile ist, wie der Name schon sagt, speziell dafür gedacht, mobile Oberflächen vernünftig zu erstellen. Die werden deklarativ erstellt über Klassen und Rollen, die hier vergeben werden, und man kann sehr einfach sehr ansprechende Oberflächen erstellen. jQuery erleichtert den Umgang mit Javascript und jQuery mobile, wie gesagt, erlaubt die Gestaltung mobiler Webseiten. Und ich betone in dem Fall "mobile Webseiten", aber das kann man natürlich im Rahmen von so einem Cordova-Rapper auch benutzen, denn wir laden ja eine Webseite. Und da sind Gegebenheiten einer mobilen Webseite genauso vorhanden. Das ist jetzt nun ein Mediaplayer, dessen Funktionalität bezüglich des Abspielens der Mediadateien mit Cordova gemacht wurde. Das ist, wie gesagt Cordova, aber die Oberfläche, die ist mit jQuery mobile gemacht worden und die Programmierung per Javascript, wurde mit jQuery deutlich vereinfacht. Wir schauen uns mal den Quellcode exemplarisch an. Das ist die Webseite, die hier diesen Mediaplayer von der Oberfläche gestaltet. Wir haben im Grunde nur "div"-Bereiche. Sie können hier, bis da sich erstrecken, so ein bisschen eingerückt, dass man sieht, von wo bis wo das geht. Und Sie sehen hier, dass die "divs" im Inneren mit speziellen Attributen arbeiten. Diese sind keine Standard-Attribute von HTML, sondern die gehören zum Framework dazu. Und diese ganzen Attribute sorgen dafür, dass jQuery mobile beim Rendern der Webseite eine optische Aufbereitung vornimmt. Sie sehen beispielsweise hier, dass der Button "Play" so ein Icon hat. Das ist hier beschrieben mit "data-icon" und dass das Icon oberhalb von dem Text angeordnet wird. Außen ist der Button eigentlich hier nur ein Hyper-Link, der umformatiert wurde. Und zwar durch diese "controlgroup" hier. Des Weiteren wird der gesamte Bereich hier als sogenannte "Page" betrachtet und man kann innerhalb einer HTML-Datei mehrere Seiten unterbringen, die nacheinander angezeigt werden können. Das ist natürlich auch sehr nett, gerade bei einer App. Wenn wir uns nun den Javascript-Code angucken, der hier verwendet wird, dann Sehen Sie hier plötzlich solche Dollar-Zeichen. Diese Dollar-Zeichen gehören zu jQuery und mit jQuery kann man viele Javascript-Anweisungen erheblich verkürzen. Man muss zum Beispiel nicht mehr hinschreiben "document get element" bei ID oder "get elements" bei TAG nehmen. sondern man schreibt nur noch dieses Dollar-Zeichen hin. Des Weiteren werden hier Methoden zur Verfügung gestellt, wie "addClass", "removeClass" und ähnliche Dinge. Insgesamt wird dadurch der Code viel viel kompakter und stabiler, das kommt noch dazu. Das heißt also, wenn man so ein Framework hinzunimmt, wie jQuery mobile, wird die Gestaltung der Oberfläche erheblich leichter. Man hat auch ein sehr ausgefeiltes CSS-Framework dahinter. Und jQuery selbst erleichert den Umgang mit dem reinen Javascript. Kommen wir nochmal zurück zur HTML-Datei. Sie sehen hier, dass die CSS-Datei von jQuery mobile hier eingebunden wird. Die brauchen wir. Und hier haben wir nach der Referenzierung von der Cordova-JS eine Referenz auf jQuery selbst und dann noch eine Referenz auf jQuery mobile. Das wird benötigt. Entweder laden Sie das über einen CDN, also aus dem Internet, oder auch dies kann lokal mit der App ausgeliefert werden. Es gibt eine hervorragende Dokumentation hier zu jQuery mobile. Unter "Download" beispielsweise finden Sie auch genau diese drei Anweisungen, die ich Ihnen eben vorgestellt habe. Ich möchte nicht verschweigen, dass es natürlich noch weitere Frameworks gibt, aber die arbeiten im Grunde alle gleich. Es sind Javascript-Bibliotheken mit einem CSS-Konzept dahinter. Und die Verwendung von solchen Frameworks oder eben APIs, die eine bestimmte Leistung zur Verfügung stellen, wie etwa Kartendienste, erweitern den Umfang der Möglichkeiten einer Cordova-App doch gewaltig, wie Sie hier gesehen haben.

Mobile Apps mit Cordova

Schreiben Sie mit Cordova mobile Apps, die nicht nur auf einer bestimmten mobilen Plattform laufen, sondern in verschiedenen Umgebungen.

3 Std. 58 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!