Dette er den tredje og siste delen av serien om Audero Feed Reader. I denne artikkelen lærer du hvordan du oppretter konfigurasjonsfilen og fullfører prosjektet vi startet i en tidligere leksjon.
1. Etterbehandling av appen
En bedre responsiv layout
I den første delen av denne serien skrev jeg om betydningen av data-iconpos attributt for koblingene i overskriften og bunnteksten. I denne delen lærer du om hvorfor vi bruker dem. Jeg bruker den, med litt JavaScript, for å skape en bedre responsiv effekt. Jeg bruker den til å skjule teksten til koblingene der den er brukt. Formålet med dette er å spare plass, noe som er viktig, spesielt for mindre skjermer. Men hva om skjermen er stor nok, si større enn 480 piksler, for å vise teksten? For dette vil vi lytte etter pagebeforecreate hendelse, og legg til en handler, updateIcons () metode av applikasjon klasse, for å reagere når den er sparken. Som navnene indikerer, blir hendelsen utløst før siden og dens widgets initialiseres. Vår handler vil først teste om siden er større enn 480px, og i så fall vil den fjerne data-iconpos attributt, så koblingsteksten blir vist.
Koden som implementerer denne metoden er følgende:
updateIcons: function () var $ buttons = $ ('en [data-ikon], knapp [data-ikon]'); var isMobileWidth = ($ (vindu). bredde () <= 480); isMobileWidth ? $buttons.attr('data-iconpos', 'notext') : $buttons.removeAttr('data-iconpos');
2. Bygg konfigurasjon
Med Adobe PhoneGap Build-tjenesten kan du spesifisere metadataene for prosjektet ditt med en konfigurasjonsfil som heter config.xml. Det følger W3C-widgetens spesifikasjon og må forbli i appens rot, på samme nivå index.html. Den første linjen er XML-deklarasjonen, og roten til dokumentet er a tag som har flere attributter tilgjengelig. De viktigste er id, den unike identifikatoren av søknaden, og versjon, som spesifiserer versjonen av søknaden. Inne i tag, kan du skrive metadataene.
Hvis du har fulgt opplæringen så langt, vil du huske det da vi initialiserte applikasjonen ved hjelp av PhoneGap CLI, den opprettet en standard konfigurasjonsfil. Den genererte konfigurasjonen angir for mange innstillinger for hver plattform i forhold til våre behov. Faktisk bruker vi flere innstillinger, men siden dette er en opplæring, fokuserer vi på noen få plattformer. Du er imidlertid helt fri til å utvide for å passe dine individuelle behov.
I konfigurasjonsfilen har vi:
Navn (påkrevd): Dette er appens navn. Det trenger ikke å være unikt.
Beskrivelse (påkrevd): Tekst som angir hva appen din er for. Dette er veldig viktig fordi det vises som beskrivelsen av appen din på markedsplassene.
Forfatter (valgfritt): Appens forfatter. Den har to valgfrie egenskaper: href, en URL til utvikler eller selskapets hjemmeside, og e-post, e-postadressen til utvikleren eller firmaet. Dessverre kan du bare angi en forfatter, så du kan ikke ha detaljer for flere forfattere her.
Ikon (valgfritt): Dette vil være ikonet som vises på enhetene som installerer appen din. Hvis det ikke er spesifisert, vil Cordova-logoen bli brukt.
Sprut (valgfritt): Den setter skjermen på applikasjonen, dette er bildet som ble vist under lasting.
Preference (valgfritt): Et sett med preferanser du vil søke på appen din. Det er en lukket kode, og du kan ha null eller mer koder inne i filen. Den har to attributter og begge er påkrevd: Navn og verdi. Det er flere preferanser du kan definere, men det viktigste som jeg skal bruke er Cordova-versjonen.
Adgang (valgfritt): Gir appen din tilgang til ressurser på andre domener - det tillater at appen din kan laste inn sider fra eksterne domener som kan ta over hele webvisningen. Husk hva jeg forklarte tidligere i avsnittet "InAppBrowser Plugin" - for å åpne de eksterne koblingene i Cordova WebView, må du legge dem til appelisten. For kortfattet vil vi tillate ekstern ressurs ved hjelp av * spesiell karakter.
Gap: plugin (valgfritt): Angir funksjonene du vil bruke. For eksempel, Android før du installerer noen app, viser til brukeren de tillatelsene det krever, og hvis brukeren godtar det, fortsetter den.
Hvis du har lest omhyggelig listen over og har brukt PhoneGap tidligere, har du sannsynligvis lagt merke til at introduksjonen, i versjon 3.0.0, av en ny innstilling kalt gap: plugin. Sistnevnte har erstattet trekk innstillingen, men bortsett fra navnet, er konseptet det samme.
Nå som jeg har notert nøkkelpunkter i formatet, kan du forstå kilden til konfigurasjonsfilen til prosjektet vårt. Men hvis du vil lese mer om dette emnet, ta en titt på den offisielle dokumentasjonssiden. Den komplette filen er under.
Audero Feed Reader Audero Feed Reader er en veldig enkel feed aggregator for å holde på ett sted alle nyhetene og artiklene du bryr deg om. Aurelio De Rosa
3. Aktiverer at programmet skal kjøre
På dette punktet har vi nådd slutten av denne serien. Hensikten har vært å demonstrere hvordan vi kan starte appen trygt med alle filene vi har bygget så langt. Våre håndtere og metoder kan utføres trygt når Cordova er fullt lastet, slik at du kan ringe Cordova-APIene. Men vent ... Når er Cordova klar? Jeg er glad du spurte! Rammen gir en hendelse som heter deviceready som du kan lytte til. Gitt det, i index.html fil (inngangspunktet for søknaden), vi vil lytte til hendelsen og vedlegg som vår håndterer vår initApplication () metode av applikasjon klasse. Det vil bli utført når hendelsen er sparken.
Koden som implementerer dette, vises nedenfor.
4. Bygge og teste applikasjonen
Vår app er nå fullført. Alt som er igjen å gjøre, er å bygge og teste det på en emulator eller en ekte enhet. For å bygge appen har du to muligheter: datamaskinen eller Adobe Cloud-tjenesten, kalt Adobe PhoneGap Build. Husk at hvis du vil bruke datamaskinen, må du installere SDK for hver plattform du vil målrette mot. De PhoneGap CLI har en kommando for å bygge appen (bygge), for å teste det (installere), og å utføre begge oppgaver (løpe). Så, la oss si at du vil bygge og teste Audero Feed Reader på Android må du skrive følgende kommando:
phonegap kjøre android
Vær oppmerksom på at hvis du har en Android-enhet koblet til og riktig konfigurert til datamaskinen, kjører programmet som standard. Ellers vil det kjøre på SDK-emulatoren.
Hvis du vil bruke Adobe PhoneGap Build for å generere de installerbare filene, kan du også bruke CLI, bare ved å bruke fjern kommando som vist nedenfor:
phonegap fjernkontroll bygge android
Husk at siden det eksterne byggemiljøet ikke har en emulator, installere og løpe kommandoer genererer ganske enkelt en QR-kode i PhoneGap Build grensesnitt. I tillegg til å bruke tjenesten må du ha en Adobe-konto. Dette betyr at du (dessverre) kan ikke bruk GitHub-legitimasjonene.
Konklusjon
Som du har sett gjennom denne serien, kan det være veldig enkelt å lage en feedleser takket være rammer som jQuery Mobile og Cordova, og til noen APIer som Google Feed API. Jeg håper du likte denne opplæringen, og hvis du ønsker å forbedre prosjektet ytterligere, bør du vurdere å legge til noen funksjoner du føler meg savnet og bruke den på dine egne mobile enheter.
Share
Accentsconagua
