Nasce il Playground schede Smeup: un ambiente semplice, efficiente ed assistito, dove l’unica cosa che potete fare è … schede!

In questo articolo ne vediamo una panoramica di utilizzo ed alcune funzionalità.

Le schede ricoprono un ruolo fondamentale in Smeup. Esse rappresentano lo strumento con il quale viene costruito il front-end ed attraverso cui si definiscono le logiche di interazione tra i componenti che costituiscono le applicazioni. Non solo, questo strumento è alla base dell’integrazione dei prodotti che vogliono fare uso del front-end Sme.UP, arricchendosi di tutte le potenzialità che questo offre.

Chi si approccia alle schede ha molto spesso la necessità di scoprirne e testarne le funzionalità in modo semplice ed immediato, prescindendo da aspetti tecnici e di configurazione, concentrandosi unicamente sull’obiettivo: la scheda.

Come funziona il Playground?

Come accedere

È possibile effettuare l’accesso al Playground in due modi: tramite credenziali Smeup, oppure tramite e-mail.

Nel primo caso è sufficiente cliccare qui ed inserire i propri dati di accesso a Smeup.

Nel secondo caso, invece, utilizzando la UPP WE_110 è possibile gestire e registrare utenti collegandoli ad e-mail e password. Tramite un automatismo, viene creato un utente applicativo associato alla mail, al quale a sua volta viene assegnata una libreria W_[nomeUtente].

Sezione “Le mie schede”

Una volta effettuato l’accesso, sulla sinistra vengono visualizzate tutte le schede (SCP_SCH) di proprietà dell’utente, presenti quindi nella propria libreria W_[nomeUtente]. Per ogni scheda è possibile eseguire delle azioni tramite le icone disponibili nella riga corrispondente:

  • Copia: copia la scheda scelta, permettendo di assegnare un nome ed una descrizione al membro che verrà generato.
  • Elimina: elimina in maniera permanente l’elemento.
  • Edita: permette di aprire l’editor e quindi modificare il codice, oppure di visualizzare la scheda lanciando la fun già precompilata nello spotlight.
  • Download: salva lo script di scheda in locale.
Sezione "le mie schede" all'interno del Playground

Sulla destra, invece, troviamo un elenco di template default che contengono del codice già pronto all’uso. Questi template sono script pre-costruiti che possono essere utilizzati come base per la produzione di una scheda personalizzata. Come per le schede, per ogni template è possibile eseguire delle azioni tramite le icone disponibili nella riga corrispondente:

  • Copia: copia il template scelto, permettendo di assegnare un nome ed una descrizione al membro che verrà generato nell’elenco “Le mie schede”, a sinistra.
  • Visualizza: permette di visualizzare la scheda con le caratteristiche specificate nella descrizione.
  • Vedi script: apre l’editor e permette di vedere, ma non modificare, lo script di scheda. Per eseguire una modifica, è prima necessario creare una copia del membro nella sezione “Le mie schede”.
Immagine illustrativa del posizionamento della sezione "Templates" all'interno del Playground

Sezione “I miei prototipi”

Le stesse funzionalità e logiche vengono messe a disposizione anche nella sezione “I miei prototipi”. L’unica differenza è che in questa parte si agirà su file di tipo “SCP_SET”, che in Smeup hanno lo scopo di creare dati prototipali da utilizzare poi nelle schede.

Tramite questa sezione è possibile creare dei membri che conterranno dati di mock, utilizzabili poi immediatamente all’interno delle schede. Il tutto senza mai cambiare pagina!

Immagine illustrativa del posizionamento della sezione "I miei prototipi" all'interno del Playground

Esempio di utilizzo del Playground

Vediamo ora come utilizzare in modo pratico il nostro nuovo Playground!

Iniziamo creando la copia di un file SCP_SCH presente nei template premendo il pulsante “Copia“, che troviamo nella matrice di destra.

screenshot del posizionamento del pulsante "Copia" all'interno di Playground

Si aprirà a questo punto una finestra di dialogo in cui potremo scegliere nome e descrizione da assegnare al nuovo file. Una volta inseriti i dati e cliccato su conferma, vedremo apparire nella matrice di sinistra la nostra nuova scheda.

A questo punto, possiamo modificare la nuova scheda premendo il pulsante “Edita“. Questo ci porterà su una nuova scheda divisa in due sezioni:

  • nella prima troviamo un editor che ci permette di modificare lo script di scheda secondo le nostre esigenze;
  • nella seconda, invece, troviamo uno spotlight che permette di visualizzare la scheda che abbiamo definito sopra.

Questa struttura è stata costruita appositamente per permettere all’utente di vedere in modo comodo e veloce le proprie modifiche.

screenshot del posizionamento del pulsante "Edita" all'interno del Playground e della schermata risultante dal suo click

In caso di necessità, è possibile scaricare localmente la scheda cliccando il pulsante “Download“. Così facendo verrà scaricata una cartella .zip contenente il membro in tre formati: TXT, XML e JSON.

screenshot del posizionamento del pulsante "Download" all'interno del Playground e dei file che vengono scaricati una volta cliccato

Altre funzionalità

Le funzionalità del Playground non sono finite! Nella pagina iniziale, infatti, troviamo due menù a cascata:

  • lista articoli blog;
  • showcase componenti.
screenshot del posizionamento dei menù a cascata descritti di seguito all'interno di Playground

Il primo contiene una lista di tutti gli articoli del blog che riguardano le schede. Premendo sul pulsante “Lista articoli blog” si presenta un elenco dei vari titoli e, cliccando su uno, si aprirà la relativa scheda per permetterne la lettura. Questa sezione è stata inserita per permettere a chiunque di avere comodo accesso a tutta la documentazione creata.

Il secondo bottone, invece, permette di visitare lo showcase dei componenti di Smeup. Da qui potremo decidere se consultare l’elenco dei componenti oppure delle forme grafiche. Come la precedente, questa sezione è stata creata per permettere un comodo accesso al materiale messo a disposizione da Smeup.

Con le sue svariate funzionalità, il Playground è uno strumento molto potente che rende più comodo e veloce il processo di creazione di una scheda.  Permette di copiare, modificare e condividere, il tutto in un unico ambiente.

Abbiamo parlato delle sue principali funzioni, adesso non vi rimane altro che metterlo alla prova!