Dit is het derde en laatste deel van de serie over Audero Feed Reader. In dit artikel leert u hoe u het configuratiebestand maakt en het project voltooit dat we in een vorige les zijn gestart.
1. De app beëindigen
Een beter reagerende lay-out
In het eerste deel van deze serie schreef ik over het belang van de data-iconpos attribuut voor de links in de koptekst en de voettekst. In dit gedeelte leert u waarom we ze gebruiken. Ik gebruik het, met een beetje JavaScript, om een beter responsief effect te creëren. Ik gebruik het om de tekst van de links te verbergen waar deze is toegepast. Het doel hiervan is om ruimte te besparen, wat belangrijk is, vooral voor kleinere schermen. Maar wat als het scherm groot genoeg is, bijvoorbeeld groter dan 480 pixels, om de tekst weer te geven? Hiervoor zullen we luisteren naar de pagebeforecreate evenement, en voeg een handler toe, de updateIcons () methode van de Toepassing klasse, om te reageren zodra het is ontslagen. Zoals de namen aangeven, wordt de gebeurtenis geactiveerd vóór de pagina en worden de widgets geïnitialiseerd. Onze handler zal eerst testen of de pagina groter is dan 480px en, zo ja, dan zal het de data-iconpos attribuut, dus de linktekst wordt getoond.
De code die deze methode implementeert is de volgende:
updateIcons: function () var $ buttons = $ ('a [data-icon], button [data-icon]'); var isMobileWidth = ($ (window) .width () <= 480); isMobileWidth ? $buttons.attr('data-iconpos', 'notext') : $buttons.removeAttr('data-iconpos');
2. Bouw de configuratie
Met de Adobe PhoneGap Build-service kunt u de metagegevens van uw project opgeven met een opgeroepen configuratiebestand config.xml. Het volgt de W3C widget-specificatie en moet binnen de hoofdmap van de app blijven, op hetzelfde niveau van index.html. De eerste regel is de XML-verklaring en de hoofdmap van het document is a tag met verschillende attributen beschikbaar. De belangrijkste zijn ID kaart, de unieke identifier van de applicatie, en versie, die de versie van de applicatie specificeert. Binnen in de tag, kunt u de metagegevens schrijven.
Als je de tutorial tot nu toe hebt gevolgd, zul je je dat herinneren toen we de applicatie initialiseerden met behulp van de PhoneGap CLI, het heeft een standaard configuratiebestand gemaakt. De gegenereerde configuratie specificeert te veel instellingen voor elk platform in vergelijking met onze behoeften. In feite zullen we verschillende instellingen gebruiken, maar aangezien dit een tutorial is, zullen we ons concentreren op een paar platforms. U bent echter absoluut vrij om uit te breiden om aan uw individuele behoeften te voldoen.
In het configuratiebestand hebben we:
Naam (vereist): dit is de naam van de app. Het hoeft niet uniek te zijn.
Omschrijving (verplicht): tekst die aangeeft waarvoor uw app is. Dit is erg belangrijk omdat het wordt weergegeven als de beschrijving van uw app op de marktplaatsen.
Schrijver (optioneel): de auteur van de app. Het heeft twee optionele eigenschappen: href, een URL naar de ontwikkelaar of startpagina van het bedrijf en e-mail, het e-mailadres van de ontwikkelaar of het bedrijf. Helaas kun je slechts één auteur opgeven, dus je kunt hier geen details voor meerdere auteurs hebben.
Icoon (optioneel): dit is het pictogram dat wordt weergegeven op de apparaten die uw app installeren. Als dit niet wordt opgegeven, wordt het Cordova-logo gebruikt.
Plons (optioneel): hiermee wordt het opstartscherm van de toepassing ingesteld. Dit is de afbeelding die wordt weergegeven tijdens het laden.
Voorkeur (optioneel): een reeks voorkeuren die u op uw app wilt toepassen. Het is een gesloten tag en je kunt nul of meer hebben tags in het bestand. Het heeft twee attributen en beide zijn vereist: naam en waarde. Er zijn verschillende voorkeuren die u kunt definiëren, maar de belangrijkste die u naar mijn mening kunt gebruiken, is de Cordova-versie.
Toegang (optioneel): hiermee geeft u uw app toegang tot bronnen op andere domeinen. Met deze app kan uw app pagina's laden van externe domeinen die uw volledige webview kunnen overnemen. Onthoud wat ik eerder in het gedeelte "De InAppBrowser-plug-in" heb uitgelegd - dat om de externe links in de Cordova WebView te openen, u ze moet toevoegen aan de witte lijst van de app. Om het kort te houden, zullen we toestaan dat externe bronnen de * speciaal karakter.
Gap: plugin (optioneel): specificeert de functies die u wilt gebruiken. Bijvoorbeeld voordat Android een app installeert, toont het de gebruiker de benodigde rechten en als de gebruiker hiermee instemt, gaat het verder.
Als u de bovenstaande lijst zorgvuldig heeft gelezen en in het verleden PhoneGap hebt gebruikt, is het u waarschijnlijk opgevallen dat er in versie 3.0.0 een nieuwe instelling is genaamd: gap: plugin. De laatste heeft de vervangen voorzien zijn van instelling, maar afgezien van de naam, het concept is precies hetzelfde.
Nu ik de belangrijkste punten van het formaat heb genoteerd, kun je de bron van het configuratiebestand van ons project begrijpen. Als u echter meer over dit onderwerp wilt lezen, bekijkt u de officiële documentatiepagina. Het volledige bestand is hieronder.
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. Aurelio De Rosa
3. De toepassing activeren
Op dit punt hebben we het einde van deze serie bereikt. Het doel ervan was om te laten zien hoe we de app veilig kunnen starten met alle bestanden die we tot nu toe hebben gemaakt. Onze handlers en methoden kunnen veilig worden uitgevoerd zodra Cordova volledig is geladen, zodat u de Cordova API's kunt bellen. Maar wacht even ... Wanneer is Cordova klaar? Ik ben blij dat je het vroeg! Het framework biedt een gebeurtenis genaamd deviceready waar je naar kunt luisteren. Gezien het feit dat in de index.html bestand (het beginpunt van de toepassing), zullen we naar de gebeurtenis luisteren en als een handler onze toevoegen initApplication () methode van de Toepassing klasse. Het wordt uitgevoerd zodra het evenement is afgevuurd.
De code die dit implementeert, wordt hieronder weergegeven.
4. De applicatie bouwen en testen
Onze app is nu voltooid. Het enige dat u hoeft te doen, is het te bouwen en te testen op een emulator of een echt apparaat. Om de app te bouwen, hebt u twee mogelijkheden: uw computer of de Adobe-cloudservice, genaamd Adobe PhoneGap Build. Houd er rekening mee dat als u uw computer wilt gebruiken, u de SDK moet installeren voor elk platform dat u wilt targeten. De PhoneGap CLI heeft een opdracht om de app te bouwen (bouwen), om het te testen (installeren) en om beide taken uit te voeren (rennen). Dus laten we zeggen dat je wilt bouwen en testen Audero Feed Reader op Android, moet je de volgende opdracht typen:
phonegap voer android uit
Houd er rekening mee dat als u een Android-apparaat hebt aangesloten en correct hebt geconfigureerd op de computer, de toepassing er standaard op zal worden uitgevoerd. Anders werkt het op de SDK-emulator.
Als u Adobe PhoneGap Build wilt gebruiken om de installeerbare bestanden te genereren, kunt u ook de CLI gebruiken, gewoon door de afgelegen commando zoals hieronder getoond:
phonegap remote build android
Houd er rekening mee dat, omdat de externe buildomgeving geen emulator heeft, de installeren en rennen opdrachten genereren eenvoudig een QR-code in de PhoneGap Build interface. Als u de service wilt gebruiken, moet u bovendien een Adobe-account hebben. Dit betekent dat (helaas) jij kan niet gebruik de GitHub-inloggegevens.
Conclusie
Zoals je in deze serie hebt gezien, kan het maken van een Feed Reader heel gemakkelijk zijn dankzij frameworks zoals jQuery Mobile en Cordova, en voor sommige API's zoals de Google Feed API. Ik hoop dat je deze tutorial leuk vond en als je het project verder wilt verbeteren, overweeg dan om enkele functies toe te voegen die je hebt gemist en gebruik deze op je eigen mobiele apparaten.
Share
Accentsconagua
