The One Widget (Část 1)

GavinRehkemper

<\/HEAD>

Způsob psaní widgetu, který lze použít jak v Experience Builder, tak v běžné React aplikaci.<\/EM><\/P><\/P>Při vytváření vlastního widgetu pro Experience Builder, pokud je vaším hlavním cílem použít widget přímo v Experience Builder, je nejlepší a nejrychlejší cesta k úspěchu vytvořit ho přímo pomocí standardních pracovních postupů<\/A>.<\/P>

<\/P>

A co když potřebujete vytvořit widget, který funguje jak v obyčejné React aplikaci a<\/EM> v rámci Experience Builder? S trochou další práce navíc nad rámec standardních pracovních postupů můžete napsat React komponentu (widget), kterou lze zahrnout na obě místa!<\/P><\/P>Jedna z metod je:<\/P>Použijte

TSDX<\/A> k vytvoření a vývoji React komponenty.<\/LI>npm install<\/CODE> komponentu do složky <CODE>client<\/CODE> Experience Builder.<\/LI><LI>Vytvořte nový vlastní widget pro Experience Builder. V tomto widgetu importujte a použijte React komponentu, kterou jste vytvořili.<\/LI><\/OL><P><\/P><P>Teoreticky docela jednoduché. V praxi to může být trochu složitější, proto projdu podrobnosti níže.<\/P><P><\/P><H2 id="toc-hId-1824853506" id="toc-hId-1824853506">1. Použijte TSDX k vytvoření React komponenty<\/H2><P><A href="https:\/\/github.com\/jaredpalmer\/tsdx" rel="nofollow noopener noreferrer" target="_blank">TSDX<\/A> je "zero-config CLI, které vám pomáhá snadno vyvíjet, testovat a publikovat moderní TypeScript [React components]." Vytvořte nový adresář a v terminálu spusťte:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE class="lang-cmd">npx tsdx create <SPAN class="hljs-keyword">my<\/SPAN>-widget cd <SPAN class="hljs-keyword">my<\/SPAN>-widget npm start<\/CODE><\/PRE><BLOCKQUOTE><P>Ujistěte se, že vyberete "react" jako šablonu.<\/P><\/BLOCKQUOTE><P>Tím získáte strukturu složek s podpůrnými soubory – což je infrastruktura, kde můžete vyvíjet funkčnost svého widgetu jako React komponentu. Podívejte se na <A href="https:\/\/github.com\/jaredpalmer\/tsdx#quick-start" rel="nofollow noopener noreferrer" target="_blank">dokumentaci TSDX<\/A> pro více informací o vývoji komponenty. TSDX obsahuje "playground" React aplikaci ve složce <CODE>example<\/CODE>, kterou můžete použít k zobrazení své komponenty v kontextu ukázkové aplikace během vývoje. Během vývoje obvykle spustíte <CODE>npm start<\/CODE> jak v kořenovém adresáři (pro sestavení widgetu), tak i ve složce <CODE>example<\/CODE>, abyste viděli výstup komponenty.<\/P><P><\/P><H3 id="toc-hId--923816960" id="toc-hId--923816960">Doporučená změna - Výchozí export<\/H3><P>Ve výchozím nastavení šablona exportuje React komponentu pojmenovanou <CODE>Thing<\/CODE>. První změnou, kterou provedu, je exportovat komponentu jako výchozí export, aby byl import později čistší. Proveďte <A href="https:\/\/github.com\/gavinr\/the-one-widget-simple\/commit\/15f98def08af0c93f7db62a1dcdcbd82b8e443f9?diff=split" rel="nofollow noopener noreferrer" target="_blank"><STRONG>tyto změny<\/STRONG><\/A> v souborech <CODE>my-widget\src\index.tsx<\/CODE> a <CODE>my-widget\example\index.tsx<\/CODE>. Poté po spuštění <CODE>npm start<\/CODE> v kořenovém adresáři i ve složce <CODE>example<\/CODE>, a návštěvě <A href="http:\/\/localhost:1234" rel="nofollow noopener noreferrer" target="_blank">http:\/\/localhost:1234<\/A>, byste měli vidět svou funkční komponentu (jen jeden řádek textu):<\/P><P><\/P><P><IMG alt="React app" class="jive-emoji image-1 jive-image j-img-original" src="https:\/\/i.imgur.com\/DoDC9Xl.png" \/><\/P><P><IMG alt="" src="https:\/\/community.esri.com\/blog\/react-app.png" \/><\/P><H2 id="toc-hId-1015506880" id="toc-hId-1015506880">2. <CODE>npm install<\/CODE> komponenty do Experience Builder<\/H2><P>Nyní máte React komponentu běžící v React aplikaci (to je to, co běží na <CODE><A href="http:\/\/localhost:1234" target="_blank" rel="nofollow noopener noreferrer">http:\/\/localhost:1234<\/A><\/CODE> výše), takže pokračujme ukázkou naší komponenty v Experience Builder.<\/P><P><\/P><P>Nejprve nainstalujte Experience Builder podle <A href="https:\/\/developers.arcgis.com\/experience-builder\/guide\/install-guide\/"><span style='color:#000000;text-decoration:none;'>pokynů zde</span></A>.<br \/></P><P></P><P>Poté otevřete terminál a přejděte do složky <CODE>client<\/CODE> ve rozbalených souborech Experience Builder. Spusťte příkaz <CODE>npm install <PATH><\code>, kde <code><PATH><\code> je lokální cesta k vaší React komponentě. Například pokud jste spustili příkaz <code>npm tsdx create ... ve složce C:\code\my-widget, spustíte příkaz npm install C:\code\my-widget.

(Tip: přidejte parametr --no-audit do příkazu npm install..., abyste přeskočili audit všech souborů Experience Builder.)

3. Vytvořte widget pro Experience Builder

Nyní když je nainstalován, můžete tuto komponentu zahrnout do libovolných vlastních widgetů Experience Builder. Pokud ještě nemáte žádný widget, můžete zkopírovat widget simple ze složky client/sample-widgets/simple do složky client/your-extensions/widgets, abyste začali.

Ve souboru client\your-extensions\widgets\simple\src\runtime\widget.tsx, importujte svou komponentu vložením importního příkazu blízko začátku souboru:

import MyWidget from 'my-widget';‍‍‍‍‍‍

Můžete pak tuto komponentu použít v JSX blízko spodní části souboru. Nahraďte funkci render() tímto:

render() {
  return (
    <div className='widget-demo jimu-widget m-2'>
      <MyWidget></MyWidget>
    </div>
  );
}<EMOJI_2>

Pamatujte si spustit příkaz npm start ve složce client, aby Experience Builder znovu sestavil váš widget a zpřístupnil ho.

Po těchto změnách přejděte do Experience Builder a přidejte widget SIMPLE WIDGET, váš komponent je nyní viditelný!

Hotovo!

Nyní máte React komponentu fungující jak v kontextu React aplikace, tak i v Experience Builder. Toto je základní příklad – dalším krokem je použití možností konfigurace widgetů a mapových modulů. O tom budu psát v dalším příspěvku – najdete ho zde: https://community.esri.com/people/GRehkemper-esristaff/blog/2020/07/01/the-one-widget-part-2