Blog

Ein erster Blick auf die UI-Bibliothek von AWS Amplify Studio

Andrès Koetsier

Aktualisiert Oktober 16, 2025

7 Minuten

Auf der letzten re:Invent hat AWS AWS Amplify Studio als Erweiterung des aktuellen AWS Amplify Service vorgestellt. Damit können Sie mit einer visuellen Entwicklungsumgebung und mit wenig Programmieraufwand vollständige Anwendungen erstellen. In diesem Leitfaden führe ich Sie durch die Erstellung eines einfachen Frontends unter Verwendung der neuen UI-Bibliothek und teile meine Meinung dazu.

Was ist AWS Amplify Studio?

AWS Amplify bietet eine Reihe von Tools, die die Entwicklung von Full Stack Serverless-Anwendungen vereinfachen. Innerhalb weniger Minuten können Sie ein Backend konfigurieren und es mit Ihrer Web- oder mobilen App verbinden. Die Verbindung Ihres Frontends mit dem Backend oder die Integration verschiedener Amplify-Funktionen erfordert jedoch immer noch einiges an Programmierarbeit.

Mit den neuen Funktionen von Amplify Studio will AWS Ihnen einen Teil dieser Codierung abnehmen. Damit können Sie ein Figma-Design in Amplify Studio importieren und eine Benutzeroberfläche in der visuellen Entwicklungsumgebung direkt von Ihrem Browser aus erstellen. Mit automatisch gespotteten Daten können Sie die Modelle an die verschiedenen Komponenten in Ihrem Frontend binden und eine reichhaltige Benutzeroberfläche erstellen. Sobald Sie bereit sind, können Sie die Artefakte als Code exportieren und in Ihrer Anwendung verwenden, wo Sie weiterhin die Flexibilität und Kontrolle haben, Dinge zu ändern.

Für wen ist es?

AWS Amplify richtet sich hauptsächlich an Frontend-Entwickler und Entwicklungsteams, die Full-Stack-Serverless-Anwendungen erstellen möchten. Mit den neuen Funktionen von Amplify Studio, der früheren Amplify Admin UI, können Sie auch Ihre Designer einbeziehen, um einen größeren Anteil an der Entwicklung der App zu haben.

Wie funktioniert das?

Mit Amplify Studio können Sie große Teile Ihrer Anwendung über den Browser erstellen. Sie sind jedoch nicht darauf beschränkt, weiterhin vom Browser aus zu arbeiten. Zusammen mit der Amplify-CLI können Sie zwischen verschiedenen Entwicklungsumgebungen wechseln, indem Sie Änderungen in AWS Amplify Studio ziehen und schieben.

Der erste Schritt in der Entwicklung besteht darin, unser Datenmodell zu entwerfen. In dieser Anleitung werden wir eine Tierhandlung einrichten, in der Sie tolle Sachen für Ihr Lieblingstier kaufen können. Wir beginnen mit der Erstellung einer Kategorie mit einem Namen, einer Beschreibung und einem Bild. Kategorien werden unser anderes Modell, ein Produkt, enthalten. Produkte haben einen Namen, eine Beschreibung, einen Preis und ein Bild. Wir definieren auch eine Beziehung zwischen einer Kategorie und einem Produkt als 1-zu-N-Beziehung, d.h. eine Kategorie kann viele Produkte haben.

Jetzt, wo wir unsere Modelle fertig haben, können wir auf "Speichern und bereitstellen" klicken und AWS die ersten Tabellen und die API bereitstellen lassen, die von unserer Anwendung genutzt werden können.

Nachdem alles bereitgestellt wurde, können Sie einige Testdaten in den Bereich Inhalt von AWS Amplify Studio eingeben. Eine coole Funktion, die beim Testen sehr nützlich sein kann, ist die Möglichkeit, Ihre Datenbank mit einigen automatisch generierten Testdaten zu füllen. Für dieses Beispiel werden wir nur schnell ein paar Kategorien manuell erstellen.

Bitte beachten Sie, dass wir keine der Autorisierungsregeln geändert haben und dass wir den Anmelde- und Registrierungsteil der Anwendung auslassen werden. Dadurch können anonyme Benutzer Daten in Ihrer Anwendung lesen und auch schreiben, was Sie in der realen Welt auf jeden Fall ändern möchten.

Jetzt kommt der spaßige Teil: die eigentliche Erstellung einer Frontend-Anwendung auf der Grundlage eines Figma-Entwurfs. AWS stellt eine Figma-Vorlage mit vielen Beispielkomponenten und Primitiven zur Verfügung, die Sie zur Erstellung Ihres eigenen Designs verwenden können. Nachdem Sie das Figma AWS Amplify UI Kit in Ihr eigenes Figma-Konto dupliziert haben, können Sie damit beginnen, die bereitgestellten Komponenten zu ändern oder Ihre eigenen zu erstellen. Wenn Sie fertig sind, können Sie das Design mit Hilfe der Figma-URL in die UI-Bibliothek von Amplify Studio importieren. Jede Komponente, die Sie in Figma erstellt haben, wird in der Amplify UI Library angezeigt, wo Sie sie entweder für den Import akzeptieren oder ablehnen können.

Hier sehen Sie eine Beispielkomponente aus der Vorlage mit einigen obligatorischen abgerundeten Kanten. Um diese Komponente zu verwenden und die erforderlichen Daten anzeigen zu lassen, klicken Sie einfach auf "Konfigurieren". Auf der rechten Seite können Sie Komponenteneigenschaften und untergeordnete Eigenschaften zu jedem ausgewählten Objekt in der Komponente hinzufügen. Klicken Sie bei der Komponente auf "Eigenschaft hinzufügen", geben Sie ihr den Namen "Kategorie" und einen Kategorietyp aus unseren Modellen. Klicken Sie dann auf das Bild in der Komponente und klicken Sie auf der rechten Seite der Child-Eigenschaften auf "Eigenschaften festlegen". Dort haben Sie eine Liste von Eigenschaften, die Sie einstellen können. Wählen Sie src als Eigenschaft und category.image als Wert.

Machen Sie dasselbe für den Titel und die Beschreibung, wählen Sie einfach "label" als Eigenschaft und weisen Sie ihr den richtigen Wert der Kategorie zu. Wenn alle Eigenschaften eingestellt sind, klicken Sie auf "Sammlung erstellen", damit eine Liste der Kategorien angezeigt wird. Da die Sammlung aus einer Komponente mit einer Kategorie als Eigenschaft besteht, wählt sie bereits die Kategorie als Datenquelle aus. Als nächstes können Sie entweder die visuelle Darstellung der Liste oder die Datensammlung selbst ändern. Danach ist die Komponente bereit für die Verwendung in Ihrem React-Frontend.

Um es in Ihrer eigenen Anwendung zu verwenden, müssen Sie eine React-App erstellen. Hier werden wir eine sehr minimale App mit React und Amplify einrichten.

npx create-react-app pet-store
cd pet-store
npm install aws-amplify @aws-amplify/ui-react

Als nächstes fügen wir in der Datei src/index.js hinzu:

importieren Sie Amplify von 'aws-amplify';
importieren Sie "@aws-amplify/ui-react/styles.css";
importieren von "@aws-amplify/ui-react";
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

und umhüllen Sie die App-Komponente mit dem neu importierten AmplifyProvider. Jetzt müssen wir dieses Projekt mit dem Projekt verbinden, das wir in Amplify Studio erstellt haben. Dies können Sie tun, indem Sie einen Amplify Pull-Befehl erteilen. Für den ersten Pull müssen Sie Ihre appId und Umgebung angeben. Diese finden Sie in der oberen rechten Ecke von AWS Amplify Studio, wenn Sie auf "Lokale Einrichtungsanweisungen" klicken. Dadurch wird das React-Projekt mit dem Amplify Studio verbunden und die generierten React-Komponenten werden eingezogen.

Um die importierten Modelle zu verwenden, können Sie einen Blick auf den Beispielcode werfen, den Sie im Abschnitt "Get component code" erhalten, wenn Sie eine Komponente oder Sammlung konfigurieren. In diesem Beispiel habe ich die CategoryProductionCard und die NavBar aus dem Figma-Design und die CategoryProductionCardCollection importiert, die wir in der Amplify UI Library erstellt haben. Ändern Sie den Inhalt von src/App.js in:

import from '@aws-amplify/ui-react';
importieren Sie '@aws-amplify/ui-react/styles.css';
importieren { CategoryProductCardCollection, NavBar } from './ui-components';

Funktion App() {
  zurück (
   <div className="App">
     <NavBar />
     <Flex
  justifyContent="center"
  Rand=
     >
       <KategorieProduktKarteSammlung />
     </Flex>
   </div>
  );
}

Standard-App exportieren;

und führen Sie 'npm start' aus, um Ihre neue Sammlung in Aktion zu sehen!

Bitte beachten Sie, dass Sie die UI-Komponenten nicht direkt im Quellcode ändern sollten, da diese Änderungen bei der Ausführung von 'amplify pull' überschrieben werden könnten. Um Komponenten zu ändern, können Sie die Komponentenüberschreibungen verwenden, wie zum Beispiel:

const categoryOverrides = {
  'Collection.CategoryProductCard[0]': {
  onClick: () =>  {
  console.log("Kategorie angeklickt!")
  },
  Stil: {
  Zeiger: 'Zeiger'
  }
  },
}

...

<CategoryProductCardCollection overrides= />

Wenn Sie weitergehende Änderungen benötigen, können Sie auch eine Kopie der Komponente erstellen, ihr einen anderen Namen geben und Ihre Änderungen in der Kopie vornehmen.

Die im obigen Beispielcode angegebene onClick-Überschreibung kann auch verwendet werden, um die Navigation in der Anwendung zu starten. Zum Beispiel, um die Kategorie zu öffnen und die Produkte in der Kategorie anzuzeigen. Aber das überlasse ich dem Leser als Übung.

Fazit

In diesem Blogbeitrag habe ich mich hauptsächlich auf die Verwendung der neuen UI-Bibliothek von AWS Amplify Studio konzentriert, um zu zeigen, was sie derzeit leisten kann. Bitte beachten Sie, dass es sich immer noch um eine Vorschau handelt und in der nächsten Zeit wahrscheinlich noch mehr und mehr Funktionen hinzukommen werden. Doch selbst in dieser Phase sieht die neue UI-Bibliothek sehr vielversprechend aus. Sie macht es sehr einfach, Figma-Komponenten in gebrauchsfertige React-Komponenten mit automatisiertem Datenabruf über Amplify Datastore zu konvertieren. Dies kann nicht nur die Entwicklungsgeschwindigkeit erhöhen, sondern auch Ihrem Designer die Möglichkeit geben, dem Team beizutreten und Änderungen an der Anwendung vorzunehmen, ohne dass er programmieren lernen muss.

Weitere Informationen über die neue UI Library/Builder finden Sie unter Figma to code/.

Tags: