Přidání About boxu do React aplikace

Živá ukázka

Toto je About box samotné aplikace AboutTheApp. Přepnutím varianty uvidíte další podoby. Kód níže zobrazí přesně tento box. Pro svou aplikaci v něm změňte alias.

<script src="https://aboutthe.app/embed/web/0.3.5/card.js" integrity="sha384-X3VGSEdTNGsfVKfVUx7sq9ICfpWsJW88HDQYidGPio1KjoxYCbSirTNqtbVfq1sj" crossorigin="anonymous" async></script>

<about-the-app alias="aboutthe.app" variant="card" api-base="https://aboutthe.app/api/v1" visual-style="default" palette="default" appearance="auto"></about-the-app>

Kde má About box data

Obsah About boxu se ve vašem React kódu nenastavuje. Název, logo, verze s poznámkami k vydání, autor, licence a odkazy na zdroje se zjišťuje z AboutTheApp dashboardu. Vaše aplikace na něj jen odkazuje. Více informací o obsahu dialogu O aplikaci najdete v článku Obrazovka O aplikaci.

V panelu Integrovat na kartě produktu v dashboardu nalezte stejné úkázky zdrojového kódu jako na této stránce. Navíc bude vyplněn i aliasem vaší aplikace, takže ho můžete přímo zkopírovat do vaší aplikace.

Přidání do React aplikace v 5 krocích

About box je Web Component (vlastní HTML element), který React vykreslí jako jakýkoli jiný tag — žádná knihovna ani obalující komponenta není potřeba.

1. 1

   Vytvořte si produkt

   Vytvořte produkt v AboutTheApp (nebo otevřete existující) a poznamenejte si jeho alias — najdete ho v editoru produktu a také v panelu Integrovat.

2. 2

   Načtěte skript widgetu

   Vložte skript <script src="https://aboutthe.app/embed/web/v1/abouttheapp.js" async></script> do vaší aplikace, do místa, kde načítá skripty třetích stran — do index.html nebo přes next/script, pokud používáte Next.js. Kód v živé ukázce i v panelu Integrovat odkazuje na přesnou verzi skriptu a obsahuje atribut pro kontrolu integrity.

3. 3

   Umístěte tag

   Vložte <about-the-app alias="aboutthe.app" /> do místa, kde se má box zobrazit — do patičky, na obrazovku Nastavení nebo do položky Nápověda/O aplikaci.

4. 4

   Přidejte TypeScript typy (nepovinné)

   Stáhněte si about-the-app.d.ts a vložte ho kamkoli do projektu, aby JSX rozpoznal tag i jeho atributy.

5. 5

   Dolaďte vzhled

   Nastavte si obsah boxu pomocí atributu "variant": card (výchozí), footer, compact, dialog, support, version, maker, credits nebo link. Vzhled upravíte atributy "visual-style", "palette" a "appearance". Podle potřeby nastavte jazyk "lang", orámování "show-border", vazbu na zákazníka "customer-alias", skutečnou verzi aplikace "version", kód pro zobrazení skrytých sekcí"unlock-code" a nebo příznak pro zobrazení skrytých sekcí (se zámkem) "always-show-private".

Verze, která v aplikaci opravdu běží

Bez atributu version ukazuje box verzi zapsanou v AboutTheApp, tedy aktuální verzi produktu. S customer-alias zobrazuje verzi nasazenou u daného zákazníka.

S atributem version ukáže box přesně tu verzi, kterou mu předáte, typicky verzi z buildu vaší aplikace. Poznámky k vydání se zobrazí jen v případě, kdy stejná verze existuje i v katalogu verzí produktu (přesná shoda včetně velikosti písmen) a je veřejná nebo je neveřejná a About box je odemčený odemykacím kódem. V panelu Integrovat se verze nenastavuje, atribut version doplňte do zkopírovaného kódu až ve vaší aplikaci.

import pkg from "../package.json";

export function AppFooter() {
  return <about-the-app alias="aboutthe.app" version={pkg.version} />;
}

Ukázka výsledku

About box vždy ukazuje aktuální data: verzi, autora, licenci a odkazy na zdroje, které vlastník produktu zveřejnil.

Časté otázky