PhoneGap Bygg en flödesläsare - Projektstruktur

Även om det inte är specifikt skapat för att fungera tillsammans, är jQuery Mobile och Cordova (även känd som PhoneGap) en mycket kraftfull duo för att skapa hybrid-mobilappar. Denna serie kommer att lära dig hur man utvecklar en matläsare med hjälp av webbteknologi och dessa två ramverk. Under denna serie kommer du också att bli bekant med Cordova Connection och Storage Core Plugins och Google Feed API.

Applikationsöversikt

Appen vi bygger i den här handledningen, kallad "Audero Feed Reader", är mycket liten och lätt att förstå. Det är en grundläggande Feed Reader som hjälper dig att hålla alla nyheter och artiklar du bryr dig om på ett ställe. När allt kommer omkring stänger Google Google Reader, så vi måste ersätta det, inte vi?

På appens startsida sätter vi två knappar för att markera de två huvudfunktionerna: en lägg till en ny matningsknapp och en lista över sparade flöden. Layouten på startskärmen visas med följande skärmdump:

För att hålla projektet så enkelt som möjligt sparar vi bara namnet på flödet och dess webbadress. Så, när användaren klickar på knappen "Lägg till flöde", visar vi en blankett med bara två inmatningsrutor som visas på bilden nedan:

Nu när användaren kan spara så många flöden som önskat, är det dags att låta honom se listan över de sparade feedsna. För att hjälpa användaren att enkelt hitta ett flöde beställs listan alfabetiskt med namn och det har också en sökruta, om flödena är för många. Du kan se ett exempel på den beskrivna sidan på skärmbilden nedan:

När användaren väljer ett flöde hämtar appen webbadressen och visar tillgängliga uppgifter. För att enkelt analysera olika typer av flöden (Atom, RSS eller Media RSS) tar vi del av Google Feed API och specifikt Google Feed JSON-gränssnittet. Den senare kommer att analysera den begärda webbadressen för oss och returnera ett enhetligt och lätt att parse JSON-objekt. Vi kommer att upptäcka mer om detta API i nästa del av denna serie. Som standard sparar du bandbredd, Audero Feed Reader kommer bara kräva 10 poster. För att användaren ska kunna hämta mer data lägger vi till en "Visa mer" -knapp. Självklart kommer uppgifterna faktiskt att hämtas endast om det angivna flödet exponerar mer än 10 poster. Till exempel, Mobiletuts + ger endast 10 poster, så om användaren klickar på knappen "Visa mer" kommer meddelandet "Inga fler poster att ladda" att bli ombedd.

För att spara utrymme är posterna organiserade med ett dragspel och som standard är endast titeln synlig. Användaren kan dock se mer information om det behövs. Appen visar även postens sammanfattning, författaren och en knapp som läser "Gå till artikeln" för att läsa hela artikeln på den relativa webbplatsen. Observera att för att förbättra användbarheten visar vi också titeln igen, men den här gången kan den klickas för att komma åt hela artikeln.

Den sista utseendet på denna sida visas nedan:

Projektkomponenter

Vid denna tidpunkt vet vi Vad att göra, så det är dags att se på vilket sätt vi gör det. Den teknik som är inblandad i utvecklingen av Audero Feed Reader är:

HTML 5: Att skapa och markera sidorna.
CSS 3: Att ställa in sidorna. Observera att vi inte kommer att ha ett anpassat CSS-stilark och vi använder endast den som tillhandahålls och krävs av jQuery Mobile.
JavaScript: Detta är språket vi ska använda för att programmera programmets logik. Det är det enda språket som stöds av PhoneGap.
jQuery: jQuery kommer att användas för att välja element, bifoga händelsehanterare och köra AJAX-förfrågningar. Det är också ett beroende av jQuery Mobile.
jQuery Mobile: Det här är vårt val av ramverk för att skapa användargränssnittet på våra sidor. Det gör att vi enkelt kan optimera en webbplats för mobila enheter och snabbt skapa mobila gränssnitt. Vid skrivningstillfället är den senaste versionen tillgänglig och använd 1.3.1.
PhoneGap: Wraps alla våra filer så vi kan sammanställa dem som om vi byggde en inbyggd app. MoreGear erbjuder PhoneGap några intressanta och användbara API för att kommunicera med enhetens hårdvara, till exempel lagring och anslutning. Den version som används är 3,0, en ny och betydande förbättring över 2.x.

Utöver ovanstående använder vi även dessa specifika Cordova Core Plugins:

InAppBrowser: Detta är en webbläsare som visas i appen när du ringer window.open. Sedan version 2.3.0 har två viktiga metoder lagts till: executeScript () och insertCSS (). Den första låter dig injicera JavaScript-kod, medan den andra lägger till CSS-kod i InAppBrowser fönster. Vi använder inte dessa metoder i vår app men jag ville nämna dem. Om du vill lära dig mer besöker du officiellt InAppBrowser-dokumentet.
Lagringsplugin: Ger tillgång till enhetens lagringsalternativ. Observera att vissa enheter redan enligt dokumentationen hävdar att dessa specifikationer har implementerats, i vilket fall det inbyggda stödet gäller. Cordovas genomförande erbjuder kompatibelt stöd för dem som inte gör det. För att läsa mer, ta en titt på det lokala lagringsdokumentet.
Meddelande plugin: Gör det möjligt att skapa visuella, hörbara och taktila enheter. Av de många tillgängliga metoderna använder vi bara varna() för att visa några meddelanden till användaren. Till exempel kommer detta plugin att användas när en användare lägger till eller raderar ett flöde. Mer information finns i Notifieringsdokumenten.
Anslutningsplugin: Den är gjord av en enda egenskap som ger information om enhetens anslutningsstatus (t ex WI-FI, 3G, ingen, etc.). Observera att sedan version 2.3.0 ska du komma åt Förbindelse objekt med det nya navigator.connection fast egendom. Den här egenskapen matchar W3C-specifikationen, istället för föregående navigator.network.connection fast egendom. Mer om detta här.

Om du använde tidigare versioner av PhoneGap kommer du att känna igen att dessa plugins är ingenting annat än vad du brukade veta som API. Namnbytet beror på den nya PhoneGap-arkitekturen. Oroa dig inte, förutom namnet är nästan allt detsamma. Om du vill lära dig om alla de senaste och bästa förbättringarna med 3.0 kan du läsa inledande artikeln och Komma igång-guiden.

1. Installera PhoneGap

Från och med version 3.0.0 införde utvecklingslaget ett nytt förfarande för att installera PhoneGap som kräver Node.js och npm. Dessutom finns inga enkla nedladdningslänkar som en återgång för tillfället. Därför förutsätter resten av handledningen att du har båda dessa programpaket installerade och fungerar. När du är klar är det första steget att skriva följande kommando för att installera PhoneGap:

npm installera -g phonegap

Om du använder Linux, kom ihåg att förbeställa sudo till föregående rad.

2. Initiera projektet

Innan du skapar projektmappen är det värt att notera att utvecklingsteamet också introducerade en kommandorad i den här nya versionen för att hjälpa utvecklare att utföra vanliga uppgifter som att bygga och köra appen eller installera plugins. Med CLI kan du också initiera ett projekt. Det kommer inte bara att skapa en mapp med PhoneGap-biblioteket inuti, men det kommer även att generera ett applikations skelett. För att initiera projektet, skriver du bara följande kommando:

phonegap skapa audero-feed-läsare com.audero.free.utility.auderofeedreader "Audero Feed Reader"

Det första argumentet anger namnet på den katalog som ska skapas. De andra två argumenten är frivilliga, och ange ID respektive namn på appen. När du har kört ovanstående kommando ser du följande struktur inuti projektets rotmapp:

.Cordova: Används för bakgrundskompatibilitet med Cordova-verktyg.
sammanslagningar: I den här mappen kan du lägga till någon plattformsspecifik anpassning så att du inte behöver ändra källfilerna varje gång du arbetar med ett projekt.
plattformar: Platsen där de kompilerade installatörerna kommer att placeras, om du kompilerar projektet lokalt.
plugin-program: Mappen där du hittar plugin för ditt projekt.
www: Mappen som innehåller källfilerna och programmets konfiguration. Den innehåller mappen "css", "js" och "img" där du kan lägga respektive filer. Dessutom har den också en "res" -mapp där du placerar ikoner och stänkskärmar.

3. Installera PhoneGap-plugins

Som vi har sett i introduktionen, kommer vi att dra nytta av några av PhoneGap core plugins. För att installera dem måste du använda CLI-kommandot nedan:

 phonegap local plugin lägg till PLUGIN_REPOSITORY_URL

I ovanstående, PLUGIN_REPOSITORY_URL är repository URL för plugin du vill använda. Eftersom vårt projekt kommer att använda både Anmälan och Anslutningskärnans plugins måste du skriva följande kommando:

 phonegap local plugin lägg till https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git phonegap local plugin lägg till https://git-wip-us.apache.org/repos/asf /cordova-plugin-network-information.git

Som det mest uppmärksamma på dig kanske har noterat, lade jag inte till lagringsprogrammet. Anledningen är att från och med version 3.0, åtkomst den är inbyggd i Cordova.

4. Lägg till PhoneGap Frameworks

Nu när vi har PhoneGap och dess plugins på plats måste vi lägga till de andra två biblioteken som behövs: jQuery (jag använder version 2.0.3) och jQuery Mobile (version 1.3.1).

Innan vi fortsätter är det viktigt att förstå varför jag valde 2.x-gren av jQuery. jQuery har två huvudgrenar som för närvarande är i utveckling: 1.x och 2.x. Den version du ska använda beror verkligen på var du använder ramverket och vilka webbläsare du tänker stödja. Medan jQuery 1.x stöder alla versioner av Google Chrome, Firefox, Safari, Opera och Internet Explorer från version 6, släpptes 2.x-versionen stöd för Internet Explorer 6, 7 och 8 i utbyte mot en mindre storlek och bättre prestanda. Eftersom vi utvecklar en mobilapplikation med Cordova behöver vi inte oroa oss för Internet Explorer 6-8. Faktum är att Microsoft operativsystem som stöds av Cordova är Windows Phone 7 och Windows Phone 8 som körs respektive på Internet Explorer 9 och 10. Därför kan vi säkert använda jQuery 2.x!

Med ovanstående förståelse kan vi fortsätta med våra grundläggande steg för att ställa in Audero Feed Reader. När du har hämtat biblioteken flyttar du jQuery-filen och JavaScript-filen (miniverad version) av jQuery Mobile inuti "js" mapp. Då måste vi ställa in stilarket för jQuery Mobile (jquery.mobile-1.3.1.min.css) inuti "Css" mapp. Slutligen placerar vi de jQuery Mobile buntade bilderna i "Img" mapp. Eftersom vi har ändrat den inbyggda strukturen i jQuery Mobile något, behöver vi justera de sökvägar som pekar på bilderna i dess CSS-fil. Vi behöver specifikt ersätta "bilder /" delen med den här strängen "... / img /". Tänk på att strängen ska bytas ut 5 gånger.

5. Skapa projektfilstruktur

Nu när vi har projektramen på plats måste vi skapa mappen "www", de HTML-filer som krävs, ställa in standardprogrammets ikon, tweak konfigurationsfilen för Adobe PhoneGap och ändra standardskärmen. Det är mycket, så låt oss fortsätta flytta!

Under den här serien kommer vi att skapa följande filer:

index.html: Ingångspunkten för programmet, där vi lägger länkarna till de bibliotek som används.
add-feed.html: Det här är den sida som innehåller formuläret som används för att spara ett nytt flöde.
list-feeds.html: Här visas listan över lagrade flöden.
show-feed.html: Detta visar inmatningarna av det givna flödet. Dessutom har den en navbar som har en knapp för att ta bort flödet och en annan för att hämta fler poster från flödet.
aurelio.html: Kreditsidan med information om författaren.
feed.js: Den här filen innehåller en klass som heter Utfodra, brukade skapa, ta bort och hämta lagrade flöden. Den bygger på Cordova Storage plugin.
application.js: Den här filen innehåller en annan klass, kallad Ansökan, som har metoder för att initiera programmets sidor och bifoga hanterare till vissa sidor (till exempel navbarknappar som tidigare nämnts).
config.xml: Den här XML-filen innehåller metadata för vårt projekt och lagrar inställningar som appnamnet och beskrivningen.

6. Skapa startsida

Som förklaras i det föregående avsnittet, eftersom jQuery Mobile laddar sidor som använder Ajax, måste vi ladda CSS och JavaScript-filerna vid ingångspunkten för vår ansökan, det vill säga index.html fil. Den här sidan visar titeln och beskrivningen av programmet och har alla knappar för åtkomst till resten av appen.

Den fullständiga källan till hemsidan visas nedan:

      Audero Feed Reader            Audero Feed Reader
    Audero Feed Reader är en väldigt grundläggande feed aggregator för att hålla på ett ställe alla nyheter och artiklar du bryr dig om. 
 Lägg till Feed List Feed 
  Skapat av Aurelio De Rosa
 Credits

Som du kan läsa från koden ovan, knapparna inuti och den

använd attributet data iconpos = "NoText". Med den här inställningen kan du dölja länkens text och är mycket användbar för att spara utrymme för små skärmar. Som jag kommer att förklara i en senare del av denna serie kommer vi att rikta dessa knappar för att skapa ett mer responsivt gränssnitt för programmet.

7. Skapa fodersidan

Den här sidan heter add-feed.html, innehåller bara formuläret för att lägga till ett nytt flöde. Det har inte något speciellt så vi kan hoppa över diskussionen av den här filen och visa bara källan:

     Lägg till flöde     Hem Lägg till flöde
    Använd det här formuläret för att lägga till ett nytt flöde. Det är enkelt att skriva ett namn, webbadressen och klicka sedan på "Lägg till flöde". 
   Feed Name:  
  Feed-URL:

8. Skapa foderlistan

Den här sidan heter list-feeds.html och är väldigt liten som de andra. Inuti filen ställer vi en oorderad lista med de vanliga

data role = "listview"

datafilter = "true"

Koden för den här sidan är listad nedan:

      Listmatningar     Hem Listmatningar

9. Skapa matningssidan

Det här är den sida som ansvarar för att visa foderposter och heter show-feed.html. I den har vi en lista, men den här gången behöver vi inte en sökfält. I motsats till de föregående skärmarna har dock denna skärm en navigeringsfält med de två knapparna som beskrivs ovan. För att skapa en navbar i jQuery Mobile måste du skapa en div med data role = "navbar" attribut och placera det i en oorderad lista med dina knappar.

Den fullständiga koden på den här sidan visas nedan:

      Visa flöde     Tillbaka Visa flöde
   Visa mer
 Radera flöde

Som du kan se från att titta på koden har vår navbar också en klass som tillämpas. Det tillhör jQuery Mobile stilarket och det brukar användas ett annat tema, i det här fallet en blå färg, för att markera varje knapp.

10. Skapa Credits-sidan

Sidan aurelio.html är den minst viktiga av hela applikationen och har ingen spännande widget eller element att beskriva. Det enda anmärkningsvärda faktum är användningen av attributet target = "_ blank" appliceras på länkarna. Det här attributet används ofta på webben, men den här gången använder jag den som en krok för att bifoga en hanterare till alla externa länkar. Du lär dig mer om detta i den tredje delen av handledningsserien.

Koden för aurelio.html visas nedan:

      Aurelio De Rosa     Tillbaka Aurelio De Rosa
       Jag är en webb- och apputvecklare med mer än 5 års erfarenhetsprogrammering för webben med HTML5, CSS3, JavaScript och PHP. Jag använder främst LAMP-stacken och ramarna som jQuery, jQuery Mobile och Cordova (PhoneGap). Mina intressen inkluderar även webbsäkerhet, webbtillgänglighet, SEO och WordPress. 
  För närvarande jobbar jag själv med den citerade tekniken och även en teknisk författare för flera nätverk där jag skriver artiklar om de ämnen som jag brukar arbeta med och mer. 
 
  Kontakter
  Hemsida
 E-post
 Twitter
 Linkedin
 GitHub

Slutsats

I den här första delen av vår serie har vi sett funktionerna i feed reader app och hur man skapar projektstrukturen. Dessutom utvecklade vi alla HTML-filer som komponerar vår app. I den andra delen av denna serie skriver vi affärslogiken till Audero Feed Reader och diskutera Google Feed API. Kolla tillbaka snart, och tack för att du läste!

Koda