7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Titanium Mobile

Erstellen der mobilen Titanium-Modulen mit CommonJS

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Valentina (you can also view the original English article)

In diesem Artikel besprechen wir, wie Sie Ihre eigenen mobilen Module für Appcelerator Titanium erstellen, indem Sie lediglich JavaScript und ein wenig CommonJS-Kenntnisse verwenden. Das von uns zu erstellende Modul wird für Picasa, den Image-Service von Google, sein und ermöglicht unseren Benutzern, Alben und Fotos in Picasa anzuzeigen, ohne Einzelheiten über die Picasa-API selbst zu erfahren.  Nachdem wir unser Modul getestet haben, werden wir es auch für iOS und Android packen!


Warum ein Modul mit CommonJS erstellen?

Warum überhaupt in ein Modul packen? Der Code, den wir erstellen, ist schließlich JavaScript.  Wir könnten unsere Codedateien einfach kopieren und in jedes Appcelerator Titanium-Projekt einfügen, um sie zu verwenden. Es gibt jedoch eine Reihe sehr guter Gründe, dies als Modul zu tun.

  • Ihre Module können gemeinsam genutzt und als "Black-Box" -Komponente behandelt werden, genau wie jedes andere native Modul.
  • Ihre Module werden kompiliert, dh Sie können Ihren Code bei Bedarf schützen.
  • Module lassen sich einfach verwalten und wachsen in Ihren Projekten, sodass Sie Ihren Code einfacher wiederverwenden können.

Nun, da wir das "Warum" aus dem Weg haben, gehen wir zum "Wie" über und erstellen unser Modul!


Einrichten Ihres Modulprojekts

Der einfachste Weg, ein neues Projekt für ein mobiles Modul einzurichten, ist über Titanium Studio. Wir werden das also tun. Öffnen Sie Titanium Studio, und wählen Sie im Menü Datei die Option Neu > Mobilmodulprojekt. Daraufhin wird ein Bildschirm wie der folgende angezeigt.  Ich nenne unser Modul "Picasa" und gebe ihm eine Modul-ID von "com.boydlee.picasa". Notieren Sie sich Ihre Modul-ID, falls Sie sich für eine andere Kennung entscheiden. Dies wird sehr wichtig sein, wenn wir später unsere JavaScript-Dateien erstellen!

Erstellen eines neuen Mobilmodulprojekts in Titanium Studio

Sie werden wahrscheinlich an dieser Stelle feststellen, dass Sie Ihr Modul nur für iOS ODER Android erstellen können. Dies liegt daran, dass Module für jede Plattform separat kompiliert werden.  Ich werde jetzt iOS für unser Modul auswählen und verwenden. Es ist viel schneller zu bauen und zu testen als Android. Wir werden unser Android-Modul am Ende des Tutorials mit demselben Code erstellen.  Klicken Sie auf die Schaltfläche Fertig stellen, und Titanium Studio sollte Ihr Modulprojekt erstellen und im App Explorer-Fenster anzeigen. Beginnen wir mit der Codierung!


Erstellen der JavaScript-Eintragsdatei Ihres Moduls

Als erstes müssen wir die JavaScript-Eintragsdatei für unser Modul erstellen, die in das Verzeichnis /assets verschoben wird. Es muss auf eine bestimmte Weise benannt werden, die lauten muss: your.module.id.js.  Da ich mein Modul com.boydlee.picasa benannt habe, muss die JavaScript-Datei, die ich erstellen muss, com.boydlee.picasa.js heißen. Ihr App Explorer-Fenster sollte dann ungefähr so aussehen wie das Foto.

Der App Explorer-Bereich in Titanium Studio

Titanium sucht beim Laden Ihres Moduls automatisch nach der Einstiegspunktdatei, und diese Einstiegspunktdatei muss denselben Namen wie die Kennung Ihres Moduls haben. Beginnen wir mit dem Erstellen unseres CommonJS-Moduls. Beginnen wir mit dem Shell-Code, der unsere Picasa-Funktion erstellt, ein "Access Levels"-Objekt für die Verwendung des Prototyps hinzufügt und die Funktion dann über CommonJS exportiert.


Aufbau der Picasa-Funktionalität

Nun, da wir unsere Basismodul-Shell fertig haben, ist es Zeit, sie mit Prototypen auszufüllen. Wir werden dieses Modul relativ einfach halten. Daher werden nur zwei Hauptziele verfolgt: Suchen und Suchen einer Liste der Alben des Benutzers und Zurückgeben einer Liste aller Fotos für ein Album.  Lassen Sie uns zunächst ein paar öffentliche Getter und Setter erstellen, damit wir den Benutzernamen und die Zugriffsebenen festlegen können.

Wir benötigen auch eine Funktion, die HTTP-Anforderungen ausführen kann. Anstatt mehrere Anforderungen für Alben und Fotoanrufe an Picasa zu erstellen, können Sie eine Anforderungsfunktion erstellen, die wiederverwendbar ist. Lassen Sie uns das jetzt machen.

Erweitern Sie unsere Picasa-Funktion um einige Funktionen, die den Benutzernamen und die Zugriffsebene übernehmen und gültige URLs für den Picasa-Fotodienst zurückgeben. Wir werden diese URLs später verwenden, wenn wir unsere HttpRequests erstellen.


Zugriff auf Albumdaten über Picasa

Jetzt, da die grundlegende Struktur unseres Moduls vorhanden ist, können wir mit der Entwicklung der Picasa-API beginnen und unser Modul um echte Funktionalität und Nützlichkeit erweitern. Als Erstes erstellen wir eine Funktion, mit der unsere Benutzer eine Liste ihrer Picasa-Alben abrufen können.  Die JSON-Informationen, die Picasa für diesen Aufruf zurückgibt, sind äußerst komplex. Daher vereinfachen wir sie auch in ein übersichtliches Array von Objekten, das Sie auf den ersten Blick leicht verstehen können. Erstellen Sie die folgende Funktion in Ihrem CommonJS-Modul.


Zugriff auf Fotodaten über Album-Links

Da wir nun auf die Albumdaten zugreifen können, müssen wir die Fotoendpunkte von Picasa verwenden, um eine Liste von Fotos für ein bestimmtes Album abzurufen. Das kann auf zwei Arten erfolgen.  Sie können die Album-ID verwenden und einen Endpunkt für Fotos-URLs erstellen. Sie können auch einfach die URL verwenden, die in der HTTP-Anforderung des Albums zurückgegeben wird. Wir erstellen beide Funktionen nur aus Gründen der Nützlichkeit und einer dritten Funktion namens createPhotosArray, die ein JSON-Antwortobjekt aufnehmen und ein vereinfachtes Array von Bildern zurückgeben wird. Erstellen Sie in Ihrem CommonJS-Modul die folgenden Funktionen.

Das ist ungefähr so weit wie unser CommonJS-Modul geht! Wir können jetzt unseren Benutzernamen und die Zugriffsebenen über öffentliche Eigenschaftsfunktionen festlegen, eine Liste von Alben abrufen und diese Informationen verwenden, um dann eine entsprechende Liste von Fotos für jede Album-ID/Album-URL abzurufen.  Im nächsten Abschnitt erfahren Sie, wie Sie unser Modul für die Verwendung in einer echten Titanium Mobile-Anwendung verpacken!


Verpacken und Testen Ihres neuen Moduls

Die Verpackung Ihres Moduls könnte bei der Verwendung von Titanium Studio nicht einfacher sein. Klicken Sie zuerst im App-Explorer auf das Symbol "Paket". Das Paketsymbol sieht aus wie ein geschlossenes Kästchen.  Klicken Sie anschließend auf die Untermenüoption "Package - iOS Module". Ein neues Popup-Fenster mit drei verschiedenen Verpackungsoptionen wird angezeigt.

  • Titanium SDK - Das verpackt Ihr Modul und installiert es direkt im "Modules"-Verzeichnis Ihres Titanium SDK. Auf einem Mac befindet sich dieser im Ordner ~/Application Support/Titanium.
  • Mobile Project - Dadurch wird das Modul gepackt und direkt in einer App installiert, die sich derzeit im Projekt-Explorer befindet. Wenn Sie ein Modul testen möchten, an dem Sie gerade arbeiten, ist dies in der Regel der einfachste Weg.
  • Speicherort - Dadurch wird das Modul gepackt und die resultierende ZIP-Datei in einem von Ihnen angegebenen Ordner gespeichert. Das ist die beste Methode, wenn Sie Ihr Modul freigeben oder möglicherweise auf den Appcelerator Marketplace hochladen möchten.
Verpackungsoptionen für Titan-Mobilmodule

Wir gehen weiter und wählen die erste Option, erstellen das Paket und speichern es in unserem Titanium SDK-Ordner. Wählen Sie das aus und klicken Sie auf "Fertig stellen". Jetzt lehnen Sie sich zurück und warten Sie eine Minute.  Titanium Studio baut Ihr neues Modul auf und wenn es fertig ist, wird unten rechts auf dem Bildschirm eine gelbe Benachrichtigung angezeigt. Erfolg!

Modulpaket Erfolg!

Jetzt, da unser Modul verpackt ist, sollten wir es wahrscheinlich testen, oder? Lassen Sie uns ein neues mobiles Projekt erstellen. Wählen Sie im Vorlagen-Menü Titanium Classic und dann Standardprojekt.  Wir werden unser Beispielprojekt in sehr einfachem "klassischem" Titanium-Code erstellen. Das liegt daran, dass wir unseren Testcode in die Datei example.js unseres Moduls kopieren möchten, damit andere Personen ihn als Referenz verwenden können.  Ich rufe meine Test-App Picasa-TestApp mit einer App-ID von com.boydlee.picasatestapp an, aber Sie können Ihre beliebige anrufen, wie Sie möchten.

Erstellen eines neuen "Classic"-Projekts aus 

Titan MobileDiese Basisvorlage besteht aus einer TabGroup und zwei Fenstern, die alle in Ihrer app.js-Datei definiert sind. Wir werden den Code vereinfachen, so dass wir nur eine Registerkarte und ein Fenster haben.  Wir werden eine TableView hinzufügen, die wir mit unseren Albumdaten füllen werden, aber bevor wir dies tun, müssen wir unser neues Modul zu unserem Testprojekt hinzufügen.  Öffnen Sie die Datei tiapp.xml, klicken Sie auf die Schaltfläche "+" neben der Liste der App-Module und wählen Sie dann das Picasa-Modul aus, das wir im vorherigen Abschnitt zusammengefasst haben.

Das Picasa-Modul zu unserem Testprojekt hinzufügen

Fügen wir nun den Testcode in app.js ein, der unserem Benutzer eine Liste der Alben zurückgibt und diese in einer TableView anzeigt. Wir machen auch eine Anforderung und erstellen ein neues Picasa-Objekt über unser Modul.

Beachten Sie, dass ich den Zugriff auf public und den Benutzernamen auf boydlee festgelegt habe, wodurch auf die Fotos in meinem Picasa-Konto zugegriffen werden kann. Sobald dies erledigt ist, starten Sie Ihre App im Simulator.

Unser Standardfenster mit einer Liste von Picasa-Alben in einer TableView

Schließlich müssen wir eine Funktion namens openAlbumPhotosView hinzufügen, die einen Albumtitel und eine URL akzeptiert, ein neues Fenster auf der aktuellen Registerkarte öffnet und dann alle Fotos für dieses Album in einer ScrollableView zurückzieht.

Führen Sie Ihren Code ein letztes Mal im Simulator aus. Sie sollten jetzt in der Lage sein, eine Liste von Alben abzurufen, eines aus der TableView auszuwählen und dann eine scrollbare Diashow der Fotos für dieses Album anzuzeigen. Ordentlich!

ScrollableView zeigt alle Fotos aus dem ausgewählten Picasa-Album.

Verpacken des Picasa-Moduls

Jetzt müssen Sie nur noch das Picasa-Modul für iOS und Android packen. Kopieren Sie zunächst den gesamten Code aus der Datei test app.js und fügen Sie ihn in die Datei /example/app.js des Modulprojekts ein.  Wir möchten diesen Code als Beispiel für andere Leute, die unser Modul verwenden möchten. Wenn Sie damit fertig sind, klicken Sie einfach auf die Schaltfläche Paket und Sie können Ihr Modul über einen Standort exportieren, genau wie wir es bereits im Abschnitt Verpacken und Testen Ihres neuen Moduls beschrieben haben.  Für Android ist der Prozess derselbe, aber wir müssen ein separates Modulprojekt dafür erstellen, indem wir diesmal ein neues Mobile Module-Projekt für Android erstellen.  Kopieren Sie die bereits erstellten Code-Dateien example/app.js und com.boydlee.picasa.js, und fügen Sie sie an den richtigen Stellen in Ihrem Android-Projekt für mobile Module ein. Sie können dann für Android erstellen und verteilen, genau wie in iOS!

Tipp: Möglicherweise müssen Sie JDT installieren, bevor Sie Module für Android erstellen können. Eine einfache Schritt-für-Schritt-Anleitung ist auf appcelerator.com verfügbar


Schlussfolgerung

Hoffentlich fanden Sie dieses Tutorial hilfreich. Wenn Sie das nächste Mal die Entwicklung der Titanium-Funktionalität in Betracht ziehen, die Sie gemeinsam nutzen oder für mehrere Projekte verwenden möchten, sollten Sie sie möglicherweise in ein CommonJS-Modul integrieren!.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.