Share
Wilt u leren hoe u PhoneGap kunt gebruiken, maar weet u niet waar u moet beginnen? Doe met ons mee als we "Sculder" samenstellen, niet alleen een eerbetoon aan een uitstekende science fiction tv-serie, maar een volwaardige native mobiele applicatie voor de gelovige in jou!
We stopten in de laatste zelfstudie in deze serie net nadat we onze applicatie in het Phonegap-framework hadden gekregen en in afwachting van ons laatste stuk functionaliteit: de camera van het apparaat. Het idee achter deze zelfstudie is om de gebruiker toe te staan een foto te maken met de camera en deze vervolgens te laten uploaden naar een server. We zullen de daadwerkelijke upload van de afbeelding niet behandelen, maar de ruimte laten voor de functionaliteit die moet worden toegevoegd. U vindt tal van voorbeelden van verschillende implementaties voor het uploaden van afbeeldingen via PHP, Ruby en andere serverzijtalen elders op internet. In plaats daarvan zal deze zelfstudie focussen op het maken van de foto, het weergeven van de foto en het geven van een waarschuwing aan de gebruiker dat de foto is geüpload (de functie die uw server kan activeren wanneer deze een succesvol uploadbericht retourneert).
Het eerste wat we moeten doen is een knop toevoegen aan onze pagina:
Vervolgens moeten we een beetje styling toevoegen voor de knop om het er een beetje leuker uit te laten zien. Terwijl we ons ontwikkelen voor fatsoenlijke browsers, kunnen we gebruik maken van een aantal CSS3-stijlen.
button.camera-control background-colour: # f3f3f3; achtergrondafbeelding: -webkit-verloop (lineair, linkerbovenkant, linkeronderkant, kleurstop (0%, # f3f3f3), kleurstop (50%, #dddddd), kleurstop (50%, # d2d2d2), color-stop (100%, #dfdfdf)); achtergrondafbeelding: -webkit-lineair verloop (bovenaan, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); achtergrondafbeelding: lineair verloop (boven, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); border-right: 1px solid #dfdfdf; border-bottom: 1px solid # b4b4b4; border-right: 1px solid #dfdfdf; -webkit-border-radius: 5px; grensradius: 5px; -webkit-vak-schaduw: inzet 0 1px 0 0 wit, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; vakschaduw: inzet 0 1px 0 0 wit, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; kleur: # 666; weergave: blok; lettertype: vet 16px "helvetica neue", helvetica, arial, sans-serif; marge: 10px auto; opvulling: 7px 0; text-shadow: 0 1px 1px #fff; breedte: 150 px; button.camera-control: hover background-color: # e5e5e5; achtergrondafbeelding: -webkit-verloop (lineair, linker boven, links onder, kleur-stop (0%, # e5e5e5), kleur-stop (50%, # d1d1d1), kleur-stop (50%, # c4c4c4), kleur-stop (100%, # b8b8b8)); achtergrondafbeelding: -webkit-lineaire gradiënt (boven, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); achtergrondafbeelding: lineair verloop (boven, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); -webkit-vak-schaduw: inzet 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; vakschaduw: inzet 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; button.camera-control: active -webkit-box-shadow: inzet 0 0 30px 0 # 999999, 0 1px 0 0 wit; vakschaduw: inzet 0 0 30px 0 # 999999, 0 1px 0 0 wit;
Als u nu uw app (de simulator of op een apparaat) uitvoert en test, zou u een dergelijke pagina moeten hebben:
Nu moeten we de functionaliteit verbinden. Eerst beginnen we met de capturePhoto () functie die de camera start:
functie capturePhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, quality: 60);
De succesfunctie, upload foto, is de volgende die wordt geschreven. Deze functie uploadt de foto naar onze server, voert de afbeelding naar het scherm uit en geeft de gebruiker ook een melding dat de afbeelding is geüpload. Laten we beginnen met het uitvoeren van de afbeelding op het scherm:
functie uploadPhoto (gegevens) // dit is waar u het afbeeldingsbestand naar de server zou sturen // output image to screen cameraPic.src = "data: image / jpeg; base64," + data;
Een van de Phonegap-API's waar we niet echt naar hebben gekeken, maar die we hier zullen gebruiken, is de meldings-API. De meldings-API is bedoeld om de gebruiker te waarschuwen voor een uitgevoerde actie, zoals de alert () Javascript-functionaliteit, maar afgestemd op het specifieke apparaat dat wordt gebruikt. Het kan ook piepen, trillen of gewoon een pop-up weergeven en een dialoogvenster waarschuwen. Voor deze app gebruiken we de notification.alert (), wat een dialoogvenster is dat enkele aanpasbare opties kan accepteren. Het basisgebruik is:
navigator.notification.alert (bericht, alertCallback, [titel], [buttonNaam])
Binnen onze upload foto functie, we gaan de gebruiken notification.alert () om een bericht weer te geven dat de foto is geüpload naar de server. Onze code ziet er zo uit:
Accentsconagua
navigator.notification.alert ('Uw foto is geüpload', // bericht oke, // callback 'Foto geüpload', // titel 'OK' // knopnaam); We moeten ook de oke functie om ervoor te zorgen dat we geen fouten tegenkomen wanneer we onze code uitvoeren. Het kan alles doen wat je wilt, maar het wordt beter gebruikt wanneer het op de server is aangesloten. Op dit moment blijft de functie leeg.
Onze upload foto() functie ziet er nu als volgt uit:
functie uploadPhoto (gegevens) // dit is waar u het afbeeldingsbestand naar de server zou sturen cameraPic.src = "data: image / jpeg; base64," + data; // Succesvol uploaden naar de server navigator.notification.alert ('Uw foto is geüpload', // bericht goed, // terugbellen 'Foto geüpload', // titel 'OK' // knopnaam); // upload is mislukt Fail / * if (failedToUpload) navigator.notification.alert ('Uw foto is niet geüpload', failedDismissed, 'Photo Not Uploaded', 'OK'); * / functie okay () // Do something U moet de toepassing nu op een apparaat uitvoeren, omdat de simulator geen toegang heeft tot een camera. Nadat u een foto hebt gemaakt, ontvangt u de volgende melding:
Onze app is nu voltooid en we zijn klaar om deze als een werkende applicatie te exporteren en in te dienen bij de winkels!
Houd er rekening mee dat u voor het distribueren van een app in de Apple App Store een betaald ontwikkelaarscertificaat van Apple moet hebben.
Exporteren voor het iOS-platform kan een beetje een uitdaging zijn, maar zolang je al je certificaten hebt vooraf geïnstalleerd en gesynchroniseerd met Xcode (wat je zou moeten hebben gedaan voordat je kon testen op een apparaat), zou het niet wees te uitdagend nadat je het eenmaal hebt gedaan. Als u dubbelklikt op uw project in Xcode en naar de bouwinstellingen gaat, zorg er dan voor dat uw code-ondertekeningsidentiteit wordt gebruikt voor de toepassing.
U moet nu naar Product => Archief en stuur de app naar het archief (gevonden in het venster Organizer). Het is mogelijk dat u een fout krijgt in de trant van NSAutomaticpool is niet beschikbaar, dit komt door Automatische referentietelling (wat nieuw is). PhoneGap ondersteunt het momenteel niet, dus we moeten het gewoon uitschakelen in de bouwinstellingen van het project. Ga naar de build-instelling en zoek naar -CLANG_ENABLE_OBJC_ARC je zal het vinden en het naar "nee" schakelen.
Zodra dat is gebeurd, kun je naar iTunes Connect gaan en daar beginnen met het instellen van je app. Nadat u bent ingelogd, klikt u op "Apps beheren" en "Een nieuwe app toevoegen". Ga door de wizard, voeg het iTunes-pictogram (512x512 px in grootte) en ten minste één schermafbeelding van de toepassing toe. Er zijn enkele andere verplichte velden, zoals een SKU-nummer (dit is een volgnummer voor jezelf. Ik gebruik persoonlijk 0001 om daar te beginnen en verder te gaan) en een beschrijving. Als u klaar bent met het invullen van het formulier, klikt u op Verzenden.
Als u klaar bent, krijgt u het volgende te zien
In eerste instantie zal uw Toepassingenstatus "Voorbereiden voor uploaden" zijn, dus u moet klikken op "Details bekijken" en vervolgens op "Binaire Upload". Zodra je dit hebt doorlopen, is je status nu 'Gereed voor uploaden'.
Terug in de Organizer van Xcode kunnen we de optie Valideren uitvoeren om te controleren of onze app goed is om te worden ingediend bij de App Store en hopelijk zal de app langskomen zonder validatiefouten.
Notitie: Springen door alle ringen die Apple presenteert, is geen gemakkelijke taak om te leren. Als u verschillende fouten krijgt met betrekking tot het mislukken van builds, omdat er geen provisioningprofielen enz. Kunnen worden gevonden, voert u een snelzoekopdracht uit op Google en vindt u de oplossing. Er zijn 100 verschillende scenario's met miss-gematchte certificaten waarmee ik te maken kreeg toen ik probeerde een app voor iOS te bouwen, allemaal opgelost met Google. Als je constant problemen tegenkomt, kun je hieronder een reactie achterlaten en ik zal proberen te helpen!
Nu onze app geldig is, kunnen we deze indienen bij de App Store. We klikken op verzenden, controleren of onze toepassing en identiteit correct zijn en wachten vervolgens op de upload.
Als je klaar bent, kun je inloggen op iTunes Connect en zien dat de app "wacht op beoordeling". Het kan vaak tot 14 dagen duren voordat je app in de App Store staat, dus verwacht een beetje te wachten.
Gelukkig is Android, na alle mogelijke pijn die je met de iOS-export hebt doorstaan, licht eenvoudiger. Ervan uitgaande dat u Eclipse voor uw Android-ontwikkeling gebruikt, hoeft u alleen niet-gebruikte functies uit het manifestbestand te verwijderen en vervolgens met de rechtermuisknop op het project te klikken en omlaag te gaan naar Android-tools => Ondertekend toepassingspakket exporteren. Zodra u de wizard hebt doorlopen om uw pakket te exporteren, moet u ervoor zorgen dat u een keystore maakt. Je zult eindigen met een .apk bestand, dat is wat we zullen uploaden naar de Android-markt.
Ga hier naar de site van de uitgever van Android Market en log in. Als dit je eerste keer hier is, moet je je aanmelden voor een account (met je bestaande Google-account), betaal je $ 25 en een Google Wallet-account instellen. Nadat u bent aangemeld en ingelogd, kunt u doorgaan en uw .apk het dossier. Het is een veel eenvoudiger proces dan de iOS-route. Als je het gevoel hebt dat de vorm overweldigend is of als je niet zeker bent van iets, bekijk dan de tutorial van Shane Conder & Lauren Darcey hier op mobiletuts terwijl ze deze stap voor stap doorlopen. Hun hele serie over Android-ontwikkeling is het waard om te lezen als je helemaal geïnteresseerd bent in het verder ontwikkelen van je ontwikkeling!
Als u klaar bent, kost het geen tijd voordat uw app op de markt is en klaar is om te worden verkocht.
Zoals vermeld in de eerste tutorial van deze serie, gaan we gebruik maken van het cloud-building-systeem van PhoenGap dat te vinden is op build.phonegap.com. Op de lange termijn kost het gebruik van deze service weliswaar geld, maar de andere mogelijkheid om verschillende SDK's uit te voeren tussen verschillende besturingssystemen en vervolgens de app over elke portering te porteren, kan meer tijd en moeite kosten dan het extra geld dat het kost om de service te gebruiken is het waard.
Alles wat we nodig hebben is een ritssluiting bestand met onze HTML, CSS en JavaScript. Upload het naar de service en u wordt vervolgens naar een scherm 'Uw apps' geleid, waar u uw app in verschillende indelingen te zien krijgt:
Het is een simpele klik en download om de juiste build te krijgen. Om aan de slag te gaan met Blackberry, moeten we onze app indienen bij hun "App World". Ga hierheen naar de App World en klik op "Aan de slag". Vul het vrij rechttoe rechtaan formulier in en wacht dan af.
NOTITIE: Helaas, op het moment (2/8/2012), heeft Blackberry blijkbaar een achterstand van "Vendor" -toepassingen. Ik wacht sinds begin januari op goedkeuring, maar heb tot nu toe niet zo'n geluk gehad. Ze voeren momenteel een Playbook-promotie uit voor diegenen die hun Android-apps willen omzetten, wat de achterstand veroorzaakt. Als u geïnteresseerd bent om u aan te melden als Blackberry-leverancier, meldt u zich dan zo snel mogelijk aan.
Voor de andere apparaten die worden ondersteund door de cloud build-dienst van PhoneGap, is het de moeite waard om je aan te melden bij hun relevante ontwikkelsites: Nokia en webOS. Ze zijn zeer vergelijkbaar en bevatten veel documentatie voor het uploaden van applicaties naar hun relevante markten. Ze volgen hetzelfde soort proces (aanmelden, app uploaden, marketingmateriaal uploaden, wachten) en zijn redelijk eenvoudig te volgen.
We zijn nu klaar met onze app, hebben hem geëxporteerd en hebben hem geüpload naar de iOS App Store en de Android-markt. We hebben ook de buildservice van PhoneGap gebruikt om een versie van onze app op de andere platforms te krijgen die we mogelijk willen ondersteunen.
Phonegap gaat op dit moment van kracht-naar-kracht en blijft groeien (versie 1.4 is pas net vrijgegeven). Het is de moeite waard om deze SDK te leren kennen als je net begint met het ontwikkelen van mobiele apparaten en geen kennis hebt van de native programmeertalen achter de Android- of iOS-platforms. Hopelijk heeft deze tutorialserie je laten zien hoe je dat precies doet!
