Dies ist der dritte und letzte Teil der Serie Audero Feed Reader. In diesem Artikel erfahren Sie, wie Sie die Konfigurationsdatei erstellen und das in einer früheren Lektion gestartete Projekt abschließen.
1. Beenden der App
Ein besseres responsives Layout
Im ersten Teil dieser Serie habe ich über die Bedeutung des Daten-Iconpos Attribut für die Links in der Kopf- und Fußzeile. In diesem Abschnitt erfahren Sie, warum wir sie verwenden. Ich benutze es mit etwas JavaScript, um einen besseren Reaktionseffekt zu erzeugen. Ich verwende es, um den Text der Links dort zu verbergen, wo er angewendet wurde. Dies dient dazu, Platz zu sparen, was insbesondere für kleinere Bildschirme wichtig ist. Aber was ist, wenn der Bildschirm groß genug ist, sagen wir mehr als 480 Pixel, um den Text anzuzeigen? Dafür hören wir auf die pagebeforecreate Ereignis, und fügen Sie einen Handler, der updateIcons () Methode der Anwendung Klasse, um zu reagieren, sobald es abgefeuert wird. Wie aus den Namen hervorgeht, wird das Ereignis ausgelöst, bevor die Seite und ihre Widgets initialisiert werden. Unser Handler prüft zuerst, ob die Seite größer als 480px ist, und entfernt in diesem Fall die Daten-Iconpos Attribut, so wird der Linktext angezeigt.
Der Code, der diese Methode implementiert, lautet wie folgt:
updateIcons: function () var $ buttons = $ ('ein [Daten-Symbol], Schaltfläche [Daten-Symbol]'); var isMobileWidth = ($ (window) .width () <= 480); isMobileWidth ? $buttons.attr('data-iconpos', 'notext') : $buttons.removeAttr('data-iconpos');
2. Erstellen Sie die Konfiguration
Mit dem Adobe PhoneGap Build-Dienst können Sie die Metadaten Ihres Projekts mithilfe einer Konfigurationsdatei angeben config.xml. Es folgt der W3C-Widget-Spezifikation und muss sich im Stammverzeichnis der App auf derselben Ebene befinden index.html. Die erste Zeile ist die XML-Deklaration und die Wurzel des Dokuments ist a Tag mit mehreren verfügbaren Attributen. Die wichtigsten sind Ich würde, die eindeutige Kennung der Anwendung und Ausführung, was gibt die Version der Anwendung an. In der Tag können Sie die Metadaten schreiben.
Wenn Sie dem Tutorial bisher gefolgt sind, werden Sie sich daran erinnern, als wir die Anwendung mit der PhoneGap-CLI, Es wurde eine Standardkonfigurationsdatei erstellt. Die generierte Konfiguration enthält zu viele Einstellungen für jede Plattform im Vergleich zu unseren Anforderungen. In der Tat werden wir mehrere Einstellungen verwenden, aber da dies ein Tutorial ist, konzentrieren wir uns auf einige Plattformen. Sie können sich jedoch ganz nach Ihren individuellen Bedürfnissen ausdehnen.
In der Konfigurationsdatei haben wir:
Name (erforderlich): Dies ist der Name der App. Es muss nicht eindeutig sein.
Beschreibung (erforderlich): Text, der angibt, wozu Ihre App dient. Dies ist sehr wichtig, da es auf den Marktplätzen als Beschreibung Ihrer App angezeigt wird.
Autor (optional): Der Autor der App. Es hat zwei optionale Eigenschaften: href, eine URL zum Entwickler oder zur Homepage des Unternehmens, und E-Mail, die E-Mail-Adresse des Entwicklers oder des Unternehmens. Leider können Sie nur einen Autor angeben, so dass Sie hier keine Angaben zu mehreren Autoren haben können.
Symbol (optional): Dies ist das Symbol, das auf den Geräten angezeigt wird, auf denen Ihre App installiert wird. Wenn es nicht angegeben wird, wird das Cordova-Logo verwendet.
Spritzen (optional): Hiermit wird der Begrüßungsbildschirm der Anwendung festgelegt. Dies ist das Bild, das beim Laden angezeigt wird.
Präferenz (optional): Eine Reihe von Einstellungen, die Sie auf Ihre App anwenden möchten. Es ist ein geschlossenes Tag und Sie können null oder mehr haben Tags in der Datei. Es hat zwei Attribute und beide sind erforderlich: Name und Wert. Es gibt verschiedene Einstellungen, die Sie definieren können, aber meiner Meinung nach ist die Cordova-Version die wichtigste.
Zugriff (optional): Ermöglicht Ihrer App den Zugriff auf Ressourcen in anderen Domains. Insbesondere können Sie mit Ihrer App Seiten von externen Domains laden, die Ihre gesamte Webansicht übernehmen können. Denken Sie daran, was ich zuvor im Abschnitt "Das InAppBrowser-Plugin" erläutert habe. Wenn Sie die externen Links in Cordova WebView öffnen möchten, müssen Sie sie zur Whitelist der App hinzufügen. Der Kürze halber berücksichtigen wir jede externe Ressource, die die * Sonderzeichen.
Lücke: Plugin (optional): Gibt die Funktionen an, die Sie verwenden möchten. Beispielsweise zeigt Android vor der Installation einer App dem Benutzer die erforderlichen Berechtigungen. Wenn der Benutzer zustimmt, wird er fortgesetzt.
Wenn Sie die obige Liste sorgfältig gelesen und PhoneGap in der Vergangenheit verwendet haben, ist Ihnen wahrscheinlich die Einführung einer neuen Einstellung in Version 3.0.0 aufgefallen gap: Plugin. Letzteres hat das ersetzt Merkmal Einstellung, aber abgesehen von dem Namen ist das Konzept genau das gleiche.
Nachdem ich nun die wichtigsten Punkte des Formats notiert habe, können Sie die Quelle der Konfigurationsdatei unseres Projekts verstehen. Wenn Sie jedoch mehr zu diesem Thema lesen möchten, werfen Sie einen Blick auf die offizielle Dokumentationsseite. Die vollständige Datei befindet sich unten.
Audero Feed Reader Audero Feed Reader ist ein sehr einfacher Feed-Aggregator, der alle Neuigkeiten und Artikel, die Sie interessieren, an einem Ort aufbewahrt. Aurelio De Rosa
3. Aktivieren der Anwendung zur Ausführung
An diesem Punkt haben wir das Ende dieser Serie erreicht. Ziel war es zu zeigen, wie wir die App mit allen Dateien, die wir bisher erstellt haben, sicher starten können. Unsere Handler und Methoden können sicher ausgeführt werden, sobald Cordova vollständig geladen ist. So können Sie die Cordova-APIs aufrufen. Aber warte ... Wann ist Cordova bereit? Ich bin froh, dass du gefragt hast! Das Framework stellt ein Ereignis bereit gerätetauglich dass du hören kannst. In Anbetracht dessen in der index.html Datei (der Einstiegspunkt der Anwendung), hören wir uns das Ereignis an und fügen als Handler unseren an initApplication () Methode der Anwendung Klasse. Es wird ausgeführt, sobald das Ereignis ausgelöst wird.
Der Code, der dies implementiert, ist unten dargestellt.
4. Erstellen und Testen der Anwendung
Unsere App ist jetzt fertig. Jetzt müssen Sie es nur noch auf einem Emulator oder einem echten Gerät erstellen und testen. Um die App zu erstellen, haben Sie zwei Möglichkeiten: Ihren Computer oder den Adobe Cloud-Dienst namens Adobe PhoneGap Build. Wenn Sie Ihren Computer verwenden möchten, müssen Sie das SDK für jede Plattform installieren, für die Sie ein Targeting durchführen möchten. Das PhoneGap-CLI hat einen Befehl zum Erstellen der App (bauen), um es zu testen (Installieren) und beide Aufgaben auszuführen (Lauf). Nehmen wir an, Sie wollen bauen und testen Audero Feed Reader Auf Android müssen Sie den folgenden Befehl eingeben:
Phonegap laufen Android
Wenn Sie ein Android-Gerät angeschlossen und ordnungsgemäß mit dem Computer konfiguriert haben, wird die Anwendung standardmäßig auf dem Gerät ausgeführt. Andernfalls läuft es auf dem SDK-Emulator.
Wenn Sie Adobe PhoneGap Build zum Generieren der installierbaren Dateien verwenden möchten, können Sie auch die CLI verwenden, indem Sie einfach die fernbedienung Befehl wie unten gezeigt:
Remote-Build für Android
Denken Sie daran, dass die Remote-Build-Umgebung keinen Emulator hat Installieren und Lauf Befehle erzeugen einfach einen QR-Code im PhoneGap Build Schnittstelle. Um den Dienst nutzen zu können, benötigen Sie ein Adobe-Konto. Das bedeutet das (leider) Sie kann nicht Verwenden Sie die GitHub-Anmeldeinformationen.
Fazit
Wie Sie in dieser Serie bereits gesehen haben, kann die Erstellung eines Feed-Readers dank Frameworks wie jQuery Mobile und Cordova und einigen APIs wie der Google Feed-API sehr einfach sein. Ich hoffe, dass Ihnen dieses Tutorial gefallen hat. Wenn Sie das Projekt weiter verbessern möchten, sollten Sie einige Funktionen hinzufügen, die Sie vermisst haben, und ich es auf Ihren eigenen mobilen Geräten verwenden.
Share
Accentsconagua
