Quindi pianifichiamo
l'app che costruiremo e costruiremo un'app per lo shopping di base, un negozio
online di base in un'app che potresti dire. Quindi quindi in questa applicazione qui avremo sicuramente bisogno di un sacco
di
prodotti che possono essere elencati, quindi avremo come una schermata di panoramica del prodotto in cui vediamo queste carte con
i nostri prodotti, con un'immagine, con il titolo e il prezzo forse qualcosa del genere e anche un
carrello o un pulsante Aggiungi al carrello e un pulsante Dettagli, quindi sostanzialmente un pulsante che ci consente di accedere a
una pagina dei dettagli e un pulsante che ci consente di aggiungere questo
a un carrello.
Perché se tocchi questo pulsante carrello qui, quindi se
selezioni questo pulsante carrello, questo viene aggiunto a un carrello e puoi raggiungere quel carrello con un pulsante di
azione qui nella barra delle azioni, quindi
nell'intestazione superiore, lì I voglio avere un'icona del carrello, probabilmente un po 'più
bella di quella che ho disegnato qui, ma questa icona qui alla fine ci consente di andare
in seguito a una pagina separata, una schermata separata di questa applicazione in cui ovviamente possiamo anche
tornare indietro dove vedremo come una somma totale in dollari qui a cui sommano i nostri articoli totali del carrello e quindi un elenco
dei nostri articoli come un libro e quanto costa
questo e qualcosa
del genere.
Quindi sostanzialmente vediamo il nostro carrello qui, ne vediamo una somma
e poi vediamo i singoli articoli e,
naturalmente, voglio anche avere un pulsante che mi permetta di ordinare ciò che è nel carrello e in realtà quel pulsante non
dovrebbe essere al di sotto di questo , quindi qui avremo
un pulsante per l'ordine.
In realtà questo dovrebbe essere
qui, quindi qui voglio avere una riga in cui abbiamo la somma totale e quindi accanto ad essa, il pulsante dell'ordine.
Quindi questo è
fondamentalmente l'obiettivo ma potresti posizionarlo
dove vuoi, alla fine, vogliamo avere un pulsante che ci permetta di ordinare tutto ciò che
abbiamo
nel carrello e su ogni articolo del carrello qui, voglio anche avere come un'icona cestino qui che mi consente di eliminare un articolo dal carrello.
Quindi, laddove questo effettua un ordine, questa icona qui eliminerà semplicemente un articolo dal
carrello.
Quindi questa
è l'idea, ovviamente se aggiungi lo stesso articolo più volte al carrello, non dovresti aggiungere più righe per
quello ma invece qui, voglio anche mostrare come una quantità dell'articolo che aumenta semplicemente se lo aggiungiamo di più spesso al carrello
e che diminuisce se lo eliminiamo fino a quando non vengono eliminati tutti gli elementi, nel qual
caso l'intera riga verrà eliminata qui.
Quindi è così che funzionerà
questa pagina del carrello, questa è la pagina panoramica qui, ovviamente quindi possiamo anche toccare il pulsante dettagli o forse l'elemento in generale,
quindi ovunque sull'immagine o qualcosa del genere e
quindi dovremmo essere portati a un pagina dei dettagli.
Quindi questa è un'altra schermata in questa applicazione in cui ovviamente possiamo anche tornare indietro.
Questa è la pagina dei dettagli
dell'icona in cui dovremmo vedere l'immagine, probabilmente dovremmo
vedere come il titolo qui nell'intestazione, quindi sarebbe il titolo dell'elemento. Poi sotto, vediamo come il prezzo, vediamo la descrizione
e probabilmente vorremmo avere anche un pulsante al carrello qui, dove possiamo anche aggiungere
articoli al carrello qui. Questo è il flusso relativo ai nostri prodotti che
abbiamo qui. Ora
la cosa importante in questa app sarà che non possiamo solo vedere i prodotti e
acquistarli e aggiungerli al carrello e così via, ma ovviamente possiamo anche visualizzare i nostri ordini e, soprattutto,
che possiamo anche aggiungere nuovi prodotti.
Quindi qui, abbiamo bisogno di un cassetto e questo cassetto ci presenterà un paio di opzioni. Ora la prima opzione ovviamente è che
andiamo nel nostro negozio, per così dire, questa è la parte qui in cui ci
troviamo all'avvio dell'app.
La seconda opzione dovrebbe essere i
nostri ordini e la terza opzione dovrebbe essere come un'opzione di gestione dei prodotti, in cui possiamo gestire i nostri
prodotti che desideri offrire ad altri utenti.
Quindi, come ho già detto, il negozio è praticamente quello che vediamo già.
Ora, se tocchiamo gli ordini, allora voglio essere portato su una schermata in cui ovviamente possiamo anche aprire quel cassetto perché ciò
ci permetterà di tornare indietro, ma su
quella schermata dovremmo vedere gli ordini in cui sostanzialmente abbiamo articoli in cui vediamo un
po 'come la somma di quell'ordine, la data e poi anche un pulsante in cui possiamo toccare dove vediamo più dettagli e se
tocchiamo questo pulsante, allora abbiamo quest'area opzionale che si apre o si chiude e lì dentro sostanzialmente voglio
vedere gli articoli dell'ordine che è sostanzialmente quello che avevamo nel carrello.
Quindi abbiamo avuto due libri qui con un prezzo di 19, ad esempio, beh, questo sarebbe mostrato qui nell'area dei
dettagli quando apriamo questo.
Quindi questa è
l'idea qui
nell'ordine, possiamo espandere un ordine in modo da non vedere solo la somma e la data, ma anche
gli articoli del carrello
che abbiamo inserito lì, quindi sostanzialmente quello che avevamo qui nel carrello, viene visualizzato negli ordini.
Quindi questa è la
schermata degli ordini, abbiamo anche gestito i prodotti e disegniamolo qui forse. I prodotti gestiti sono un'altra area di questa app in cui
abbiamo anche quel pulsante di menu per aprire nuovamente quel cassetto in modo da poter raggiungere le altre parti dell'app
ma qui nella schermata dei prodotti gestiti in cui abbiamo i nostri prodotti, quindi i prodotti dell'utente e
in questa app non aggiungeremo ancora l'autenticazione, ma la aggiungeremo più avanti, ma qui abbiamo i
nostri prodotti. Qui l'idea
è di nuovo che fondamentalmente vediamo un elenco di prodotti che è abbastanza vicino a quello che
vediamo qui sullo schermo del negozio, quindi abbiamo qui le nostre carte con un'immagine, con il titolo e il prezzo forse, quindi
noi è possibile riutilizzare questo elenco qui probabilmente ma
ovviamente le opzioni che abbiamo su ciascun prodotto differiscono. Invece di aggiungerlo a un
carrello e visualizzare i dettagli, possiamo eliminarlo, è
un pulsante e possiamo anche modificarlo. Ovviamente possiamo solo modificare i nostri prodotti ma, di nuovo,
non avremo alcuna mappatura utente reale qui, possiamo farlo con un ID utente fittizio che colleghiamo a ciascun prodotto, ma
è tutto per ora.
Quindi abbiamo il pulsante modifica
ed elimina, ora in aggiunta qui nell'intestazione, quindi abbiamo
bisogno di più spazio qui, nell'intestazione avremo anche un pulsante di azione che ci consente di aggiungere un
nuovo prodotto.
Quindi, fondamentalmente, dovrebbe essere un po 'più ampio qui, l'ho disegnato troppo stretto.
Quindi abbiamo questo pulsante di azione qui e questo pulsante di azione qui, questo pulsante più, questo dovrebbe
portarci a una nuova pagina dove
possiamo aggiungere un nuovo prodotto, quindi questo ci porterà alla pagina del prodotto aggiunto qui dove possiamo ovviamente andare avanti e indietro, possiamo aggiungere un nuovo prodotto e
questo ci consente di aggiungere un titolo qui con un input di testo e che l'input di testo può
anche essere sotto l'etichetta del titolo, puoi costruirlo come vuoi.
Dovremmo essere in grado di
aggiungere il prezzo, dovremmo essere in grado di aggiungere una descrizione qui, potrebbe essere un input multilinea
qui, ovviamente dobbiamo essere in grado di aggiungere anche un imageUrl.
Quindi è quello che possiamo aggiungere qui e quindi abbiamo bisogno di un pulsante qui nella barra delle azioni, un pulsante di
spunta o qualcosa del genere che ci consenta di confermarlo. Non ci preoccuperemo troppo di tutto ciò che l'utente gestisce
in questo
momento in questa fase perché avrò un modulo separato in cui mi immergerò in tutti i dettagli lì, come puoi
farlo in modo elegante, come puoi aggiungere la convalida, quindi qui in questa app lo terremo molto semplice, non
controlleremo se l'utente ha inserito qualcosa di corretto o qualcosa del genere, lo
faremo più avanti nel corso.
Qui abbiamo appena raccolto quell'input di base quando questo pulsante qui, questo pulsante di spunta
qui viene premuto, torniamo a questa pagina e ovviamente usiamo Redux nel nostro sistema di gestione dello stato
per aggiungere un nuovo prodotto all'elenco di prodotti che quindi appare anche qui nel nostro negozio e che compare qui
nel nostro elenco di prodotti, ovviamente, che possiamo amministrare.
Quindi è quello che abbiamo qui.
Ora se tocchiamo modifica qui, se selezioniamo questo pulsante di modifica qui, allora verremo portati anche nella stessa pagina di modifica
del prodotto, ma ovviamente ora abbiamo alcuni valori prepopolati qui, prepopolati con il prodotto che abbiamo caricato e ci sono alcuni campi che non
possiamo modificare, ad esempio il prezzo
non dovrebbe essere modificabile perché se il prezzo fosse modificabile, quindi se lo avessimo già inserito nel
carrello, sarebbe un problema, quindi
non consentiremo la modifica del prezzo qui, noi
consentirà comunque di modificare il titolo, la descrizione e imageUrl,
quindi è qualcosa che è possibile.
Quindi questa è
l'unica differenza, abbiamo campi prepopolati e il prezzo non è modificabile.
Se premiamo il segno di spunta nella modalità di modifica e possiamo scoprire se stiamo modificando o
meno dal fatto che abbiamo ricevuto un ID prodotto come parametro, ad esempio, quindi
una volta terminata la modifica, possiamo premere l'icona del segno di spunta e poi siamo anche ripresi e salviamo
semplicemente tutto ciò che abbiamo modificato qui nel nostro prodotto.
Questa è l'app qui.
Come ho già detto, questa sarà una base anche per i moduli successivi,
lì aggiungeremo anche la richiesta HTTP, l'autenticazione, faremo tutto quel modulo di validazione qui in un modo più elegante e così
via, ma questo modulo
qui ora è un'ottima pratica su come costruire una tale app, su come lavorare con i componenti,
modellarli, come aggiungere la navigazione perché ovviamente abbiamo molta navigazione in questa app e
come gestire il nostro stato in questa app di shopping.
Come ho accennato nell'ultima lezione, potresti saltare questo modulo ma poi dovresti assolutamente immergerti nel codice
finito in modo da poter seguire i moduli successivi ma la mia raccomandazione ovviamente è che a) o
provare questo tutto da solo e, naturalmente, il tuo risultato non sarà lo stesso che ottengo, quindi dovresti sicuramente guardare
i miei video in seguito per vedere come ho fatto questo e in modo da avere la stessa
base di codice da seguire, ma questa
sarà una grande pratica anche se il tuo risultato lì prima perché non c'è necessariamente un
approccio sbagliato o giusto oppure b) l'altra tua opzione ovviamente è che non lo provi da solo e segui
semplicemente, anche un'opzione
valida ma credo che tu ottenere un po 'di più dal corso se lo provi da
solo
ma alla fine, fai quello che ti piace. Nella prossima lezione, ci immergeremo proprio in questo e inizieremo a costruire
questa app.