Wir werden auf die Details eingehen, wie die Zusammenarbeit zwischen Designer und Entwickler in AWS Amplify Studio die App-Entwicklung erleichtern kann, aber lassen Sie uns *eines* dieser Dinge *ganz oben* hier behandeln.
Stellen Sie sich vor, Ihr Designer (oder Sie selbst!) arbeitet gerne mit Figma, dem derzeit dominanten Tool im UI-Design. Das gesamte Designsystem ist vorhanden, von Farben und Schriftarten über atomare Komponenten wie Schaltflächen und Formulare bis hin zu größeren Layoutkomponenten wie Karten und Sammlungen. Die Designs in Figma entwickeln sich weiter, und wenn dies geschieht, ist es die Aufgabe eines Entwicklers, die Änderungen auf die Website zu übertragen. Was wäre, wenn... das keine manuelle Arbeit sein müsste? Mit AWS Amplify können Sie diese aktualisierten Figma-Designs direkt importieren, ohne zusätzliche Arbeit, außer der Überprüfung und Annahme der Änderungen. Das ist ziemlich magisch und etwas, das man sich bisher nur theoretisch für die Zukunft der Designtools vorstellen konnte. Jetzt ist es da.
Wir werden gleich noch mehr darauf eingehen, ich wollte nur sicherstellen, dass Sie das gleich zu Beginn mitbekommen.
Die Bühne bereiten
Designer haben oft Schwierigkeiten mit der Zusammenarbeit mit Entwicklern und umgekehrt, obwohl beide in der Regel leidenschaftlich daran interessiert sind, großartige App-Erlebnisse zu liefern. Wenn Sie ein Designer sind und jemals Ihre visuelle Kreation an einen Entwickler übergeben mussten, kennen Sie die manchmal folgende Angst. Wird Ihr Entwickler wissen, wie er Ihr Design vollständig umsetzen kann? Werden Pixel entfernt? Werde ich mit der Endversion zufrieden sein?
Wenn Sie ein Entwickler sind, denken Sie vielleicht, dass die Designimplementierung und Iteration ein mühsamer und manueller Prozess ist. Möglicherweise fühlen Sie sich nicht in der Lage, über das Design nachzudenken, obwohl Ihnen die Freude Ihrer Kunden und Endbenutzer sowie das Wachstum Ihres Unternehmens wichtig sind.
Es gibt viele Tools, die den Übergabeprozess erleichtern sollen. Die meisten befassen sich jedoch nicht vollständig mit der Implementierung des Designs.
Das AWS Amplify-Team hat kürzlich AWS Amplify Studio gestartet, eine neue visuelle Entwicklungsumgebung, die es Front-End-Entwicklern ermöglicht, Full-Stack-Apps mit minimalem Code zu erstellen und dabei die leistungsstarken Backend-Konfigurations- und Verwaltungsfunktionen von Amplify zu integrieren. Amplify Studio hilft, den Designimplementierungsprozess zu automatisieren, unterstützt Designer und Entwickler bei einer besseren Zusammenarbeit und stellt sicher, dass Designs in das Endprodukt umgesetzt werden. Tauchen wir ein und sehen uns die neuen Funktionen an.
Lassen Sie uns eine App erstellen
Im vorherigen Beitrag haben wir die Funktionalität von Amplify Studio umrissen. Lassen Sie uns nun durchgehen, wie Sie schnell eine Web-App auf AWS erstellen und bereitstellen können. Amplify Studio enthält Funktionen zur Erstellung und Verwaltung von Backends, die die Einrichtung und Verwaltung von App-Backend-Infrastrukturen wie Datenbanktabellen, Benutzerauthentifizierung und Dateispeicher vereinfachen, ohne dass Cloud-Kenntnisse erforderlich sind.
Nutzen Sie die visuelle Entwicklungsumgebung, um ein Datenmodell, Benutzerauthentifizierung und Dateispeicher ohne Backend-Kenntnisse zu definieren. Amplify Studio erledigt die schwere Arbeit. Konzentrieren wir uns auf die Benutzeroberfläche und die Datenbindung.
Diese gesamte Demo wurde von Ali Spittel, einem Senior Developer Advocate für AWS Amplify, durchgeführt.
Zu Demonstrationszwecken stellen Sie sich eine **App zur Vermietung von Häusern** vor.
Zuerst erstellen wir ein Datenmodell, damit wir Daten mit meinen UI-Komponenten verknüpfen können. Dann erstellen wir eine Komponente mit einem Bild der Mietwohnung, einem Namen, einem Preis und einem Ort.
Dann können wir speichern und bereitstellen.
Als Nächstes wechseln wir zu Figma. Amplify Studio hilft Entwicklern und UX-Designern, besser zusammenzuarbeiten. Zusätzlich zu der erheblichen Zeit, die Entwickler für die Implementierung von Designs und Iterationen benötigen, werden die UX-Designs oft nicht genau umgesetzt, was Designer frustriert und zu einer suboptimalen Endbenutzererfahrung führt. Mit Amplify Studio können Entwickler benutzerdefinierte UI-Komponenten, die von ihren Designern in Figma erstellt wurden, importieren, oder sie können die von Amplify Studio bereitgestellte UI-Komponentenbibliothek verwenden und diese an ihren Styleguide anpassen.
Das Amplify-Team hat eine Figma-Datei namens AWS Amplify UI Kit veröffentlicht.
Das Styling korrespondiert mit der Amplify UI-Bibliothek, die Primitiven, Komponenten (die Kombinationen von Primitiven sind), Karten und Sammlungen enthält.
Duplizieren Sie die Datei als Startpunkt und bearbeiten Sie sie dann!
Sie können die Komponenten beliebig anpassen. Wenn Sie mit einem UX-Designer zusammenarbeiten, können Sie beide mit dem Figma-Projekt arbeiten und die UX-Designs in Amplify Studio importieren.
Das Figma-zu-Code-Plugin von Amplify Studio ermöglicht es mir, UX-Designs direkt aus Figma zu importieren, die automatisch in sauberen React-Code übersetzt werden, der weiter angepasst werden kann.
Um die UX-Komponenten zu importieren, fügen Sie den Link zur Figma-Datei ein und fügen Sie ihn in Amplify Studio ein.
Alle meine Komponenten aus meiner Figma-Datei werden in Amplify Studio importiert. Sie können die importierten Komponenten in Figma überprüfen und entscheiden, ob Sie sie akzeptieren oder ablehnen möchten, als zusätzliche Qualitätskontrolle. Wenn Sie eine Designiteration importieren, hilft dies Ihnen, die Designänderungen zu sehen, bevor Sie sie implementieren.
Dieser Prozess spart mir Zeit, da ich nicht Tausende von Codezeilen schreiben muss, da Amplify Studio dies für mich automatisch generiert. Es erstellt lesbaren, glaubwürdigen React-Code. Später können Sie diesen Code bei Bedarf erweitern, um zusätzliche Kontrolle über die Komponenten zu erhalten.
Wir können die UI-Komponenten dann mit Daten aus dem Datenmodell verknüpfen und Kind-Eigenschaften wie Mietpreis, Name und Ort hinzufügen.
Wir können eine Sammlung von Komponenten erstellen und das Layout anpassen. Sagen wir, wir möchten sie als Liste oder als Raster anzeigen oder die Richtung ändern, in der sie sich bewegen, Abstände anpassen und so weiter. Wir können die Daten auswählen, die auf meiner Seite angezeigt werden.
Nun müssen wir dies in die App integrieren. Studio liefert mir Code-Snippets, die ich verwenden kann, um meine Komponenten in meine App zu integrieren.
Führen Sie den Befehl amplify pull aus, der Code-Generierung für alle Figma-Komponenten ausführt, die wir in Amplify Studio importiert haben. Dann können wir diese React-Komponenten wie jede andere im Codebase verwenden.
Wir haben ein Amplify-Verzeichnis mit Informationen über die API und auch ein models-Verzeichnis mit Daten, die im Frontend erstellt wurden. Wir haben auch ein vollständiges Verzeichnis mit UI-Komponenten, das alle UI-Komponenten enthält, die wir in Figma erstellt und in Amplify Studio importiert haben.
Nehmen wir an, wir haben die Amplify JavaScript-Bibliotheken und React UI-Komponenten installiert. Wir werden ein paar Codezeilen verwenden, um Amplify für diese App zu konfigurieren. Wir können die Amplify Provider-Komponente verwenden, die sich auf der obersten Ebene befindet. Sie ermöglicht uns, die richtige Formatierung für meine UI-Komponenten zu haben.
In der folgenden Komponente importieren wir die CSS-Datei und dann die Mietobjekt-Sammlung. Dann können wir meinen React-Code für die App sehen. Das ist der Code, der von Amplify ***generiert*** wurde.
Hier sind die Eigenschaften, die wir in der Amplify UI-Dokumentation ändern können.
Wir können auch Überschreibungen für Elemente in den generierten Komponenten hinzufügen.
Viele Unternehmen haben ihre eigenen Styleguides, und das ist großartig! Wir können Amplify Studio verwenden, um die Details dieser Styleguides nach Figma und letztendlich in unsere gesamte App zu übertragen.
Es gibt ein neues Figma-Plugin, das Sie installieren können: AWS Amplify Theme Editor. Wenn Sie der UI ein benutzerdefiniertes Thema hinzufügen möchten, können Sie das Plugin dafür verwenden. Dies geschieht über benutzerdefinierte CSS-Eigenschaften, mit JavaScript-Objekten oder Designtoken in Figma mit dem Amplify UI Theme Editor-Plugin. Sie können es verwenden, um die Farbpalette, Komponentenfarben und Markenfarben zu ändern.
Eines der großartigen Dinge an Amplify Studio ist, dass es mit den Werkzeugen funktioniert, die Designer und Entwickler verwenden, aber hilft, ihren Workflow zu zentralisieren und zu straffen und gleichzeitig eine engere Zusammenarbeit zu ermöglichen.
Designer können sicher sein, dass ihre UX-Designs und Iterationen vollständig umgesetzt werden. Entwickler können sicher sein, dass sie Designimplementierungen als Teil ihres CI/CD-Prozesses einbeziehen. Als Entwickler können wir Zeit sparen, indem wir nicht die Ideen und Änderungen von Designern in Code übersetzen müssen, und wir können uns darauf konzentrieren, eine bessere App-Erfahrung und die Bedürfnisse der Endbenutzer zu entwickeln und gleichzeitig sicherzustellen, dass wir die Designdetails nicht übersehen.
Sobald diese App bereit zur Bereitstellung ist, können wir die App mit Amplify Hosting hosten. Es bietet Hosting für jede React-, Vue- oder Next.js-Web-App mit integrierten Continuous Integration und Continuous Deployment (CI/CD)-Workflows, Tests, Pull-Request-Vorschauen und benutzerdefinierten Domains.
Die Frontend-UI-Funktionen von Amplify Studio befinden sich in der Vorschau (seine App-Backend-Funktionen sind allgemein verfügbar). Sie können die Sandbox besuchen, um sie auszuprobieren.
