Share
Vil du lære å bruke PhoneGap, men vet ikke hvor du skal komme i gang? Bli med oss når vi setter sammen "Sculder", ikke bare en hyllest til en utmerket science fiction-tv-serie, men en fullverdig, mobil applikasjon for den troende i deg!
I de to siste delene har vi installert Phonegap, fått en god verdenskrig, og så tatt en titt på noen av funksjonalitetene som Phonegap tilbyr oss. I løpet av de neste to delene vil vi bygge vår app og ta en titt på noen utfordringer som kan oppstå ved å gjøre det.
Før vi kommer ned til kode, skal vi få litt planlegging. På den måten vet vi nøyaktig hva vi vil appen for å oppnå, og kan ha en god ide om brukeropplevelsen. Du kan oppnå noe godt arbeid fra bare å trykke på koden med en gang (noe jeg gjør hele tiden), men til og med bare litt planlegging på forhånd kan gå langt. Å tenke gjennom scenarier i hodet ditt, vil tillate deg å håndtere problemer tidlig.
Først må vi vite hvilke kjerneelementer i søknaden vil være, hvordan de skal nås, og hvordan de skal brukes. Appen vi skal bygge vil ha følgende funksjoner:
Hvis du vil gjøre wireframes for prosjektene dine, er de alltid gode til å sikre at du vet hva du vil at programmet skal gjøre, og også omtrent hva du vil at det skal se ut. Hvis programmet skal være stort og ha mye funksjonalitet, vil jeg gjøre noen wireframes, men i dette tilfellet tror jeg at søknaden er liten og så kan vi sortere ut den ganske grunnleggende funksjonaliteten når vi bygger appen.
Hvis du vil lage wireframes, er det noen ganske gode verktøy der ute for å hjelpe deg.
sangfugl er et onlineverktøy der du kan lage wireframes i nettleseren. Du kan prøve det ut her
Balsamiq er et Adobe Air-program med en hel masse maler og elementer. Den har en sketchy stil som Mockingbird også. Du kan laste den ned her.
OmniGraffle er en mac-applikasjon som du kan få en 14-dagers gratis prøveversjon her. Omnigraffle er min personlige favoritt og det er mange maler på Graffletopia for deg å bruke.
Utseende og følelse er et viktig aspekt ved enhver applikasjon. Når det gjelder mobilapplikasjoner, er det et område som mange ofte får feil (hovedsakelig på grunn av manglende forståelse). Jeg er ikke en designer, og jeg lader ikke til å være en, så hvis jeg ikke har en designer til stede for å gjøre designene, vil jeg vanligvis bare designe i nettleseren når jeg kode (eller på enheten i denne saken).
Hvis du vil sørge for at appen din ser ut og føles bra å bruke (og du er ikke en), ansett en! Som en utvikler koster gode designere penger. Mens du kanskje ikke vil forkjøre etter noe du kanskje kan gjøre selv, er det best å ha noen som forstår design for å gjøre dette for deg. Appen din vil være hundre ganger bedre for å gjøre det!
Det har vært noen flotte designopplæringer her på Mobiletuts +, som gir deg en god forståelse av hva som kreves når du dykker inn design for mobil.
En av de viktigste hensynene til design er mengden bilder du bruker. Hvis designet ditt vil kreve at du hakker opp PSD-filer og bruker mange bilder - noe er galt - vi vil gjøre så mye som mulig med CSS, og når vi bygger for ganske moderne nettlesere, kan vi mobilisere mange nyere CSS3 teknikker for ønsket utgang. Når du begynner å bruke mange bilder, begynner det å påvirke ytelsen til applikasjonen. Når vi må bruke bilder, det er sannsynlig, bør vi bygge opp en sprite (en bildefil som inneholder alt bildene våre) for å lagre HTTP-forespørsler. Det er også mulig å cache bilder på enheten eller også bruke lokal lagring.
Nå er det på tide å komme inn på å faktisk kode HTML, CSS og Javascript for vår søknad.
Vi vil begynne med noen ganske grunnleggende HTML.
Sculder
CSS-støtte på mobil er bra, men det er ikke bra. Mens mange vanlige stiler støttes, er det noen "gotcha" også. En av mine favorittressurser for å sjekke støtte er caniuse.com. Selv om nettstedet ikke inneholder hver nettleser for mobil, er det en nyttig referanse.
Gå videre og opprett et nytt, stilig stilark og ta med det i hodet på html. Som du kanskje allerede gjør med programmene for nettleseren, kan du sette opp noen grunnleggende tilbakestillingsstiler.
html, kropp margin: 0; polstring: 0; grense: 0; kropp font-family: Arial, sans-serif; linje-høyde: 1,5; font-size: 16px; bakgrunn: #fff; padding: 5 px; farge: # 000; ord-wrap: break-word; -webkit-tekststørrelsesjustering: ingen; h1, h2, h3, h4, h5, h6 font-weight: normal; p img float: left; margin: 0 10px 5px 0; polstring: 0; img grense: 0; maksimal bredde: 100%;
Deretter skal vi legge til noen grunnleggende HTML - en topptekst og en del fanekontroller.
Sculder
Først skal jeg gi bakgrunnen en farge og deretter stilte topptekst og bunntekst. Jeg skal fortsette og legge dem ut på en ganske gjennomsnittlig måte, fikse dem til toppen og bunnen av skjermen og bruke iScroll for å gi oss muligheten til å overvinne mangelen på støtte for stilling: fast i de fleste enheter.
/ * Hovedstiler * / kropp bakgrunn: # 222; header topp: 0; venstre: 0; høyde: 45 px; bunntekst bunn: 0; venstre: 0; høyde: 48px; background-color: # c27b00; border-top: 1px solid #eee; header, footer background-color: # deb500; padding: 0; stilling: absolutt; z-indeks: 2; font-size: 20 piksler; bredde: 100%; tekst-Justering: center; color: # f3f3f3; font-vekt: bold; tekstskygge: 0 -1px 0 rgba (0,0,0,0,5); linje-høyde: 45 px; h1 margin: 0; tekst-transformer: store bokstaver; #wrapper posisjon: absolutt; z-indeks: 1; top: 45 piksler; bottom: 48px; venstre: 0; bredde: 100%; flow: auto; # hovedinnhold posisjon: absolutt; z-indeks: 1; bredde: 100%; padding: 0;
Deretter skal vi laste ned iScroll 4 herfra, og inkludere iscroll-lite.js fil. Dette gir oss grunnleggende funksjonalitet som vi trenger. Vi vil også lage en app.js fil for å håndtere alle våre JavaScript-funksjoner. Inkluder disse filene i hodet på din index.html.
I vår Javascript-fil må vi starte.
Accentsconagua
var theScroll; funksjonsrulle () theScroll = ny iScroll ('wrapper'); document.addEventListener ('DOMContentLoaded', bla, falsk); Nå skal vi legge til vår fane i vår footer.
Vi skal style vår faneblad slik at hvert element tar opp en tredjedel av tilgjengelig ledig plass.
# faneblad margin: 0; padding: 0; # tabulator li display: inline; float: venstre; bredde: 33.333%; # tabulator en color: #cdcdcd; skjerm: blokk; font-weight: bold; overløp: skjult; stilling: relativ; tekst-align: center; tekst-dekorasjon: ingen; -webkit-touch-callout: none;
Alt dette er ganske gjennomsnittlig CSS som du kan bruke på en nettside. Den eneste som kan være den merkelige ut til deg er -webkit-touch-callout: ingen. Denne regelen er å stoppe standardhandling når en bruker holder ned en kobling.
Det er alt vi skal gjøre med fanefeltet, men du vil kanskje legge til ikoner til din, akkurat som de fleste apps har. Bare husk å sørge for at du bruker sprites for deg bilder for å holde treff på ytelse minimal.
Nå som vi har skjelettet til Applikasjonen klar, kan vi se på personsøk via vår app. Det er mange gode måter å gjøre dette på. Den ene er å laste alt opp foran og deretter skjule sidene vi ikke vil vise først, så på et klikk på en kobling kan vi bruke CSS til å skyve en ny container i visningen. Et annet alternativ er å bruke Ajax og lage en Ajax-forespørsel om en HTML-fil og deretter skyve den inn i visning. Siden dette er en relativt liten applikasjon, er det ingen skade i å laste alt opp foran og bruke CSS for hovedparten av sidebehandling, akkurat som jQuery Mobile gjør.
Først vil vi sette opp noen sider inne i vår hovedbeholder.
Så sørg for at koblingene href tilsvarer disse.
Nå vil vi gjemme alle sidene og bare vise siden med nåværende klasse.
#pages> div display: none; #pages> div.current display: block;
Deretter må vi dykke inn i noen JavaScript. Jeg skal fortsette og bruke jQuery for resten av prosjektet (ikke jQuery mobil). Hvis du vil, kan du jQuerify iScroll init (eller ikke). Pass på at du slipper den minifiserte versjonen av jQuery til JS-katalogen din også.
Først skal jeg binde et klikk til ankrene i kategorien, da vi bruker jQuery 1.7, kan vi bruke den nye .på() funksjon. Vi vil da forhindre standardhandling av en kobling, lagre href av den klikkte lenken i en neste side variabel, fjern nåværende klassen fra den nåværende siden og til slutt legge til klassen på den klikkte siden.
$ ('# tabulat a'). på ('klikk', funksjon (e) e.preventDefault (); var nextPage = $ (e.target.hash); $ ("# sider .strøm"). removeClass ("current"); nextPage.addClass ("current");); Du vil nå ha veldig grunnleggende personsøking som innholdet divs Vil nå skjule og vise når koblingene er klikket.
Dette er og vil fungere helt fint, men for å legge til litt ekstra for personsøkingen, skal vi bruke noen CSS og gjøre overgangen mellom sidene litt finere med en grunnleggende fade i, visne ut.
Først må vi sørge for at sidene våre er plassert på en måte som gir oss litt kontroll over skjermen. Legg til følgende CSS.
#pages posisjon: relative; / * Oppdater denne stilen * / #pages> div display: none; posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%;
Nå skal vi bruke CSS animasjon for å animere sidens overgang. Først begynner vi med en generisk innstilling for animasjonsfunksjonen og timingen.
.i, .out -webkit-animasjon-timing-funksjon: lett-i-ut; -webkit-animasjon-varighet: 400ms;
Vi satte keyframes for animasjonen av keyframes.
@ -webkit-keyframes fade-in fra opacity: 0; til opacity: 1;
Til slutt setter vi Z-indeksen for å sørge for at siden vi nettopp ble bleknet, er på toppen.
.fade.in -webkit-animasjon-navn: fade-in; z-indeks: 5; .fade.out z-indeks: 0;
Nå må vi legge til noe mer JavaScript for å legge til og fjerne CSS-klassene på klikk. Først trenger vi en funksjon som vil ta en parameter, som vil være siden for å navigere til, da vil den legge til klassene som er nødvendige for å fade den nye siden inn og binde en funksjon til webkitAnimationEnd, dette vil da fjerne de nødvendige klassene. Funksjonen ser slik ut.
funksjonsside (toPage) var toPage = $ (toPage), fromPage = $ ("# sider .strøm"); toPage.addClass ("current fade in"). En ("webkitAnimationEnd", funksjon () fromPage.removeClass ("gjeldende fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Hvis du aldri har sett jQuery-metoden .en() før, sjekk ut dokumentasjonen, det er bare en måte å binde på og deretter fjerne.
Hvis du tester nå på enheten din, vil du legge merke til at hvis du klikker på den nåværende sidenkoblingen, vil den forsvinne. Vi må sette inn en hvis erklæring før vi kjører vår sidefunksjon for å sikre at vi ikke allerede er på den nåværende siden - hvis vi er, kan vi bare gå ut av funksjonen.
funksjonsside (toPage) var toPage = $ (toPage), fromPage = $ ("# sider .strøm"); hvis (toPage.hasClass ("current") || toPage === fromPage) return; ; toPage.addClass ("current fade in"). En ("webkitAnimationEnd", funksjon () fromPage.removeClass ("gjeldende fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Nå kan du dumpe litt tekst i hver sidebeholder og teste ut på en enhet.
Vi har nå begynt å bygge et webprogram og fått vår layout og personsøkingsarbeid. I neste del vil vi begynne å bygge ut våre sider, feilsøking på mobilen og få vår Phonegap-integrasjon startet.
