JQuery Mobile und Cordova (auch bekannt als PhoneGap) sind zwar nicht speziell für die Zusammenarbeit konzipiert, sind jedoch ein sehr leistungsfähiges Duo für die Erstellung hybrider, mobiler Apps. In dieser Serie erfahren Sie, wie Sie mithilfe von Web-Technologien und diesen beiden Frameworks einen Feed-Reader entwickeln. Im Verlauf dieser Serie werden Sie auch mit den Cordova-Plug-ins für Verbindung und Speicher und der Google-Feed-API vertraut.

---

Anwendungsübersicht

Die App, die wir in diesem Tutorial mit dem Namen "Audero Feed Reader" erstellen werden, ist sehr klein und leicht verständlich. Es ist ein grundlegender Feed-Reader, der Ihnen hilft, alle Neuigkeiten und Artikel, die Sie interessieren, an einem Ort zu halten. Schließlich hat Google den Google Reader heruntergefahren, also müssen wir ihn ersetzen, nicht wahr?

Auf der Startseite der App platzieren wir zwei Schaltflächen, um die beiden Hauptfunktionen hervorzuheben: Eine neue Feed-Schaltfläche und eine Liste der gespeicherten Feeds. Das Layout des Startbildschirms wird mit dem folgenden Screenshot angezeigt:

Um das Projekt so einfach wie möglich zu halten, speichern wir nur den Namen des Feeds und dessen URL. Sobald der Benutzer auf die Schaltfläche "Feed hinzufügen" klickt, wird ein Formular mit nur zwei Eingabefeldern angezeigt, wie in der folgenden Abbildung dargestellt:

Nun, da der Benutzer beliebig viele Feeds speichern kann, ist es an der Zeit, dass er die Liste der gespeicherten Feeds anzeigen kann. Damit der Benutzer den Feed leichter finden kann, ist die Liste alphabetisch nach Namen geordnet. Außerdem gibt es ein Suchfeld, falls die Feeds zu zahlreich sind. Sie können ein Beispiel für die beschriebene Seite in der folgenden Abbildung sehen:

Sobald der Benutzer einen Feed ausgewählt hat, ruft die App die URL ab und zeigt die verfügbaren Einträge an. Um die verschiedenen Arten von Feeds (Atom, RSS oder Media RSS) auf einfache Weise zu analysieren, nutzen wir die Google Feed-API und insbesondere die Google Feed-JSON-Oberfläche. Letzterer analysiert die angeforderte URL für uns und gibt ein vereinheitlichtes und einfach zu analysierendes JSON-Objekt zurück. Im nächsten Teil dieser Serie erfahren Sie mehr über diese API. Standardmäßig, um Bandbreite zu sparen, Audero Feed Reader benötigt nur 10 Einträge. Damit der Benutzer mehr Daten abrufen kann, fügen wir die Schaltfläche "Mehr anzeigen" hinzu. Natürlich werden die Daten tatsächlich nur abgerufen, wenn der bereitgestellte Feed mehr als 10 Einträge enthält. Mobiletuts + stellt beispielsweise nur 10 Einträge bereit. Wenn der Benutzer auf die Schaltfläche "Mehr anzeigen" klickt, wird die Meldung "Keine weiteren Einträge zum Laden" angezeigt.

Um Platz zu sparen, sind die Einträge mit einem Akkordeon organisiert und standardmäßig ist nur der Titel sichtbar. Der Benutzer kann jedoch bei Bedarf weitere Details anzeigen. Die App zeigt auch die Zusammenfassung des Eintrags, den Autor und eine Schaltfläche mit der Aufschrift "Gehe zum Artikel" an, um den gesamten Artikel auf der entsprechenden Website zu lesen. Beachten Sie, dass zur Verbesserung der Benutzerfreundlichkeit auch der Titel erneut angezeigt wird. Dieses Mal kann jedoch auf den gesamten Artikel geklickt werden.

Das endgültige Erscheinungsbild dieser Seite wird unten gezeigt:

---

Projektkomponenten

An diesem Punkt wissen wir Was zu tun, also ist es Zeit zu sehen Wie ja mach mal. Die Technologien, die an der Entwicklung von beteiligt sind Audero Feed Reader sind:

• HTML 5: Zum Erstellen und Markieren der Seiten.
• CSS 3: Um die Seiten zu gestalten. Beachten Sie, dass wir kein benutzerdefiniertes CSS-Stylesheet haben und nur das von jQuery Mobile bereitgestellte verwenden.
• JavaScript: Diese Sprache verwenden wir zum Programmieren der Anwendungslogik. Es ist die einzige Sprache, die von PhoneGap unterstützt wird.
• jQuery: jQuery wird zum Auswählen von Elementen, zum Anhängen von Ereignishandlern und zum Ausführen von AJAX-Anforderungen verwendet. Es ist auch eine Abhängigkeit von jQuery Mobile.
• jQuery Mobile: Dies ist unser Rahmen der Wahl, um die Benutzeroberfläche unserer Seiten zu erstellen. Dadurch können wir eine Website für mobile Geräte einfach optimieren und schnell mobile Schnittstellen erstellen. Zum jetzigen Zeitpunkt ist die neueste verfügbare Version 1.3.1.
• PhoneGap: Umschließt alle unsere Dateien, sodass wir sie so kompilieren können, als würden wir eine native App erstellen. Darüber hinaus bietet PhoneGap einige interessante und nützliche APIs für die Kommunikation mit der Gerätehardware, wie z. B. Speicher und Verbindung. Die verwendete Version ist 3.0, eine aktuelle und wesentliche Verbesserung gegenüber 2.x.

Zusätzlich zu den oben genannten verwenden wir auch diese spezifischen Cordova Core Plugins:

• InAppBrowser: Das ist einen Webbrowser, der beim Aufruf in der App angezeigt wird window.open. Seit Version 2.3.0 wurden zwei wichtige Methoden hinzugefügt: executeScript () und insertCSS (). Mit der ersten können Sie JavaScript-Code einfügen, während in der zweiten CSS-Code hinzugefügt wird InAppBrowser Fenster. Wir werden diese Methoden in unserer App nicht verwenden, aber ich wollte sie erwähnen. Weitere Informationen finden Sie in der offiziellen Dokumentation zu InAppBrowser.
• Speicher-Plugin: Bietet Zugriff auf die Speicheroptionen des Geräts. Beachten Sie, dass einige Geräte bereits eine Implementierung dieser Spezifikationen bereitstellen, wie in der Dokumentation festgehalten wird. In diesem Fall gilt die integrierte Unterstützung. Die Implementierung von Cordova bietet kompatiblen Support für diejenigen, die dies nicht tun. Weitere Informationen finden Sie in der Dokumentation zu Local Storage.
• Benachrichtigungs-Plugin: Ermöglicht das Erstellen von visuellen, akustischen und taktilen Gerätemeldungen. Von den verschiedenen verfügbaren Methoden verwenden wir nur warnen() um dem Benutzer einige Nachrichten anzuzeigen. Dieses Plugin wird beispielsweise verwendet, wenn ein Benutzer einen Feed erfolgreich hinzufügt oder löscht. Weitere Informationen finden Sie in den Benachrichtigungsdokumenten.
• Anschluss Plugin: Es besteht aus nur einer Eigenschaft, die Informationen zum Verbindungsstatus des Geräts liefert (z. B. WI-FI, 3G, keine usw.). Bitte beachten Sie, dass Sie seit Version 2.3.0 auf die Verbindung Objekt mit dem neuen navigator.verbindung Eigentum. Diese Eigenschaft entspricht der W3C-Spezifikation und nicht der vorherigen navigator.network.connection Eigentum. Mehr dazu hier.

Wenn Sie vorherige Versionen von PhoneGap verwendet haben, werden Sie feststellen, dass diese Plugins nichts anderes sind als das, was Sie früher als APIs kannten. Die Namensänderung ist auf die neue PhoneGap-Architektur zurückzuführen. Keine Sorge, abgesehen vom Namen ist fast alles gleich. Wenn Sie mehr über die neuesten und größten Verbesserungen mit 3.0 erfahren möchten, lesen Sie den einleitenden Artikel und das Handbuch "Erste Schritte".

---

1. Installieren Sie PhoneGap

Ab Version 3.0.0 hat das Entwicklungsteam ein neues Verfahren zur Installation von PhoneGap eingeführt, das Node.js und npm erfordert. Darüber hinaus werden derzeit keine einfachen Download-Links als Fallback bereitgestellt. Für den Rest des Lernprogramms wird daher davon ausgegangen, dass beide Softwarepakete installiert sind und funktionieren. Wenn Sie fertig sind, geben Sie als Erstes den folgenden Befehl ein, um PhoneGap zu installieren:

npm install -g phonegap

Wenn Sie mit Linux arbeiten, denken Sie daran, voraus zu gehen Sudo zur vorherigen Zeile.

---

2. Initialisieren Sie das Projekt

Bevor Sie den Projektordner erstellen, ist es erwähnenswert, dass das Entwicklungsteam in dieser neuen Version auch eine Befehlszeile eingeführt hat, die Entwicklern bei der Ausführung allgemeiner Aufgaben wie dem Erstellen und Ausführen der App oder dem Installieren von Plugins hilft. Mit der CLI können Sie auch ein Projekt initialisieren. Es wird nicht nur ein Ordner mit der PhoneGap-Bibliothek erstellt, sondern auch das Gerüst einer Anwendung generiert. Um das Projekt zu initialisieren, geben Sie einfach den folgenden Befehl ein:

phonegap erstellen audero-feed-reader com.audero.free.utility.auderofeedreader "Audero Feed Reader"

Das erste Argument gibt den Namen des zu erstellenden Verzeichnisses an. Die anderen beiden Argumente sind optional und geben die ID bzw. den Namen der App an. Wenn Sie den obigen Befehl ausführen, wird die folgende Struktur im Stammordner des Projekts angezeigt:

• .Cordova: Wird für die Hintergrundkompatibilität mit Cordova-Werkzeugen verwendet.
• verschmilzt: In diesem Ordner können Sie jede plattformspezifische Anpassung hinzufügen, sodass Sie die Quelldateien nicht jedes Mal ändern müssen, wenn Sie mit einem Projekt arbeiten.
• Plattformen: Der Ort, an dem die kompilierten Installationsprogramme platziert werden, falls Sie das Projekt lokal kompilieren.
• Plugins: Der Ordner, in dem Sie die Plugins Ihres Projekts finden.
• www: Der Ordner mit den Quelldateien und der Konfiguration der Anwendung. Es enthält den Ordner "css", "js" und "img", in dem Sie die entsprechenden Dateien ablegen können. Außerdem hat es einen "res" -Ordner, in dem Sie Symbole und Splashscreens platzieren können.

---

3. Installieren Sie PhoneGap Plugins

Wie wir in der Einführung gesehen haben, werden wir in unserem Projekt einige der PhoneGap-Kern-Plugins nutzen. Um sie zu installieren, müssen Sie die CLI verwenden, indem Sie den folgenden Befehl eingeben:

 lokales Plug-in für Phonegap-Anweisungen fügen PLUGIN_REPOSITORY_URL hinzu

In obigem, PLUGIN_REPOSITORY_URL ist die Repository-URL des Plugins, das Sie verwenden möchten. Da unser Projekt sowohl die Benachrichtigungs- als auch die Verbindungskern-Plugins verwendet, müssen Sie den folgenden Befehl eingeben:

 phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git phonegap local plugin add https://git-wip-us.apache.org/repos/asf /cordova-plugin-network-information.git

Wie Sie vielleicht bemerkt haben, habe ich das Speicher-Plugin nicht hinzugefügt. Der Grund ist, dass der Zugriff ab Version 3.0 in Cordova integriert ist.

---

4. Fügen Sie PhoneGap Frameworks hinzu

Jetzt, da wir PhoneGap und seine Plugins installiert haben, müssen wir die zwei anderen benötigten Bibliotheken hinzufügen: jQuery (Ich verwende Version 2.0.3) und jQuery Mobile (Version 1.3.1)..

Bevor wir fortfahren, ist es wichtig zu verstehen, warum ich den 2.x-Zweig von jQuery gewählt habe. jQuery hat derzeit zwei große Zweige in der Entwicklung: 1.x und 2.x. Welche Version Sie verwenden sollten, hängt wirklich davon ab, wo Sie das Framework verwenden und welche Browser Sie unterstützen möchten. Während jQuery 1.x ab Version 6 alle Versionen von Google Chrome, Firefox, Safari, Opera und Internet Explorer unterstützt, hat die 2.x-Version die Unterstützung für Internet Explorer 6, 7 und 8 aufgegeben und eine geringere Größe erhalten und bessere Leistung. Da wir mit Cordova eine mobile Anwendung entwickeln, müssen wir uns nicht um Internet Explorer 6-8 kümmern. Tatsächlich sind die von Cordova unterstützten Microsoft-Betriebssysteme Windows Phone 7 und Windows Phone 8, die jeweils unter Internet Explorer 9 und 10 laufen. Daher können wir jQuery 2.x sicher verwenden!

Mit dem oben genannten Verständnis können wir mit unseren grundlegenden Schritten fortfahren Audero Feed Reader. Wenn Sie die Bibliotheken heruntergeladen haben, verschieben Sie die jQuery-Datei und die JavaScript-Datei (minimierte Version) von jQuery Mobile in das Verzeichnis "js" Mappe. Dann müssen wir das Stylesheet von jQuery Mobile einfügen (jquery.mobile-1.3.1.min.css) in der "css" Mappe. Zum Schluss platzieren wir die mit jQuery Mobile gebündelten Bilder in der "img" Mappe. Da wir die native Struktur von jQuery Mobile leicht geändert haben, müssen wir die Pfade anpassen, die auf die Bilder in der CSS-Datei zeigen. Wir müssen den Teil "images /" durch diese Zeichenfolge "… / img /" ersetzen. Beachten Sie, dass die Zeichenfolge fünfmal ersetzt werden sollte.

---

5. Erstellen Sie die Projektdateistruktur

Jetzt, da das Projekt-Framework vorhanden ist, müssen wir den Ordner "www" erstellen, die erforderlichen HTML-Dateien erstellen, das Symbol der Standardanwendung festlegen, die Konfigurationsdatei für Adobe PhoneGap Build optimieren und den Standard-Begrüßungsbildschirm ändern. Das ist eine Menge, also machen wir weiter!

Im Verlauf dieser Serie erstellen wir folgende Dateien:

• index.html: Der Einstiegspunkt der Anwendung, wo wir die Links zu den verwendeten Bibliotheken setzen.
• add-feed.html: Diese Seite enthält das Formular, das zum Speichern eines neuen Feeds verwendet wird.
• list-feeds.html: Zeigt die Liste der gespeicherten Feeds an.
• show-feed.html: Dies zeigt die Einträge des angegebenen Feeds. Außerdem gibt es eine Navigationsleiste mit einer Schaltfläche zum Löschen des Feeds und eine weitere zum Abrufen weiterer Einträge aus dem Feed.
• aurelio.html: Die Credits-Seite mit Informationen zum Autor.
• feed.js: Diese Datei enthält eine Klasse namens Futter, Gespeicherte Feeds erstellen, löschen und abrufen. Es basiert auf dem Cordova Storage-Plugin.
• application.js: Diese Datei enthält eine andere Klasse namens Anwendung, das verfügt über die Methoden zum Initialisieren der Anwendungsseiten und zum Anhängen von Handlern an die Elemente einiger Seiten (z. B. die zuvor genannten Navigationsschaltflächen).
• config.xml: Diese XML-Datei enthält die Metadaten unseres Projekts und speichert Einstellungen wie den Namen und die Beschreibung der App.

---

6. Erstellen Sie die Startseite

Da jQuery Mobile Seiten mit Ajax lädt, müssen wir die CSS- und JavaScript-Dateien am Einstiegspunkt unserer Anwendung laden, d. H index.html Datei. Diese Seite zeigt den Titel und die Beschreibung der Anwendung und verfügt über alle Schaltflächen, um auf den Rest der App zuzugreifen.

Die vollständige Quelle der Homepage ist unten dargestellt:

                
 
 
Audero Feed Reader
  
 
 Audero Feed Reader ist ein sehr einfacher Feed-Aggregator, der alle Neuigkeiten und Artikel, die Sie interessieren, an einem Ort aufbewahrt. 
 Feed List Feed hinzufügen 
  
  

Wie Sie dem obigen Code entnehmen können, sind die Schaltflächen im und das