Share
Vill du lära dig hur du använder PhoneGap, men vet inte vart du ska komma igång? Följ med oss när vi sätter samman "Sculder", inte bara en hyllning till en utmärkt science fiction-tv-serie, utan en fulländad inbyggd mobilapplikation för den troende i dig!
Vi slutade i den sista handledningen i denna serie strax efter att vi fått vår ansökan i Phonegap-ramen och väntade på att lägga till vår sista funktion: enhetskameran. Tanken bakom denna handledning är att tillåta användaren att ta ett foto med kameran och sedan ladda upp den till en server. Vi täcker inte själva uppladdningen av bilden, men lämnar platsen för funktionaliteten som ska läggas till. Du kan hitta många exempel på olika implementeringar för att ladda upp bilder via PHP, Ruby och andra webbsidor på andra sidor på nätet. Istället kommer denna handledning att fokusera på att ta bilden, visa bilden som tas och ge användaren en varning om att bilden har laddats upp (den funktion som servern kan bli avbruten när den returnerar ett framgångsrikt uppladdningsmeddelande).
Det första vi behöver göra är att lägga till en knapp på vår sida:
Därefter måste vi lägga till lite styling för knappen för att få det att se lite snyggare ut. När vi utvecklar för anständiga webbläsare kan vi dra nytta av vissa CSS3-stilar.
button.camera-control bakgrundsfärg: # f3f3f3; Bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # f3f3f3), färgstopp (50%, #dddddd), färgstopp (50%, # d2d2d2) färgstopp (100%, #dfdfdf)); bakgrundsbild: -webkit-linjär-gradient (topp, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); bakgrundsbild: linjär gradient (topp, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); gränsen-höger: 1px solid #dfdfdf; gränsbotten: 1px fast # b4b4b4; gränsen-höger: 1px solid #dfdfdf; -webkit-gräns-radie: 5px; gränsstråle: 5px; -webkit-box-skugga: inset 0 1px 0 0 vit, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; boxskugga: inset 0 1px 0 0 vit, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; färg: # 666; display: block; typsnitt: fet 16px "helvetica neue", helvetica, arial, sans-serif; marginal: 10px auto; vaddering: 7px 0; textskugga: 0 1px 1px #fff; bredd: 150px; button.camera-control: svep bakgrundsfärg: # e5e5e5; bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # e5e5e5), färgstopp (50%, # d1d1d1), färgstopp (50%, # c4c4c4) färgstopp (100%, # b8b8b8)); bakgrundsbild: -webkit-linjär gradient (topp, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); bakgrundsbild: linjär gradient (topp, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); -webkit-box-skugga: inset 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; boxskugga: inset 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; button.camera-control: aktiv -webkit-box-skugga: inset 0 0 30px 0 # 999999, 0 1px 0 0 white; boxskugga: inset 0 0 30px 0 # 999999, 0 1px 0 0 vit;
Om du nu kör och testar din app (antingen simulatorn eller på en enhet) ska du ha en sida så här:
Nu måste vi knyta in funktionaliteten. Först börjar vi med capturePhoto () funktion som startar kameran:
funktion capturePhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, quality: 60);
Succesfunktionen, ladda upp foto, är nästa som ska skrivas. Den här funktionen laddar upp fotot till vår server, matar ut bilden till skärmen och ger även användaren en anmälan om att bilden har laddats upp. Låt oss börja med att mata ut bilden till skärmen:
funktion uploadPhoto (data) // det här är var du skulle skicka bildfilen till servern // utmatningsbild till skärmkameraPic.src = "data: image / jpeg; base64," + data;
Ett av de API-telefoner som vi inte riktigt tittade på tidigare, men vi kommer att använda här, är anmälnings API. Meddelande API är för att varna användaren för en utförd åtgärd, som varna() Javascript-funktionalitet, men skräddarsydd för den specifika enhet som den körs in. Den har också förmågan att pipa, vibrera eller helt enkelt popup och varna ett dialogmeddelande. För den här appen ska vi bara använda notification.alert (), vilken är en dialogruta som kan acceptera några anpassningsbara alternativ. Den grundläggande användningen är:
navigator.notification.alert (meddelande, alertCallback, [title], [buttonName])
Inom vårt ladda upp foto funktion, vi ska använda notification.alert () för att visa ett meddelande om att fotot har laddats upp till servern. Vår kod ser så här ut:
Accentsconagua
navigator.notification.alert ('Ditt foto har laddats upp', // meddelande okay, // callback 'Photo uploaded', // title 'OK' // knappnamn); Vi måste också skriva Okej funktion för att se till att vi inte stöter på några fel när vi kör vår kod. Det kan göra vad du vill, men det används bättre när det är bundet till servern. För tillfället förblir funktionen tom.
Vår ladda upp foto() funktionen ser nu ut så här:
funktion uploadPhoto (data) // det här är var du skulle skicka bildfilen till servern cameraPic.src = "data: image / jpeg; base64," + data; // Framgångsrik uppladdning till servern navigator.notification.alert ('Ditt foto har laddats upp', // meddelande okay, // callback 'Photo uploaded', // title 'OK' // buttonName); // uppladdning har misslyckats misslyckas / * om (failedToUpload) navigator.notification.alert ('Ditt foto har misslyckats med att ladda upp', misslyckades, 'Foto inte uppladdat', 'OK'); * / fungerar okej () // Gör något Du måste nu köra programmet på en enhet, eftersom simulatorn inte har tillgång till en kamera. Efter att ha tagit en bild får du följande varning:
Vår app är nu klar och vi är redo att exportera den som en fungerande applikation och skicka den till butikerna!
Observera att för att distribuera en applikation i Apples App Store måste du ha ett betalt utvecklarcertifikat från Apple.
Exportera till iOS-plattformen kan vara lite av en utmaning, men så länge du har alla dina certifikat förinstallerat och synkroniserat med Xcode (vilket du borde ha gjort innan du kan testa på en enhet) ska det inte vara för utmanande när du har gjort det en gång. Om du dubbelklickar på ditt projekt i Xcode och går till Bygginställningarna, se till att din kodsigneringsidentitet används för applikationen.
Du behöver nu gå till Produkt => Arkiv och skicka appen till arkivet (finns i arrangörsfönstret). Det är möjligt att du kan få ett fel i linje med NSAutomaticpool är inte tillgänglig, detta beror på automatisk referensräkning (vilken är ny). PhoneGap stöder det inte för tillfället, så vi behöver bara stänga av det i byggnadsinställningarna för projektet. Om du går till byggnadsinställningen och söka efter -CLANG_ENABLE_OBJC_ARC du hittar den och byter den till "nej".
När det är klart kan du gå till iTunes Connect och börja konfigurera din app där. När du har loggat in, klicka på "Hantera program" och "Lägg till ny app". Gå igenom guiden, lägg till iTunes-ikonen (512x512px i storlek) och minst en skärmdump av programmet. Det finns några andra obligatoriska fält som ett SKU-nummer (det här är ett spårningsnummer för dig själv. Jag använder personligen 0001 för att starta och fortsätta därifrån) och en beskrivning. När du har fyllt i formuläret klickar du på Skicka.
När du är klar kommer du att presenteras med följande
Först kommer din applikationsstatus att vara "Förbered för uppladdning", så du måste klicka på "Visa detaljer" och sedan "Binär uppladdning". När du har gått igenom detta kommer din status nu att vara "Klar för uppladdning".
Tillbaka i Xcodes organisator kan vi köra Validate-alternativet för att kontrollera att vår app är bra att skickas till App Store och förhoppningsvis kommer appen att fortsätta utan några valideringsfel.
Notera: Hoppa genom alla hojlarna som Apple presenterar är inte en lätt uppgift att behärska. Om du får olika fel att göra med att bygga misslyckas eftersom provisioning-profiler inte kunde hittas etc, etc, gör en snabbsökning på Google och du hittar lösningen. Det finns 100 olika scenarier med miss matchade certifikat som jag har mött när jag försökte bygga en app för iOS, allt löst genom att använda Google. Om du konsekvent löser problem kan du lämna en kommentar nedan och jag försöker hjälpa!
Nu när appen är giltig kan vi skicka in den till App Store. Vi klickar in, kontrollera att vår ansökan och identitet är korrekta och vänta sedan på uppladdningen.
När du är klar kan du logga in på iTunes Connect och se att appen är "Väntar på granskning". Det kan ta upp till 14 dagar innan appen finns i App Store, så vänta lite att vänta lite.
Tack och lov, efter alla möjliga smärtor som du kanske har gått igenom med iOS-exporten, är Android lättare. Anta att du använder Eclipse för din Android-utveckling, allt du behöver göra är att ta bort oanvända funktioner från manifestfilen och högerklicka på projektet och gå ner till Android Tools => Exportera signerad programpaket. När du har gått igenom guiden för att exportera ditt paket måste du se till att du skapar en nyckelbutik. Du kommer att sluta med en .APK fil, vilket är vad vi ska ladda upp till Android-marknaden.
Gå vidare till Android Market publishers webbplats här och logga in. Om det här är din första gången måste du registrera dig för ett konto (med ditt befintliga Google-konto), betala $ 25 och konfigurera ett Google Wallet-konto. När du är registrerad och inloggad kan du fortsätta och ladda upp din .APK fil. Det är en mycket enklare process än iOS-rutten. Om du känner att formuläret är överväldigande eller du inte är osäker på något, kolla in Shane Conder & Lauren Darceys handledning här på mobiletuts, eftersom de går igenom det steg för steg. Deras hela serien om Android-utveckling är värt att läsa om du är intresserad av att ta din utveckling vidare!
När du är klar, tar det ingen tid innan din app är på marknaden och redo att bli såld.
Som framgår av den första handledningen i denna serie kommer vi att dra nytta av PhoenGaps molnbyggningssystem som finns på build.phonegap.com. I det långa loppet kostar den här tjänsten pengar, men det andra alternativet att köra olika olika SDK-filer över olika operativsystem och sedan kan porten av appen över var och en vara mer tidskrävande och krånglig än de extra pengar det kostar att använda tjänsten är värd.
Allt vi behöver är a blixtlås fil som innehåller vår HTML, CSS och JavaScript. Överför det till tjänsten och du kommer då att tas till en "Din Apps" -skärm där du får se din app tillgänglig i sina olika format:
Det är enkelt att klicka och ladda ner för att få rätt byggnad. För att komma igång för Blackberry, måste vi skicka in vår app till deras "App World". Gå över till App World här och klicka på "Kom igång". Fyll i den ganska raka formuläret och vänta sedan.
NOTERA: Tyvärr, för närvarande (2/8/2012), Blackberry har uppenbarligen en eftersläpning av "Leverantör" -applikationer. Jag har väntat från början av januari för att bli godkänd men har hittills inte haft någon sådan tur. De kör för närvarande en Playbook-marknadsföring för de som vill konvertera sina Android-appar, vilket orsakar eftersläpningen. Om du är intresserad av att anmäla dig till Blackberry Vendor, registrera dig ASAP.
För de andra enheter som stöds av PhoneGaps cloud build-service är det värt att registrera sig på deras relevanta utvecklingswebbplatser: Nokia och webOS. De är väldigt lika och fulla med dokumentation för att ladda upp applikationer till sina relevanta marknader. De följer samma typ av process (Registrera, ladda upp app, ladda upp marknadsföringsmaterial, vänta) och är rimligen enkla att följa.
Vi har nu avslutat vår app, exporterat den och laddat den upp till iOS App Store samt Android Market. Vi använde också PhoneGaps byggservice för att få en version av vår app på andra plattformar som vi kanske vill stödja.
Phonegap går från styrka till styrka just nu och fortsätter att växa (version 1.4 har nyligen släppts). Det är väl värt att lära känna denna SDK om du bara har börjat i mobilutveckling och inte har någon förståelse för de inbyggda programmeringsspråk bakom Android eller iOS-plattformarna. Förhoppningsvis har denna handledningsserie visat dig hur man gör just det!
