Esri technology di Giorgio Forti

Costruire con facilità applicazioni web con ArcGIS Experience Builder

La Rubrica per la Newsletter di Dicembre dedicata alla tecnologia Esri offre approfondimento su ArcGIS Experience Builder.

ArcGIS Experience Builder è una piattaforma definita da Esri Inc.  “no-code/low-code” che nasce per costruire applicazioni web molto performanti e accattivanti utilizzando i propri contenuti GIS. Senza scrivere alcun codice, è possibile creare applicazioni web e pagine web utilizzando modelli out-of-the-box, widget drag-and-drop e layout configurabili che si adattano alle diverse dimensioni dello schermo. È inoltre possibile utilizzare strumenti di sviluppo che, con un minimo di codice, permettono di creare applicazioni e widget personalizzati.

https://www.esri.com/en-us/arcgis/products/arcgis-experience-builder/overview

Di seguito vi mostro un esempio di applicazione per gestire le informazioni relative all’esplosione nel porto di Beirut:

 

 

Per chi già conosceva Web AppBuilder (che rimane ancora come alternativa) questo framework permette di creare applicazioni multipagina utilizzando le API Javascript 4.x.

Passiamo a esplorare le funzionalità principali.

Come si crea una applicazione?

Un’applicazione si crea a partire dal sito https://experience.arcgis.com/ utilizzando i nostri contenuti pubblicati in ArcGIS Online che si possono trascinare e posizionare grazie a widget, mappe, immagini, testo e strumenti vari. È possibile aggiungere trigger e azioni per far funzionare insieme i widget, all'interno di una singola pagina o su più pagine.

Potete partire da zero o utilizzare un modello esistente. Infine, potete salvare il vostro lavoro come un nuovo modello riutilizzabile.

Riassumendo, le funzionalità principali sono:

  • Creare applicazioni singole e multipagina (mapcentriche o meno) per la visualizzazione su uno schermo fisso o a scorrimento;
  • Interagire con contenuti 2D e 3D in un'unica app;
  • Aggiungere strumenti interconnessi con widget drag-and-drop;
  • Personalizzare la app tramite “themes”;
  • Distribuire app reattive su qualsiasi tipologia di dispositivo;
  • Progettare modelli di app personalizzati;
  • Creare, distribuire e gestire le app in un unico framework..

Dall’uscita di ArcGIS Enterprise 10.8.1, ArcGIS Experience Builder è disponibile anche in questo ambiente per chi ha necessità di avere l’applicazione in modalità on-premises.

In ogni caso, oltre alla modalità online, per poter personalizzare maggiormente (es. inserire propri widget personalizzati) si può scaricare la versione Developer Edition che è attualmente alla versione 1.2 (uscita a Novembre).

https://developers.arcgis.com/experience-builder/

Quali sono i modelli disponibili?

Vi mostro di seguito i template disponibili quando creiamo una nuova applicazione.

 

Come funziona l’interfaccia di authoring?

Quando crei una nuova app con” Create” o apri una applicazione per modificarla, ArcGIS Experience Builder apre un ambiente di authoring (immagine seguente) che include:

  1. La “side bar” per aprire i widget, le pagine, i contenuti e il pannello dei temi.
  2. Il pannello di sinistra per visualizzare la struttura delle pagine e degli elementi contenuti.
  3. Nella barra dell’“header” (in alto), tutti i comandi principali (Salva, Preview, undo/redo, publish, etc.)
  4. Nella parte centrale (page) gli strumenti per “disegnare” l’applicazione trascinando e posizionando i widget;
  5. Nel pannello di destra (configuration panel) tutte le impostazioni dell’applicazione.

 

 

Quali sono gli elementi da personalizzare?

Pages

La pagina (Page) è il fondamento del layout della vostra app. Ha tre elementi principali che possono includere contenuti: l'intestazione, il piè di pagina e il corpo. La vostra app può avere una o più pagine.

Ogni pagina ha una struttura (outline) che elenca tutti i suoi widget e come sono raggruppati. Uno schema mostra il contenuto nell'intestazione e nel piè di pagina (se abilitato per la pagina) e nel corpo (il contenitore complessivo all'interno della pagina).

Qui sotto, la pagina 1 della nostra app (Body) contiene un widget “fixed panel” contenente un widget “image” e, due widget “text”, un controller di widget e una mappa. Il controllore del widget è esso stesso un widget, e contiene un widget per i livelli della mappa e un widget per le legende.

 

Widget

I widget sono i principali elementi costitutivi dell’applicazione. In Experience Builder ci sono due tipi di widget, “basic” e “layout”

I widget di tipo “basic” sono widget funzionali che si comportano come dei tools.

I widget di tipo “layout” sono contenitori che aiutano a organizzare i widget sulla pagina.

Quando si seleziona un widget, nel pannello di configurazione vengono visualizzate le impostazioni correnti. Ogni widget è diverso e avrà impostazioni diverse. Nell'esempio seguente è mostrato il widget “Map Layers”, che mostra le sue proprietà nel pannello di configurazione.

 

 

 

Il pannello di configurazione visualizzerà le schede Content, Style e Action, come applicabili per il widget selezionato.

 

 

 

Il contenuto è ciò che si trova nel widget; la stringa di testo in un widget di tipo “text”, i layer in un widget di tipo “map layers”, o la mappa in un “map widget”.  Visualizzata di seguito, la scheda Contenuto in un “map widget” mappa mostra la mappa che il widget contiene, insieme alle proprietà che si possono impostare.

 

 

La scheda “Style” consente di modificare l'aspetto del widget. L'esempio seguente mostra alcune delle proprietà di stili disponibili per un widget “image”.

 

 

Trigger

I trigger e le azioni permettono di rendere dinamica una app creata con Experience Builder. È possibile utilizzarli per collegare due o più widget.

Non tutti i widget supportano i trigger e le azioni.  La scheda Azione fa vedere se il widget selezionato mette a disposizione il tasto “Add trigger”.

 

 

Un trigger è un evento che viene attivato nel widget con un’azione specifica. Per esempio, un map widget mappa supporta due trigger; quando cambia l'estensione della mappa e quando cambia la selezione. Questi trigger sono usati per attivare un'azione in un altro widget. Per esempio, è possibile sincronizzare due mappe in modo tale che quando cambia l'estensione di una mappa, anche la seconda mappa cambierà il suo extent.

Di seguito è mostrato un esempio di trigger e delle azioni utilizzate per sincronizzare due mappe.

 

 

Queste sono le informazioni principali, ma tante sono le tipologie di app e gli strumenti che potete utilizzare con tantissime combinazioni.

Quindi, se volete iniziare da soli a configurare la vostra app, qui trovate alcune risorse utili:

https://www.youtube.com/watch?v=QG5jXCJi0pE

https://www.youtube.com/watch?v=Xo6T_Qnt9Q4

https://www.esri.com/training/catalog/5e9f9fec8179a50b6abdba8b/arcgis-experience-builder-getting-started-with-creating-web-solutions/

https://www.esri.com/arcgis-blog/products/experience-builder/mapping/get-started-experience-builder-gallery/

Se volete informazioni di dettaglio le trovate qui:

https://www.esri.com/it-it/arcgis/products/arcgis-experience-builder/resources

Questa è l’ultima newsletter del 2020…ne approfitto, anche se tutto sarà un po' diverso dal solito, per augurarvi Buone Feste e un Felice Anno Nuovo nel quale speriamo di tornare piano piano alla normalità.

 


 

Hai domande?

Rivolgiti a un esperto

Per maggiori chiarimenti sulla nostra offerta scrivici, ti daremo tutte le risposte che cerchi

vai al form

Supporto tecnico

Rivolgiti al nostro Supporto Tecnico

È possibile inviare una richiesta di assistenza accedendo alla pagina del Supporto all’interno del portale My Esri della propria organizzazione.

Vai al form