Přidání About boxu do React aplikace
Máte React aplikaci a chtěli byste přímo v ní mít informace z aboutthe.app? Kromě vložení odkazu nebo ručního napojení API máte také třetí možnost - vložit hotový dialog O aplikaci, tzn. About box.
Shrnutí a kontext
About box je malý vkládaný widget, který zobrazuje verzi aplikace, autora, licenci a odkazy na zdroje — do aplikace ho vložíte jednou a jeho obsah pak řídíte z administrace aplikace v aboutthe.app.
Kde má About box data
Nic z obsahu About boxu se nenastavuje ve vašem React kódu. Jeho obsah — název, logo, verze, autor, licence a odkazy na zdroje se zjišťuje z aboutthe.app dashboardu, editoru produktu. Vaše aplikace na něj jen odkazuje.
V tomtéž editoru v panelu „Přidat do aplikace“ najdete další možnosti integrace, ale i zde uvedený postup. Navíc již s aliasem vaší aplikace, takže oproti tomu návodu stačí jen zkopírovat předpřipravený kód.
Přidání do React aplikace v 5 krocích
About box je Web Component (vlastní HTML element), takže ho React vykreslí jako jakýkoli jiný tag — žádná knihovna ani obalující komponenta není potřeba.
React sám o sobě žádné nastavení nepotřebuje — pokud ale projekt používá TypeScript, JSX defaultně nerozpozná neznámý vlastní element. Soubor about-the-app.d.ts z integračního panelu deklaruje jeho vlastnosti (alias, theme, unlock-code a další), takže mu rozumí kompilátor i našeptávač ve vašem editoru.
- 1
Vytvořte si produkt
Vytvořte ho v aboutthe.app (nebo otevřete existující) a poznamenejte si jeho alias — najdete ho v URL editoru produktu i v panelu „Přidat do aplikace“.
- 2
Načtěte skript widgetu
Vložte skript <script src="https://aboutthe.app/embed/web/v1/abouttheapp.js" async></script> tam, kde vaše aplikace už načítá skripty třetích stran — do index.html nebo přes next/script, pokud používáte Next.js.
- 3
Umístěte tag
Vložte <about-the-app alias="my-app" /> tam, kde se má box zobrazit — do patičky, na obrazovku Nastavení nebo do položky Nápověda/O aplikaci.
- 4
Přidejte TypeScript typy (nepovinné)
Stáhněte si about-the-app.d.ts a vložte ho kamkoli do projektu, ať JSX rozpozná tag i jeho atributy.
- 5
Dolaďte vzhled
Upravte volitelné atributy — theme, show-border, unlock-code, customer, environment — podle toho, jak se má box ve vaší aplikaci chovat.
Ukázka výsledku
About box vždy ukazuje stejná živá data: aktuální verzi, autora, licenci a odkazy na zdroje, které vlastník produktu zveřejnil.
Ve zkratce
Vaše React aplikace potřebuje jen řádek skriptu a jeden element. Jakmile je About box přidán, každá další změna — nová verze, nový odkaz na zdroj, aktualizovaný changelog — se projeví automaticky, bez nutnosti cokoli ve vlastní aplikaci znovu měnit.
Chcete si přidat vlastní About box?
Založte si zdarma produkt na aboutthe.app a integrační kód pro About box budete mít hned.