Share
Wenn Sie an der mobilen Entwicklung beteiligt sind, haben Sie wahrscheinlich bereits Tools wie PhoneGap oder Appcelerator Titanium gehört oder verwendet. Mithilfe dieser Tools können Webentwickler ihre Webentwicklungsfähigkeiten nutzen, um mobile Hybridanwendungen zu erstellen.
Letztes Jahr kaufte Intel appMobi und packte seine Entwicklungstools in das Intel XDK. Dieses vereinheitlichte, einheitliche Produkt ist ein komplettes Toolset für die mobile Entwicklung. Ein Entwickler kann mit nur einem Satz von Tools von den ersten Codezeilen zu einer vollständig kompilierten Anwendung wechseln. Und das Beste ist, das XDK kann kostenlos heruntergeladen werden.
Das erste, was Sie beim XDK feststellen werden, ist die einfache Installation. PhoneGap erfordert eine umfangreiche Konfiguration und Titanium hat besondere Anforderungen an installierte Bibliotheken. Um mit dem XDK loszulegen, laden Sie es herunter und installieren es.
Das Schöne an XDK ist, dass Sie Anwendungen für jede Plattform erstellen können. Bei anderen Tools sind Sie auf die Plattform beschränkt, auf der Sie gerade arbeiten. Da Apple Xcode-Tools nur auf einem Computer mit OS X ausführen kann, benötigen Sie einen Mac, um für iOS entwickeln zu können.
Mit Intel XDK können Sie auf jeder Plattform entwickeln, da das Kompilieren in der Cloud erfolgt. PhoneGap bietet einen ähnlichen Service für die plattformübergreifende Entwicklung, ist jedoch begrenzt. Und mit dem XDK sind Sie nicht auf mobile Plattformen beschränkt. Planen Sie die Erstellung von Chrome-, Facebook-, Amazon- oder Nook-Apps? Das XDK kann für diese Ziele sowie die Option zum Kompilieren mit XDK- oder Cordova-APIs (PhoneGap) erstellen.
Das XDK wird mit dem Open Source Brackets Editor von Adobe ausgeliefert. Titan hat einen anständigen Editor, aber ich bevorzuge die XDK-Lösung. Außerdem haben Sie Zugriff auf einige Erweiterungen, die für Brackets verfügbar sind. Der einzige Nachteil ist, dass Sie den in das XDK integrierten Brackets-Editor nicht aktualisieren können. Es ist jedoch immer noch ein Schritt von Titan, und PhoneGap enthält nicht einmal einen Editor.
Das XDK enthält auch einen grafischen Editor, der auf allen mobilen Plattformen von HTML5 fehlt. Es liegt auf der Hand, dass HTML-Komponenten von einem WYSIWYG-Editor profitieren würden. Es unterstützt auch Frameworks wie Bootstrap und jQuery Mobile. Mit diesen Komponenten der Benutzeroberfläche können Sie die Oberfläche Ihrer App schnell ausbauen.
Sobald Ihre App erstellt wurde, müssen Sie die Funktionalität testen. Intel XDK enthält den besten Emulator für mobile Geräte, den ich bisher gesehen habe. Es bietet die Möglichkeit, auf realen Geräten und der Profilleistung zu testen, ohne etwas installieren zu müssen.
Rufen Sie die Intel XDK-Download-Seite auf, und laden Sie die neueste Version von XDK herunter. Nachdem Sie das Paket heruntergeladen haben, installieren Sie es mit den Standardoptionen.
Wir werden eine kleine Foto-App erstellen. Starten Sie das XDK und wählen Sie Ein neues Projekt beginnen. Einige der Optionen, die Sie haben, sind:
Geben Sie Ihrem Projekt einen Namen und klicken Sie auf Erstellen. Das XDK erstellt Ihr Projekt sowie eine Ordnerstruktur.
Obwohl wir ein leeres Projekt gestartet haben, enthält das XDK einige Dateien, um Ihnen den Einstieg zu erleichtern. Wir werden diese Dateien für unser Projekt bearbeiten.
Diese Datei wird verwendet, um bereite Ereignisse aus den verschiedenen verwendeten Bibliotheken zu erkennen. Diese Datei wird so wie sie ist verwendet. Es enthält viele Protokollanweisungen für Debugging-Zwecke und zum besseren Verständnis der Funktionsweise der Datei. Der Teil, mit dem wir uns am meisten beschäftigen, beginnt bei line 106.
Accentsconagua
var evt = document.createEvent ("Ereignis"); evt.initEvent ("app.Ready", false, false); document.dispatchEvent (evt);In der ersten Zeile wird ein neues Ereignisobjekt erstellt. Wir initialisieren dieses Objekt mit dem Wert "app.ready". Die letzte Zeile sendet das Ereignis an das DOM.
Ich habe den größten Teil dieser Datei gelöscht, mit Ausnahme des Teils, den wir benötigen. Wir stellen sicher, dass die benötigten Bibliotheken geladen wurden und das Gerät bereit ist, bevor wir Code ausführen. Erinnere dich an die app.ready Ereignis aus der vorherigen Datei?
document.addEventListener ("app.Ready", app.initEvents, false);Der Ereignis-Listener wartet auf die app.ready Ereignis und ruft die initEvents Funktion auf der App Objekt.
app.initEvents = function () "use strict"; var fName = "app.initEvents ():"; console.log (fName, "entry"); $ (". take"). bind ("click", takePic); document.addEventListener ("intel.xdk.camera.picture.add", onSuccess); ;Das initEvents Funktion macht zwei Dinge. Zunächst wird ein Klickereignislistener mithilfe von jQuery an eine Schaltfläche gebunden. Zweitens wird ein Ereignis-Listener für das XDK hinzugefügt intel.xdk.camera.picture.add Veranstaltung.
Diese Datei enthält das Fleisch unserer App und enthält die Funktionen, mit denen unsere App ausgeführt wird. Das ersetzer Die Funktion verwendet jQuery, um das Bild auf der Seite durch das zuletzt aufgenommene Bild zu ersetzen.
Funktionsersatz (pic) $ ("img"). replaceWith (pic); Der Name des Ein Bild machen Funktion sagt alles. Es verwendet das XDK-Framework, um ein Bild aufzunehmen.
function takePic () intel.xdk.camera.takePicture (50, falsch, "jpg");
Das onSuccess Funktion wird ausgelöst, wenn a intel.xdk.camera.picture.add Ereignis wird erkannt. Wenn ein Bild erfolgreich aufgenommen wurde, ersetzt es das aktuelle Bild auf der Seite mit ersetzer Funktion haben wir früher gesehen. Wenn die App kein Bild aufnehmen konnte, wird eine Fehlermeldung angezeigt.
Funktion onSuccess (evt) if (evt.success == true) var image = document.createElement ('img'); image.src = intel.xdk.camera.getPictureURL (evt.filename); image.setAttribute ("style", "width: 100%; height: 200px;"); image.id = evt.filename; Ersetzer (Bild); else if (evt.message! = undefined) alert (evt.message); else alert ("Fehler bei der Bildaufnahme"); Diese Datei enthält die Hauptseite unserer App. Es ist eine einfache HTML-Datei, in der jQuery und jQuery Mobile abgerufen werden.
Wir importieren auch einige Stylesheets, um die App zu stylen. Das benutzerdefinierte Stylesheet, app.css, hat sehr wenig Stil. Das liegt daran, dass ich die App mit dem Design-Roller jQuery Mobile gestaltet habe.
Die Seite selbst ist eine standardmäßige jQuery Mobile-Seite mit einem Kopf-, Inhalts- und Fußzeilenabschnitt. Beachten Sie das Bild im div # info Etikett. Dies ist das Bild, das durch das von der Kamera aufgenommene Bild ersetzt wird.
Selfi
Nimm Selfi!
Dies ist ein Skript, das zum Debuggen von Apps mithilfe der App-Vorschau verwendet wird.
Wir importieren außerdem eine Reihe von Schlüsselskripts, die die App ansprechen, wie Cordova und Intel XDK und app.js.
Wir werden die Intel XDK API zum Fotografieren verwenden. Damit dies funktioniert, müssen wir einige Plugins aktivieren. Öffne das Projekte Tab und in der Mitte werden Sie sehen CORDOVA 3.X HYBRID MOBILE APP-EINSTELLUNGEN. Klicken Sie auf das Pluszeichen neben Plugins und Berechtigungen. Rechts, unter Intel XDK-Plugins, prüfen Kamera.
Kamera-Plugin Drücke den Emulieren, nacheifern Registerkarte und testen Sie die Funktionalität der App. Wenn Sie auf klicken Nimm Selfi Schaltfläche, sollte das Bildfenster geöffnet werden. Nach der Aufnahme sollte das Bild das Platzhalterbild ersetzen.
EmulatorLaden Sie die Intel App Preview-App von Google Play oder Apple App Store herunter und installieren Sie sie. Gehe zum Prüfung Registerkarten und kopieren Sie die weinre Skript-Tag, wenn Sie das Debugging mit der App-Vorschau durchführen möchten. Klicke auf das PUSH-DATEIEN Schaltfläche, um Ihre App auf die Server von Intel hochzuladen. Melden Sie sich mit Ihren Anmeldeinformationen vom Intel XDK bei App Preview an und wählen Sie die hochgeladene App aus.
Nachdem wir die App getestet haben, ist es die letzte Aufgabe, sie für die Verteilung zu erstellen. Klicke auf das Bauen Registerkarte, um Ihre Optionen anzuzeigen. Wie Sie sehen, haben wir eine Vielzahl von Zielen, für die Sie bauen können.
Da haben wir die Camera API benutzt, die ist Erbe, wir werden die auswählen Legacy Hybrid App. Dies bringt uns zur Build-Seite wie unten gezeigt.
Klicken Sie auf Einzelheiten zeigt Ihnen Optionen für In-App-Abrechnung, Audio-Streaming usw..
Klicken Sie nach Auswahl der Optionen für Ihre App auf die Schaltfläche "Erstellen". Nach wenigen Augenblicken ist die Datei erstellt und Sie erhalten ein Dialogfeld, in dem Sie Ihre App herunterladen können.
Ich hoffe, Sie stimmen zu, dass es einfach ist, eine App mit Intel XDK zu erstellen. Intel XDK bietet Ihnen einen Einstiegspunkt, egal ob Sie ein Veteran sind, Full-Stack-Webentwickler sind oder gerade erst mit der Entwicklung beginnen. Es ist einfach zu erlernen und ich empfehle Ihnen, das Intel XDK auszuprobieren.
