Wie ich meine erste plattformübergreifende mobile App mit JavaScript und XDK erstellt habe

Ich muss zugeben: Ich habe über ein Jahrzehnt Erfahrung in der Entwicklung von Anwendungen.

Ich habe Bewerbungen hauptsächlich für Unternehmen geschrieben. Dies bedeutete, dass ich kommerzielle Softwareprogramme und proprietäre Programmiersprachen verwendete - hauptsächlich aufgrund der Richtlinien der Organisation, für die ich mich entwickelte, bei der ich beschäftigt war oder bei beiden.

In der Zwischenzeit sind Open Source-Sprachen aufgewachsen. Und obwohl ich ein wenig über JavaScript-, CSS- und HTML-Kenntnisse verfügte, waren meine Kenntnisse in diesen Bereichen nicht gut genug, um direkt zu einem Job in der Webentwicklung zu migrieren. Was ich kürzlich als Karriereoption gewählt habe, weil:

  • Jemand versteckte meinen Käse, so dass eine Umschulung notwendig wurde
  • Es gibt viele Leute, die Websites und ähnliches wollen
  • Es gibt dieses Versprechen der plattformübergreifenden App-Entwicklung für intelligente Geräte

Also fing ich an, mich neu zu qualifizieren. Ich entschied mich für Free Code Camp oder schließlich für mich. Ich bin mir ehrlich gesagt nicht sicher, welche. Das „Wie“, mit dem ich in die Gewässer des Free Code Camp gesprungen bin, ist für diese Geschichte nicht wichtig. Es sind jedoch wichtige Hintergrundinformationen.

Das andere wichtige Stück dieser Geschichte ist das Versprechen der Entwicklung plattformübergreifender Apps.

Ich habe zwei Jahre oder länger versucht, ein anständiges Tool zu finden, das das Versprechen der Entwicklung plattformübergreifender Apps erfüllt. Ich bin mir sicher, wenn ich mich an einige der Tools gehalten hätte, die ich in der Vergangenheit ausprobiert habe, könnte vielleicht etwas Nützliches daraus geworden sein.

Aber hier ist das Problem: Ich habe es sehr eilig. Ich habe keine Zeit zu lernen. Ich brauche wirklich ein Entwicklungswerkzeug, das mit minimalem Aufwand sofort funktioniert. Ich glaube, ich bin in dieser Hinsicht an kommerzielle Produkte gewöhnt.

Zurück zum Free Code Camp. Ich werde nur sagen, ich bin zu den Ziplines gekommen. Und die habe ich beendet. Ich bin auch ein kleines Aufmerksamkeitsdefizit. Als ich die Ziplines fertiggestellt hatte, stellte ich fest: „Ich kann jetzt webbasierte Apps erstellen“. Ich beherrschte jetzt Open Source-Sprachen: Markups und Skriptsprachen wie HTML, CSS und JavaScript. Und ich brauchte zu diesem Zeitpunkt eine Pause von der Schule.

Also habe ich mich noch einmal nach Tools umgesehen, die das Versprechen einer plattformübergreifenden Anwendungsentwicklung erfüllen könnten. Und nach einigem Ausprobieren habe ich mich wieder mit Intel XDK vertraut gemacht (ja, ich hatte dies ungefähr 6 Monate lang auf meinem Computer installiert und saß im Leerlauf). Fairerweise fehlten meine Skriptfähigkeiten etwas, als ich es vor langer Zeit zum ersten Mal installierte (trotz meines umfassenden Verständnisses von VBA, objektorientierter Codierung und relationaler Datenbankintegration).

Intel XDK hatte sich ebenfalls stark verbessert, und bevor ich meine erste App damit erstellte, habe ich auf die (damals) aktuelle Version aktualisiert.

Warum habe ich mich für Intel XDK gegenüber seinen Konkurrenten entschieden? Im Laufe der Jahre habe ich ungefähr zehn verschiedene Werkzeuge getestet und weggeworfen. Hier ist eine Zusammenfassung meiner Erfahrungen:

  • Bei einem Konkurrenzprodukt konnte der Endbenutzer (ich) meine eigene App nicht bearbeiten. Ich konnte mit dem Erstellen eines beginnen, aber es gab keine bekannte Möglichkeit, es zu bearbeiten. Dies ist kein Problem, das man jemals erwartet. Weißt du, nach einer Pause, wie ich es nicht weiß, schalte ich meinen Computer aus, damit ich schlafen gehen kann, und komme dann am nächsten Tag zurück, um meine App weiter zu erstellen - aber keine Möglichkeit, auf meine Arbeit auf meinem Computer zuzugreifen? Ratet mal, wie lange dieses Entwicklungstool auf meinem Computer gedauert hat… Ja, ich habe nach Unterstützung gesucht. Die Antworten, die ich fand, enttäuschten mich noch mehr, als meinen eigenen Code nicht bearbeiten zu können. Grrr…
  • Dokumentation: Ich habe ein anderes Tool ausprobiert, bei dem die Dokumentation ungefähr 12 Monate alt war (entsprechend dem Veröffentlichungsdatum). In dieser Zeit war Cordova Lichtjahre vergangen, wo diese veraltete Dokumentation zurückblieb. Und wie so viele Dinge, die mit Staub bedeckt sind, waren die Anweisungen zur Verwendung dieses speziellen Tools, an das ich denke, wirklich nicht so relevant oder nützlich. In den Mülleimer ging es.
  • Andere serverbasierte Tools machen mich irgendwie nervös. Was passiert, wenn der Server ausfällt oder die zuständige Organisation bankrott geht? Wie bekomme ich meinen verdammten Code zurück? Ich mag nicht so viel Risiko. Die Welt dreht sich zu schnell. Die Dinge fallen die ganze Zeit ab. Ich brauche nicht, dass meine IP von der Welt geworfen wird, weil ich eine schlechte Auswahl an Anwendungshosts habe. Und Nur-Server-basierte Lösungen kosten in der Regel viel mehr, als ich mir leisten kann. Und wem gehört die IP wirklich, wenn der von mir geschriebene Code auf dem Computer eines anderen gehostet wird?

Weitere Informationen zu Intel XDK

Als ich mit dieser Version von Intel XDK herumspielte, stellte ich erfreulicherweise fest, dass ich meine App zum Laufen bringen konnte. Zuerst gehen. Und es ist keine einfache App - sie verwendet die Geolokalisierung, um einige Dinge nachzuschlagen. Und andere trixy Dinge. Ich wusste im Voraus, dass ich einige Plugins brauchen würde. Durch das Herumspielen mit PhoneGap zu Beginn des Artikels wurde ich mit Cordova bekannt gemacht (PhoneGap war früher kostenlos, jetzt im Besitz von Adobe, nicht mehr so ​​kostenlos). Das war vor Monaten. Ein Blick auf Intel XDK deutete darauf hin, dass einige Dinge mit Intels proprietärem Code erledigt werden könnten und einige möglicherweise von Plugins von Drittanbietern (z. B. von Cordova) erledigt werden müssten.

Als ich anfing, stellte sich heraus, dass ein Teil des proprietären Codes von Intel veraltet war (aber dies war mir, dem Endbenutzer, zu diesem Zeitpunkt nicht klar). Das Code-Bit, das ich ausgewählt habe (on.device.ready - nicht der vollständige Name - weil ich das bereits vergessen habe), war auf dem Weg nach draußen.

Ich liebe Intel XDK - weil es funktioniert - aber wie viele Tools heutzutage entspricht die Dokumentation nicht der Funktionalität. Und es ist nicht so, dass die Dokumentation notwendigerweise weit zurückliegt. Im Fall von Intel XDK ist die Dokumentation umfassend - und genau (yay), aber etwas schwer zu finden (aww).

Also, ja, ich versuche, diesen Anruf zu verwenden, und meine App funktioniert. Und ich kann mich nicht erinnern - habe ich auf die nächste Version aktualisiert und meine App ist kaputt gegangen oder hat mein Code einfach nicht perfekt funktioniert und ich habe auch auf die nächste Version aktualisiert (ja, Intel hat ein Upgrade auf Intel XDK um ein bis zwei herausgepumpt mal im Monat - versuchen Sie, diesen Zeitplan als Einzelunternehmer einzuhalten).

In Wahrheit hätte ich Intel XDK fast aufgegeben. Aber ich dachte: "Mist das" (ich bin Australier). Und: „Ich habe diese App fast fertiggestellt. Ich werde es schaffen. “ Und so fand ich einige Informationen, die darauf hinweisen, dass der Anruf "on.device.ready" noch nicht tot war, aber seine Familie von Freunden war tot und begraben (veraltet, in blauen Großbuchstaben). Es macht keinen Sinn, über geliebte Menschen zu weinen. Es ist Zeit, den Gang zu wechseln und aggressiv weiterzumachen.

So lernte ich schnell Cordova-Plugins und deren Verwendung in Intel XDK. Nicht so schwer stellt sich heraus. In meiner ersten App verwende ich ziemlich gut verwendete und bekannte Plugins.

Und ja, die gute Nachricht ist, dass ich nicht zurückgeschaut habe, nachdem ich herausgefunden hatte, wie man Cordova-Plugins einbindet.

Hier sind einige Abkürzungen zum Erstellen einer App mit Intel XDK. Meine Perlen der Weisheit, um Ihnen, dem Leser, zu helfen, die dunkleren Wege, die ich eingeschlagen habe, zu meiden und gut im Licht zu bleiben:

  • Es ist mir egal, welche App Sie entwickeln möchten. Sagen Sie Intel XDK, dass es eine Cordova-Version erstellen soll. Nur für den Fall, dass Sie ein Plugin verwenden müssen. Und ja, Sie benötigen wahrscheinlich die Statusleiste. Weil iOS.
  • Sie benötigen mindestens HTML- und CSS-Kenntnisse. Plus etwas JavaScript, um die Plugins richtig zu verwenden. Ja, Sie können stattdessen JQuery verwenden, wenn dies Ihr Ding ist. Wie viel JavaScript oder JQuery Sie verwenden, hängt von der App ab, die Sie erstellen. Sie müssen in der Lage sein, Websites zu erstellen, um etwas wie Intel XDK verwenden zu können. Sie wissen noch nicht, wie Sie eine Website erstellen sollen? Hier ist die Lösung: Nehmen Sie am Free Code Camp teil und lernen Sie bis einschließlich der Ziplines. Sobald Sie dies getan haben, können Sie mit Intel XDK spielen. Ja, das bist Du.
  • Weisen Sie Intel XDK für Ihre erste App an, mit einer ihrer Vorlagen zu erstellen. Auf diese Weise erhalten Sie einen vorgefertigten Code, mit dessen Hilfe Sie das "Warten, was nun?" Teil.
  • index.html: Dies ist die erste Benutzeroberfläche, die dem späteren Endbenutzer (Kunden) Ihrer App angezeigt wird. Ihr Wissen über die Entwicklung von Websites, das Sie bis einschließlich der Free Code Camp Ziplines erworben haben, hilft Ihnen dabei, herauszufinden, was Sie mit dieser Datei tun sollen.
  • GitHub: Sie sollten die Anweisungen für jedes Plugin befolgen, das Sie verwenden. Um die Dokumentation Ihres Plugins zu finden, rufen Sie Google "github cordova [Plugin]" auf, wobei "[Plugin]" der Name des Plugins ist, nach dem Sie suchen. Zum Beispiel sollte die Suche "github cordova statusbar" Sie ziemlich einfach zum Statusleisten-Plugin führen. Die Cordova Plugin Dokumentation auf Github ist ausgezeichnet.
  • StackOverflow: Stellen Sie hier Ihre „dummen“ Fragen. Vergessen Sie nicht, zuerst nach Antworten auf Ihre Frage zu suchen. Die große Community von Mentoren auf StackOverflow bemüht sich besonders, darauf hinzuweisen, dass Ihre Frage bereits gestellt (und beantwortet) wurde.
  • Intel XDK-Produktforum: Stellen Sie hier Ihre „dummen“ Intel XDK-spezifischen Fragen. Die Jungs von Intel sind deine Freunde (glücklich). Auch die anderen Entwickler, die Intel XDK verwenden, helfen gerne weiter, wenn sie können.
  • Intel XDK erstellt beim Erstellen für Windows-Geräte drei Pakete. Ich versuche immer noch zu verstehen, warum es drei erstellt, aber ich muss nur einen in den Windows Store hochladen. Überprüfen Sie die Intel XDK-Foren auf die Antwort. Ich fragte. Es ist jetzt dokumentiert. Nicht die vollständige Antwort. Genau die Antwort, die Sie benötigen, um fortzufahren. Es ist genug.

Halten Sie es einfach blöd

OK, hier sind die grundlegenden Ratschläge, die deine Mutter und dein Vater dir hätten sagen sollen, bevor du von zu Hause weggegangen bist:

  • Erstellen Sie die geringstmögliche Menge an Code.
  • Dies schließt Asset-Dateien ein. Meine erste App hatte zu viele CSS-Dateien und zu viele JS-Dateien. Ernsthaft. Das "aww, snap", das ich mit "on.device.ready" hatte, gab mir die Möglichkeit, meine IP in weniger Dateien zu konsolidieren und Bits wegzuwerfen, die eigentlich nirgendwo verwendet wurden. Es ist eine Best-Practice-Sache.
  • Verwenden Sie den Code anderer Personen (nicht im Sinne von Plagiaten) - verwenden Sie die vorgefertigten Vorlagen, die Intel XDK bereitstellt, um die Lernkurve zu verkürzen. Zumindest für deine allererste App.
  • Sie haben ein "How to"? Wenn Sie Google fragen, finden Sie die Antwort in StackOverflow. Ändern Sie das Lernen für Ihre Zwecke und fahren Sie dann mit dem nächsten Problem fort. Du wirst es für das nächste Mal wissen.
  • Bücher lesen. Hahaha. Als hätte ich die Zeit. Aber im Ernst. Finde die Zeit.
  • Ich lese immer noch über die Programmiersprache Swift… Sie hat nicht einmal etwas damit zu tun. Aber es geht zumindest um Code.
  • Verwenden Sie das Vermögen anderer Personen. Für meine erste App habe ich eine CSS-Animationsbibliothek und eine ordentliche Schriftbibliothek gefunden. Ich habe sichergestellt, dass meine App diese Bibliotheken auf der Informationsseite "Über" meiner App zugeordnet hat. Gemäß den Lizenzbedingungen. Und weil es das Richtige ist.

Verwenden von Intel XDK zum Erstellen Ihrer ersten App

Laden Sie Intel XDK herunter und installieren Sie es.

In Intel XDK:

  1. Klicken Sie auf "Neues Projekt starten".
  2. Wählen Sie "Vorlagen" und dann "Layouts und Benutzeroberflächen".
  3. Wählen Sie Tab View App (oder wählen Sie einen anderen Vorlagentyp, wenn Sie möchten). Aktivieren Sie "App Designer verwenden" (hiermit wird ein vorgefertigter Code installiert, aus dem erstellt werden kann, und mit - yay begonnen).
  4. Klicken Sie auf Weiter.
  5. Klicken Sie im Projektfenster auf die Schaltfläche Upgrade auf Cordova.
  6. Fügen Sie beim Erstellen des Projekts das folgende Cordova-Plugin hinzu (zurück im Projektmenü):

    Statusleiste

Welche Plugins Sie auswählen, hängt ganz davon ab, was Sie erstellen. Die Plugins helfen Ihnen dabei, die Funktionen der Geräte zu nutzen, auf denen Ihre App ausgeführt wird. Es ist wahrscheinlich, dass Sie mindestens eine benötigen. Weil iOS.

Erstellen Sie Ihre App

Abgesehen von Apples überentwickelten Anforderungsrahmen (welches verdammte Zertifikat benötige ich erneut?) Und der „Windows-Auswahl von drei Paketen“ ist der Erstellungsprozess an sich einfach. Gehen Sie zur Registerkarte Erstellen. Laden Sie Ihren Code hoch, erstellen Sie Ihr Paket, laden Sie Ihr Paket herunter.

Ich weiß nichts über dich. Ich bin arm. Ich kann mein iOS-Paket testen. Ich kann meine Android- oder Windows-Pakete nicht testen. Eines Tages hoffe ich, auf mehr als einer Plattform testen zu können. Es tut uns leid, Meerschweinchen zu testen (dh alle meine Kunden auf Google- und Windows-Geräten).

Für Sie als Entwickler: Der Emulator in Intel XDK sollte nur als Leitfaden betrachtet werden. Du wirst es rausfinden. Marschieren. Mach keine Gefangenen. Dies ist keine Zeit, sich vor der Angst zu fürchten: "Was ist, wenn es nicht funktioniert?" Hab etwas Vertrauen. Sei verdammt, weil du es versucht hast. Sei nicht verdammt, weil du versagt hast.

Für Android möchten Sie mit der Option „Crosswalk für Android“ erstellen. Zwei Worte, warum: "Flex Box". Wenn Sie mehr wissen möchten, lesen Sie die Dokumentation. Flex Box hat eine Möglichkeit, sich in jedes Projekt einzuschleichen (nach meiner begrenzten Erfahrung).

Womit kann ich dir nicht helfen?

  • Apples Vorgehensweise ist stark überarbeitet. Sie müssen Ihr eigenes Zertifikat mit einer komplizierten Methode erstellen. Jeder versteht es falsch. Zumindest einmal. Durchhalten.
  • Der Überprüfungszeitraum von Apple ist lang. Ungefähr 7 Tage (das ist kein Druckfehler, es dauert Tage!). Es ist eine spannende erste Erfahrung. Was ist, wenn die App abgelehnt wird? Weiß ich, was zu tun ist, wenn es abgelehnt wird? Warum dauert das so lange? Bedeutet dieser Überprüfungsstatus, dass Apple ihn überprüfen wird oder dass ich es tun soll? Aaaargh! Ist es schon fertig? Was ist los? Oh, und die schlaflosen Nächte. Und das minutengenaue Überprüfen der E-Mails. Das kommt nie.
  • Google dauert einige Stunden. Dieselbe App wird innerhalb von 24 Stunden überprüft und bereitgestellt. Vielleicht etwas länger. Weniger als 48. Das heißt, wenn Sie eine Monster-komplizierte App schreiben, vielleicht länger.
  • Windows dauert einige Stunden. Und dann ungefähr einen Tag, um im Windows Store zum Download verfügbar zu sein. Aber Sie haben keine Kunden. Es ist also ein strittiger Punkt. Build für Windows Phones. Es wird Ihren Lebenslauf abrunden.

Was mache ich jetzt?

Ich baue eine andere App.

Diese Geschichte erschien ursprünglich auf creatoftech.com.