El Widget Único (Parte 1)

GavinRehkemper

<\/HEAD>

Un método para escribir un widget que puede usarse tanto dentro de Experience Builder como en una aplicación React normal.<\/EM><\/P><\/P>Al construir un widget personalizado para Experience Builder, si tu objetivo principal es usar el widget dentro de Experience Builder, construirlo directamente usando los flujos de trabajo estándar<\/A> es la mejor y más rápida manera de tener éxito.<\/P>

<\/P>

Pero, ¿qué pasa si necesitas crear un widget que funcione tanto en una aplicación React simple y<\/EM> dentro de Experience Builder? Con un poco de trabajo extra además de los flujos de trabajo estándar, puedes escribir un componente React (widget) que pueda incluirse en ambos lugares.<\/P><\/P>Un método para hacer esto es:<\/P>Usar

TSDX<\/A> para crear y desarrollar un Componente React.<\/LI>npm install<\/CODE> el Componente en la carpeta <CODE>client<\/CODE> de Experience Builder.<\/LI><LI>Crear un nuevo widget personalizado de Experience Builder. Dentro de este widget, importa y usa el Componente React que has creado.<\/LI><\/OL><P><\/P><P>Bastante simple en teoría. En la práctica, puede volverse un poco complejo, así que explicaré los detalles a continuación.<\/P><P><\/P><H2 id="toc-hId-1824853506" id="toc-hId-1824853506">1. Usar TSDX para Crear un Componente React<\/H2><P><A href="https:\/\/github.com\/jaredpalmer\/tsdx" rel="nofollow noopener noreferrer" target="_blank">TSDX<\/A> es una "CLI sin configuración que te ayuda a desarrollar, probar y publicar componentes modernos de TypeScript [React] con facilidad." Crea un nuevo directorio y en una terminal ejecuta:<\/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>Asegúrate de elegir "react" para tu plantilla.<\/P><\/BLOCKQUOTE><P>Esto te dará una estructura de carpetas con archivos de soporte -- que es la infraestructura donde puedes construir la funcionalidad de tu widget como un Componente React. Consulta la <A href="https:\/\/github.com\/jaredpalmer\/tsdx#quick-start" rel="nofollow noopener noreferrer" target="_blank">documentación de TSDX<\/A> para más detalles sobre cómo desarrollar tu componente. TSDX viene con una aplicación React "playground" bajo la carpeta <CODE>example<\/CODE> que puedes usar para ver tu componente dentro del contexto de una aplicación ejemplo durante el desarrollo. Durante el desarrollo normalmente ejecutarás <CODE>npm start<\/CODE> tanto en el directorio raíz (para construir el widget) como también <CODE>npm start<\/CODE> dentro del directorio <CODE>example<\/CODE> para ejecutar la app y ver la salida del componente.<\/P><P><\/P><H3 id="toc-hId--923816960" id="toc-hId--923816960">Cambio Recomendado - Exportación por Defecto<\/H3><P>Por defecto, la plantilla exporta un componente React llamado <CODE>Thing<\/CODE>. El primer cambio que hago es exportar el componente como exportación por defecto para que la importación sea un poco más limpia después. Así que haz <A href="https:\/\/github.com\/gavinr\/the-one-widget-simple\/commit\/15f98def08af0c93f7db62a1dcdcbd82b8e443f9?diff=split" rel="nofollow noopener noreferrer" target="_blank"><STRONG>estos cambios<\/STRONG><\/A> en <CODE>my-widget\\src\\index.tsx<\/CODE> y <CODE>my-widget\\example\\index.tsx<\/CODE>. Luego, después de ejecutar <CODE>npm start<\/CODE> tanto en el directorio raíz como en el directorio <CODE>example<\/CODE>, y navegar a <A href="http:\/\/localhost:1234" rel="nofollow noopener noreferrer" target="_blank">http:\/\/localhost:1234<\/A>, deberías poder ver tu componente funcionando (solo una línea de texto):<\/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> el Componente en Experience Builder<\/H2><P>Ahora tienes un Componente React que está funcionando en una App React (eso es lo que está corriendo en <CODE><A href="http:\/localhost:1234" target="_blank" rel="nofollow noopener noreferrer">http:\/localhost:1234<\/A><\/CODE> arriba), así que pasemos a mostrar nuestro Componente dentro de Experience Builder.<\/P><P><\/P><P>Primero, instala Experience Builder según las <A href="https:\/\/developers.arcgis.com\/experience-builder\/guide\/install-guide\/" rel="nofollow noopener noreferrer" target="_blank">instrucciones aquí<\/A>.<\/P><P><\/P><P>Luego abre una terminal y navega al directorio <CODE>client<\/CODE> en los archivos descomprimidos de Experience Builder. Ejecuta <CODE>npm install <PATH><\code>, donde <code><PATH><\code> es la ruta local a tu componente React. Por ejemplo, si ejecutas el comando <code>npm tsdx create ... en C:\code\my-widget, ejecutarás npm install C:\code\my-widget.

(Consejo: incluye --no-audit en el comando npm install... para omitir la auditoría de todos los archivos de Experience Builder)

3. Crear un Widget para Experience Builder

Ahora que está instalado, puedes incluir este Componente en cualquier widget personalizado de Experience Builder. Si aún no tienes un widget, puedes copiar el widget simple desde client/sample-widgets/simple a client/your-extensions/widgets para comenzar.

Dentro de client\\your-extensions\\widgets\\simple\\src\\runtime\\widget.tsx, importa tu componente insertando una declaración import cerca del inicio del archivo:

<span class="keyword token">import</span> MyWidget <span class="keyword token">from</span> <span class="string token">'my-widget'</span>;‍‍‍‍‍‍

Puedes entonces usar ese componente en el JSX cerca del final del archivo. Reemplaza la función render() con esta:

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

Asegúrate de que esté corriendo el comando npm start en el directorio client, así Experience Builder reconstruirá tu widget y lo hará disponible.

Después de estos cambios, entra a Experience Builder y agrega el widget SIMPLE WIDGETa una Experiencia, ¡y tu componente ahora será visible!

¡Hecho!

Ahora tienes un Componente React que funciona con el contexto de una app React y Experience Builder. Este es un ejemplo básico - el siguiente paso es cómo usar opciones de configuración del widget y módulos del mapa. Profundizaré en eso en la próxima publicación - ve aquí: https://community.esri.com/people/GRehkemper-esristaff/blog/2020/07/01/the-one-widget-part-2