Detta är den tredje och sista delen av serien om Audero Feed Reader. I den här artikeln lär du dig hur du skapar konfigurationsfilen och slutför projektet vi startade i en tidigare lektion.
1. Avsluta App
En bättre responsiv layout
I den första delen av denna serie skrev jag om vikten av data iconpos attribut för länkarna i rubriken och sidfoten. I det här avsnittet läser du om varför vi använder dem. Jag använder den, med lite JavaScript, för att skapa en bättre responsiv effekt. Jag använder den för att dölja texten i länkarna där den tillämpas. Syftet med detta är att spara utrymme, vilket är viktigt, särskilt för mindre skärmar. Men vad händer om skärmen är tillräckligt stor, säg större än 480 pixlar, för att visa texten? Därför lyssnar vi på pagebeforecreate händelse och bifoga en handlare, updateIcons () metod för Ansökan klass, att reagera när den är avfyrade. Som namnen antyder utlöses händelsen före sidan och dess widgets initialiseras. Vår hanterare testar först om sidan är större än 480px och i så fall tar den bort data iconpos attribut, så länken texten kommer att visas.
Koden som implementerar denna metod är följande:
updateIcons: function () var $ buttons = $ ('en [data-ikon], knapp [data-ikon]'); var isMobileWidth = ($ (fönster) .width () <= 480); isMobileWidth ? $buttons.attr('data-iconpos', 'notext') : $buttons.removeAttr('data-iconpos');
2. Bygg konfiguration
Med Adobe PhoneGap Build-tjänsten kan du ange metadata för ditt projekt med en konfigurationsfil som heter config.xml. Det följer W3C-widgetens specifikation och måste ligga inne i appens rot, på samma nivå index.html. Den första raden är XML-deklarationen och roten till dokumentet är a tagg som har flera attribut tillgängliga. De viktigaste är id, den unika identifieraren av ansökan, och version, som specificerar versionen av programmet. Inuti tagg, kan du skriva metadata.
Om du har följt handledningen hittills kommer du att hämta det när vi initierade programmet med hjälp av PhoneGap CLI, det skapade en standardkonfigurationsfil. Den genererade konfigurationen anger för många inställningar för varje plattform jämfört med våra behov. Faktum är att vi använder flera inställningar, men eftersom det här är en handledning fokuserar vi på några plattformar. Du är dock helt fri att expandera för att passa dina individuella behov.
I konfigurationsfilen har vi:
namn (krävs): Detta är appens namn. Det behöver inte vara unikt.
Beskrivning (obligatoriskt): Text som anger vad din app är för. Detta är mycket viktigt eftersom det kommer att visas som en beskrivning av din app på marknadsplatserna.
Författare (valfritt): Appens författare. Den har två valfria egenskaper: href, en URL till utvecklaren eller företags hemsida och e-postadressen till utvecklaren eller företaget. Tyvärr kan du bara ange en författare, så du kan inte ha detaljer för flera författare här.
Ikon (tillval): Det här är ikonen som visas på de enheter som installerar din app. Om det inte anges, kommer Cordova-logotypen att användas.
Stänk (valfritt): Det ställer skärmbilden för programmet, det här är bilden som visades under laddning.
Preferens (tillval): En uppsättning inställningar du vill tillämpa på din app. Det är en sluten tagg och du kan ha noll eller mer taggar inuti filen. Den har två attribut och båda krävs: namn och värde. Det finns flera inställningar du kan definiera, men den viktigaste en att använda enligt min mening är Cordova-versionen.
Tillgång (valfritt): Ger din app tillgång till resurser på andra domäner - det låter särskilt att din app laddar sidor från externa domäner som kan ta över hela din webbvisning. Tänk på vad jag förklarade tidigare i avsnittet "InAppBrowser Plugin" - för att öppna de externa länkarna i Cordova WebView, måste du lägga till dem i appens vitlista. För korthet tillåter vi eventuella externa resurser med hjälp av * speciell karaktär.
Gap: plugin (tillval): Anger vilka funktioner du vill använda. Till exempel, Android innan du installerar någon app, visar användaren de behörigheter som krävs och om användaren godkänner den fortsätter den.
Om du har läst noggrant ovanstående lista och har använt PhoneGap tidigare har du förmodligen märkt att introduktionen, i version 3.0.0, av en ny inställning kallas spalt: plugin. Den senare har ersatt funktion inställning men förutom namnet är konceptet exakt detsamma.
Nu när jag har noterat de viktigaste punkterna i formatet kan du förstå källan till konfigurationsfilen för vårt projekt. Om du vill läsa mer om detta ämne, ta en titt på den officiella dokumentationssidan. Den fullständiga filen är nedan.
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. Aurelio De Rosa
3. Aktivera att programmet körs
Vid denna tidpunkt har vi nått slutet av denna serie. Dess syfte har varit att visa hur vi kan starta appen säkert med alla filer vi hittills har byggt. Våra hanterare och metoder kan utföras på ett säkert sätt när Cordova är fullt laddad, så att du kan ringa Cordova API. Men vänta ... När är Cordova redo? Jag är glad att du frågade! Ramverket ger en händelse som heter deviceready att du kan lyssna på. Med tanke på att i index.html fil (ingångspunkt för ansökan), vi lyssnar på evenemanget och bifogas som vårdtagare vår initApplication () metod för Ansökan klass. Det kommer att utföras när händelsen är avfyrade.
Koden som implementerar detta visas nedan.
4. Bygga och testa applikationen
Vår app är nu klar. Allt som finns kvar är att bygga och testa det på en emulator eller en riktig enhet. För att bygga appen har du två möjligheter: din dator eller Adobe-molntjänsten, kallad Adobe PhoneGap Build. Kom ihåg att om du vill använda din dator måste du installera SDK för varje plattform du vill rikta in. De PhoneGap CLI har ett kommando att bygga appen (bygga), för att testa det (Installera) och att utföra båda uppgifterna (springa). Så låt oss säga att du vill bygga och testa Audero Feed Reader på Android måste du skriva följande kommando:
phonegap run android
Observera att om du har en Android-enhet ansluten och korrekt konfigurerad till datorn, körs programmet som standard. Annars kommer det att köras på SDK-emulatorn.
Om du vill använda Adobe PhoneGap Build för att generera de installerbara filerna kan du också använda CLI, bara genom att använda avlägsen kommando som visas nedan:
phonegap fjärrbygga android
Tänk på att eftersom fjärrbyggnadsmiljön inte har en emulator, Installera och springa kommandon skapar helt enkelt en QR-kod i PhoneGap Build gränssnitt. Dessutom måste du ha ett Adobe-konto för att kunna använda tjänsten. Det betyder att du (tyvärr) kan inte använd GitHub-uppgifterna.
Slutsats
Som du har sett i hela denna serie kan det vara väldigt enkelt att skapa en flödesläsare tack vare ramar som jQuery Mobile och Cordova, och till vissa API: er som Google Feed API. Jag hoppas att du haft den här handledningen och om du vill förbättra projektet ytterligare, överväg att lägga till några funktioner du tycker jag missade och använda den på dina egna mobila enheter.
Share
Accentsconagua
