Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Erstellen Sie Ihre erste App mit Fuse

by
Difficulty:BeginnerLength:LongLanguages:

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

Nachdem Sie die grundlegenden Konzepte von Fuse kennen gelernt haben, ist es an der Zeit, die Dinge in die Praxis umzusetzen und eine App zu erstellen. In diesem Lernprogramm erfahren Sie, wie Sie eine App mit dem Fuse-Framework entwickeln. Insbesondere werden Sie Folgendes lernen:

  • Wie kann man mit UX Markup programmieren.
  • Wie kann man die Observable-, Timer- und Geolocation-APIs verwenden.
  • Wie kann man eine Vorschau einer App mithilfe der Desktop- und benutzerdefinierten Vorschau anzeigen.

Wenn Sie einen Überblick über Fuse benötigen, sehen Sie sich meinen vorherigen Beitrag in dieser Serie an: Einführung von Fuse für die plattformübergreifende App-Entwicklung.

Voraussetzungen

VoraussetzungenUm mit Fuse zu arbeiten, gehen Sie auf die Downloadseite und melden Sie sich für ein Konto an. Sie können sich auch bei einem vorhandenen Konto anmelden, wenn Sie ein Konto haben.

Die Sicherung ist sowohl für Windows als auch für Mac OS verfügbar. Laden Sie das richtige Installationsprogramm für Ihre Plattform herunter und installieren Sie es. Auf der Downloadseite werden auch die für verschiedene Texteditoren verfügbaren Fuse-Plugins angegeben.  Installieren Sie die für Ihren Texteditor. Die Fuse-Plugins enthalten die Code-Vervollständigung, die Definition der Definitionen und das Anzeigen von Protokollen, die von der App generiert werden. Das alles macht die Entwicklung von Apps einfacher.

Außerdem erfahren Sie, wie Sie die App mit einer benutzerdefinierten Vorschau in der Vorschau anzeigen können. Voraussetzung ist, dass Android Studio oder Xcode auf Ihrem Computer installiert ist.

Grundkenntnisse über Webtechnologien wie HTML, CSS und JavaScript sind hilfreich, aber nicht erforderlich.

Was werden Sie erstellen 

Sie erstellen eine Stoppuhr-App, die auch die zurückgelegte Entfernung misst. Die Entfernung wird über Geolocation gemessen. Der Benutzer kann auch Runden erstellen. Die individuelle Entfernung und Zeit für jede Runde werden auf dem Bildschirm angezeigt.

So wird die App aussehen:

Final Output HIIT Stopwatch

Endausgang HIIT StoppuhrSie können den vollständigen Quellcode im GitHub-Repo-Tutorial anzeigen.

Neues Sicherungsprojekt erstellen

Nachdem Sie Fuse Studio installiert haben, sollten Sie jetzt ein neues Fuse-Projekt erstellen können. Öffnen Sie einfach Fuse Studio und klicken Sie auf die Schaltfläche Neues Fuse-Projekt. Geben Sie den Namen des Projekts ein und klicken Sie auf Erstellen:

Create a new Fuse project

Erstellen Sie ein neues Fuse-ProjektDadurch wird ein neuer Ordner im ausgewählten Verzeichnis erstellt. Öffnen Sie diesen Ordner und öffnen Sie die Datei MainView.ux. Standardmäßig wird nur das <App> Markup verwendet. Aktualisieren Sie es mit einem <Text> und speichern Sie dann die Datei:

Die Vorschau sollte jetzt mit dem von Ihnen angegebenen Text aktualisiert werden:

Hello world output

Das ist der Hauptentwicklungs-Arbeitsablauf in Fuse. Speichern Sie einfach die Änderungen in einer der Dateien im Projektverzeichnis. Diese werden automatisch in der Desktop-Vorschau angezeigt.

Sie können die Protokolle auch im unteren Bereich sehen. Sie können Ihre eigene auslösen, indem Sie, wie im Browser, console.log() verwenden.  Der einzige Unterschied besteht darin, dass Sie JSON.stringify() -Objekte verwenden müssen, um deren Wert anzuzeigen, da die console.log()- Implementierung in Fuse nur Zeichenfolgen ausgeben kann.

UX Markup

Jetzt können wir die App erstellen. Öffnen Sie die Datei MainView.ux und entfernen Sie das <Text>-Element von früher. Auf diese Weise können wir mit einem leeren Blatt beginnen:

Einschließlich Schriftarten

Wie in einem HTML-Dokument werden standardmäßig die Assets (z. B. Schriftarten, Stylesheets und Scripts) vor der eigentlichen Markierung der Seite eingeschlossen. Fügen Sie also Folgendes in das <App>-Element ein:

Dadurch wird die im File-Attribut angegebene Schriftart importiert und ihr der Name Thin zugewiesen. Beachten Sie, dass dies nicht die Standardschriftart für die gesamte Seite ist.  Wenn Sie diese Schriftart verwenden möchten, müssen Sie ihren Namen (Thin) für den bestimmten Text verwenden, auf den Sie die Schriftart anwenden möchten.

Sie können die Schriftart aus dem Tutorial GitHub-Repo herunterladen. Erstellen Sie anschließend einen Ordner assets /fonts/robot im Stammverzeichnis des Projektverzeichnisses und fügen Sie die .ttf-Datei ein.

Wenn Sie eine andere Schriftart verwenden möchten, können Sie sie von dafont.com herunterladen. Dort habe ich die Schriftart für diese App heruntergeladen.

Als nächstes möchten wir Symbole innerhalb der App verwenden. Fuse verfügt nicht wirklich über integrierte Elemente und Symbolsätze, mit denen Sie das tun können.  Es bietet eine Möglichkeit, vorhandene Symbolzeichensätze in Ihre App aufzunehmen. Da Symbolzeichensätze im Wesentlichen Zeichensätze sind, können wir dieselbe Methode zum Einfügen von Zeichensätzen verwenden:

Sie können die Symbol-Schriftart vom GitHub-Repo herunterladen oder direkt von fontawesome.com herunterladen. Beachten Sie, dass nicht alle Symbole auf fontawesome kostenlos sind. Überprüfen Sie daher die tatsächliche Symbolseite, bevor Sie sie verwenden.  Wenn Sie neben dem Symbol ein "Pro"-Label sehen, können Sie es nicht einfach in Ihrem Projekt verwenden, ohne dafür zu bezahlen.

Einschließlich JavaScript

Als nächstes müssen wir die JavaScript-Datei für diese Seite einfügen. Das können wir mit dem <JavaScript>-Element tun:

Vergessen Sie nicht, die Datei scripts/MainView.js im Stammverzeichnis des Projektverzeichnisses zu erstellen.

Neue Komponenten erstellen

Um die Wiederverwendung von Code zu maximieren, können Sie mit Fuse aus vorhandenen Komponenten benutzerdefinierte Komponenten erstellen. Im folgenden Code verwenden wir ein <Panel>, um eine benutzerdefinierte Schaltfläche zu erstellen.  Betrachten Sie es als ein div, das als Container für andere Elemente dient. In diesem Fall verwenden wir es als wiederverwendbare Komponente zum Erstellen einer Schaltfläche.

Sicherung kommt mit vielen Elementen. Es gibt Elemente zum Erstellen von Inhalten, wie z. B. das <Panel>, Elemente zum Anzeigen von Benutzersteuerelementen, Seiten und Navigation, Skripting und Daten sowie Grundelemente zum Erstellen der Benutzeroberfläche. Jedes verfügt über eigene Eigenschaften, mit denen Sie die Daten, die Präsentation und das Verhalten ändern können.

Um eine wiederverwendbare Komponente zu erstellen, fügen Sie einem Präsentationselement, das Sie als Basis verwenden möchten, die Eigenschaft ux:Class hinzu. In diesem Fall verwenden wir ein <Panel> als Basis. Sie können dann einige Standardstile hinzufügen.  Das ist vergleichbar mit dem Styling in CSS. Der Margin fügt Platz außerhalb des Containers hinzu. Hier haben wir nur einen einzelnen Wert angegeben, daher wird dieser Rand auf alle Seiten des Panels angewendet. Color fügt dem Element eine Hintergrundfarbe hinzu:

Im <Panel> möchten wir den Schaltflächentext anzeigen. Wir möchten, dass dies zu einer wiederverwendbaren Komponente wird. Daher brauchen wir eine Möglichkeit, Eigenschaften für die spätere Verwendung dieser Komponente zu übergeben.  Dies ermöglicht uns, unterschiedliche Ergebnisse zu erzielen, indem nur die Eigenschaften geändert werden.

Verwenden Sie im <Panel> den Datentyp des Werts, den Sie als Namen des Elements übergeben möchten, und fügen Sie den Namen der Eigenschaft mit ux:Property hinzu. Sie können den an die Eigenschaft gelieferten Wert dann mit {ReadProperty PropertyName} anzeigen, wobei PropertyName der Wert ist, den Sie an ux:Property übergeben haben.  Auf diese Weise können Sie bei Verwendung der <ToggleBtn>-Komponente eine Text-Eigenschaft angeben.

Als Nächstes möchten wir dem Benutzer eine Art Feedback geben, während die Taste gedrückt wird. Das können wir über Trigger und Animatoren tun.  Trigger sind im Wesentlichen die Ereignis-Listener - in diesem Fall <WhilePressed>. Animatoren sind die Animationen oder Effekte, die Sie ausführen möchten, während der Auslöser aktiv ist.  Der nachstehende Code macht die Schaltfläche 10% größer als ihre ursprüngliche Größe und ändert ihre Farbe. Mit Duration und DurationBack können Sie angeben, wie lange es dauert, bis die Animation ihren Höhepunkt erreicht und das Ende erreicht hat.

Als Nächstes erstellen wir die <IconBtn>-Komponente. Wie der Name schon sagt, ist dies eine Schaltfläche, die nur ein Symbol als Inhalt enthält. Dies funktioniert genauso wie bei der vorherigen Komponente, obwohl wir hier ein paar neue Dinge getan haben.

Das erste ist die Eigenschaft ux:Name. Dies ermöglicht uns, einem bestimmten Element einen Namen zu geben, damit wir uns später darauf beziehen können. In diesem Fall verwenden wir es, um die Color-Eigenschaft zu ändern, während die Schaltfläche gedrückt wird.

Wir haben auch ein Bedingungselement mit dem Namen <WhileTrue> verwendet. Das ermöglicht es uns, den <WhilePressed> Trigger zu deaktivieren, wenn der Wert für is_running ein falscher ist.  Wir werden den Wert für diese Variable angeben, sobald wir den JavaScript-Teil erreicht haben. Im Moment wissen Sie, dass diese Variable anzeigt, ob der Timer gerade läuft oder nicht.

Hauptinhalt

Wir können jetzt mit dem Hauptinhalt fortfahren. Zuerst verpacken wir alles in ein <StackPanel>.  Wie der Name schon sagt, können wir seine Kinder entweder vertikal oder horizontal "stapeln". Standardmäßig wird die vertikale Ausrichtung verwendet, sodass wir sie nicht explizit angeben müssen:

Im obigen Code haben wir vier Werte für die Margin verwendet. Im Gegensatz zu CSS ist die Werteverteilung links, oben, rechts und unten.  Wenn nur zwei Werte angegeben werden, handelt es sich um Links-Rechts, Oben-Unten. Sie können das Auswahlwerkzeug in Fuse Studio verwenden, um die angewendeten Ränder zu visualisieren.

Als Nächstes fügen wir ein Hintergrundbild für die Seite hinzu. Dadurch wird der Dateipfad zu dem Hintergrundbild akzeptiert, das Sie verwenden möchten. Ein StretchMode von Fill bewirkt, dass sich der Hintergrund so dehnt, dass er den gesamten Bildschirm ausfüllt:

Sie können das Hintergrundbild, das ich verwendet habe, aus dem Tutorial GitHub-Repo herunterladen. Oder Sie finden ähnliche Muster auf der Toptal-Website.

Zeigen Sie als Nächstes den Namen der App an. Darunter befindet sich das Textfeld mit der verstrichenen Zeit. Dieser Text muss regelmäßig aktualisiert werden, daher müssen wir ihn in eine Variable umwandeln, die über JavaScript aktualisiert werden kann.  Um einen in der JavaScript-Datei dieser Seite initialisierten Text auszugeben, müssen Sie den Variablennamen in geschweifte Klammern einschließen. Später werden Sie sehen, wie der Wert für diese Variable aus der JavaScript-Datei bereitgestellt wird:

Als Nächstes verwenden wir die <IconBtn>-Komponente, die wir zuvor erstellt haben - nicht anders als in einer Webumgebung, in der wir die ID der Schriftart verwenden. In Fuse müssen Sie den Unicode verwenden, der der Symbol-Schriftart zugeordnet ist, die Sie verwenden möchten.  Sie müssen auch &#x als Präfix verwenden. Wenn diese Schaltfläche gedrückt wird (Clicked), wird die in der JavaScript-Datei deklarierte Funktion addLap() ausgeführt:

In Schriftart Awesome finden Sie den Unicode der Symbolschriftart auf einer eigenen Seite.

Direkt unter der Schaltfläche zum Hinzufügen einer neuen Runde befindet sich Text, der darauf hinweist, dass die Schaltfläche oben zum Hinzufügen neuer Runden dient:

Zeigen Sie als Nächstes die Schaltfläche zum Starten und Stoppen des Timers an. Das führt auch eine Funktion aus, die wir später erklären werden:

Als Nächstes müssen die vom Benutzer hinzugefügten Runden ausgegeben werden. Dies beinhaltet die Rundennummer, die zurückgelegte Distanz und die aufgewendete Zeit. Mit dem <Each>-Element können wir eine Sammlung von Objekten durchlaufen und die individuellen Eigenschaften für jedes Objekt anzeigen:

Im obigen Code verwenden wir das <DockPanel>, um den Inhalt für jedes Element einzuwickeln. Diese Art von Panel ermöglicht es uns, die untergeordneten Elemente an verschiedenen Seiten (oben, links, rechts und unten) des verfügbaren Platzes zu "verankern".  Standardmäßig werden die untergeordneten Elemente direkt übereinander positioniert. Um sie gleichmäßig zu verteilen, müssen Sie die Alignment-Eigenschaft hinzufügen.

JavaScript-Code

Jetzt können wir den JavaScript-Code hinzufügen. In Fuse wird JavaScript hauptsächlich für die Geschäftslogik und für die Arbeit mit der nativen Funktionalität des Geräts verwendet.  Effekte, Übergänge und Animationen für die Interaktion mit der Benutzeroberfläche werden bereits von UX Markup behandelt.

Beginnen Sie mit dem Importieren aller APIs, die wir benötigen. Dazu gehört Observable, das hauptsächlich zur Zuweisung von Variablen in der Benutzeroberfläche verwendet wird. Diese Variablen können dann mit JavaScript aktualisiert werden.  Timer ist das Äquivalent der Funktionen setTimeout und setInterval in der Webversion von JavaScript. GeoLocation ermöglicht es uns, den aktuellen Standort des Benutzers abzurufen:

Als Nächstes initialisieren wir alle beobachtbaren Werte, die wir verwenden werden. Das sind die Variablen, die Sie zuvor im UX-Markup gesehen haben.  Die Werte für diese Variablen werden während der gesamten Lebensdauer der App aktualisiert. Daher werden sie zu einer beobachtbaren Variablen. Dadurch können wir den Inhalt der Benutzeroberfläche effektiv aktualisieren, wenn sich einer dieser Werte ändert:

Danach können wir nun die Anfangswerte für die Umschaltfläche und den Zeitgebertext festlegen:

So ändern Sie den Wert einer beobachtbaren Variablen. Da sich diese Funktionen nicht in einer Funktion befinden, sollte die Benutzeroberfläche sofort beim Start der App aktualisiert werden.

Legen Sie die Anfangswerte für den Timer, die Rundenzeit und den Ort für jede Runde fest:

Mit der Funktion toggle() können Sie den Timer starten und stoppen. Wenn der Timer gerade gestoppt ist und der Benutzer auf die Umschaltfläche tippt, werden nur dann die Werte für den Timer und die Runden zurückgesetzt.  Das liegt daran, dass der Benutzer diese Werte auch nach dem Stopp des Timers sehen soll.

Rufen Sie anschließend den aktuellen Standort des Benutzers ab und verschieben Sie ihn in das locations-Array. Das ermöglicht es uns, es später mit dem nächsten Ort zu vergleichen, sobald der Benutzer eine Runde hinzugefügt hat.  Erstellen Sie dann einen Timer, der alle 10 Millisekunden ausgeführt wird. Wir erhöhen sowohl die Gesamt-time als auch die lap_time für jede Ausführung. Aktualisieren Sie dann die Benutzeroberfläche mit dem formatierten Wert mithilfe der Funktion formatTimer():

Wenn der Benutzer den Timer stoppt, löschen wir ihn mithilfe der delete()-Methode im Timer. Das erfordert die timer_id, die beim Erstellen des Timers zurückgegeben wurde:

Weiter ist die Funktion zum Formatieren des Timers. Dies funktioniert, indem die Millisekunden in Sekunden und Minuten umgewandelt werden. Wir wissen bereits, dass diese Funktion alle 10 Millisekunden ausgeführt wird.  Bei jeder Ausführung wird time um 1 erhöht. Um die Millisekunden zu erhalten, multiplizieren wir einfach time mit 10. Von dort berechnen wir nur die Sekunden und Minuten basierend auf dem Äquivalentwert für jede Maßeinheit:

Jedes Mal, wenn der Benutzer auf die Aktualisierungsschaltfläche tippt, wird die Funktion addLap() ausgeführt. Das fügt einen neuen Eintrag über den beobachtbaren laps hinzu:

Hier ist die Funktion, um die Entfernung in Metern zurückzulegen. Dies verwendet die Haversine-Formel:

Vergessen Sie nicht, alle beobachtbaren Werte zu exportieren:

Geolocation-Paket

Fuse enthält nicht alle Pakete, die standardmäßig unterstützt werden. In Bezug auf Geolocation und lokale Benachrichtigungen müssen Sie Fuse anweisen, diese beim Erstellen der App einzuschließen.  Öffnen Sie StopWatch.unoproj im Stammverzeichnis Ihres Projektverzeichnisses und fügen Sie Fuse.GeoLocation in das Packages-Array ein:

Das sollte Fuse anweisen, das Geolocation-Paket bei der Erstellung der App für die benutzerdefinierte Vorschau oder für die Erstellung eines Installationsprogramms mit einzubeziehen.

Einrichten für die benutzerdefinierte Vorschau

Bevor Sie die App auf Ihrem iOS-Gerät ausführen können, müssen Sie der App zunächst eine Bundle-ID hinzufügen.  Öffnen Sie die Datei StopWatch.unoproj und fügen Sie unter iOS Folgendes hinzu. Das ist die eindeutige Identifikation der App, wenn sie an den App Store übermittelt wird:

Melden Sie sich unter Xcode mit Ihrem Apple-Entwicklerkonto an. Wenn Sie noch keine haben, können Sie zur Apple-Entwickler-Website gehen und eine erstellen.  Es ist tatsächlich kostenlos, Apps auf Ihrem iOS-Gerät zu entwickeln und zu testen. Es gibt jedoch einige Einschränkungen, wenn Sie nicht Teil des Entwicklerprogramms sind.

Nachdem Sie Ihr Konto erstellt haben, gehen Sie zu den Xcode-Einstellungen und fügen Sie Ihr Apple-Konto hinzu. Klicken Sie dann auf Zertifikate verwalten und fügen Sie ein neues Zertifikat für die iOS-Entwicklung hinzu. Mit diesem Zertifikat wird sichergestellt, dass die App aus einer bekannten Quelle stammt.

Sobald das erledigt ist, sollten Sie die App jetzt auf Ihrem Gerät ausführen können. Klicken Sie in Fuse Studio auf Vorschau > Vorschau auf iOS und warten Sie, bis Xcode gestartet wird.  Sobald Xcode geöffnet ist, wählen Sie Ihr Gerät aus und klicken Sie auf die Wiedergabeschaltfläche. Dadurch wird die App erstellt und auf Ihrem Gerät installiert. Wenn ein Build-Fehler vorliegt, ist es höchst wahrscheinlich, dass der Bezeichner für das Vorschau-Bundle nicht eindeutig ist:

change the bundle ID

Wenn Sie die Bundle-ID in etwas Einzigartiges ändern, sollte das Problem behoben werden. Sobald der Fehler im Signierbereich ausgeblendet ist, klicken Sie erneut auf die Wiedergabeschaltfläche, um die App neu zu erstellen. Das sollte die App auf Ihrem Gerät installieren.

Sie können die App jedoch erst öffnen, wenn Sie sie genehmigt haben.  Sie können dies auf Ihrem iOS-Gerät tun, indem Sie auf Einstellungen > Allgemein > Geräteverwaltung (Settings > General > Device Management) gehen und die Email auswählen, die Ihrem Apple Developer-Konto zugeordnet ist.Genehmigen Sie es, und das sollte die App entsperren.

Für Android sollten Sie die App ohne weitere Schritte in der Vorschau anzeigen können.

Schlussfolgerung

Das war's! In diesem Lernprogramm haben Sie die Grundlagen zum Erstellen einer App mit dem Fuse-Framework kennen gelernt. Sie haben insbesondere eine Stoppuhr-App erstellt.  Durch das Erstellen dieser App haben Sie gelernt, wie Sie mit Fuse UX Markup und einigen JavaScript-APIs von Fuse arbeiten. Sie haben auch gelernt, wie Sie mit Fuse Studio während der Entwicklung eine Vorschau der App auf Ihrem Computer und Ihrem Telefon anzeigen.

Advertisement
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.