Indice

Tesy Software srl ©

Pagina non stampabile.
Il contenuto è consultabile solo online.

Installazione e configurazione


Introduzione

Il Metron Wizard semplifica la configurazione degli allestimenti di testata.

Tecnologie utilizzate:

  1. HTML
  2. CSS
  3. JavaScript
  4. React
  5. Node
  6. JSON
  7. JSX (JavaScript Syntax Extension)
  8. MobX per la gestione dello stato dell'applicazione.

Funzionamento:
Il wizard sfrutta file JSON come risorsa dati per creare dinamicamente l'interfaccia della configurazione guidata.
In fase iniziale e dopo ogni clic, la pagina viene richiamata tramite un hashtag (#), interpretato dal sistema per individuare il file JSON da leggere e utilizzare nella creazione dell'interfaccia.


Installazione e configurazione

Istruzioni per l'installazione dell'applicazione

Prerequisiti:

  • Installazione di Node.js v21.6.0 (e relativo npm)

Installazione:

  1. Aprire il terminale sulla quale si vuole eseguire l'applicazione.
  2. Navigare fino alla cartella radice del “wizard.”
  3. Eseguire il comando “npm i.”
  4. Attendere il termine dell'installazione dei pacchetti necessari.

Esecuzione:

  • Lanciare il seguente comando dalla cartella root del wizard:
    npm run dev


Struttura applicazione

1. JSON Structure:

2. Costanti:

  • Vengono inserite tutte le voci tradotte usate nell'applicazione.

3. Slideshow:

  • Vengono inserite le immagini presenti nella cartella slideshow.

4. Parametri:

  • Contiene i passi scelti in precedenza.


Esempio:
{
    "Id": "chiave",
    "Codice": "codice valore selezionato",
    // ... altre proprietà
}

Proprietà disponibili:

  1. Id
  2. Codice
  3. Descrizione
  4. Immagine
  5. … altre proprietà


Info sulla struttura e i file

Components:

  • Contiene componenti come AdaptiveImage, Logo, SearchBox, Sidebar, Slider, Steps.

/config.js:

  • Il file di configurazione della root del progetto con impostazioni base dell'applicazione:
       build.title = "Titolo dell'applicazione";
   build.base = "Base URL dell'applicazione";
   build.entry = "Percorso alla cartella del contenuto dell'applicazione";
   build.exit = "Percorso alla cartella di destinazione della build";

BaseStore.js:

  • Contiene la definizione della classe principale dello store dell'applicazione con proprietà e metodi utilizzabili da altri file del progetto.

views.js:

  • Contiene le viste utilizzabili dall'applicazione. Un oggetto è definito con il codice identificativo del template.