Share
Möchten Sie lernen, wie Sie PhoneGap verwenden können, wissen jedoch nicht, wo Sie anfangen sollen? Begleiten Sie uns bei der Zusammenstellung von „Sculder“. Dies ist nicht nur eine Hommage an eine exzellente Science-Fiction-Fernsehserie, sondern auch eine vollwertige native mobile Anwendung für den, der an Sie glaubt!
Wir haben im letzten Tutorial dieser Serie aufgehört, kurz nachdem wir unsere Anwendung in das Phonegap-Framework aufgenommen hatten und darauf warteten, unsere letzte Funktionalität hinzuzufügen: die Gerätekamera. Die Idee hinter diesem Tutorial besteht darin, dem Benutzer zu erlauben, ein Foto mit der Kamera aufzunehmen und dieses dann auf einen Server hochzuladen. Das eigentliche Hochladen des Bildes wird nicht behandelt, es bleibt jedoch Platz für die Funktionalität, die hinzugefügt werden soll. Es gibt zahlreiche Beispiele für verschiedene Implementierungen zum Hochladen von Bildern über PHP, Ruby und andere serverseitige Sprachen an anderer Stelle im Internet. Stattdessen konzentriert sich dieses Lernprogramm darauf, das Foto aufzunehmen, das aufgenommene Bild anzuzeigen und dem Benutzer eine Warnung zu senden, dass das Bild hochgeladen wurde (die Funktion, die Ihr Server möglicherweise auslöst, wenn eine erfolgreiche Upload-Nachricht zurückgegeben wird)..
Als erstes müssen wir unserer Seite einen Button hinzufügen:
Als nächstes müssen wir ein bisschen Styling für den Button hinzufügen, damit er etwas schöner aussieht. Da wir für anständige Browser entwickeln, können wir einige CSS3-Stile nutzen.
button.camera-control Hintergrundfarbe: # f3f3f3; Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # f3f3f3), Farbstopp (50%, #dddddd), Farbstopp (50%, # d2d2d2), Farbstopp (100%, #dfdfdf)); Hintergrundbild: -webkit-linearer Gradient (oben, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); Hintergrundbild: linearer Gradient (oben, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); Rand rechts: 1px fest #dfdfdf; Rahmen unten: 1px fest # b4b4b4; Rand rechts: 1px fest #dfdfdf; -webkit-border-radius: 5px; Grenzradius: 5px; -webkit-box-shadow: Einfügung 0 1px 0 0 weiß, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; Box-Schatten: Einfügung 0 1px 0 0 weiß, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; Farbe: # 666; Bildschirmsperre; Schrift: fett 16px "helvetica neue", helvetica, arial, serifenlos; Marge: 10px auto; Polsterung: 7px 0; Text-Schatten: 0 1px 1px #fff; Breite: 150px; button.camera-control: hover Hintergrundfarbe: # e5e5e5; Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # e5e5e5), Farbstopp (50%, # d1d1d1), Farbstopp (50%, # c4c4c4), Farbstopp (100%, # b8b8b8)); Hintergrundbild: -webkit-linearer Gradient (oben, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); Hintergrundbild: linearer Gradient (oben, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); -webkit-box-shadow: Einfügung 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; Box-Schatten: Einfügung 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; button.camera-control: aktiv -webkit-box-shadow: Einfügung 0 0 30px 0 # 999999, 0 1px 0 0 weiß; Box-Schatten: Einfügung 0 0 30px 0 # 999999, 0 1px 0 0 weiß;
Wenn Sie jetzt Ihre App (entweder den Simulator oder auf einem Gerät) ausführen und testen, sollten Sie eine Seite wie diese haben:
Nun müssen wir die Funktionalität einbinden. Zuerst beginnen wir mit dem capturePhoto () Funktion, die die Kamera startet:
Funktion capturePhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, quality: 60);
Die Erfolgsfunktion, Foto hochladen, ist der nächste zu schreiben. Diese Funktion lädt das Foto auf unseren Server hoch, gibt das Bild auf dem Bildschirm aus und informiert den Benutzer darüber, dass das Bild hochgeladen wurde. Beginnen wir mit der Ausgabe des Bildes auf dem Bildschirm:
function uploadPhoto (data) // Hier würden Sie die Bilddatei an den Server senden // Bild auf den Bildschirm ausgeben cameraPic.src = "data: image / jpeg; base64," + data;
Eine der Phonegap-APIs, die wir vorher nicht wirklich angeschaut haben, die wir hier jedoch verwenden werden, ist die Benachrichtigungs-API. Die Benachrichtigungs-API weist den Benutzer auf eine durchgeführte Aktion hin, wie z warnen() Javascript-Funktionalität, jedoch auf das jeweilige Gerät zugeschnitten. Es kann auch piepsen, vibrieren oder einfach eine Dialogmeldung anzeigen. Für diese App verwenden wir einfach die notification.alert (), Dies ist ein Dialogfeld, das einige anpassbare Optionen akzeptiert. Die grundlegende Verwendung ist:
navigator.notification.alert (message, alertCallback, [title], [buttonName])
In unserem Foto hochladen Funktion verwenden wir die notification.alert () um anzuzeigen, dass das Foto auf den Server hochgeladen wurde. Unser Code sieht so aus:
Accentsconagua
navigator.notification.alert ('Ihr Foto wurde hochgeladen', // Nachricht in Ordnung, // Rückruf 'Foto hochgeladen', // Titel 'OK' // buttonName); Wir müssen auch das schreiben in Ordnung Funktion, um sicherzustellen, dass beim Ausführen des Codes keine Fehler auftreten. Es kann alles, was Sie möchten, aber es wird besser verwendet, wenn es an den Server gebunden ist. Im Moment bleibt die Funktion leer.
Unsere Foto hochladen() Funktion sieht jetzt so aus:
function uploadPhoto (data) // Hier würden Sie die Bilddatei an den Server senden cameraPic.src = "data: image / jpeg; base64," + data; // Erfolgreicher Upload auf den Server navigator.notification.alert ('Ihr Foto wurde hochgeladen', // Nachricht in Ordnung, // Rückruf 'Foto hochgeladen', // Titel 'OK' // buttonName); // Upload fehlgeschlagen. Fail / * if (failedToUpload) navigator.notification.alert ("Ihr Foto konnte nicht hochgeladen werden", failedDismissed, "Foto nicht hochgeladen", "OK"); * / Funktion okay () // etwas tun Sie müssen nun die Anwendung auf einem Gerät ausführen, da der Simulator keinen Zugriff auf eine Kamera hat. Nachdem Sie ein Foto aufgenommen haben, erhalten Sie folgende Warnmeldung:
Unsere App ist nun vollständig und wir können sie als funktionierende Anwendung exportieren und an die Filialen senden!
Bitte beachten Sie, dass Sie für die Verteilung einer Anwendung im Apple App Store ein kostenpflichtiges Entwicklerzertifikat von Apple besitzen müssen.
Das Exportieren für die iOS-Plattform kann eine Herausforderung sein, aber solange Sie alle Zertifikate vorinstalliert und mit Xcode synchronisiert haben (was Sie vor dem Testen auf einem Gerät tun müssten), sollte dies nicht der Fall sein sei zu anspruchsvoll, nachdem du es einmal getan hast. Wenn Sie in Xcode auf Ihr Projekt doppelklicken und zu den Build-Einstellungen wechseln, stellen Sie sicher, dass Ihre Codesignaturidentität für die Anwendung verwendet wird.
Sie müssen jetzt zu gehen Produkt => Archiv und senden Sie die App an das Archiv (im Organizer-Fenster gefunden). Es ist möglich, dass Sie eine Fehlermeldung erhalten NSAutomaticpool ist nicht verfügbar, Dies liegt an der automatischen Referenzzählung (die neu ist). PhoneGap unterstützt es derzeit nicht. Daher müssen Sie es nur in den Build-Einstellungen für das Projekt deaktivieren. Wenn Sie zur Build-Einstellung gehen und nach suchen -CLANG_ENABLE_OBJC_ARC Sie werden es finden und auf "Nein" stellen.
Sobald dies erledigt ist, können Sie zu iTunes Connect gehen und dort mit der Einrichtung Ihrer App beginnen. Wenn Sie sich angemeldet haben, klicken Sie auf "Anwendungen verwalten" und "Neue App hinzufügen". Durchlaufen Sie den Assistenten, fügen Sie das iTunes-Symbol (Größe 512 x 512 Pixel) und mindestens einen Screenshot der Anwendung hinzu. Es gibt einige andere obligatorische Felder, z. B. eine SKU-Nummer (dies ist eine Tracking-Nummer für Sie. Ich persönlich benutze 0001, um von dort zu beginnen und fortzufahren) und eine Beschreibung. Wenn Sie das Formular ausgefüllt haben, klicken Sie auf Senden.
Sobald Sie fertig sind, erhalten Sie folgende Informationen
Zunächst wird der Status Ihrer Anwendung "Hochladen" sein. Klicken Sie auf "Details anzeigen" und dann auf "Binärer Upload". Sobald Sie dies durchlaufen haben, ist Ihr Status jetzt "Bereit zum Hochladen"..
Zurück in Xcodes Organizer können wir die Validate-Option ausführen, um zu prüfen, ob unsere App für den App Store geeignet ist. Hoffentlich kommt die App ohne Validierungsfehler aus.
Hinweis: Das Springen durch alle von Apple präsentierten Reifen ist keine leichte Aufgabe. Wenn Sie verschiedene Fehler erhalten, die darauf zurückzuführen sind, dass Builds fehlgeschlagen sind, weil keine Bereitstellungsprofile usw. gefunden werden konnten, führen Sie eine schnelle Suche bei Google durch und Sie finden die Lösung. Es gibt 100 verschiedene Szenarien mit fehlangepassten Zertifikaten, denen ich beim Versuch begegnet bin, eine App für iOS zu erstellen, die alle mit Google gelöst wurden. Wenn Sie ständig Probleme haben, können Sie unten einen Kommentar hinterlassen, und ich werde versuchen zu helfen!
Jetzt, da unsere App gültig ist, können wir sie an den App Store senden. Wir klicken auf "Senden", prüfen, ob unsere Anwendung und Identität korrekt sind, und warten dann auf den Upload.
Wenn Sie fertig sind, können Sie sich bei iTunes Connect anmelden und sehen, dass die App auf "Überprüfung wartet" wartet. Es kann oft bis zu 14 Tage dauern, bis sich Ihre App im App Store befindet. Warten Sie also ein wenig.
Glücklicherweise ist Android nach all den möglichen Schmerzen, die Sie beim iOS-Export durchgemacht haben, etwas leichter. Wenn Sie davon ausgehen, dass Sie Eclipse für Ihre Android-Entwicklung verwenden, müssen Sie lediglich alle nicht verwendeten Funktionen aus der Manifest-Datei entfernen und dann mit der rechten Maustaste auf das Projekt klicken und zu gehen Android Tools => Signiertes Anwendungspaket exportieren. Nachdem Sie den Assistenten zum Exportieren des Pakets durchlaufen haben, müssen Sie sicherstellen, dass Sie einen Keystore erstellen. Sie werden am Ende mit einem .apk Datei, die wir auf den Android-Markt hochladen werden.
Besuchen Sie die Website des Android Market-Publishers und melden Sie sich an. Wenn Sie das erste Mal hier sind, müssen Sie sich für ein Konto anmelden (mit Ihrem vorhandenen Google-Konto), $ 25 zahlen und ein Google Wallet-Konto einrichten. Sobald Sie sich angemeldet und angemeldet haben, können Sie Ihre Website hochladen .apk Datei. Dies ist viel einfacher als die iOS-Route. Wenn Sie das Gefühl haben, dass das Formular überwältigend ist oder Sie sich nicht sicher sind, sollten Sie sich das Tutorial von Shane Conder & Lauren Darcey über Mobiletuts ansehen, während diese Schritt für Schritt durchlaufen werden. Ihre gesamte Serie zur Android-Entwicklung ist lesenswert, wenn Sie überhaupt daran interessiert sind, Ihre Entwicklung weiterzuführen!
Sobald Sie fertig sind, dauert es keine Zeit, bis Ihre App auf dem Markt ist und zum Verkauf bereit ist.
Wie im ersten Tutorial dieser Serie beschrieben, werden wir das Cloud Buildingsystem von PhoenGap nutzen, das Sie unter build.phonegap.com finden. Langfristig kostet die Nutzung dieses Dienstes Geld, aber die andere Möglichkeit, verschiedene SDKs auf verschiedenen Betriebssystemen auszuführen und die App dann über jedes zu portieren, ist möglicherweise zeitaufwändiger und unangenehmer als das zusätzliche Geld, das für die Nutzung des Dienstes erforderlich ist ist wert.
Alles was wir brauchen ist ein Postleitzahl Datei, die HTML, CSS und JavaScript enthält. Laden Sie es zu dem Dienst hoch und Sie werden zu einem Bildschirm "Ihre Apps" weitergeleitet, auf dem Sie Ihre App in ihren verschiedenen Formaten sehen können:
Es ist ein einfacher Klick und Download, um den richtigen Build zu erhalten. Um mit Blackberry zu beginnen, müssen wir unsere App in ihrer "App World" einreichen. Gehen Sie hier zur App World und klicken Sie auf "Erste Schritte". Füllen Sie das recht einfache Formular aus und warten Sie dann.
HINWEIS: Leider hat Blackberry momentan (08.02.2012) offenbar einen Rückstand an "Vendor" -Anwendungen. Ich habe seit Anfang Januar auf die Genehmigung gewartet, hatte aber bisher kein solches Glück. Sie führen derzeit eine Playbook-Aktion für diejenigen durch, die ihre Android-Apps konvertieren möchten, was den Rückstand verursacht. Wenn Sie überhaupt daran interessiert sind, sich als Blackberry-Anbieter zu registrieren, melden Sie sich so bald wie möglich an.
Für die anderen von PhoneGap Cloud Build Service unterstützten Geräte lohnt es sich, sich bei den entsprechenden Entwicklungsstandorten anzumelden: Nokia und webOS. Sie sind sehr ähnlich und voller Dokumentation für das Hochladen von Anwendungen in ihre relevanten Märkte. Sie folgen demselben Prozess (Anmelden, App hochladen, Marketingmaterialien hochladen, Warten) und sind recht einfach zu befolgen.
Wir haben unsere App nun fertiggestellt, exportiert und in den iOS App Store sowie den Android-Markt hochgeladen. Wir haben auch den Build-Service von PhoneGap verwendet, um eine Version unserer App auf die anderen Plattformen zu bringen, die wir möglicherweise unterstützen möchten.
Phonegap wird im Moment von Stärke zu Stärke und wächst weiter (Version 1.4 wurde kürzlich veröffentlicht). Es lohnt sich, dieses SDK kennenzulernen, wenn Sie gerade erst mit der Entwicklung von Mobilgeräten beginnen und keine Kenntnisse der Programmiersprachen der Android- oder iOS-Plattformen haben. Ich hoffe, diese Tutorial-Serie hat Ihnen gezeigt, wie Sie genau das tun können!
