Erstellen Sie eine mobile App mit Famo.us und Angular

Ich liebe Hochleistungs-JavaScript und liebe es, das zu teilen, was ich für das wahre Potenzial halte. In diesem Tutorial möchte ich mich auf Famo.us konzentrieren, mit dem Sie seidige 60 fps beibehalten können, während Sie flüssige Bildschirmanimationen haben.

Famo.us verwendet dazu das CSS3-Grundelement -webkit-transform:

matrix3d, mit der das Framework die zusammengesetzte Matrix berechnen und die Browser-Rendering-Engine ignorieren kann. Keine Plugins, keine Downloads, kein Hacking. Durch Hinzufügen zu jedem DIV können Entwickler die Matrix zusammensetzen und direkt auf die GPU zugreifen.

Ich gehe näher auf die Vor- und Nachteile von Famo.us ein dieser Blog-Beitrag. Dank an Zack Brown für all seine Hilfe dabei! Lass uns anfangen.

Am Ende dieses Projekts können Sie:

  • Verstehen, wie Angular im Kontext einer Famo.us-Anwendung funktioniert
  • Nutzen Sie die wahre Kraft von JavaScript und die guten Teile von HTML5
  • Erstellen Sie flüssige Animationen

Mein Ziel für dieses Projekt ist es zu veranschaulichen, wie einfach Sie HTML5- und JavaScript-Projekte erstellen können, die auf mobilen Apps mit nahezu nativen Geschwindigkeiten ausgeführt werden.

Eigenschaften

  • Die mobile App funktioniert unter iOS und Android über Cordova.
  • Die universelle Windows 10-App funktioniert nativ unter Windows 10.
  • Dieses Projekt kann auch als gehostete Website ausgeführt werden, obwohl ich es vergrößert habe, was für mobile Geräte am besten geeignet ist.

Bedingungen

  • PC oder Mac
  • Webserver
  • Plattformübergreifende Testmatrix (wie BrowserStack, IDE oder kostenlose virtuelle Maschinen für EdgeHTML, den Renderer für Microsoft Edge, und Webanwendungsinhalte, die unter Windows 10 gehostet werden)

Installateur

  1. Laden Sie die Quelle von herunter GitHub.
  2. Laden Sie einen Webserver herunter und installieren Sie ihn (ich verwende MAMP unter OS X oder dem in Visual Studio unter Windows integrierten IIS-Server).

Öffnen Sie das Projekt

  1. Starten Sie Ihren Webserver.
  2. Bewegen Sie sich in Richtung berühmtes-eckiges-Pokémon / app /.

Das Projekt kann auf Mobilgeräten ausgeführt werden. Verwenden Sie daher den mobilen Emulator Ihres Browsers, um die richtige Ansicht zu erhalten. So würde es auf einem iPhone 6 im Emulator über den Chrome-Desktop-Browser (375 × 667) aussehen:

Die erstellte mobile Anwendung wird auf dem iPhone 6-Emulator angezeigt

Wie es funktioniert

Greifen Sie auf die Datenbank zu

Ich bekomme alle Informationen von PokeAPI, das eine gut dokumentierte API hat, aber keine Bilder für jedes der Pokémon hat. Für die Bilder ziehe ich einfach den Namen des aktuell ausgewählten Pokémon und füge ihn am Ende dieser URL hinzu: http://img.pokemondb.net/artwork/. Zum Beispiel: http://img.pokemondb.net/artwork/venusaur.jpg bringt Sie zu einem Bild von Vanosaur. Schlau, richtig? Leider steht ihnen keine API zur Verfügung.

Jedes Mal, wenn der Benutzer drückt folgenden Auf der Schaltfläche wird eine Zufallszahl zwischen einem von mir festgelegten Min / Max-Wert (z. B. 1 bis 20) generiert und ein Pokémon aus der Datenbank abgerufen, das dieser Zahl entspricht. So sieht es aus:

http://pokeapi.co/api/v1/pokemon/1/ Gibt ein JSON-Objekt für Bulbasaur zurück. Sie können spielen Sie mit ihrer API.

Durchlaufen Sie die Daten

Ich durchlaufe dann das JSON-Objekt und setze die Eigenschaften, die ich für Variablen in Angular finde, mithilfe von $Scope Objekt.

Hier ist ein Beispiel:

Sie werden vielleicht bemerken, dass ich auch hier einige andere Funktionen habe, wie z capitalizeFirstLetter, was genau das tut. Ich wollte, dass die Fähigkeiten und der Typ (z. B. Gift, Kraut, Flucht) den ersten Buchstaben in Großbuchstaben haben, da sie in Kleinbuchstaben aus der Datenbank zurückkommen.

verbunden :  Erstellen eines Anmeldebildschirms mit TextInputLayout

Ich schleife auch die Fähigkeiten und schiebe sie zu einem Fähigkeitsobjekt, das so aussieht:

Die Datenbank gibt auch verschiedene Typen für einige Pokémon zurück, z. B. Charizard, der sowohl stiehlt als auch feuert. Um die Sache einfach zu halten, wollte ich jedoch nur eine aus der Datenbank zurückgeben.

Auf dem Bildschirm zeichnen

Famo.us hat zwei Wellen zum Zeichnen von Inhalten auf dem Bildschirm durch Erstellen OberflächenDies sind die Elemente, die Ihren Text, Ihre Bilder usw. enthalten:

  • JavaScript
  • Richtlinien FA (HTML)

Ich habe kein JavaScript verwendet, um die Oberflächen in dieser App zu zeichnen. Stattdessen habe ich mich dafür entschieden, nur Famous-Angular (FA) -Richtlinien zu verwenden, wie z.

Dies ist für den Namen über dem Pokémon auf dem Frontbildschirm.

Sie werden feststellen, dass die Oberfläche von a umhüllt ist fa-modifier. Sie können Lesen Sie dazu die Famo.us-DokumentationSie passen jedoch im Wesentlichen die Eigenschaften einer Oberfläche an, z. B. Ausrichtung, Größe und Herkunft. Es hat eine Weile gedauert, bis ich den Unterschied zwischen Ausrichtung und Herkunft herausgefunden habe.

Ursprung

Es ist der Bezugspunkt auf jeder Oberfläche. Wenn ich ein Rechteck zeichnen und auf dem Bildschirm verschieben möchte, muss ich entscheiden, welcher Punkt dieses Rechtecks ​​mein Ausgangspunkt sein soll. Das Dokumente Famo.us erkläre es gut. Die Werte werden wie folgt dargestellt:

Ausrichtung

Dies ist die Position einer Oberfläche auf dem Bildschirm. Wenn Sie die Ausrichtung ändern, wird der Ursprung als Referenzpunkt zum Starten verwendet.

Wo Angular endlich kommt

Hier können Sie nun alle Ihre Angular-Kenntnisse und Datenbindungen einsetzen, um mit der Angular-Implementierung zu arbeiten. Wenn Sie bereits Erfahrung mit Angular haben, ist dies hier nicht drastisch anders.

Diese Schaltfläche erscheint auf dem ersten Bildschirm und zieht einfach ein anderes Pokémon aus der Datenbank. Das ganze ng Die (Winkel-) Anweisungen, die Sie kennen, sind hier, wie z ng-click. Ich habe hier mehrere Funktionen. Beachten Sie, dass sie nicht durch Kommas getrennt sind.

Ich verknüpfe auch den Wert von $scope.nextBtn beim {{nextBTn}} und HTML.

Damit Famo.us und Angular zusammenarbeiten, müssen wir einbeziehen $Famo.us oben in unserer JavaScript-Datei. So geht's:

Animationen

Was wäre eine Hochleistungsanwendung ohne Animationen? Famo.us wird mit ihnen geliefert, was den Einstieg erleichtert. Hier ist eine, um das Bild auf der Vorderseite zu animieren.

Es gibt verschiedene Arten von Kurven, die Sie hier verwenden können. Weitere Informationen finden Sie in der Dokumentation. Ich benutze auch eine Rückruffunktion, returnToOrigSize, um das Bild zu vergrößern und es dann auf seine ursprüngliche Größe zu verkleinern.

Frustrationspunkte

Auf dem Weg bin ich auf einige Probleme gestoßen.

Bei FA-Direktiven sind die Eigenschaften als Zeichenfolgen definiert

Wenn Sie einen Rechtschreibfehler haben, verwendet die App nur die Standardwerte für diese Eigenschaft. Es hat mich ein paar Mal süchtig gemacht, deshalb sehe ich, dass ich alle meine Eigenschaften als Objekt festgelegt habe, wie z align.frontName, zum leichteren Lesen.

Klassen hinzufügen

In FA-Direktiven fügen Sie mehrere Klassen als Zeichenfolgen hinzu, und das sind sie unterlassen Sie durch Kommata abgetrennt.

Wenn Sie versuchen, Klassen durch Erstellen von Oberflächen in JavaScript hinzuzufügen, übergeben Sie ein Array von Zeichenfolgen.

Ich habe eine Weile gebraucht, um das herauszufinden, weil ich nur die Lösung gefunden habe in diesem Thread.

Famo.us + Angular scheint (im Moment) veraltet zu sein

In der Mitte dieses Projekts sah ich, dass Famo.us an einer verbesserten Version des Frameworks arbeitete, das Folgendes enthält Mischform. Famo.us + Angular nutzt diese Ergänzungen (noch) nicht. Das heißt nicht, dass FA irgendwohin geht, weil es einwandfrei funktioniert - es ist nur so, dass Sie nicht die neuesten Funktionen erhalten.

Ressourcen

Bequemer mit JavaScript

Dieser Artikel ist Teil der Webentwicklungsreihe von Microsoft Technical Evangelists zum praktischen Lernen von JavaScript, Open Source-Projekten und Best Practices für die Interoperabilität, einschließlich Microsoft Edge Browser und das neue EdgeHTML-Renderer.

Wir empfehlen Ihnen, auf verschiedenen Browsern und Geräten zu testen, einschließlich Microsoft Edge, dem Standardbrowser für Windows 10, mit kostenlosen Tools unter dev.modern.IE::

Eingehende technische Informationen zu Microsoft Edge und der Webplattform von unseren Ingenieuren und Evangelisten:

Weitere kostenlose plattformübergreifende Tools und Ressourcen für die Webplattform:

Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.
We would like to show you notifications for the latest news and updates.
Dismiss
Allow Notifications