Selv om det ikke er spesifikt opprettet for å jobbe sammen, er jQuery Mobile og Cordova (også kjent som PhoneGap) en svært kraftig duo for å lage hybrid, mobile apper. Denne serien vil lære deg hvordan du utvikler en feed-leser ved hjelp av webteknologi og disse to rammene. I løpet av denne serien blir du også kjent med Cordova Connection and Storage Core-pluginprogrammer og Google Feed API.

---

Applikasjonsoversikt

Appen vi skal bygge i denne opplæringen, kalt "Audero Feed Reader", er veldig liten og lett å forstå. Det er en grunnleggende feed-leser som hjelper deg med å holde alle nyhetene og artiklene du bryr deg om på ett sted. Tross alt, Google slår av Google Leser, så vi må erstatte det, ikke vi?

På startskjermen til appen plasserer vi to knapper for å markere de to hovedfunksjonene: en legg til en ny matetast og en liste over lagrede feeder. Oppsettet på startskjermbildet vises med følgende skjermdump:

For å holde prosjektet så enkelt som mulig, lagrer vi bare navnet på strømmen og nettadressen. Så, når brukeren klikker på knappen "Legg til feed", viser vi et skjema med bare to innboks bokser som vist på bildet nedenfor:

Nå som brukeren er i stand til å lagre så mange feeds som ønsket, er det på tide å la ham se listen over de lagrede feeder. I tillegg, for å hjelpe brukeren å enkelt finne en feed, er listen bestilt alfabetisk etter navn, og det har også en søkeboks, hvis feeds er for mange. Du kan se et eksempel på den beskrevne siden og se på skjermbildet nedenfor:

Når brukeren velger en feed, henter appen nettadressen og viser oppføringene som er tilgjengelige. For å enkelt analysere ulike typer strømmer (Atom, RSS eller Media RSS), vil vi dra nytte av Google Feed API, og spesielt Google Feed JSON-grensesnittet. Sistnevnte vil analysere den forespurte nettadressen for oss og returnere et enhetlig og lett-å-analysere JSON-objekt. Vi finner mer om denne API-en i neste del av denne serien. Som standard lagrer du båndbredde, Audero Feed Reader vil bare kreve 10 oppføringer. For å tillate brukeren å hente flere data, legger vi til en "Vis mer" -knapp. Selvfølgelig blir dataene faktisk hentet bare hvis den angitte Feed viser mer enn 10 oppføringer. For eksempel, Mobiletuts + gir bare 10 oppføringer, så hvis brukeren klikker på knappen "Vis flere", blir meldingen "Ingen flere oppføringer som skal lastes", bedt om.

For å spare plass, er oppføringene organisert med et trekkspill, og som standard er kun tittelen synlig. Brukeren kan imidlertid se flere detaljer om nødvendig. Appen viser også oppføringens oppsummering, forfatteren og en knapp som leser "Gå til artikkelen" for å lese hele artikkelen på den relative nettsiden. Merk at for å øke brukervennligheten, viser vi også tittelen igjen, men denne gangen kan den klikkes for å få tilgang til hele artikkelen.

Den siste utseendet på denne siden er vist nedenfor:

---

Prosjektkomponenter

På dette punktet vet vi hva å gjøre, så det er på tide å se hvordan vi skal gjøre det. Teknologiene involvert i utviklingen av Audero Feed Reader er:

• HTML 5: Å opprette og markere sidene.
• CSS 3: Å utforme sidene. Vær oppmerksom på at vi ikke vil ha et tilpasset CSS-stilark, og vi bruker bare den som leveres og kreves av jQuery Mobile.
• Javascript: Dette er språket vi skal bruke til å programmere programmets logikk. Det er det eneste språket som støttes av PhoneGap.
• jQuery: jQuery vil bli brukt til å velge elementer, legge ved hendelseshåndteringsprogrammer og kjøre AJAX-forespørsler. Det er også en avhengighet av jQuery Mobile.
• jQuery Mobile: Dette er vårt valgverk for å opprette brukergrensesnittet på våre sider. Det gjør at vi enkelt kan optimalisere et nettsted for mobile enheter og raskt lage mobilgrensesnitt. På tidspunktet for skriving er den nyeste versjonen tilgjengelig og brukt 1.3.1.
• PhoneGap: Wraps alle våre filer, slik at vi kan kompilere dem som om vi skulle bygge en innfødt app. MoreGear tilbyr PhoneGap noen interessante og nyttige APIer for å kommunisere med maskinvareenheten, for eksempel lagring og tilkobling. Den brukte versjonen er 3.0, en nylig og betydelig forbedring over 2.x.

I tillegg til det ovennevnte, vil vi også bruke disse spesifikke Cordova Core Plugins:

• InAppBrowser: Dette er en nettleser som vises i appen når du ringer window.open. Siden versjon 2.3.0 er to viktige metoder lagt til: executeScript () og insertCSS (). Den første lar deg injisere JavaScript-kode, mens den andre legger til CSS-koden i InAppBrowser vindu. Vi vil ikke bruke disse metodene i appen vår, men jeg ville nevne dem. Hvis du vil vite mer, kan du besøke InAppBrowser-offisiell dok.
• Lagringsplugin: Gir tilgang til enhetens lagringsalternativer. Legg merke til at, som dokumentasjonen hevder, noen enheter allerede gir en implementering av disse spesifikasjonene, i så fall gjelder den innebygde støtten. Cordovas implementering tilbyr kompatibel støtte for de som ikke gjør det. For å lese mer, ta en titt på dokumentet for lokal lagring.
• Meldingsplugin: Lar deg opprette visuelle, hørbare og taktile enheter. Av de mange tilgjengelige metodene, bruker vi bare varsling() for å vise noen meldinger til brukeren. For eksempel vil denne plugin brukes når en bruker legger til eller sletter en feed. For mer informasjon, se Notifikasjonsdokumenter.
• Tilkoblings-plugin: Det er laget av bare en egenskap som gir informasjon om enhetens tilkoblingsstatus (for eksempel WI-FI, 3G, ingen, etc.). Vær oppmerksom på at siden versjon 2.3.0 skal du få tilgang til Forbindelse objekt ved hjelp av det nye navigator.connection eiendom. Denne egenskapen samsvarer med W3C-spesifikasjonen, i stedet for den forrige navigator.network.connection eiendom. Mer om dette her.

Hvis du brukte tidligere versjoner av PhoneGap, vil du gjenkjenne at disse pluginene ikke er noe annet enn det du pleide å kjenne som APIer. Navneendringen skyldes den nye PhoneGap-arkitekturen. Ikke bekymre deg, bortsett fra navnet, er nesten alt det samme. Hvis du vil lære om alle de nyeste og beste forbedringene med 3.0, kan du lese introduksjonsartikkelen og Komme i gang-veiledningen.

---

1. Installer PhoneGap

Fra og med versjon 3.0.0 introduserte utviklingslaget en ny prosedyre for å installere PhoneGap som krever Node.js og npm. I tillegg er det ikke noen enkle nedlastingskoblinger som tilbakebetaling for øyeblikket. Derfor antar resten av opplæringen at du har begge disse programmene pakket og installert. Når du er ferdig, er det første trinnet å skrive følgende kommando for å installere PhoneGap:

npm installere -g phonegap

Hvis du bruker Linux, husk å prepend sudo til forrige linje.

---

2. Initialiser prosjektet

Før du oppretter prosjektmappen, er det verdt å merke seg at utviklingslaget også introduserte en kommandolinje i denne nye utgivelsen for å hjelpe utviklere å utføre vanlige oppgaver som å bygge og kjøre appen eller installere plugins. CLI lar deg også initialisere et prosjekt. Ikke bare vil du opprette en mappe med PhoneGap-biblioteket inni, men det vil også generere et programmets skjelett. For å initialisere prosjektet, skriver du bare følgende kommando:

phonegap lage audero-feed-leser com.audero.free.utility.auderofeedreader "Audero Feed Reader"

Det første argumentet angir navnet på katalogen som skal opprettes. De to andre argumentene er valgfrie, og angi henholdsvis ID og navn på appen. Når du kjører kommandoen ovenfor, ser du følgende struktur inne i prosjektets rotmappe:

• .cordova: Brukes til bakgrunnskompatibilitet med Cordova-verktøy.
• fusjonerer: I denne mappen kan du legge til hvilken som helst plattformspesifikk tilpasning, slik at du ikke trenger å endre kildefilene hver gang du jobber med et prosjekt.
• plattformer: Stedet hvor de installerte installatørene skal plasseres, hvis du skal kompilere prosjektet lokalt.
• plugins: Mappen der du finner pluginene til prosjektet ditt.
• www: Mappen som inneholder kildefilene og konfigurasjonen av programmet. Den inneholder "css", "js" og "img" -mappen der du kan sette de respektive filene. I tillegg har den også en "res" -mappe hvor du plasserer ikoner og sprutskjermer.

---

3. Installer PhoneGap Plugins

Som vi har sett i introduksjonen, vil vi utnytte noen av PhoneGap-kjerneplugger. For å installere dem må du bruke CLI-typen kommandoen nedenfor:

 phonegap local plugin legg til PLUGIN_REPOSITORY_URL

I det ovennevnte, PLUGIN_REPOSITORY_URL er lagringsadressen til pluginet du vil bruke. Siden vårt prosjekt vil bruke både Notification og Connection core plugins, må du skrive følgende kommando:

 phonegap local plugin legg til https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git phonegap local plugin legg til https://git-wip-us.apache.org/repos/asf /cordova-plugin-network-information.git

Som den mest observante av deg kanskje har nevnt, har jeg ikke lagt til lagringsprogrammet. Årsaken er at fra og med versjon 3.0, tilgang er det bygget inn i Cordova.

---

4. Legg til PhoneGap-rammer

Nå som vi har PhoneGap og dens plugins på plass, må vi legge til de to andre bibliotekene som trengs: jQuery (Jeg skal bruke versjon 2.0.3) og jQuery Mobile (versjon 1.3.1).

Før vi går videre, er det viktig å forstå hvorfor jeg valgte 2.x-grenen av jQuery. jQuery har to store grener som for tiden er i utvikling: 1.x og 2.x. Den versjonen du bør bruke, avhenger av hvor du bruker rammen og hvilke nettlesere du har til hensikt å støtte. Mens jQuery 1.x støtter alle versjoner av Google Chrome, Firefox, Safari, Opera og Internet Explorer fra versjon 6, droppet 2.x-versjonen støtten til Internet Explorer 6, 7 og 8 i bytte for en mindre størrelse og bedre ytelse. Siden vi utvikler et mobilprogram med Cordova, trenger vi ikke å bekymre oss for Internet Explorer 6-8. Faktisk er Microsoft-operativsystemene støttet av Cordova Windows Phone 7 og Windows Phone 8 som kjører henholdsvis på Internet Explorer 9 og 10. Derfor kan vi trygt bruke jQuery 2.x!

Med det ovennevnte forståelsesstedet kan vi fortsette med våre grunnleggende trinn for å sette opp Audero Feed Reader. Når du laster ned bibliotekene, flytter du jQuery-filen og JavaScript-filen (minifisert versjon) av jQuery Mobile inne i "js" mappe. Da må vi sette stilarket til jQuery Mobile (jquery.mobile-1.3.1.min.css) inne i "Css" mappe. Til slutt plasserer vi de jQuery Mobile bunte bildene i "Img" mappe. Siden vi har litt endret den opprinnelige strukturen til jQuery Mobile, må vi justere stiene som peker på bildene i CSS-filen. Vi trenger spesielt å erstatte "bilder /" delen med denne strengen "... / img /". Husk at strengen skal byttes 5 ganger.

---

5. Opprett prosjektfilstruktur

Nå som vi har prosjektrammen på plass, må vi opprette mappen "www", HTML-filene som kreves, angi standardprogrammets ikon, justere konfigurasjonsfilen for Adobe PhoneGap, og endre standardskjermbildet. Det er mye, så la oss fortsette å flytte!

I løpet av denne serien lager vi følgende filer:

• index.html: Inngangspunktet for søknaden, der vi legger linkene til bibliotekene som brukes.
• add-feed.html: Dette er siden som inneholder skjemaet som brukes til å lagre en ny feed.
• list-feeds.html: Dette viser listen over lagrede strømmer.
• show-feed.html: Dette viser oppføringene til den oppgitte feeden. I tillegg har den en navbar som har en knapp for å slette feedet, og en annen for å hente flere oppføringer fra feedet.
• aurelio.html: Kredittsiden inneholder informasjon om forfatteren.
• feed.js: Denne filen inneholder en klasse, kalt Mate, brukes til å lage, slette og hente lagrede feeder. Den er basert på Cordova Storage plugin.
• application.js: Denne filen inneholder en annen klasse, kalt applikasjon, som har metoder for å initialisere applikasjonens sider og legge til håndteringsverktøy på enkelte sideelementer (for eksempel navbarknappene som tidligere er nevnt).
• config.xml: Denne XML-filen inneholder metadataene til prosjektet vårt og lagrer innstillinger som appens navn og beskrivelse.

---

6. Opprett hjemmesiden

Som forklart i forrige avsnitt, siden jQuery Mobile laster sider med Ajax, må vi laste inn CSS og JavaScript-filene ved inngangspunktet for programmet vårt, det vil si index.html fil. Denne siden viser tittelen og beskrivelsen av programmet og har alle knappene for tilgang til resten av appen.

Full kilde til hjemmesiden er vist nedenfor:

                
 
 
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. 
 Legg til Feed List Feed 
  
  

Som du kan lese fra koden ovenfor, er knappene inne i og