Ihr erstes Widget erstellen

In diesem Tutorial erstellen Sie ein Widget, das einen zufälligen Fakt zu einem Thema anzeigt. Das Thema wählt die Person, die das Widget installiert. Unterwegs bearbeiten Sie Code im Widget-Studio, sehen sich die Vorschau in verschiedenen Größen an, fügen eine Einstellung hinzu und rufen Daten von einer API ab. Zum Schluss veröffentlichen Sie das Widget und setzen es auf Ihren Rahmen.

Sie brauchen einen Computer und einen Rahmen in Ihrem Konto. Ein virtueller Rahmen genügt.

1. Das Widget anlegen

1. Wählen Sie in der Konsole im Menü links Mein Profil.
2. Wählen Sie neben Ihren Widgets Erstellen.
3. Geben Sie unter Name des Widgets Fakt des Tages ein und wählen Sie dann Erstellen.
4. Die Detailseite Ihres neuen Widgets öffnet sich. Wählen Sie Bearbeiten.

Das Widget-Studio öffnet sich. Wählen Sie links den Tab Code. Sie sehen den Startcode, den jedes neue Widget bekommt:

import { useFetch } from "~lib/use-fetch";

type Response = {
  readonly fact: string;
};

export const Widget = () => {
  const { data } = useFetch<Response>("https://catfact.ninja/fact");

  return (
    <div className="size-full flex flex-col items-center justify-center gap-4">
      <p>
        <span className="text-xl font-bold">
          Welcome to {"Fakt des Tages"}!
        </span>
      </p>
      <p>{data.fact}</p>
    </div>
  );
};

Rechts zeigt die Vorschau das Widget mit einem Fakt über Katzen. Ein Widget ist eine React-Komponente namens Widget. Diese hier ruft mit useFetch einen Fakt ab und zeigt ihn an.

2. Die Typografie der Bibliothek verwenden

Text auf einem Rahmen liest sich am besten in den Größen, die die Typografie-Komponenten der Blotch-Bibliothek festlegen. Ersetzen Sie den Code durch diesen:

import { Heading, Paragraph } from "~lib/typography";
import { useFetch } from "~lib/use-fetch";

type Response = {
  readonly fact: string;
};

export const Widget = () => {
  const { data } = useFetch<Response>("https://catfact.ninja/fact");

  return (
    <div className="size-full flex flex-col justify-center gap-2">
      <Heading level={3}>Did you know?</Heading>
      <Paragraph>{data.fact}</Paragraph>
    </div>
  );
};

Die Vorschau aktualisiert sich ein paar Sekunden, nachdem Sie aufgehört haben zu tippen. Beachten Sie, dass es weder einen Innenabstand am Rand noch eine Überschrift mit dem Namen des Widgets gibt: Der Rahmen fügt beides um jedes Widget herum hinzu, deshalb lässt ein Widget beides weg.

Drücken Sie Ctrl+S (⌘S auf einem Mac), um zu speichern.

3. Andere Größen ausprobieren

Auf einer Seite kann ein Widget jede beliebige Größe bekommen. Wählen Sie über der Vorschau nacheinander jede Vorschaugröße, von Quadratisch bis Vollständig. Bei Banner passt ein langer Fakt eventuell nicht unter die Überschrift.

Beheben Sie das, indem Sie in einem flachen Feld weniger anzeigen. Die Klasse short: greift, wenn das Widget flach und breit ist. Blenden Sie die Überschrift dort also aus:

<div className="short:hidden">
  <Heading level={3}>Did you know?</Heading>
</div>

Prüfen Sie jede Größe noch einmal. Für jede Größe gestalten behandelt das ausführlich.

4. Ein Thema wählen lassen

Als Nächstes lassen Sie die Person, die das Widget installiert, zwischen Katzen und Hunden wählen.

1. Wählen Sie Datei > Eingaben.
2. Wählen Sie auf dem Tab Öffentliche Eingaben die Schaltfläche Neue Eingabe erstellen.
3. Geben Sie unter Name ANIMAL ein und unter Beschreibung Über welches Tier möchten Sie Fakten?. Wählen Sie unter Typ die Option Auswahl.
4. Fügen Sie zwei Optionen hinzu, Cats und Dogs.
5. Setzen Sie den Testwert auf Dogs, damit die Vorschau etwas anzeigen kann, und schließen Sie dann den Dialog.

Lesen Sie die Eingabe mit useInputs und rufen Sie für jedes Tier Daten von einer anderen API ab:

import { Heading, Paragraph } from "~lib/typography";
import { useFetch } from "~lib/use-fetch";
import { useInputs } from "~lib/use-inputs";

type CatFact = {
  readonly fact: string;
};

type DogFacts = {
  readonly data: { readonly attributes: { readonly body: string } }[];
};

const CatFactText = () => {
  const { data } = useFetch<CatFact>("https://catfact.ninja/fact");
  return <Paragraph>{data.fact}</Paragraph>;
};

const DogFactText = () => {
  const { data } = useFetch<DogFacts>("https://dogapi.dog/api/v2/facts");
  return <Paragraph>{data.data[0].attributes.body}</Paragraph>;
};

export const Widget = () => {
  const { ANIMAL } = useInputs();

  return (
    <div className="size-full flex flex-col justify-center gap-2">
      <div className="short:hidden">
        <Heading level={3}>Did you know?</Heading>
      </div>
      {ANIMAL === "Dogs" ? <DogFactText /> : <CatFactText />}
    </div>
  );
};

Die Vorschau zeigt jetzt einen Fakt über Hunde. Ändern Sie den Testwert in Cats, um den anderen zu prüfen. Speichern Sie.

5. Veröffentlichen

1. Wählen Sie Datei > Widget-Konfiguration. Fügen Sie eine Beschreibung hinzu, etwa Jeden Tag ein neuer Fakt über Tiere, wählen Sie eine Kategorie und dann Fertig.
2. Wählen Sie in der Symbolleiste Veröffentlichen.
3. Wählen Sie bei der Sichtbarkeit Veröffentlicht, damit alle es verwenden können, oder Privat, um es für sich zu behalten, wenn Sie Pro haben.
4. Wählen Sie Veröffentlichen.

Sie haben Version 1.0.0 veröffentlicht.

6. Auf Ihren Rahmen setzen

1. Wählen Sie Ihren Rahmen in der Rahmenauswahl und dann im Menü links Editor.
2. Wählen Sie Widget hinzufügen und dann den Tab Ihre Kreationen.
3. Wählen Sie Fakt des Tages und dann Zum Rahmen hinzufügen.
4. Wählen Sie ein Tier und dann Erstellen.

Ihr Widget ist auf Ihrer Seite. Sie haben Ihr erstes Widget erstellt und veröffentlicht.

Nächste Schritte

• Wie Widgets ausgeführt werden erklärt, was zwischen dem Widget-Studio und dem Rahmen mit Ihrem Code geschieht.
• Daten von einer API abrufen behandelt Caching, API-Schlüssel und Fehler.
• Stöbern Sie in der Blotch-Bibliothek nach Diagrammen, Kalendern, Symbolen und mehr.
• Veröffentlichen und Versionen herausgeben erklärt, was passiert, wenn Sie ein Widget ändern, das bereits verwendet wird.