Share
Mulberry von Toura ist ein mobiles Anwendungs-Framework, das auf PhoneGap basiert. Innerhalb weniger Minuten können Sie mit Mulberry eine native Anwendung einrichten, die mit Webtechnologien wie HTML, CSS und JavaScript erstellt wurde.
Lassen Sie uns einen Blick darauf werfen, was wir brauchen, um mit Mulberry zu beginnen.
Im Moment unterstützt Mulberry nur OS X Snow Leopard und Lion offiziell. Laut Dokumentation kann es möglich sein, unter Linux zu laufen, dies wird jedoch nicht vollständig unterstützt. Zusätzlich zu einem kompatiblen Betriebssystem benötigen Sie auch die neueste Version von PhoneGap. Ruby sollte ebenfalls installiert werden.
Um dieses Tutorial abzuschließen, sollten Sie auch etwas Erfahrung mit git haben.
Sie können die neueste Version von Mulberry aus dem Github-Repository von Toura herunterladen. Sie können das Repository mit dem Befehl in das Verzeichnis Ihrer Wahl klonen git clone [email protected]: Toura / mulberry.git
Als Nächstes müssen Sie den vollständigen Pfad zu hinzufügen Maulbeere / bin zu unserer Umgebungspfadvariable, so müssen wir unsere bearbeiten .Profil Datei. Wir können dies tun, indem Sie den folgenden Befehl im Terminal ausführen.
export PATH = $ PFAD: / pfad / nach / mulberry / mulberry / bin
Wenn Sie den Ruby-Edelstein-Bundler nicht installiert haben, müssen Sie ihn jetzt wie folgt installieren:
sudo gem install Bundler
Führen Sie dann den Befehl aus dem Stammverzeichnis des Repositorys aus:
Bundle installieren
Jetzt können Sie mit Mulberry Ihre erste App erstellen.
Um unsere Anwendungsstruktur zu erhalten, müssen Sie den folgenden Befehl im Terminal ausführen, wo immer die App erstellt werden soll. Nehmen wir an, wir möchten eine App für Katzenliebhaber erstellen und nennen uns die App Katzen.
Maulbeergerüstkatzen
Sie erhalten eine Reihe von urheberrechtlich geschütztem Material und einige grundlegende Bedingungen und Bedingungen, die Sie ausspucken. Was jedoch auch passieren wird, ist, dass Ihre App-Struktur jetzt für Sie erstellt wurde. Öffnen Sie Ihren Projektordner und werfen Sie einen Blick darauf.
Das erste, was wir tun müssen, ist, das zu öffnen config.yml Datei und nehmen Sie bei Bedarf einige Änderungen vor. Die Konfigurationsdatei ist wirklich gut kommentiert und es ist ziemlich einfach zu sehen, was Sie hinzufügen oder ändern müssen. Sie sehen Ihren App-Namen und die Themendetails. Im Moment gibt es keine Dokumentation zum Thema, aber Sie können hier einige Grundfarben festlegen. Sie können dann die Plattformen angeben, für die Sie erstellen. Für diese Demo werde ich nur für iOS bauen, also werde ich die Android-Option löschen. Ich werde auch nur die Telefonplattform anvisieren, also die Tablet-Option löschen.
Sie können sehen, dass wir wählen können, ob wir jQuery in das Projekt aufnehmen werden. Außerdem gibt es einige API-Optionen für Facebook, Twitter, Urban Airship und Flurry. Ich bin mir sicher, dass wir alle die ersten beiden kennen, aber Urban Airship ist ein Dienst für Push-Benachrichtigungen über Funk. Flurry ist ein Verkehrsanalyse-Tool, das speziell für mobile Anwendungen entwickelt wurde. In dieser Demo werde ich nicht näher auf die Integration dieser APIs in Mulberry eingehen, also lasse ich diese Felder einfach leer.
Speichern Sie Ihre Konfigurationsdatei und öffnen Sie die sitemap.yml Datei. Hier legen wir die Seitenstruktur für unsere App fest. Sie sehen, wir haben bereits zwei Einträge Zuhause und Über. Als nächstes werden wir unserer Homepage einige Links hinzufügen:
- home - schwarz-weiß - cats-with-macs - cats-with-hats - Kätzchen - ungefähr
Jetzt müssen wir die neuen Seiten generieren, die wir in unserer Sitemap definiert haben. Gehen Sie zurück zu Ihrem Terminal und geben Sie Folgendes ein:
mulberry create_page schwarz-weiß
Sie erhalten eine Bestätigung der erstellten Seite. Die Seiten werden im Markdown-Format erstellt. Wenn Sie Markdown noch nie verwendet haben, machen Sie sich keine Sorgen, nichts ist zu kompliziert. Tatsächlich ist es eines der wirklich schönen Dinge, die ich an Mulberry mag, da ich das Markdown-Format täglich verwende. Wenn Sie sich an die einfache Syntax gewöhnt haben, ist das schneller als das Schreiben von Seiten in HTML.
Wir können fortfahren und denselben Befehl verwenden, um unsere anderen Seiten zu erstellen. Sobald sie fertig sind, werden Sie sie in der Seiten Mappe.
Wenn Sie fortfahren und die Markdown-Dateien öffnen, werden Sie feststellen, dass die Datei eine Kopfzeile enthält, die durch die dargestellt wird --- Zeichen:
--- titel: # erforderlich! template: phone: default tablet: default # Diese Optionen sollten optional auf ein Bild in den Bildern verweisen. dir header_image: background_image: # Jede dieser Eigenschaften kann ein Array mit Dateinamen enthalten. images: videos: audios: feeds: locations: data: ---
Lassen Sie uns diesen Header für das, was wir brauchen, bearbeiten. Im Moment brauchen wir kein Header-Bild oder Hintergrund. Da wir nur Telefone anvisieren, können wir diese Vorlage auf festlegen Bilder-und-Text-Telefon Dies ist eine vordefinierte Vorlage, die in Maulbeere eingebaut ist. Wir werden jetzt auch nur Bilder verwenden, also sollte der Kopf Ihrer Datei für den Moment so aussehen:
--- Titel: Schwarz-Weiß-Vorlage: Telefon: Bilder und Textbilder: - cat-bw-1.jpg - cat-bw-2.jpg - cat-bw-3.jpg ---
Die Bilder befinden sich in einem Bilder Ordner innerhalb der Vermögenswerte Mappe.
Hinweis: Die Menge an Leerzeichen beim Einrücken ist wichtig. Stellen Sie sicher, dass Ihre Registerkarten auf 2 Leerzeichen gesetzt sind, andernfalls wird der Code nicht korrekt kompiliert.
Gehen Sie zurück zu Ihrem Terminal und geben Sie ein Maulbeer-Aufschlag. Der gesamte Inhalt kann dann in einem Browser oder im iOS-Simulator auf Ihrem localhost (normalerweise Port 3000) angezeigt werden..
Gehen wir weiter und ändern Sie den Header einiger der anderen Seiten.
--- Titel: Katzen mit Hutschablone: Telefon: Bilder und Textbilder: - hats-1.jpg - hats-2.jpg - hats-3.jpg ---
--- Titel: Katzen mit Macs-Vorlage: Telefon: Bilder und Textbilder: - macs-1.jpg - macs-2.jpg - macs-3.jpg ---
Schauen wir uns auch an, wie die Videovorlage aussehen wird.
--- Titel: Kätzchen-Vorlage: Telefon: Videos und Text-Telefon Videos: - Kätzchen.mp4 ---
Mach weiter und renne Maulbeer-Aufschlag erneut und überprüfen Sie die Ausgabe in einem Browser. Es sollte ungefähr so aussehen -
Und die Videoseite sollte wie folgt aussehen -
Lassen Sie uns einen kurzen Blick auf die Bildunterschriften werfen, die Sie für diese Karusselle von Bildern oder Videos erstellen können.
Erstellen Sie drei Dateien in der Bilder / Bildunterschriften Ordner und benennen Sie sie bildname.md, also für die Demo habe ich erstellt cat-bw-1.md, cat-bw-2.md, cat-bw-3.md. Jede der Dateien sieht ungefähr so aus:
--- Name: Cat 1 --- Dies ist eine Schwarzweiss-Katze
Wenn Sie nun Ihre App erneut bereitstellen, wird der Inhalt unter den Bildern geändert, wenn Sie durch die Bilder blättern:
Öffne dein Terminal und renne Maulbeer-Test. Ihr Code wird nun in eine baut Mappe. Xcode wird gestartet und Sie sehen die Struktur Ihrer App, einschließlich a www Ordner, in dem sich alle Dateien befinden. Sie können jetzt in Xcode erstellen und ausführen, und Ihre App wird im Simulator als native Anwendung gestartet.
Mulberry verfügt jetzt über eine integrierte Unterstützung für Weinre, einen Webinspektor, der auf mobile Geräte abzielt (es ist fantastisch!). Mit der kleinen Symbolleiste rechts unten in Ihrer Ecke können Sie Weinre in Touras eigener gehosteter Version von Weinre verwenden. Wenn Sie fortfahren und auf die Schaltfläche Weinre klicken, erhalten Sie einen Code, den Sie auf der Site eingeben können, um einen Remote-Debugger zum Laufen zu bringen. Damit können Sie Javascript oder CSS testen, um zu sehen, wie Ihr DOM von Mulberry erstellt wurde.
Um die Debug-Leiste rechts unten im Bildschirm auszuschalten, befinden sich einige Optionen im TouraConfig.js Datei in erstellen / www / javascript / toura / app die Sie konfigurieren müssen. Sie können hier einen vollständigen Überblick über die Funktionen erhalten, aber die, die Sie auf "false" setzen möchten, sind debugToolbar und debugPage. debugPage ist eine In-App-Debugging-Seite. Sie sollten diese deaktivieren, bevor Sie Ihre App für die Produktion bereitstellen.
Wenn Sie bereit sind, bereitzustellen, führen Sie einfach aus Maulbeere einsetzen in Ihrem Terminal und in den verschiedenen Binärdateien für Ihre Geräte, die im angegeben sind config.yml Datei wird erstellt.
Es gibt noch viel mehr zu entdecken in Mulberry, abgesehen von dem, was ich in dieser sehr übergeordneten Übersicht zeigen konnte. Der Zweck dieses Tutorials besteht darin, Ihnen zu zeigen, wie schnell und einfach Mulberry verwendet werden kann. Wenn Sie sich mutig fühlen, schauen Sie sich einige der Demos an, die mit dem Mulberry-Repository geliefert werden. Dort finden Sie eine großartige Kitchen Sink-App, mit der Sie viele der Dinge erhalten, die Sie gerne verwenden würden.
Wenn Sie mehr über Mulberry erfahren möchten, ist die offizielle Dokumentation ziemlich gut, obwohl sie noch in Arbeit ist. Wenn Sie einen detaillierteren und detaillierteren Einblick in die Entwicklung von Mulberry erhalten möchten, einschließlich der Erstellung von Komponenten für Dinge wie Twitter und Facebook, teilen Sie uns dies bitte im Kommentarbereich mit!
Accentsconagua