Hoewel niet speciaal gemaakt om samen te werken, zijn jQuery Mobile en Cordova (ook bekend als PhoneGap) een zeer krachtig duo om hybride, mobiele apps te maken. In deze serie leert u hoe u een feedlezer kunt ontwikkelen met behulp van webtechnologieën en deze twee frameworks. In de loop van deze serie raakt u ook vertrouwd met de Cordova Connection en Storage Core Plugins en de Google Feed API.

---

Toepassingsoverzicht

De app die we in deze zelfstudie bouwen, genaamd 'Audero Feed Reader', is erg klein en gemakkelijk te begrijpen. Het is een standaard Feedlezer die u helpt om al het nieuws en de artikelen waar u om geeft op één plek te bewaren. Uiteindelijk heeft Google Google Reader afgesloten, dus we moeten het vervangen, is het niet??

Op het startscherm van de app plaatsen we twee knoppen om de twee belangrijkste functies te markeren: een nieuwe feedknop toevoegen en een lijst met opgeslagen feeds. De lay-out van het startscherm wordt getoond met de volgende screenshot:

Om het project zo eenvoudig mogelijk te houden, bewaren we alleen de naam van de feed en de bijbehorende URL. Dus zodra de gebruiker op de knop "Feed toevoegen" klikt, wordt er een formulier weergegeven met slechts twee invoervakken, zoals weergegeven in de onderstaande afbeelding:

Nu de gebruiker in staat is om zoveel feeds op te slaan als gewenst, is het tijd om hem de lijst met feeds die zijn opgeslagen te laten zien. Om de gebruiker te helpen bij het gemakkelijk vinden van een feed, is de lijst alfabetisch gerangschikt op naam en heeft deze ook een zoekvak, voor het geval de feeds te talrijk zijn. U kunt een voorbeeld van de beschreven pagina bekijken met de onderstaande schermafbeelding:

Nadat de gebruiker een feed heeft gekozen, haalt de app de URL op en worden de beschikbare vermeldingen weergegeven. Om de verschillende typen feeds gemakkelijk te ontleden (Atom, RSS of Media RSS), maken we gebruik van de Google Feed API en specifiek de Google Feed JSON-interface. Deze laatste parseert de gevraagde URL voor ons en retourneert een uniform en eenvoudig te analyseren JSON-object. We zullen meer over deze API ontdekken in het volgende deel van deze serie. Standaard om te besparen op bandbreedte, Audero Feed Reader vereist slechts 10 ingangen. Om de gebruiker toe te staan ​​meer gegevens op te halen, voegen we een knop 'Meer weergeven' toe. Uiteraard worden de gegevens alleen daadwerkelijk opgehaald als de opgegeven feed meer dan 10 vermeldingen bevat. Mobiletuts + biedt bijvoorbeeld slechts 10 items, dus als de gebruiker op de knop 'Meer weergeven' klikt, wordt het bericht 'Geen items meer om te laden' gevraagd.

Om ruimte te besparen, zijn de items georganiseerd met een accordeon en is standaard alleen de titel zichtbaar. De gebruiker kan desgewenst meer details bekijken. De app toont ook de samenvatting van het item, de auteur en een knop met de tekst "Ga naar het artikel" om het volledige artikel op de betreffende website te lezen. Let op: om de bruikbaarheid te verbeteren, zullen we ook de titel opnieuw laten zien, maar deze keer kan erop geklikt worden om toegang te krijgen tot het volledige artikel.

Het uiteindelijke uiterlijk en gevoel van deze pagina wordt hieronder weergegeven:

---

Projectcomponenten

Op dit punt weten we het wat te doen, dus het is tijd om te zien hoe we zullen het doen. De technologieën die betrokken zijn bij de ontwikkeling van Audero Feed Reader zijn:

• HTML 5: Om de pagina's te maken en op te maken.
• CSS 3: De pagina's stylen. Houd er rekening mee dat we geen aangepaste CSS-stylesheet hebben en dat we alleen die gebruiken die door jQuery Mobile is verstrekt en vereist.
• JavaScript: Dit is de taal die we zullen gebruiken om de logica van de toepassing te programmeren. Het is de enige taal die wordt ondersteund door PhoneGap.
• jQuery: jQuery wordt gebruikt om elementen te selecteren, eventhandlers toe te voegen en AJAX-aanvragen uit te voeren. Het is ook een afhankelijkheid van jQuery Mobile.
• jQuery Mobile: Dit is ons keuzekader om de gebruikersinterface van onze pagina's te maken. Hiermee kunnen we eenvoudig een website voor mobiele apparaten optimaliseren en snel mobiele interfaces maken. Op het moment van schrijven is de meest recente beschikbare en gebruikte versie 1.3.1.
• PhoneGap: Wraps al onze bestanden zodat we ze kunnen compileren alsof we een native app aan het bouwen waren. Bovendien biedt PhoneGap een aantal interessante en nuttige API's om te communiceren met de hardware van het apparaat, zoals opslag en verbinding. De gebruikte versie is 3.0, een recente en belangrijke verbetering ten opzichte van 2.x.

Naast het bovenstaande gebruiken we ook deze specifieke Cordova Core-plug-ins:

• InAppBrowser: Dit is een webbrowser die tijdens het bellen in de app wordt weergegeven window.open. Sinds versie 2.3.0 zijn twee belangrijke methoden toegevoegd: executeScript () en insertCSS (). Met de eerste kunt u JavaScript-code injecteren, terwijl de tweede CSS-code toevoegt aan de InAppBrowser venster. We zullen deze methoden niet gebruiken in onze app, maar ik wilde ze vermelden. Ga voor meer informatie naar het officiële document van InAppBrowser.
• Opslag-plugin: Biedt toegang tot de opslagopties van het apparaat. Merk op dat, zoals de documentatie beweert, sommige apparaten al een implementatie van deze specificaties bieden, in welk geval de ingebouwde ondersteuning van toepassing is. De implementatie van Cordova biedt compatibele ondersteuning voor gebruikers die dat niet doen. Lees voor meer informatie het document Local Storage.
• Meldingsplugin: Hiermee kunt u visuele, hoorbare en voelbare apparaatmeldingen maken. Van de verschillende beschikbare methoden gebruiken we gewoon alert () om enkele berichten aan de gebruiker te tonen. Deze plug-in wordt bijvoorbeeld gebruikt als een gebruiker een feed toevoegt of verwijdert. Raadpleeg de kennisgevingsdocumenten voor meer informatie.
• Verbindings plugin: Het is gemaakt van slechts één eigenschap die informatie geeft over de verbindingsstatus van het apparaat (bijvoorbeeld WI-FI, 3G, geen, etc.). Houd er rekening mee dat sinds versie 2.3.0 u toegang moet hebben tot de Verbinding object met behulp van de nieuwe navigator.connection eigendom. Deze eigenschap komt overeen met de W3C-specificatie, in plaats van de vorige navigator.network.connection eigendom. Meer hierover hier.

Als je eerdere versies van PhoneGap hebt gebruikt, zul je herkennen dat deze plug-ins niets anders zijn dan wat je vroeger als API's kende. De naamswijziging is te wijten aan de nieuwe PhoneGap-architectuur. Maak je echter geen zorgen, behalve de naam is bijna alles hetzelfde. Als u meer wilt weten over de nieuwste en beste verbeteringen met 3.0, kunt u het inleidende artikel en de handleiding Aan de slag lezen.

---

1. Installeer PhoneGap

Vanaf versie 3.0.0 heeft het ontwikkelteam een ​​nieuwe procedure geïntroduceerd om PhoneGap te installeren waarvoor Node.js en npm nodig zijn. Bovendien zijn er op dit moment geen eenvoudige downloadlinks als terugval. Daarom gaat de rest van de tutorial ervan uit dat beide softwarepakketten zijn geïnstalleerd en werken. Eenmaal gedaan, is de eerste stap het typen van de volgende opdracht om PhoneGap te installeren:

npm install -g phonegap

Als je Linux gebruikt, denk eraan om vooraf te gaan sudo naar de vorige regel.

---

2. Initialiseer het project

Voordat u de projectmap maakt, is het vermeldenswaard dat het ontwikkelteam ook een opdrachtregel heeft geïntroduceerd in deze nieuwe versie om ontwikkelaars te helpen bij het uitvoeren van veelvoorkomende taken, zoals het bouwen en uitvoeren van de app of het installeren van plug-ins. Met de CLI kunt u ook een project initialiseren. Hiermee wordt niet alleen een map gemaakt met de PhoneGap-bibliotheek erin, maar wordt ook het skelet van een toepassing gegenereerd. Om het project te initialiseren, typt u eenvoudig de volgende opdracht:

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

Het eerste argument geeft de naam aan van de map die moet worden gemaakt. De andere twee argumenten zijn optioneel en geven respectievelijk de ID en de naam van de app op. Zodra u de bovenstaande opdracht uitvoert, ziet u de volgende structuur in de hoofdmap van het project:

• .cordova: Wordt gebruikt voor achtergrondcompatibiliteit met Cordova-tooling.
• samenvoegingen: In deze map kunt u elke platformspecifieke aanpassing toevoegen zodat u de bronbestanden niet telkens wanneer u met een project werkt, hoeft aan te passen.
• platforms: De plaats waar de gecompileerde installatieprogramma's worden geplaatst, voor het geval u het project lokaal compileert.
• plugins: De map waarin u de plug-ins van uw project vindt.
• www: De map met de bronbestanden en de configuratie van de applicatie. Het bevat de map "css", "js" en "img" waar u de respectieve bestanden kunt plaatsen. Bovendien heeft het ook een "res" -map waarin u pictogrammen en splashscreens plaatst.

---

3. Installeer PhoneGap-plug-ins

Zoals we in de inleiding hebben gezien, zullen we in ons project profiteren van enkele van de PhoneGap-kernplug-ins. Om ze te installeren, moet je de CLI gebruiken door de onderstaande opdracht te typen:

 phonegap lokale plug-in toevoegen PLUGIN_REPOSITORY_URL

In bovenstaande, PLUGIN_REPOSITORY_URL is de URL van de repository van de plug-in die u wilt gebruiken. Omdat ons project zowel de kern-plug-ins Notification als de verbinding gebruikt, moet u de volgende opdracht typen:

 phonegap lokale 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

Zoals de meest opmerkzame persoon wellicht opmerkte, heb ik de opslag-plug-in niet toegevoegd. De reden is dat vanaf versie 3.0, toegang is ingebouwd in Cordova.

---

4. Voeg PhoneGap Frameworks toe

Nu we PhoneGap en de bijbehorende plug-ins hebben, moeten we de andere twee bibliotheken toevoegen die nodig zijn: jQuery (ik gebruik versie 2.0.3) en jQuery Mobile (versie 1.3.1).

Voordat we verder gaan, is het belangrijk om te begrijpen waarom ik de 2.x tak van jQuery heb gekozen. jQuery heeft momenteel twee hoofdfilialen in ontwikkeling: 1.x en 2.x. De versie die u moet gebruiken, is afhankelijk van waar u het framework gebruikt en welke browsers u wilt ondersteunen. Hoewel jQuery 1.x alle versies van Google Chrome, Firefox, Safari, Opera en Internet Explorer ondersteunt vanaf versie 6, heeft de 2.x-versie de ondersteuning voor Internet Explorer 6, 7 en 8 laten vallen in ruil voor een kleiner formaat en betere prestaties. Omdat we een mobiele applicatie ontwikkelen met Cordova, hoeven we ons geen zorgen te maken over Internet Explorer 6-8. In feite zijn de Microsoft-besturingssystemen die door Cordova worden ondersteund Windows Phone 7 en Windows Phone 8 die respectievelijk op Internet Explorer 9 en 10 worden uitgevoerd. Daarom kunnen we veilig jQuery 2.x gebruiken!

Met de bovenstaande plaats voor begrip kunnen we doorgaan met onze basisstappen om in te stellen Audero Feed Reader. Zodra u de bibliotheken hebt gedownload, verplaatst u het jQuery-bestand en het JavaScript-bestand (verkleinde versie) van jQuery Mobile binnen de "Js" map. Vervolgens moeten we de stylesheet van jQuery Mobile (jquery.mobile-1.3.1.min.css) binnen in de "Css" map. Ten slotte plaatsen we de jQuery Mobile-gebundelde afbeeldingen in de "Img" map. Omdat we de native structuur van jQuery Mobile enigszins hebben gewijzigd, moeten we de paden aanpassen die verwijzen naar de afbeeldingen in het CSS-bestand. We moeten specifiek het gedeelte "images /" vervangen door deze tekenreeks "... / img /". Houd er rekening mee dat de reeks 5 keer moet worden vervangen.

---

5. Maak een projectbestandstructuur

Nu we het projectraamwerk hebben, moeten we de map "www" maken, de HTML-bestanden die nodig zijn, het pictogram van de standaardtoepassing instellen, het configuratiebestand van Adobe PhoneGap build aanpassen en het standaardscherm voor het maken van wijzigingen wijzigen. Dat is veel, dus laten we doorgaan!

In de loop van deze serie zullen we de volgende bestanden maken:

• index.html: Het beginpunt van de applicatie, waar we de links naar de gebruikte bibliotheken plaatsen.
• add-feed.html: Dit is de pagina met het formulier dat wordt gebruikt om een ​​nieuwe feed op te slaan.
• list-feeds.html: Toont de lijst met opgeslagen feeds.
• Show-feed.html: Dit toont de vermeldingen van de gegeven feed. Daarnaast heeft het een navigatiebalk met een knop om de feed te verwijderen en een andere om meer items uit de feed op te halen.
• aurelio.html: De aftitelingpagina met informatie over de auteur.
• feed.js: Dit bestand bevat een klasse, genaamd Voeden, gebruikt om opgeslagen feeds te maken, verwijderen en op te halen. Het is gebaseerd op de Cordova Storage-plugin.
• application.js: Dit bestand bevat een andere klasse, genaamd Toepassing, met de methoden om de pagina's van de toepassing te initialiseren en handlers toe te voegen aan de elementen van sommige pagina's (bijvoorbeeld de eerder genoemde knoppen op de navigatiebalk).
• config.xml: Dit XML-bestand bevat de metagegevens van ons project en slaat instellingen op, zoals de naam en beschrijving van de app.

---

6. Maak de startpagina

Zoals uitgelegd in de vorige sectie, omdat jQuery Mobile pagina's laadt met Ajax, moeten we de CSS- en JavaScript-bestanden laden bij het beginpunt van onze applicatie, dat wil zeggen index.html het dossier. Deze pagina toont de titel en de beschrijving van de applicatie en heeft alle knoppen voor toegang tot de rest van de app.

De volledige bron van de startpagina wordt hieronder weergegeven:

                
 
 
Audero Feed Reader
  
 
 Audero Feed Reader is een zeer eenvoudige feed-aggregator om op één plaats al het nieuws en de artikelen te bewaren waar u om geeft. 
 Feed feed toevoegen 
  
  

Zoals je kunt lezen in de bovenstaande code, zijn de knoppen in de en de