Mobile Apps mit Cordova

JavaScript-Logik verstehen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In Cordova wird die gesamte Funktionalität mit JavaScript umgesetzt. Dabei werden Objekte bereitgestellt, die entweder vom DOM oder von speziellen Cordova-APIs über Plug-ins bereitgestellt werden.
08:26

Transkript

Bei Cordova-Apps wird die gesamte Funktionalität mit JavaScript umgesetzt. Und diese Programmierung mit JavaScript folgt einer gewissen Logik, die sich immer wieder wiederholt. In diesem Video wollen wir uns solche grundsätzlichen Techniken ansehen, die in allen Cordova-Apps wiederbegegnen werden. Das hat den wesentlichen Vorteil, dass man von einem Objekt Erfahrungen sofort auf andere Objekte übertragen kann. Denn wenn Sie sich hier die Dokumentation von Cordova ansehen, dann sind diese Plug-ins, die man bei Cordova benutzt, im Grunde nichts weiter als Objekte. Und Objekte haben gewisse Methoden, das heißt, wenn man hier beispielsweise die Geolocation betrachtet, - das ist aber bei allen diesen Plug-ins gleich - dann ist das ein Objekt. Was in diesem Falle das Standard DOM Objekt Navigator erweitert, aber das spielt im Grunde keine Rolle. aber die Anwendung ist immer wieder nach dem gleichen Schema gestrickt. Man spricht das Objekt an, also "navigator.geolocation" in diesem Falle. Und ruft dann eine passende Methode dieses Objektes auf. In diesem Fall 'getCurrentPosition'. Die Namenswahl dieser Methoden ist nicht zufällig. Denn 'getCurrentPosition' beginnt mit einem 'get'. Und das ist eben auch bei anderen Objekten und passenden Methoden durchaus wiederzufinden. Schauen wir uns das mal hier an für ein Kompaß-Objekt. Sie finden hier die Möglichkeit dieses Objekt anzusprechen, mit 'navigator.compass'. Und dann eine Methode, die heißt hier 'getCurrentHeading'. Die Ähnlichkeit ist eben kein Zufall. Sie ist gewollt. Das macht die Verwendung dieses APIs so einfach, so konsequent, weil Dinge, die ähnlich sind auch ähnlich benannt werden und die komplette Syntax ist auch weitgehend identisch. Dieses 'getCurrentHeading' hat hier zwei Parameter und das sind sogenannte Callbacks. Callbacks sind in JavaScript Funktionen, die auf Grund eines bestimmten Ereignisses aufgerufen werden. Auf Grund welchen Ereignisses, ist in dem API geregelt. Das wird im Hintergrund gemanagt, es ist ein Automatismus dahinter. Beim 'Compass' können Sie sich vorstellen, dass sich das ändert, sobald jemand das Gerät, zum Beispiel dreht oder solche Geschichten. Diese Callbackfunktinen haben in Cordova, im API sehr oft einen Standardparameter. Erfahrene JavaScript Programmierer werden das kennen, vom Eventhandling. Auch da gibt es zumindestens, wenn man das Netscape Modell betrachtet, ein Standardobjekt, was immer der erste Parameter ist, der an diesen Callback übergeben wird. Und dieses Objekt repräsentiert mehr oder weniger die Ergebnisse der Aktion im Erfolgsfall. In diesem Fall über Heading kommen Sie dann an diese Himmelsrichtungen. Und wenn Sie Geolocation betrachten, dann repräsentiert dieses Standardobjekt des Erfolgscallbacks die Position, die ermittelt wurde bei einer Geolokalisierung. Grundsätzlich, wie gesagt, ist das über das gesamte API sehr konsequent und sehr selbstähnlich. Das macht auch den Charme von diesem API aus. Jetzt gibt es bei einigen dieser Objekte und Methoden auch Parameter. Parameter, um gewisse Dinge genauer zu spezifizieren. Welche Parameter es sind müssen Sie natürlich bei dem konkreten Objekt, bei dem Plug-in nachschauen. Aber die formale Syntax, das ist JSON, also immer: Schlüssel:Wert, Schlüssel:Wert, Schlüssel:Wert. Die Optionen sind in der Regel optional. Zwischen Schlüssel und Wert steht ein Doppelpunkt für die Zuweisung, und ein Komma, um mehrere von diesen Optionen zu trennen. Übrigens werden auch DOM-Objekte die Sie in Cordova-Apps benutzen können, sowie Navigator-Direkt mit einer ähnlichen Logik arbeiten. Auch da gibt es sehr oft solche Dinge, wobei das mit den Callbacks hauptsächlich hier in den eigentlichen Cordova-APIs umgesetzt wird. Was gibt es jetzt hier noch an Besonderheiten. Sie sollten beachten, dass nicht alle Plug-ins auf allen Plattformen funktionieren. Für einige gibt es Workarounds, auf anderen gehen bestimmte Dinge einfach nicht. Sie sehen, dass hier in der Dokumentation, ...ob es solche Workarounds gibt. Und Sie können erkennen in dem Plattform Support, ob ein bestimmtes Feature auch wirklich unterstützt wird von Cordova. Für eine bestimmte Plattform meine ich natürlich. Nun soll noch eine Bemerkung zu einem weiteren grundsätzlichen Thema folgen. Hier in dieser API Reference gibt es einen Verweis auf die sogenannten Events. Das sind spezielle Ereignisobjekte oder Ereignistypen, die an mobile Gegebenheiten gekoppelt sind. Das heißt, wenn Sie eine normale Website haben, haben Sie so Events wie 'onload', 'onclick', 'onmouseover', 'onmouseout'. Das haben Sie bei einem mobilen Gerät in der Regel nicht, denn Sie haben kein Mauszeiger. Stattdessen bedienen Sie das Gerät mit den Fingern. Sie wischen über den Bildschirm und ähnliche Sachen. Das Cordova-API, das Framework stellt eine Unterstützung für solche spezifischen Events zur Verfügung, die man auf den mobilen Geräten braucht. Es gibt auch einige Events, die ganz konkret nur bei einem mobilen Gerät überhaupt vorstellbar sind. Nämlich hier zum Beispiel, die Überwachung des Batteriestatus. Darauf können Sie reagieren. Oder ob ein Gerät online oder offline ist. Das kann natürlich auch bei einem stationären Gerät sein. Ganz zentral ist das 'deviceready', denn das ist der Zeitpunkt zu dem dann das Gerät Ihnen zur Verfügung steht für Ihre eigene Programmierung. Das bedeutet nämlich, Cordova ist vollständig geladen und das bedeutet im Grunde, dass die App zur Verfügung steht. Die App ist geladen und erst dann sollte man reagieren, seine eigene Logik programmieren, auslösen. Es entspricht im Wesentlichen dem, was man in der Website mit 'onload' als Event-Handler zur Verfügung hat. Zumindestens vom Resultat, dass man dann loslegt. Die Details werden hier in der Dokumentation natürlich genauer erklärt. Sie sehen auch hier, wie grundsätzlich das Event-Handling unter Cordova programmiert wird. Man arbeitet mit der Methode 'document.addEventListener'. Spezifiziert hier das Event selbst und dann hier einen Callback. Das ist wieder ein Verweis auf die Funktion, die im Fall des Auslösens des Events aufgerufen werden soll. Gewisse Events funktionieren auch nur auf bestimmten Plattformen, nicht auf allen. Auch hier werden Sie in der Dokumentation im Zweifelsfalle die Hinweise finden, ob ein gewisses Event funktioniert oder eben nicht. Sie haben also in diesem Video die grundsätzliche JavaScript Logik bei der Arbeit mit Cordova gesehen. Bsierend auf Callbacks, speziellen Events, die vom Framework zur Verfügung gestellt werden, werden Sie so ziemlich alle Plug-ins anwenden können und auch gegebenenfalls, wenn es notwendig ist, mit DOM-Objekten unter einer Cordova-App arbeiten können.

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!