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!
I den sista delen av denna serie fick vi vår webbapp igång med lite grundläggande struktur och övergångar mellan sidor. I den här delen ska vi fortsätta arbeta med att fylla i de delar av appen som kan köras utan PhoneGap och skapa vårt PhoneGap-projekt, redo för integrationen.
Innan vi började ville jag täcka en fråga som jag alltid får fråga. Det här är en fråga som jag en gång frågade, och utan tvivel kanske du också har bett. Namnlösa: Hur debuggar jag en webbapp på en mobil enhet?
Det finns ett antal sätt att felsöka på en enhet. Du kan gå i grundskola och använda alert (något);, men att ha varningar överallt är både ineffektivt och kan hamna i produktionskoden (så irriterande!). Du kan använda debug-konsolen i Safari på en iOS-enhet, som finns i Inställningar -> Safari -> Utvecklare, men inte alla enheter använder Safari eller har en debug-konsol. Dessutom ger denna konsol minimal information.
Om jag bara behöver använda en JavaScript-konsol för att fånga en console.log (), eller kanske utföra vissa JS på enheten för att kontrollera något, jag gillar att använda jsconsole.com. Det är en av de enklaste metoderna för att använda en konsol på din enhet och det finns till och med en iOS-app tillgänglig. För att starta en session på jsconsole.com, skriv bara :lyssna och du får då en skript taggutskrift som ingår i din sida. Starta upp din app och du kommer se att anslutningen händer i konsolen. Du kan nu exekvera JS i konsolen och se den reflekteras på enheten eller logga till konsolen i din kod och se den här. Se videon nedan för en demonstration av detta:
För mer hjälp på jsconsole, se här.
Ett annat alternativ är WeInRe (Web Inspector Remote). Först startade som ett självständigt projekt, är WeInRe nu en del av PhoneGap-familjen och finns på debug.phonegap.com. Uppsättningen liknar jsconsole, men vad du faktiskt får är en WebKit inspektör, som Chrome eller Safari. Se videon nedan för ett exempel:
Ett annat alternativ är Socketbug, vilket är bra, men kräver att nod och socket.io ska installeras och installeras, vilket tyvärr ligger utanför ramen för denna handledning. Om du emellertid känner dig äventyrlig och vill ge Socketbug ett försök - det är värt det.
Det är de felsökningsverktyg som jag använder. Nu kan vi börja lägga till några funktioner!
En av de funktioner som vi kan implementera utan ett PhoneGap API är Twitter-flödet. Den här funktionen kommer helt enkelt att lista ett flöde av tweets som matchar en viss sökterm. Tack och lov kan Twitter returnera data i JSON-format när vi kör en fråga på search.twitter.com. Om du använder följande URL http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, Du får ett JSON-svar fyllt med tillräckligt med data för att fylla i en lista.
För att få vår data på sidan och visa den på ett bra sätt, kommer vi att använda templerande. Det finns en massa mallmotorer där ute och de är alla värda att titta på, mustasch är en mycket populär och mycket kraftfull. jQuery har också en som jag tycker är perfekt för vad vi vill uppnå.
På tweetsidan kommer jag att ha en tom ul och a div behållare som är dold på sidan. Inom behållaren är koden som jag vill använda som en mall. I det här fallet är det enkelt li element med någon grundläggande markering som håller den twitterinformation vi vill visa. Det kommer att vara i en manus block som har ett unikt ID och en typ av type = "text / x-jquery-tmpl", Det här är så att webbläsaren inte kör det som JavaScript. Twitter-templerande motor använder $ som platshållare för de data som vi kommer att få från vår JSON data. Tweetsidan ser nu något ut så här:
Nu måste vi skriva vår funktion som kommer att ringas när som helst vi laddar denna sida. Den här funktionen kommer att gå ut på Twitter och få vårt flöde:
Accentsconagua
funktion getTweets () var q = "ufo + spotted" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", funktion (data) $ ("# tmpl-tweets"). tmpl (data.results) .appendTo ("# tweets") ;); Jag ska få sidan att ladda först, så jag har ställt sidans klass till aktuell. Nu behöver vi bara lägga till lite stil på tweetsna, så de visas lite trevligare.
/ ** Tweets Styling ** / #tweets list-style: none; padding: 10px; #tweets li font-size: 12px; överflöde: gömd; margin-bottom: 20px; #tweets li h2 font-size: 14px; marginal: 0; .avatar margin-right: 10px; #tweets li a, #tweets li span float: left; #tweets li span width: 70%;
Nästa gång vi startar appen borde vi få följande.
Den andra funktionen som vi kan implementera innan vi gör phonegap integrationen är kartfunktionen. Vi ska använda Google Maps API för att skapa en enkel karta och sedan använda vissa kartdata för att släppa markörer. Varje markör indikerar UFO-observationer.
För detta kommer vi att använda JavaScript API, för närvarande på version 3. En fullständig introduktion till kartprogrammet API är inte tillgänglig för denna handledning, men du hittar all dokumentation som finns här, liksom genomförandeprover. Om du följer handledningen här hittar du hur du implementerar en grundläggande karta. Vi kan använda samma kod för att implementera en grundläggande karta och sluta med följande:
Nu kan vi gå till dokumentationen som täcker markörerna, som finns här. Nu kan vi släppa några grundläggande markörer på vår karta vid belastning. Markörerna skulle representera platser för observationer med data från de fotografier som har tagits och laddat upp av användare av ansökan. Vi skulle ha en tjänst som körs på en server som kan returnera data via Ajax, förmodligen i JSON-formatet. Återigen är upprättandet av denna tjänst en hel handledning i sig, men för varje post skulle vi skapa en markör för kartan med hjälp av koden i demo.
var markör = nya Google.maps.Marker (position: newLatlng, map: map, title: "New Sighting");
Efter att kartan laddats, skulle markörerna läggas till. Om du läser igenom dokumentationen för Google API hittar du andra alternativ för markörerna - som att visa dem med bilder och anteckningar. Det är värt att utforska de andra alternativen och komma fram till olika implementeringar.
Det handlar om så mycket som vi kan göra innan vi kommer till PhoneGap. Vår senaste funktion kräver användningen av kameran, så låt oss fortsätta och börja konfigurera vårt PhoneGap-projekt. Kolla in introduktionen till PhoneGap här om du inte redan har.
Ikoner är en mycket viktig del av ansökan. Det är bilden som representerar din ansökan överallt, och det finns vissa riktlinjer du vill följa för att se till att det ser bra ut överallt det kommer att ses. Det finns ett bra blogginlägg här om ikonstorlekar och de riktlinjer som ska följas när du skapar en ikon. Jag brukar ta en 512x512 ikon och skala ner därifrån till alla storlekar som behövs.
Du måste också skapa en startbild / stänkskärm för din app.
När vi har standard PhoneGap-programmet körs på vår simulator och / eller testenhet. Vi kan gå igenom huvudsidans sida på Xcode-mallen för PhoneGap. Det första jag vill försäkra mig om är att enhetens meny är inställd på iPhone. Vi skulle kunna distribuera till iPad även om vi ville ha det, men det kan finnas några CSS-ändringar som vi skulle vilja göra först. För tillfället håller jag bara på iPhone. Kontrollera alla enhetens orienteringar, eftersom jQuery Mobile sorterar ut vår layout beroende på orientering. Du kan dra och släppa bildfilerna i sina tilldelade kortplatser på sammanfattningssidan.
Nu när du startar din ansökan kommer du att hälsas med din nya appikon och startsidan. Kopiera nu över de filer du har arbetat från i www mapp. Starta appen och kontrollera att allt fungerar OK.
När du har satt upp ditt projekt i Eclipse (på samma sätt som vi gjorde vårt testprojekt i första delen här) behöver du ha tre ikonstorlekar förberedda för din ansökan. Hög densitet (72x72), Medeltäthet (48x48) och Låg densitet (36x36). Dessa ikoner ersätter standardikonen som kan hittas i res mapp. Lämpliga akronymer är hdpi, mdpi och ldpi som står för höga, medelstora respektive låga. De bilder du vill använda som din stänkskärm bör också gå i dessa mappar.
För att stänkskärmen ska fungera för Android måste vi lägga till och ändra vår DroidGap klass för att inkludera stänkbilden på belastning. Lägg till:
super.setIntergerProperty ("splashscreen", R.drawable.splash) Därefter loadUrl behöver en timeout som läggs till den.
super.loadUrl ("fil: ///android_asset/www/index.html", 5000); Din fil ska nu se ut som följer:
Kör programmet och se till att allt fungerar OK.
Vi är nu på den punkten där vi är redo att genomföra våra senaste två funktioner: enhetskameran och lokala lagringsalternativ. Att göra det kommer att bli täckt i framtida handledning i denna serie. Denna serie kommer också att gå genom att skicka in vår app till de olika appbutikerna, så var noga med att följa med!
