Share
Mobiele websites hebben een lange weg afgelegd, maar als u optimaal gebruik wilt maken van de hardware van een smartphone of als u in de iTunes App Store wilt worden vermeld, moet u uw code compileren. In deze zelfstudie laten we u zien hoe u met behulp van jQTouch een mobiele web-app maakt met een iPhone-uitstraling en deze vervolgens verandert in een native iPhone-app met Phonegap. Geen objectief-C nodig.
Om deze tutorial te voltooien, hebt u het volgende nodig:
PhoneGap is een open-source framework dat elke webapp in een native app voor iPhone, BlackBerry en Android kan veranderen. Het trekt uit
deze truc door uw webcode in a uit te voeren UIWebView, een ingebed exemplaar van Safari zonder de
werkbalken en knoppen van de stand-alone Safari-app. PhoneGap breidt deze basisfunctionaliteit vervolgens uit met behulp van de functies van de
iPhone SDK naar JavaScript-objecten die u in uw webcode kunt oproepen, zodat u eenvoudig functies zoals GPS, camera, contacten, trillingen kunt toevoegen,
Ondersteuning voor SQLLite en versnellingsmeter. En wanneer u klaar bent om uw app te distribueren, is PhoneGap 0.80 door Apple goedgekeurd!
Inbegrepen in de PhoneGap-distributie is alles wat u nodig hebt om een iPhone-app te bouwen en uit te voeren. Het inbegrepen XCode-project is gebundeld
met een voorbeeldcode die laat zien hoe veel van de native functies te gebruiken, en alle ondersteunende bestanden die nodig zijn om de app en te compileren
voer het uit in de iPhone Simulator of op je telefoon.
Om te testen of je je Mac gereed hebt om je code uit te voeren, kunnen we het voorbeeldproject uit de PhoneGap proberen.
Open eerst de map iPhone en dubbelklik erop PhoneGap.xcodeproj:
Dit zou XCode moeten openen met uw project geladen. Hoewel er hier veel aan de hand is, hebben wij als webontwikkelaars alleen maar nodig
om ons bezig te houden met de www map. Dit bevat de webcode die de interface en logica van wordt
onze app.
Nu we ons project hebben geladen, is het tijd om er even over na te denken. Gebundeld met de iPhone SDK is dat een iPhone Simulator
haakt meteen in bij XCode. Het enige dat we moeten doen, is klikken op 'Build and Run'.
Voor deze tutorial heb ik een eenvoudige, native-feeling app samengesteld die mijn Tumblr-feed weergeeft met een slide-up "Over"
scherm. Deze app is gebaseerd op het uitstekende jQTouch-framework, een jQuery-gebaseerde bibliotheek van UI
elementen, animaties en extensies waarmee u snel mobiele web-apps kunt ontwikkelen met een native look and feel. Laten we even kijken
bij het samenstellen van een web-app met behulp van jQTouch voordat we deze app importeren in ons Phonegap-project.
Eerst laden we jQuery, jQTouch en een aantal gebundelde themabestanden in de
label; deze zullen onze elementen stylen om er uit te zienVervolgens bouwen we het skelet van onze app uit:
jQTouch neemt elke directe afstammeling van de
tag en converteert het naar een "weergave" op volledig scherm. Dit betekent elke
Accentsconagua
ID kaart: Wat betreft
JQTouch bevat een verscheidenheid aan coole manieren om over te schakelen tussen deze schermen. Ze kunnen en kunnen eenvoudig worden ingeschakeld door CSS-klassen toe te voegen.
Als u bijvoorbeeld die koppeling naar de pagina Over in een dia-overgang wilt maken, voegen we het volgende toe:
Wat betreft
Vervolgens voegen we op de pagina Over onszelf een knop toe om het paneel te "sluiten" door het terug te schuiven:
Dichtbij
In het standaardscherm voegen we een werkbalk toe met de bovengenoemde knop 'Over' en een plek om een Tumblr-feed in te sluiten:
Huis
Wat betreftLivestream
Ten slotte een paar CSS-klassen die de uitvoer van de Tumblr-feed afstemmen op ons "Apple" -thema:
ol color: black; achtergrond: #fff; rand: 1px vast # B4B4B4; lettertype: vet 17px Helvetica; opvulling: 0; marge: 15px 10px 17px 10px; -webkit-border-radius: 8px; ol> li color: # 666; border-top: 1px solid # B4B4B4; list-style-type: none; opvulling: 10px 25px 10px 25px;
Dat is het! Na het toevoegen van wat inhoud aan onze About-pagina, vervangen we de bestanden in onze Phonegap-projecten www map
met onze nieuwe web-app, en voer het opnieuw uit:
Onze web-app is nu gecompileerd en kan vanaf hier worden verpakt voor distributie in de iTunes Store. Het is een eenvoudige start, maar
in zeer korte tijd hebben we een native app die lijkt op die van Apple, die op elke iPhone kan worden uitgevoerd en kan worden uitgebreid naar een groot aantal verschillende toepassingen.
Ik zal in toekomstige zelfstudies bespreken hoe je je app kunt uitbreiden met ondersteuning voor camera's en geolocatie. In de tussentijd kan dat
lees meer over Phonegap op de Phonegap Wiki. Documentatie is niet volledig uitgewerkt,
dus je zult merken dat je door git-archieven graaft na het einde van een lange jacht.
Om je app in te dienen bij de iTunes App Store, registreer je voor het iPhone Developer Program.
Zodra u bent geregistreerd, krijgt u de tools om uw app digitaal te ondertekenen en in te dienen bij de iTunes Store.
Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].
Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.
