PhoneGap: Erstelle einen Feed Reader - Projektstruktur

Obwohl sie nicht entwickelt wurden um zusammenzuarbeiten, sind jQuery Mobile und Cordova (auch bekannt als PhoneGap) ein mächtiges Duo, wenn es darum geht hybride mobile Apps zu erstellen. Hier lernt ihr wie ihr einen Feed Reader entwickelt mit diesen Technologien (Webtechnologien). Außerdem schauen wir uns die Cordova Connection, die Storage Core Plugins und die Google Feed API an.

App Übersicht

Die App die wir in diesem Tutorial entwickeln ("Audero Feed Reader") ist sehr klein und einfach zu verstehen. Es ist ein einfacher Feed reader mit dessen Hilfe wir alle unsere Nachrichten und Artikel, die uns interessieren, an einem Ort sammlen. Google seinen Google Reader aufgegeben, also ist es unsere Pflicht etwas ähnliches zu erstellen, nicht wahr?

Auf dem Startbildschirm der app legen wir zwei Knöpfe um die beiden wichtigsten Merkmale hervorzuheben: ein hinzufügen einen neuen feed Button und eine Liste der gespeicherten Feeds. Das Layout der Startseite wird mit dem folgenden Screenshot gezeigt:

Um das Projekt so einfach wie möglich zu halten, werden wir nur den Namen des Futters und die URL speichern. Also, sobald der Benutzer die Schaltfläche "Feed hinzufügen" klickt, wird ein Formular mit zwei Eingabefeldern angezeigt wie das Bild unten zeigt:

Nun, da der Benutzer in der Lage, beliebig viele Feeds wollte zu speichern ist, ist es Zeit, die ihm erlauben, die Liste der diese Feeds gespeichert. Zusätzlich zur Unterstützung des Benutzers leicht ein Futter zu finden, die Liste ist alphabetisch nach Namen geordnet und es hat auch ein Suchfeld für den Fall, dass die Feeds zu zahlreich sind. Sie können ein Beispiel für die beschriebene Seite Blick auf den Screenshot unten sehen:

Sobald der Benutzer einen Feed auswählt, wird die app holt die URL und zeigt die Einträge zur Verfügung. Um die verschiedenen Arten von RSS-Feeds (Atom, RSS oder Media RSS) leicht zu analysieren, werden wir die Google Feed API und speziell die Google Feed JSON-Schnittstelle nutzen. Letzteres wird die angeforderte URL für uns analysieren und eine einheitliche und einfache Parse JSON-Objekt zurückgeben. Wir erfahren mehr über diese API im nächsten Teil dieser Serie. Standardmäßig um Bandbreite zu sparen benötigen Audero Feed-Reader nur 10 Einträge. Damit um der Nutzer mehr Daten abrufen zu können, fügen wir einen "Mehr anzeigen"-Button. Natürlich werden die Daten tatsächlich abgerufen werden, nur wenn das bereitgestellte Futter mehr als 10 Einträge macht. Zum Beispiel bietet Mobiletuts + nur 10 Einträge, also klickt der Benutzer der Schaltfläche "Mehr anzeigen", die Nachricht "Keine weiteren Einträge zum Laden" aufgefordert werden.

Um Platz zu sparen, werden die Einträge mit einem Akkordeon organisiert, und nur der Titel ist standardmäßig sichtbar. Jedoch kann der Anwender mehr Details zu sehen, wenn nötig. Die app zeigt auch den Eintrag Zusammenfassung, Autor und eine Schaltfläche "lesen"Gehen, der Artikel"um den vollständigen Artikel auf der relativen Website zu lesen. Beachten Sie, dass um die Benutzerfreundlichkeit zu erhöhen, wir auch wieder den Titel zeigen, aber diesmal es angeklickt werden, kann um den vollständigen Artikel zugreifen.

Das endgültige Erscheinungsbild dieser Seite ist unten dargestellt:

Project-Komponenten

Zu diesem Zeitpunkt wissen wir was zu tun ist, so es Zeit ist zu sehen, wie wir es tun. Die Technologien beteiligt am Aufbau der Audero Feed-Reader sind:

• HTML 5: Erstellen und Markup der Seiten.
• CSS 3: Um die Seiten zu stylen. Beachten Sie, dass wir keine benutzerdefinierte CSS-Stylesheet und wir verwenden nur eine zur Verfügung gestellt und von jQuery Mobile.
• JavaScript: Dies ist die Sprache, die wir verwenden werden, um die Logik der Anwendung zu programmieren. Es ist die einzige Sprache, die von PhoneGap unterstützt.
• jQuery: jQuery wird verwendet, um Elemente auswählen, fügen Ereignishandler und AJAX Anfragen ausführen. Es ist auch eine Abhängigkeit von jQuery Mobile.
• jQuery Mobile: Dies ist unser Framework der Wahl, um die Benutzeroberfläche unserer Seiten zu erstellen. Es lässt sich leicht eine Website für mobile Geräte zu optimieren und schnell erstellen mobile Schnittstellen. Zum Zeitpunkt des Schreibens ist die aktuellste Version zur Verfügung und wird 1.3.1.
• PhoneGap: Wickelt alle unsere Dateien, so dass wir sie zusammenstellen können, als wenn wir eine native app Bauten. Morever, PhoneGap bietet einige interessante und nützliche APIs mit der Gerätehardware wie Lagerung und Verbindung zu kommunizieren. Die verwendete Version ist 3.0, eine aktuelle und bedeutende Verbesserung gegenüber 2.x.

Darüber hinaus verwenden wir auch diese spezifischen Cordova-Core-Plugins:

• InAppBrowser: Dies ist ein Web-Browser, der in der app bei window.open Aufruf angezeigt. Seit der Version 2.3.0, zwei wichtige Methoden hinzugekommen: executeScript() und insertCSS(). Ersteres ermöglicht es Ihnen, JavaScript-Code zu injizieren, während der zweite CSS-Code in das InAppBrowser Fenster fügt. Wir werden nicht verwenden Sie diese Methoden in unserer app, aber ich wollte zu nennen. Um mehr zu erfahren, besuchen Sie die offizielle InAppBrowser-Doc.
• Lagerung-Plugin: ermöglicht den Zugriff auf das Gerät Storage-Optionen. Beachten Sie, dass, wie die Dokumentation behauptet, einige Geräte bereits eine Umsetzung dieser Vorgaben in dem Fall die integrierte Unterstützung gilt. Cordova Implementierung bietet kompatible Unterstützung für diejenigen, die nicht. Um mehr zu erfahren, werfen Sie einen Blick auf den lokalen Speicher-Doc.
• Benachrichtigung-Plugin: ermöglicht das Erstellen visueller, akustischer und taktiler Gerät Benachrichtigungen. Mehrere Methoden zur Verfügung verwenden wir nur alert(), um einige Nachrichten an dem Benutzer zu zeigen. Dieses Plugin wird z. B. verwendet werden, wenn ein Benutzer erfolgreich fügt hinzu oder einen Feed löscht. Weitere Informationen finden Sie in der Benachrichtigung-Docs.
• Verbindung-Plugin: Es erfolgt nur eine Eigenschaft, die Auskunft über den Status des Geräts Verbindung gibt (z. B. WI-FI, 3G, keine, etc..). Bitte beachten Sie, dass seit der Version 2.3.0, Sie das Connection-Objekt mithilfe der neuen navigator.connection-Eigenschaft zugreifen sollte. Diese Eigenschaft entspricht die W3C-Spezifikation, anstelle der früheren navigator.network.connection-Eigenschaft. Mehr dazu finden Sie hier.

Wenn Sie frühere Versionen von PhoneGap verwendet, werden Sie erkennen, dass diese Plugins nichts sind, aber was Sie wissen, wie APIs verwendet. Die Namensänderung ist aufgrund der neuen PhoneGap-Architektur. Aber keine Sorge, neben dem Namen, fast alles ist das gleiche. Wenn Sie über die neuesten und besten Verbesserungen mit 3.0 erfahren möchten, können Sie den einleitenden Artikel und Getting Started Guide lesen.

1. installieren Sie PhoneGap

Ab der Version 3.0.0, führte das Entwicklungs-Team ein neues Verfahren um PhoneGap zu installieren, die Node.js und Npm erfordert. Darüber hinaus sind keine einfachen Download-Links als Fallback im Moment zur Verfügung gestellt. Daher übernimmt der Rest des Tutorials haben Sie sowohl dieser Software-Pakete installiert und arbeiten. Ist das erledigt, ist der erste Schritt, geben Sie den folgenden Befehl, PhoneGap zu installieren:

NPM Install -g phonegap

Wenn Sie Linux verwenden, denken Sie daran, der vorherigen Zeile Sudo voranstellen.

(2) das Projekt initialisieren

Bevor Sie den Projektordner erstellen, ist es erwähnenswert, dass das Entwicklungsteam auch eine Befehlszeile in dieser neuen Version, Entwickler bei der Durchführung gemeinsamer Aufgaben wie das Erstellen und Ausführen der app oder installieren von Plugins unterstützen eingeführt. Die CLI können Sie ein Projekt zu initialisieren. Nicht nur wird erstellen Sie einen Ordner mit der PhoneGap-Bibliothek im Inneren, sondern es wird auch eine Anwendung Skelett generieren. 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 Verzeichnisses zu erstellen. Die anderen beiden Argumente sind optional, und geben Sie die ID und den Namen der app, beziehungsweise. Sobald Sie den obigen Befehl ausführen, sehen Sie die folgende Struktur im Stammordner des Projekts:

• .Cordova: Für Hintergrund-Kompatibilität mit Cordova Werkzeuge verwendet.
• verschmilzt: In diesem Ordner können Sie Plattform-spezifischen Anpassungen hinzufügen, damit Sie nicht um die Quelldateien zu ändern, jedes Mal, wenn Sie mit einem Projekt arbeiten.
• Plattformen: der Ort, wo die kompilierten Installateure platziert werden, für den Fall, dass Sie das Projekt lokal kompiliert werden.
• Plugins: der Ordner, wo Sie die Plugins für Ihr Projekt finden.
• Www: den Ordner mit den Quelldateien und die Konfiguration der Anwendung. Es enthält die "Css", "Js" und "Img" Ordner, wo Sie die jeweiligen Dateien ablegen können. Darüber hinaus hat es auch einen "Res"-Ordner Sie Symbole und Splashscreens platzieren.

(3) PhoneGap Plugins installieren

Wie wir in der Einleitung gesehen habe, werde unser Projekt wir einige der PhoneGap-Core-Plugins nutzen. Um sie zu installieren, musst du die CLI tippen folgenden Befehl verwenden:

phonegap local plugin add PLUGIN_REPOSITORY_URL

In den oben genannten PLUGIN_REPOSITORY_URL ist die Repository-URL des Plugins, die Sie verwenden möchten. Da unser Projekt die Benachrichtigung und die Verbindung-Core-Plugins verwenden, haben 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 die meisten aufmerksamen von euch bemerkt haben könnte, habe nicht ich das Storage-Plugin hinzufügen. Der Grund ist, dass ab Version 3.0, Zugang, die es in Cordova eingebaut ist.

4. Fügen Sie PhoneGap-Frameworks

Nun, da wir PhoneGap und seine Plugins im Ort haben, müssen wir die anderen beiden Bibliotheken benötigt hinzufügen: (Ich verwende Version 2.0.3) jQuery und jQuery Mobile (Version 1.3.1).

Bevor wir fortfahren, ist es wichtig zu verstehen, warum ich entschied mich für die 2.x-Niederlassung von jQuery. jQuery hat zwei Hauptzweige derzeit in Entwicklung: 1.x und 2.x. Die Version Sie verwenden sollten, hängt wirklich davon ab, wo Sie den Rahmen und was verwenden Browser, die Sie unterstützen möchten. Während jQuery 1.x unterstützt alle Versionen von Google Chrome, Firefox, Safari, Opera und Internet Explorer ab Version 6, die 2.x-Version ließ die Unterstützung für InternetExplorer 6, 7 und 8 im Austausch für eine kleinere Größe und bessere Leistung. Da wir eine mobile Anwendung mit Cordova entwickeln, müssen wir nicht über Internet Explorer 6-8 sorgen. In der Tat sind von Cordova unterstützten Microsoft-Betriebssysteme Windows Phone 7 und Windows Phone 8, die jeweils auf Internet Explorer 9 und 10 ausgeführt. Wir können daher sicher jQuery 2.x!

Mit dem obigen Verständnis können wir mit unserer grundlegenden Schritte zum Einrichten der Audero Feed-Reader weiter. Downloaden Sie die Bibliotheken, bewegen Sie sich die jQuery-Datei und die JavaScript-Datei (minimierte Version) von jQuery Mobile innerhalb des Ordners "Js". Dann müssen wir das Stylesheet von jQuery Mobile (jquery.mobile-1.3.1.min.css) innerhalb des Ordners "Css". Zu guter Letzt legen wir die jQuery Mobile Bilder in den Ordner "Img" gebündelt. Da wir die native Struktur von jQuery Mobile etwas geändert haben, müssen wir die Pfade auf die Bilder in der CSS-Datei anpassen. Wir müssen insbesondere ersetzen die "Bilder /"Teil mit dieser Zeichenfolge"... /IMG/ ". Denken Sie daran, dass die Zeichenfolge 5 Mal ersetzt werden sollte.

5. erstellen Sie Projekt-Datei-Struktur

Nun, da wir den Projektrahmen eingerichtet haben, müssen wir erstellen Sie den Ordner "Www", die HTML-Dateien erforderlich, die Standardanwendung Symbol, zwicken Adobe PhoneGap Build-Konfiguration-Datei, und ändern Sie die Standard-Splash-Screen. Das ist eine Menge, also lasst uns in Bewegung bleiben!

Im Laufe dieser Serie erstellen wir die folgenden Dateien:

• Index.HTML: Der Einstiegspunkt der Anwendung, wo wir Links auf die verwendeten Bibliotheken gestellt werde.
• Hinzufügen-Feed.html: Dies ist die Seite mit dem Formular verwendet, um einen neuen Feed speichern.
• Liste-Feeds.html: Dies zeigt die Liste der gespeicherten Feeds.
• zeigen-Feed.html: Dies zeigt die Einträge des jeweiligen Feeds. Darüber hinaus hat es eine Navigationsleiste, die eine Schaltfläche, um das Futter, und eine andere zum Abrufen von weitere Einträge aus dem Futter zu löschen hat.
• Aurelio.HTML: Der Credits-Seite mit Informationen über den Autor.
• Feed.JS: Diese Datei enthält eine Klasse namens Feed, erstellen, löschen und Abrufen von gespeicherten Feeds verwendet. Es basiert auf dem Cordova Storage Plugin.
• Application.JS: Diese Datei enthält eine andere Klasse, genannt Anwendung, mit der Methoden zum Initialisieren der Anwendungsseiten und anfügen Handler für einige Seitenelemente (z. B. die Schaltflächen der Navigationsleiste zuvor zitiert).
• config.XML: Diese XML-Datei enthält die Metadaten von unserem Projekt und speichert Einstellungen wie den app-Namen und die Beschreibung.

(6) die Homepage erstellen

Wie im vorherigen Abschnitt erläutert da jQuery Mobile Seiten mit Ajax geladen, müssen wir laden der CSS und JavaScript-Dateien auf den Einstiegspunkt unserer Anwendung, die die Datei index.html ist. Diese Seite zeigt den Titel und die Beschreibung der Anwendung und hat die Tasten für den Zugriff auf den Rest der app.

Der vollständige Quellcode der Startseite ist unten dargestellt:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Audero Feed Reader</title>
      <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"/>
      <script src="js/jquery-2.0.3.min.js"></script>
      <script src="js/jquery.mobile-1.3.1.min.js"></script>
      <script src="cordova.js"></script>
      <script src="js/feed.js"></script>
      <script src="js/application.js"></script>
      <script>
         $(document)
                 .on('pagebeforecreate', Application.updateIcons)
                 .one('deviceready', Application.initApplication);
      </script>
   </head>
   <body>
      <div data-role="page">
         <header data-role="header" data-back-btn="true">
            <h1>Audero Feed Reader</h1>
         </header>
         <div data-role="content">
            <p>
               Audero Feed Reader is a very basic feed aggregator to keep in one place all the news and the articles
               you care about.
            </p>
            <a href="add-feed.html" data-role="button">Add Feed</a>
            <a href="list-feeds.html" data-role="button">List Feed</a>
         </div>
         <footer data-role="footer" data-position="fixed">
            <h2>Created by Aurelio De Rosa</h2>
            <a href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
         </footer>
      </div>
   </body>
</html>

Wie Sie aus dem obigen Code, die Schaltflächen in Lesen der <header>und die <footer>verwenden Sie das Attribut Daten-Iconpos = "Notext".</footer> </header> Diese Einstellung ermöglicht es Ihnen, den Linktext zu verstecken und ist sehr nützlich für kleine Bildschirme platzsparend. Wie ich in einem späteren Teil dieser Reihe erläutern werde, werde wir zielen auf diese Schaltflächen, um eine stärker auf Schnittstelle für die Anwendung zu erstellen.

7. erstellen Sie die Feed-Seite hinzufügen

Diese Seite, mit dem Namen hinzufügen-feed.html, enthält lediglich das Formular, um einen neuen Feed hinzuzufügen. Es muss nicht etwas Besonderes, so können wir die Diskussion über diese Datei zu überspringen und nur seine Quelle zeigen:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Add Feed</title>
   </head>
   <body>
      <div id="add-feed-page" data-role="page" data-title="Add Feed">
         <header data-role="header">
            <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
            <h1>Add Feed</h1>
         </header>
         <div data-role="content">
            <p>
               Use this form to add a new feed Feed. It's easy as writing a name, the URL and then click "Add Feed".
            </p>
            <form id="add-feed-form" name="add-feed-form" action="add-feed.html">
               <div data-role="fieldcontain">
                  <label for="feed-name">Feed Name:</label>
                  <input type="text" id="feed-name" name="feed-name" required="required"/>
               </div>
               <div data-role="fieldcontain">
                  <label for="feed-url">Feed URL:</label>
                  <input type="url" id="feed-url" name="feed-url" required="required"/>
               </div>
               <input type="submit" value="Add Feed" />
            </form>
         </div>
      </div>
   </body>
</html>

8. die Feed-Liste-Seite erstellen

Diese Seite ist Liste-feeds.html benannt und ist sehr klein, wie die anderen. In der Datei setzen wir eine ungeordnete Liste mit den üblichen <ul>Element und verbessern Sie es unter Verwendung von jQuery Mobile Data-Rolle festlegen "Listview" Attribut =.</ul> Darüber hinaus fügen wir ein weiteres Attribut, Daten-Filter = "true", um eine Suchleiste für unsere Liste hinzuzufügen. Wie Sie, im Inneren sehen können der <header>, ich habe eine Taste, um zur Startseite zurückzukehren.</header> Bist du ein Android-Nutzer, könnten Sie finden dies nutzlos, aber denken Sie daran, dass nicht alle Geräte eine Hardwaretaste haben zurückgehen. Daher ist es unbedingt erforderlich, eine Software einer in Ihren Anwendungen zu erstellen!

Der Code für diese Seite ist unten aufgeführt:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>List Feeds</title>
   </head>
   <body>
      <div id="list-feeds-page" data-role="page" data-title="List Feeds">
         <header data-role="header">
            <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
            <h1>List Feeds</h1>
         </header>
         <div data-role="content">
            <ul id="feeds-list" data-role="listview" data-filter="true">
            </ul>
         </div>
      </div>
   </body>
</html>

9. Legen Sie die Show-Feed-Seite

Dies ist die Seite verantwortlich für die Anzeige von feed-Einträge und Show-feed.html benannt ist. In ihm haben wir eine Liste, aber diesmal brauchen wir keine Suchleiste. Dieser Bildschirm hat jedoch im Gegensatz zu den vorherigen Bildschirmen eine Navigationsleiste mit den beiden Tasten oben beschrieben. Um eine Navigationsleiste in jQuery Mobile zu erstellen, musst du eine Div mit der Data-Rolle erstellen = "Navbar" Attribut, und legen Sie sie in eine ungeordnete Liste mit Ihren Schaltflächen.

Der vollständige Code dieser Seite ist unten dargestellt:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Show Feed</title>
   </head>
   <body>
      <div id="show-feed-page" data-role="page" data-title="Show Feed">
         <header data-role="header">
            <a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>
            <h1>Show Feed</h1>
            <div data-role="navbar" class="ui-body-b">
               <ul>
                  <li><a id="show-more-entries" href="#" data-icon="refresh" data-iconpos="left">Show more</a></li>
                  <li><a id="delete-feed" href="#" data-icon="delete" data-iconpos="left">Delete Feed</a></li>
               </ul>
            </div>
         </header>
         <div data-role="content">
            <div id="feed-entries" data-role="collapsible-set">
            </div>
         </div>
      </div>
   </body>
</html>

Wie Sie sehen können, aus der Betrachtung des Codes hat unserer Navigationsleiste auch eine Klasse angewendet. Es gehört zu den jQuery Mobile Stylesheet und es wird verwendet, um ein anderes Design anwenden, in diesem Fall eine blaue Farbe, um die Schaltflächen zu markieren.

10. die Credits-Seite erstellen

Die Seite aurelio.html muss nicht ist der am wenigsten wichtige der gesamten Anwendung und jede spannende Widget oder Element zu beschreiben. Die einzige bemerkenswerte Tatsache ist die Verwendung von das Attribut Target = "_blank" auf die Verbindungen angewendet. Dieses Attribut ist weit verbreitet unter den Web, aber diesmal, ich benutze es als Haken um einen Handler für alle externen Links befestigen. Erfahren Sie mehr über diese im dritten Teil der Tutorial-Serie.

Der Code des aurelio.html ist nachfolgend dargestellt:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Aurelio De Rosa</title>
   </head>
   <body>
      <div id="aurelio-page" data-role="page">
         <header data-role="header">
            <a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>
            <h1>Aurelio De Rosa</h1>
         </header>
         <div id="content" data-role="content">
            <div class="person">
               <article>
                  <img src="img/aurelio-de-rosa.png" alt="Photo of Aurelio De Rosa" />
                  <p>
                     I'm a web and app developer with more than 5 years' experience programming for the web using HTML5,
                     CSS3, JavaScript and PHP. I mainly use the LAMP stack and frameworks like jQuery, jQuery Mobile,
                     and Cordova (PhoneGap). My interests also include web security, web accessibility, SEO and WordPress.
                  </p>
                  <p>
                     Currently I'm self-employed working with the cited technologies and also a technical writer for
                     several networks where I write articles about the topics I usually work with and more.
                  </p>
               </article>
               <article>
                  <h2>Contacts</h2>
                  <ul data-role="listview" data-inset="true">
                     <li><a href="http://aurelio.audero.it" target="_blank">Website</a></li>
                     <li><a href="mailto:a.derosa@audero.it" target="_blank">Email</a></li>
                     <li><a href="https://twitter.com/AurelioDeRosa" target="_blank">Twitter</a></li>
                     <li><a href="http://it.linkedin.com/in/aurelioderosa/en" target="_blank">LinkedIn</a></li>
                     <li><a href="https://github.com/AurelioDeRosa" target="_blank">GitHub</a></li>
                  </ul>
               </article>
            </div>
         </div>
      </div>
   </body>
</html>

Schlussfolgerung

In diesem ersten Teil unserer Serie wir die Funktionen der feed-Reader-app und wie erstelle ich die Projektstruktur gesehen. Darüber hinaus haben wir die HTML-Dateien, die unsere app zu komponieren, werden entwickelt. Im zweiten Teil dieser Serie wir schreiben die Geschäftslogik der Audero Feed Reader und Google Feed API zu diskutieren. Schauen Sie bald, und danke fürs Lesen!