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 reibungslose Animationen auf dem Bildschirm 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. Kein Plug-In, kein Download, kein Hack. Durch Hinzufügen zu jedem DIV können Entwickler die Matrix zusammensetzen und direkt auf die GPU zugreifen.

Ich gehe näher auf die Besonderheiten von Famo.us ein dieser Blog-Beitrag. Dank an Zack Brown für all seine Hilfe dabei! Lasst uns beginnen.

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.

Züge

  • 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 ist.

Bedarf

  • 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 ist für mobile Geräte konzipiert. 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 Nächster 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.

Daten durchlaufen

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 :  Google möchte, dass Sie zertifizierte Android-Geräte kaufen

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 nur Famous-Angular (FA) -Richtlinien verwendet, wie z.

Dies ist für den Namen über dem Pokemon auf dem Frontbildschirm.

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

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 für die Angular-Implementierung einsetzen. 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. Alle der 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 ist vollgepackt mit ihnen, was den Einstieg erleichtert. Hier ist eine, um das Bild auf der Vorderseite zu beleben.

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

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, weshalb Sie sehen, dass ich alle meine Eigenschaften als Objekt definiert habe, wie z align.frontNamezum einfachen Lesen.

Klassen hinzufügen

In FA-Direktiven fügen Sie mehrere Klassen als Zeichenfolgen hinzu unterlassen Sie durch Kommata abgetrennt.

Wenn Sie versuchen, Klassen hinzuzufügen, indem Sie Oberflächen in JavaScript erstellen, ü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. Dies bedeutet nicht, dass FA irgendwohin geht, da 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, zu Open Source-Projekten und zu Best Practices für die Interoperabilität 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