Indice
- Estrapolazione delle proprietà dei componenti
- Componenti globali
- Componenti di posizionamento
- Componenti di input
- Componenti di progetto
- Composizione delle pagine
- NoteIndex
- NoteDetail
- NoteCreate
- NoteEdit
- Data Layer
- Note
%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%2048%2024'%20style='enable-background:new%200%200%2048%2024;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23128E8F;}%20.st1{fill:%23FFFFFF;}%20%3c/style%3e%3cpath%20class='st0'%20d='M24,24c13.3,0,24-10.7,24-24H0C0,13.3,10.7,24,24,24z'/%3e%3cpath%20class='st1'%20d='M24,15.3L18.7,10L24,4.7l1,0.9l-3.7,3.7h8.1v1.3h-8.1l3.7,3.7L24,15.3z'/%3e%3c/svg%3e)
Progetta e migliora la tua app con la UX Design - PT 4
Implementazione software
9/29/2024
Estrapolazione delle proprietà dei componenti
Grazie alle fasi di progettazione UX viste nelle precedenti parti possiamo ora individuare l'elenco dei componenti, specificando per ciascuno:
- Proprietà
- Elenco dei dati che arriveranno in ingresso al componente per la personalizzazione dello stesso
- Eventi
- Elenco dei dati inviati dal componente per comunicare con il componente genitore
- Slots
- Elenco degli spazi riempibili esternamente dal componente, per comporre l'interfaccia
- Componenti incorporati
- Elenco dei componenti che vengono usati all'interno del componente stesso
Componenti globali
NavBar
Barra di navigazione principale.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| actions | array({id, icon}) | elenco delle azioni | |
| isBackEnabled | boolean | specifica se il back è abilitato | |
| title | string | titolo visualizzato |
| Nome | Parametri | Descrizione |
|---|---|---|
| actionClick | action | click su una azione |
| backClick | click sul pulsante di back |
SearchBar
Barra di ricerca principale.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| placeholder | string | Search... | testo placeholder |
| value | string | valore del campo input |
| Nome | Parametri | Descrizione |
|---|---|---|
| input | value | cambio del valore di input |
PopupDialog
Dialog di conferma o attesa.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| text | string | Do you really want to proceed | testo del dialog |
| type | string | Confirm | tipo di dialog (confirm, locking) |
| Nome | Parametri | Descrizione |
|---|---|---|
| cancelClick | value | click sul tasto annulla |
| deleteClick | value | click sul tasto elimina |
SnackBar
Visualizza un messaggio di notifica o errore in forma di popup.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| text | string | testo del messaggio | |
| type | string | success | tipo di messaggio (success, danger) |
| Nome | Parametri | Descrizione |
|---|---|---|
| emitButtonClick | click sul tasto |
Componenti di posizionamento
MainLayout
Layout principale dell'applicazione.
| Nome | Descrizione |
|---|---|
| NavBar | Barra di navigazione |
| Nome | Descrizione |
|---|---|
| content | Contenuto principale del layout |
Contenitore con stile card.
| Nome | Descrizione |
|---|---|
| content | Contenuto principale della card |
Componenti di input
TextArea
Campo di input alfanumerico per testi estesi.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| value | string | valore del campo input | |
| isDisabled | boolean | specifica se il campo è disabilitato | |
| isError | boolean | specifica se è presente un errore sul campo | |
| label | string | testo della label del campo input |
| Nome | Parametri | Descrizione |
|---|---|---|
| input | value | cambio del valore di input |
DateInput
Consente di selezionare una data all'interno di un form.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| value | string | valore del campo input | |
| isDisabled | boolean | specifica se il campo è disabilitato | |
| isError | boolean | specifica se è presente un errore sul campo | |
| label | string | testo della label del campo input |
| Nome | Parametri | Descrizione |
|---|---|---|
| input | value | cambio del valore di input |
TextInput
Campo di input alfanumerico per testi brevi.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| value | string | valore del campo input | |
| isDisabled | boolean | specifica se il campo è disabilitato | |
| isError | boolean | specifica se è presente un errore sul campo | |
| label | string | testo della label del campo input |
| Nome | Parametri | Descrizione |
|---|---|---|
| input | value | cambio del valore di input |
Componenti di progetto
NoteList
Visualizza una lista di note.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| isLoading | boolean | specifica se la lista è in fase di caricamento | |
| items | array({id, title, date, description}) | elementi della lista |
| Nome | Parametri | Descrizione |
|---|---|---|
| clickItem | item | click su un elemento della lista |
| Nome | Descrizione |
|---|---|
| NoteListItem | Elemento per visualizzare l'anteprima di una nota |
NoteListItem
Visualizza l'anteprima di una nota.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| date | date | data della nota | |
| description | string | descrizione della nota | |
| title | string | titolo della nota |
| Nome | Parametri | Descrizione |
|---|---|---|
| click | item | click sull'elemento |
NoteForm
Form per la compilazione di una nota.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| date | date | data della nota | |
| description | string | descrizione della nota | |
| title | string | titolo della nota |
| Nome | Parametri | Descrizione |
|---|---|---|
| submit | item | submit del form |
NoteDetail
Consente di visualizzare il dettaglio di una nota.
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| date | date | data della nota | |
| description | string | descrizione della nota | |
| title | string | titolo della nota |
Composizione delle pagine
Terminata l'analisi dei componenti passiamo ad analizzare la composizione delle pagine dell'applicazione.
NoteIndex
| Nome | Descrizione |
|---|---|
| MainLayout | Layout principale dell'applicazione |
| NavBar | Barra di navigazione principale |
| SearchBar | Barra di ricerca delle note |
| NoteList | Visualizza una lista di note |
| PopupDialog | Mostra un messaggio di notifica o di errore |
NoteDetail
| Nome | Descrizione |
|---|---|
| MainLayout | Layout principale dell'applicazione |
| NavBar | Barra di navigazione principale |
| CardContainer | Contenitore con stile card. |
| NoteDetail | Visualizza le informazioni di dettaglio di una nota |
NoteCreate
| Nome | Descrizione |
|---|---|
| MainLayout | Layout principale dell'applicazione |
| NavBar | Barra di navigazione principale |
| CardContainer | Contenitore con stile card. |
| NoteForm | Visualizza il form di una nota |
NoteEdit
| Nome | Descrizione |
|---|---|
| MainLayout | Layout principale dell'applicazione |
| NavBar | Barra di navigazione principale |
| CardContainer | Contenitore con stile card. |
| NoteForm | Visualizza il form di una nota |
Data Layer
Note
Per l'entità Note individuata il relativo modello dovrà presentare i seguenti campi e sarà necessario esporre le seguenti chiamate:
| Nome | Tipo | Valore di Default | Descrizione |
|---|---|---|---|
| id | string | id della nota | |
| date | date | data della nota | |
| description | string | descrizione della nota | |
| title | string | titolo della nota |
| Nome | Parametri in ingresso | Valore di Ritorno | Descrizione |
|---|---|---|---|
| create | note | oggetto nota creato | crea una nuova nota |
| delete | id | oggetto nota eliminato | elimina la nota specificata |
| get | id | oggetto nota specificato | restituisce le informazioni relative ad una specifica nota |
| list | array di note | lista tutte le note presenti con le relative informazioni | |
| search | keyword | array di note | cerca tutte le note presenti nel cui titolo o descrizione è presente la keyword |
| update | id, note | oggetto nota aggiornato | aggiorna la nota specificata con i nuovi valori dei campi |