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!
Vi sluttet i den siste opplæringen i denne serien like etter å ha fått søknaden vår inn i Phonegap-rammen og venter på å legge til vår siste funksjonalitet: enhetskameraet. Ideen bak denne opplæringen er å la brukeren ta et bilde med kameraet og deretter laste det opp til en server. Vi vil ikke dekke selve opplasting av bildet, men lar rom for funksjonalitet bli lagt til. Du kan finne mange eksempler på ulike implementeringer for å laste opp bilder via PHP, Ruby og andre serverespråk på andre steder online. I stedet vil denne opplæringen fokusere på å ta bildet, vise bildet tatt og gi brukeren et varsel om at bildet er lastet opp (funksjonen som serveren din kan brann når den returnerer en vellykket opplastingsmelding).
Det første vi må gjøre er å legge til en knapp på vår side:
Deretter må vi legge til litt styling for knappen for å få det til å se litt finere ut. Når vi utvikler for anstendig nettlesere, kan vi dra nytte av noen CSS3-stiler.
button.camera-kontroll bakgrunnsfarge: # f3f3f3; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # f3f3f3), fargestopp (50%, #dddddd), fargestopp (50%, # d2d2d2) fargestopp (100%, #dfdfdf)); bakgrunnsbilde: -webkit-lineær-gradient (topp, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); bakgrunnsbilde: lineær gradient (topp, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); grense-høyre: 1px solid #dfdfdf; grensebunn: 1px solid # b4b4b4; grense-høyre: 1px solid #dfdfdf; -webkit-grense-radius: 5px; border-radius: 5px; -webkit-boks-skygge: innsett 0 1px 0 0 hvit, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; boks-skygge: innsett 0 1px 0 0 hvit, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; farge: # 666; skjerm: blokk; font: fet 16px "helvetica neue", helvetica, arial, sans-serif; margin: 10px auto; polstring: 7px 0; tekstskygge: 0 1px 1px #fff; bredde: 150px; button.camera-control: svever bakgrunns-farge: # e5e5e5; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # e5e5e5), fargestopp (50%, # d1d1d1), fargestopp (50%, # c4c4c4) fargestopp (100%, # b8b8b8)); bakgrunnsbilde: -webkit-lineær gradient (topp, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); bakgrunnsbilde: lineær gradient (topp, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); -webkit-boks-skygge: innsett 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; boks-skygge: innsett 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; button.camera-control: aktiv -webkit-box-shadow: input 0 0 30px 0 # 999999, 0 1px 0 0 hvit; boks-skygge: innsett 0 0 30px 0 # 999999, 0 1px 0 0 hvit;
Hvis du kjører og tester appen din (enten simulatoren eller på en enhet), bør du ha en side som dette:
Nå må vi knytte til funksjonaliteten. Først begynner vi med capturePhoto () funksjon som vil starte opp kameraet:
funksjon capturePhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, quality: 60);
Suksessfunksjonen, Last opp bilde, er det neste som skal skrives. Denne funksjonen laster opp bildet til serveren vår, sender bildet til skjermen, og gir også brukeren beskjed om at bildet har blitt lastet opp. La oss begynne med å utføre bildet på skjermen:
funksjon opplastingFoto (data) // dette er hvor du vil sende bildefilen til serveren // utgangsbilde til skjermkameraetPic.src = "data: image / jpeg; base64," + data;
En av Phonegap-APIene som vi egentlig ikke så på før, men vi vil bruke her, er varslings-API. Meldings API er for å varsle brukeren om en utført handling, som varsling() Javascript-funksjonalitet, men skreddersydd for den bestemte enheten som den kjører i. Den har også muligheten til å pipe, vibrere eller bare pop-up og varsle en dialogmelding. For denne appen skal vi bare bruke notification.alert (), som er en dialogboks som kan akseptere noen tilpassbare alternativer. Den grunnleggende bruken er:
navigator.notification.alert (melding, alarmCallback, [title], [buttonName])
Innenfor vår Last opp bilde funksjon, vi skal bruke notification.alert () for å vise en melding om at bildet har blitt lastet opp til serveren. Vår kode ser slik ut:
Accentsconagua
navigator.notification.alert ('Ditt bilde har blitt lastet opp', // melding okay, / / tilbakeringing 'Foto lastet opp', // tittel 'OK' // knappnavn); Vi må også skrive greit fungere for å sikre at vi ikke får feil når vi kjører koden vår. Det kan gjøre alt du vil ha det til, men det er bedre brukt når det er knyttet til serveren. For øyeblikket forblir funksjonen tom.
Våre Last opp bilde() funksjonen ser nå slik ut:
funksjon opplastingFoto (data) // dette er hvor du vil sende bildefilen til server cameraPic.src = "data: image / jpeg; base64," + data; // Vellykket opplasting til servernavigator.notification.alert ('Bildet ditt har blitt lastet opp', // melding okay, / / tilbakeringing 'Foto lastet opp', // tittel 'OK' // knappnavn); // opplastingen mislyktes Mislykkes / * hvis (failedToUpload) navigator.notification.alert ('Bildet ditt har ikke lastet opp', mislyktes, 'Bilde ikke lastet opp', 'OK'); * / funksjonen i orden () // Gjør noe Du må nå kjøre programmet på en enhet, da simulatoren ikke har tilgang til et kamera. Etter å ha tatt et bilde, får du følgende varsel:
Vår app er nå fullført, og vi er klare til å eksportere den som en fungerende applikasjon og sende den til butikkene!
Vær oppmerksom på at for å kunne distribuere et program i Apple App Store må du ha et utbetalt for utvikler sertifikat fra Apple.
Eksportering til iOS-plattformen kan være litt av en utfordring, men så lenge du har alle sertifikatene forhåndsinstallerte og synkronisert med Xcode (som du må ha gjort før du kan teste på en enhet), bør det ikke Vær for utfordrende etter at du har gjort det en gang. Hvis du dobbeltklikker på prosjektet ditt i Xcode og går til Bygg innstillinger, må du kontrollere at kodesigneringsidentiteten din brukes til applikasjonen.
Nå må du gå til Produkt => Arkiv og send appen til arkivet (funnet i arrangørvinduet). Det er mulig at du kan få en feil i tråd med NSAutomaticpool er utilgjengelig, dette skyldes automatisk referanse telling (som er ny). PhoneGap støtter det ikke for øyeblikket, så vi trenger bare å slå den av i bygginnstillingene for prosjektet. Hvis du går til bygginnstillingen og søker etter -CLANG_ENABLE_OBJC_ARC du finner den og bytter den til "nei".
Når det er gjort, kan du gå til iTunes Connect og begynne å konfigurere appen der. Når du har logget inn, klikker du på "Administrer programmer" og "Legg til ny app". Gå gjennom veiviseren, legg til iTunes-ikonet (512x512px i størrelse) og minst ett skjermbilde av programmet. Det er noen andre obligatoriske felt som et SKU-nummer (dette er et sporingsnummer for deg selv. Jeg bruker 0001 for å starte og fortsette derfra) og en beskrivelse. Når du er ferdig med å fylle ut skjemaet, klikker du på send.
Når du er ferdig vil du bli presentert med følgende
I første omgang vil din applikasjonsstatus være "Forbered for opplasting", så du må klikke "Vis detaljer" og deretter "Binær opplasting". Når du har gått gjennom dette, vil statusen din nå være "Klar for opplasting".
Tilbake i Xcodes organisator kan vi kjøre Validate-alternativet for å sjekke at vår app er god til å bli sendt inn i App Store, og forhåpentligvis kommer appen å komme seg uten valideringsfeil.
Merk: Hopping gjennom alle hoops som Apple presenterer, er ikke en lett oppgave å mestre. Hvis du får forskjellige feil å gjøre med å bygge feil, fordi det ikke er mulig å finne provisjonsprofiler etc, etc, gjør et raskt søk på Google, og du vil finne løsningen. Det er 100 forskjellige scenarier med mis-matchede sertifikater som jeg har møtt under forsøk på å bygge en app for iOS, alle løses ved hjelp av Google. Hvis du konsekvent løper inn i problemer, kan du gjerne legge igjen en kommentar nedenfor, og jeg vil prøve å hjelpe!
Nå som vår app er gyldig, kan vi sende den til App Store. Vi klikker på send, kontroller at vår søknad og identitet er riktige, og vent deretter på opplastingen.
Når du er ferdig, kan du logge på iTunes Connect og se at appen er "Venter på gjennomgang". Det kan ofte ta opptil 14 dager før appen din er i App Store, så forvent å vente litt.
Heldigvis, etter all mulig smerte du kanskje har gått gjennom med iOS-eksporten, er Android mildt lettere. Anta at du bruker Eclipse til Android-utviklingen din, alt du trenger å gjøre er å fjerne ubrukte funksjoner fra manifestfilen og deretter høyreklikke på prosjektet og gå ned til Android Tools => Export Signed Application Package. Når du har gått gjennom veiviseren for å eksportere pakken, må du sørge for at du oppretter en nøkkelbutikk. Du vil ende opp med en .apk fil, som vi vil laste opp til Android-markedet.
Gå over til Android Market utgiverens nettsted her og logg inn. Hvis dette er første gang her, må du registrere deg for en konto (ved hjelp av din eksisterende Google-konto), betale $ 25 og opprette en Google Wallet-konto. Når du er registrert og logget inn, kan du fortsette og laste opp din .apk fil. Det er en mye enklere prosess enn iOS-ruten. Hvis du føler at skjemaet er overveldende, eller du ikke er sikker på noe, sjekk ut Shane Conder & Lauren Darceys veiledning her på mobiletuts som de går gjennom det trinnvis. Hele serien deres på Android-utvikling er verdt å lese hvis du i det hele tatt er interessert i å ta din utvikling videre!
Når du er ferdig, tar det ingen tid før appen din er på markedet og klar til å bli solgt.
Som nevnt i den første opplæringen av denne serien, skal vi dra nytte av PhoenGaps skybyggingssystem som finnes på build.phonegap.com. I det lange løp koster det å bruke penger på denne tjenesten, men det andre alternativet for å kjøre ulike SDKer på tvers av ulike operativsystemer, og at porten av appen over hver enkelt kan være mer tidkrevende og problemfri enn de ekstra pengene det koster å bruke tjenesten er verdt.
Alt vi trenger er a glidelås fil som inneholder HTML, CSS og JavaScript. Last opp det til tjenesten, og du vil da bli tatt til et "Din Apps" -skjermbildet, hvor du vil se appen din tilgjengelig i ulike formater:
Det er et enkelt klikk og last ned for å få riktig bygg. For å komme i gang for Blackberry, må vi sende inn vår app til deres "App World". Gå over til App World her og klikk på "Kom i gang". Fyll inn den ganske enkle form og vent deretter.
MERK: Dessverre, for øyeblikket (2/8/2012), har Blackberry tilsynelatende en backlog av "Leverandør" applikasjoner. Jeg har ventet siden begynnelsen av januar for å bli godkjent, men har hittil ikke hatt noe slikt flaks. De driver for øyeblikket en Playbook-kampanje for de som er villige til å konvertere sine Android-apper, noe som forårsaker tilbakemeldingen. Hvis du er interessert i å registrere deg for å være en Blackberry-leverandør, melde du på ASAP.
For de andre enhetene som støttes av PhoneGaps cloud build-tjeneste, er det verdt å registrere seg på deres relevante utviklingssteder: Nokia og webOS. De er veldig like og fulle av dokumentasjon for opplasting av applikasjoner til deres relevante markeder. De følger samme type prosess (Registrer, Last opp app, Last opp markedsføringsmateriale, Vent) og er rimelig grei å følge.
Vi har nå avsluttet vår app, eksportert den, og lastet den opp til iOS App Store, i tillegg til Android-markedet. Vi brukte også PhoneGaps byggetjeneste for å få en versjon av vår app på de andre plattformene vi kanskje vil støtte.
Phonegap går fra styrke til styrke for øyeblikket og fortsetter å vokse (versjon 1.4 ble nylig utgitt). Det er vel verdt å bli kjent med dette SDK-en hvis du nettopp har startet i mobilutvikling og ikke har noen forståelse for de innfødte programmeringsspråkene bak Android- eller iOS-plattformene. Forhåpentligvis har denne opplæringsserien vist deg hvordan du gjør nettopp det!
