Le Widget Unique (Partie 1)

GavinRehkemper

<\/HEAD>

Une méthode pour écrire un widget pouvant être utilisé à la fois dans Experience Builder ou dans une application React classique.<\/EM><\/P><\/P>Lors de la création d'un widget personnalisé pour Experience Builder, si votre objectif principal est d'utiliser le widget au sein d'Experience Builder, le construire directement en utilisant les flux de travail standard<\/A> est la meilleure et la plus rapide voie vers le succès.<\/P>

<\/P>

Mais que faire si vous devez créer un widget qui fonctionne à la fois dans une application React simple et<\/EM> dans Experience Builder ? Avec un peu de travail supplémentaire par-dessus les flux de travail standard, vous pouvez écrire un composant React (widget) qui peut être inclus dans les deux environnements !<\/P><\/P>Une méthode pour ce faire est :<\/P>Utiliser

TSDX<\/A> pour créer et développer un composant React.<\/LI>npm install<\/CODE> le composant dans le dossier <CODE>client<\/CODE> d'Experience Builder.<\/LI><LI>Créer un nouveau widget personnalisé Experience Builder. Dans ce widget, importer et utiliser le composant React que vous avez créé.<\/LI><\/OL><P><\/P><P>Assez simple en théorie. En pratique, cela peut devenir un peu complexe, donc je vais détailler les étapes ci-dessous.<\/P><P><\/P><H2 id="toc-hId-1824853506" id="toc-hId-1824853506">1. Utiliser TSDX pour créer un composant React<\/H2><P><A href="https:\/\/github.com\/jaredpalmer\/tsdx" rel="nofollow noopener noreferrer" target="_blank">TSDX<\/A> est une "CLI sans configuration qui vous aide à développer, tester et publier facilement des composants TypeScript [React] modernes." Créez un nouveau répertoire et dans un terminal, exécutez :<\/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>Assurez-vous de choisir "react" comme modèle.<\/P><\/BLOCKQUOTE><P>Cela vous donnera une structure de dossiers avec des fichiers de support -- c'est l'infrastructure où vous pouvez développer la fonctionnalité de votre widget en tant que composant React. Consultez la <A href="https:\/\/github.com\/jaredpalmer\/tsdx#quick-start" rel="nofollow noopener noreferrer" target="_blank">documentation TSDX<\/A> pour plus de détails sur le développement de votre composant. TSDX inclut une application React "playground" sous le dossier <CODE>example<\/CODE> que vous pouvez utiliser pour voir votre composant dans le contexte d'une application exemple pendant le développement. Pendant le développement, vous exécuterez généralement <CODE>npm start<\/CODE> à la fois dans le répertoire racine (pour construire le widget) et aussi dans le répertoire <CODE>example<\/CODE> pour lancer l'application et voir la sortie du composant.<\/P><P><\/P><H3 id="toc-hId--923816960" id="toc-hId--923816960">Changement recommandé - Export par défaut<\/H3><P>Par défaut, le modèle exporte un composant React nommé <CODE>Thing<\/CODE>. Le premier changement que je fais est d'exporter ce composant comme export par défaut afin que l'importation soit plus propre par la suite. Faites donc <A href="https:\/\/github.com\/gavinr\/the-one-widget-simple\/commit\/15f98def08af0c93f7db62a1dcdcbd82b8e443f9?diff=split" rel="nofollow noopener noreferrer" target="_blank"><STRONG>ces modifications<\/STRONG><\/A> dans <CODE>my-widget\\src\\index.tsx<\/CODE> et <CODE>my-widget\\example\\index.tsx<\/CODE>. Puis après avoir lancé <CODE>npm start<\/CODE> à la fois dans le répertoire racine et dans le répertoire <CODE>example<\/CODE>, et navigué vers <A href="http:\/\/localhost:1234" rel="nofollow noopener noreferrer" target="_blank">http:\/\/localhost:1234<\/A>, vous devriez voir votre composant fonctionnel (juste une ligne de texte) :<\/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> du composant dans Experience Builder<\/H2><P>Vous avez maintenant un composant React qui fonctionne dans une application React (c'est ce qui tourne à <CODE><A href="http:\/localhost:1234" target="_blank" rel="nofollow noopener noreferrer">http:\/localhost:1234<\/A><\/CODE> ci-dessus), passons donc à l'affichage de notre composant dans Experience Builder.<\/P><P><\/P><P>D'abord, installez Experience Builder selon les <A href="https:\/\/developers.arcgis.com\/experience-builder\/guide\/install-guide\/" rel="nofollow noopener noreferrer" target="_blank">instructions ici<\/A>.<\/P><P><\/P><P>Puis ouvrez un terminal et naviguez vers le dossier <CODE>client<\/CODE> des fichiers décompressés d'Experience Builder. Exécutez <CODE>npm install <PATH><\code>, où <code><PATH><\code> est le chemin local vers votre composant React. Par exemple, si vous avez exécuté la commande <code>npm tsdx create ... à l'emplacement C:\code\my-widget, vous lancerez npm install C:\code\my-widget.

(Astuce : incluez --no-audit dans la commande npm install... pour éviter l'audit de tous les fichiers d'Experience Builder)

3. Créer un widget Experience Builder

Même après installation, vous pouvez inclure ce composant dans n'importe quel widget personnalisé Experience Builder. Si vous n'avez pas encore de widget, copiez le widget simple depuis client/sample-widgets/simple vers client/your-extensions/widgets.

Puis, dans client\\your-extensions\\widgets\\simple\\src\\runtime\\widget.tsx, importez votre composant en insérant une instruction d'importation près du haut du fichier :

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

Puis utilisez ce composant dans le JSX près du bas du fichier. Remplacez la fonction render() par ceci :

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

N'oubliez pas de vérifier que npm start tourne dans le dossier client, ainsi Experience Builder reconstruira votre widget et le rendra disponible.

Après ces modifications, allez dans Experience Builder et ajoutez le widget Simpl Widget, votre composant sera alors visible !

Terminé !

A présent, vous avez un composant React fonctionnant à la fois dans une application React et Experience Builder. Ceci est un exemple basique - l'étape suivante est comment utiliser les options de configuration du widget et les modules cartographiques. J'aborderai cela dans mon prochain article - rendez-vous ici : https://community.esri.com/people/GRehkemper-esristaff/blog/2020/07/01/the-one-widget-part-2