1 00:00:02,060 --> 00:00:03,200 Quindi pianifichiamo 2 00:00:03,200 --> 00:00:08,920 l'app che costruiremo e costruiremo un'app per lo shopping di base, un negozio 3 00:00:08,930 --> 00:00:17,120 online di base in un'app che potresti dire. Quindi quindi in questa applicazione qui avremo sicuramente bisogno di un sacco 4 00:00:17,120 --> 00:00:17,680 di 5 00:00:17,710 --> 00:00:24,590 prodotti che possono essere elencati, quindi avremo come una schermata di panoramica del prodotto in cui vediamo queste carte con 6 00:00:24,680 --> 00:00:30,770 i nostri prodotti, con un'immagine, con il titolo e il prezzo forse qualcosa del genere e anche un 7 00:00:30,770 --> 00:00:37,930 carrello o un pulsante Aggiungi al carrello e un pulsante Dettagli, quindi sostanzialmente un pulsante che ci consente di accedere a 8 00:00:37,970 --> 00:00:42,440 una pagina dei dettagli e un pulsante che ci consente di aggiungere questo 9 00:00:42,440 --> 00:00:43,730 a un carrello. 10 00:00:43,760 --> 00:00:47,060 Perché se tocchi questo pulsante carrello qui, quindi se 11 00:00:47,060 --> 00:00:53,900 selezioni questo pulsante carrello, questo viene aggiunto a un carrello e puoi raggiungere quel carrello con un pulsante di 12 00:00:53,900 --> 00:00:56,360 azione qui nella barra delle azioni, quindi 13 00:00:56,390 --> 00:01:01,300 nell'intestazione superiore, lì I voglio avere un'icona del carrello, probabilmente un po 'più 14 00:01:01,570 --> 00:01:08,060 bella di quella che ho disegnato qui, ma questa icona qui alla fine ci consente di andare 15 00:01:08,060 --> 00:01:14,480 in seguito a una pagina separata, una schermata separata di questa applicazione in cui ovviamente possiamo anche 16 00:01:14,480 --> 00:01:23,240 tornare indietro dove vedremo come una somma totale in dollari qui a cui sommano i nostri articoli totali del carrello e quindi un elenco 17 00:01:23,510 --> 00:01:26,910 dei nostri articoli come un libro e quanto costa 18 00:01:26,930 --> 00:01:28,360 questo e qualcosa 19 00:01:28,520 --> 00:01:29,510 del genere. 20 00:01:29,540 --> 00:01:33,140 Quindi sostanzialmente vediamo il nostro carrello qui, ne vediamo una somma 21 00:01:33,140 --> 00:01:35,580 e poi vediamo i singoli articoli e, 22 00:01:35,630 --> 00:01:42,470 naturalmente, voglio anche avere un pulsante che mi permetta di ordinare ciò che è nel carrello e in realtà quel pulsante non 23 00:01:42,530 --> 00:01:46,070 dovrebbe essere al di sotto di questo , quindi qui avremo 24 00:01:46,070 --> 00:01:47,530 un pulsante per l'ordine. 25 00:01:47,600 --> 00:01:48,890 In realtà questo dovrebbe essere 26 00:01:48,890 --> 00:01:53,450 qui, quindi qui voglio avere una riga in cui abbiamo la somma totale e quindi accanto ad essa, il pulsante dell'ordine. 27 00:01:54,110 --> 00:01:55,310 Quindi questo è 28 00:01:55,310 --> 00:01:57,250 fondamentalmente l'obiettivo ma potresti posizionarlo 29 00:01:57,250 --> 00:02:02,930 dove vuoi, alla fine, vogliamo avere un pulsante che ci permetta di ordinare tutto ciò che 30 00:02:02,930 --> 00:02:03,470 abbiamo 31 00:02:03,470 --> 00:02:12,150 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. 32 00:02:12,200 --> 00:02:22,300 Quindi, laddove questo effettua un ordine, questa icona qui eliminerà semplicemente un articolo dal 33 00:02:22,300 --> 00:02:23,410 carrello. 34 00:02:23,410 --> 00:02:24,220 Quindi questa 35 00:02:24,220 --> 00:02:29,760 è l'idea, ovviamente se aggiungi lo stesso articolo più volte al carrello, non dovresti aggiungere più righe per 36 00:02:29,830 --> 00:02:36,520 quello ma invece qui, voglio anche mostrare come una quantità dell'articolo che aumenta semplicemente se lo aggiungiamo di più spesso al carrello 37 00:02:36,520 --> 00:02:41,920 e che diminuisce se lo eliminiamo fino a quando non vengono eliminati tutti gli elementi, nel qual 38 00:02:41,920 --> 00:02:44,080 caso l'intera riga verrà eliminata qui. 39 00:02:44,080 --> 00:02:46,000 Quindi è così che funzionerà 40 00:02:46,000 --> 00:02:54,070 questa pagina del carrello, questa è la pagina panoramica qui, ovviamente quindi possiamo anche toccare il pulsante dettagli o forse l'elemento in generale, 41 00:02:54,070 --> 00:02:56,950 quindi ovunque sull'immagine o qualcosa del genere e 42 00:02:56,980 --> 00:03:00,250 quindi dovremmo essere portati a un pagina dei dettagli. 43 00:03:00,250 --> 00:03:04,810 Quindi questa è un'altra schermata in questa applicazione in cui ovviamente possiamo anche tornare indietro. 44 00:03:04,810 --> 00:03:08,190 Questa è la pagina dei dettagli 45 00:03:08,260 --> 00:03:12,490 dell'icona in cui dovremmo vedere l'immagine, probabilmente dovremmo 46 00:03:12,490 --> 00:03:23,710 vedere come il titolo qui nell'intestazione, quindi sarebbe il titolo dell'elemento. Poi sotto, vediamo come il prezzo, vediamo la descrizione 47 00:03:24,190 --> 00:03:32,300 e probabilmente vorremmo avere anche un pulsante al carrello qui, dove possiamo anche aggiungere 48 00:03:32,310 --> 00:03:37,460 articoli al carrello qui. Questo è il flusso relativo ai nostri prodotti che 49 00:03:37,470 --> 00:03:38,630 abbiamo qui. Ora 50 00:03:38,640 --> 00:03:44,060 la cosa importante in questa app sarà che non possiamo solo vedere i prodotti e 51 00:03:44,060 --> 00:03:50,010 acquistarli e aggiungerli al carrello e così via, ma ovviamente possiamo anche visualizzare i nostri ordini e, soprattutto, 52 00:03:50,130 --> 00:03:52,110 che possiamo anche aggiungere nuovi prodotti. 53 00:03:52,110 --> 00:03:59,100 Quindi qui, abbiamo bisogno di un cassetto e questo cassetto ci presenterà un paio di opzioni. Ora la prima opzione ovviamente è che 54 00:03:59,120 --> 00:04:05,940 andiamo nel nostro negozio, per così dire, questa è la parte qui in cui ci 55 00:04:05,940 --> 00:04:07,770 troviamo all'avvio dell'app. 56 00:04:07,830 --> 00:04:10,110 La seconda opzione dovrebbe essere i 57 00:04:10,110 --> 00:04:17,340 nostri ordini e la terza opzione dovrebbe essere come un'opzione di gestione dei prodotti, in cui possiamo gestire i nostri 58 00:04:17,370 --> 00:04:19,920 prodotti che desideri offrire ad altri utenti. 59 00:04:19,950 --> 00:04:22,810 Quindi, come ho già detto, il negozio è praticamente quello che vediamo già. 60 00:04:22,830 --> 00:04:31,500 Ora, se tocchiamo gli ordini, allora voglio essere portato su una schermata in cui ovviamente possiamo anche aprire quel cassetto perché ciò 61 00:04:31,500 --> 00:04:34,540 ci permetterà di tornare indietro, ma su 62 00:04:34,590 --> 00:04:40,530 quella schermata dovremmo vedere gli ordini in cui sostanzialmente abbiamo articoli in cui vediamo un 63 00:04:40,960 --> 00:04:49,800 po 'come la somma di quell'ordine, la data e poi anche un pulsante in cui possiamo toccare dove vediamo più dettagli e se 64 00:04:49,800 --> 00:04:56,850 tocchiamo questo pulsante, allora abbiamo quest'area opzionale che si apre o si chiude e lì dentro sostanzialmente voglio 65 00:04:56,860 --> 00:05:02,040 vedere gli articoli dell'ordine che è sostanzialmente quello che avevamo nel carrello. 66 00:05:02,040 --> 00:05:09,810 Quindi abbiamo avuto due libri qui con un prezzo di 19, ad esempio, beh, questo sarebbe mostrato qui nell'area dei 67 00:05:09,810 --> 00:05:11,590 dettagli quando apriamo questo. 68 00:05:11,610 --> 00:05:12,490 Quindi questa è 69 00:05:12,540 --> 00:05:13,230 l'idea qui 70 00:05:13,230 --> 00:05:18,030 nell'ordine, possiamo espandere un ordine in modo da non vedere solo la somma e la data, ma anche 71 00:05:18,030 --> 00:05:19,200 gli articoli del carrello 72 00:05:19,230 --> 00:05:23,720 che abbiamo inserito lì, quindi sostanzialmente quello che avevamo qui nel carrello, viene visualizzato negli ordini. 73 00:05:23,960 --> 00:05:25,380 Quindi questa è la 74 00:05:25,380 --> 00:05:33,480 schermata degli ordini, abbiamo anche gestito i prodotti e disegniamolo qui forse. I prodotti gestiti sono un'altra area di questa app in cui 75 00:05:33,480 --> 00:05:40,620 abbiamo anche quel pulsante di menu per aprire nuovamente quel cassetto in modo da poter raggiungere le altre parti dell'app 76 00:05:40,620 --> 00:05:47,130 ma qui nella schermata dei prodotti gestiti in cui abbiamo i nostri prodotti, quindi i prodotti dell'utente e 77 00:05:47,280 --> 00:05:52,980 in questa app non aggiungeremo ancora l'autenticazione, ma la aggiungeremo più avanti, ma qui abbiamo i 78 00:05:53,340 --> 00:05:55,380 nostri prodotti. Qui l'idea 79 00:05:55,380 --> 00:06:01,290 è di nuovo che fondamentalmente vediamo un elenco di prodotti che è abbastanza vicino a quello che 80 00:06:01,350 --> 00:06:08,790 vediamo qui sullo schermo del negozio, quindi abbiamo qui le nostre carte con un'immagine, con il titolo e il prezzo forse, quindi 81 00:06:08,790 --> 00:06:11,980 noi è possibile riutilizzare questo elenco qui probabilmente ma 82 00:06:12,510 --> 00:06:18,720 ovviamente le opzioni che abbiamo su ciascun prodotto differiscono. Invece di aggiungerlo a un 83 00:06:18,720 --> 00:06:22,400 carrello e visualizzare i dettagli, possiamo eliminarlo, è 84 00:06:22,440 --> 00:06:28,710 un pulsante e possiamo anche modificarlo. Ovviamente possiamo solo modificare i nostri prodotti ma, di nuovo, 85 00:06:28,710 --> 00:06:35,400 non avremo alcuna mappatura utente reale qui, possiamo farlo con un ID utente fittizio che colleghiamo a ciascun prodotto, ma 86 00:06:35,730 --> 00:06:37,470 è tutto per ora. 87 00:06:37,530 --> 00:06:39,330 Quindi abbiamo il pulsante modifica 88 00:06:39,330 --> 00:06:41,920 ed elimina, ora in aggiunta qui nell'intestazione, quindi abbiamo 89 00:06:41,940 --> 00:06:47,640 bisogno di più spazio qui, nell'intestazione avremo anche un pulsante di azione che ci consente di aggiungere un 90 00:06:47,640 --> 00:06:48,390 nuovo prodotto. 91 00:06:48,390 --> 00:06:53,310 Quindi, fondamentalmente, dovrebbe essere un po 'più ampio qui, l'ho disegnato troppo stretto. 92 00:06:53,340 --> 00:07:00,030 Quindi abbiamo questo pulsante di azione qui e questo pulsante di azione qui, questo pulsante più, questo dovrebbe 93 00:07:00,030 --> 00:07:02,480 portarci a una nuova pagina dove 94 00:07:02,490 --> 00:07:12,630 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 95 00:07:12,720 --> 00:07:19,720 questo ci consente di aggiungere un titolo qui con un input di testo e che l'input di testo può 96 00:07:19,720 --> 00:07:23,650 anche essere sotto l'etichetta del titolo, puoi costruirlo come vuoi. 97 00:07:23,670 --> 00:07:25,770 Dovremmo essere in grado di 98 00:07:25,890 --> 00:07:32,390 aggiungere il prezzo, dovremmo essere in grado di aggiungere una descrizione qui, potrebbe essere un input multilinea 99 00:07:32,400 --> 00:07:36,530 qui, ovviamente dobbiamo essere in grado di aggiungere anche un imageUrl. 100 00:07:36,570 --> 00:07:41,460 Quindi è quello che possiamo aggiungere qui e quindi abbiamo bisogno di un pulsante qui nella barra delle azioni, un pulsante di 101 00:07:41,460 --> 00:07:46,440 spunta o qualcosa del genere che ci consenta di confermarlo. Non ci preoccuperemo troppo di tutto ciò che l'utente gestisce 102 00:07:46,440 --> 00:07:47,120 in questo 103 00:07:47,130 --> 00:07:52,230 momento in questa fase perché avrò un modulo separato in cui mi immergerò in tutti i dettagli lì, come puoi 104 00:07:52,530 --> 00:07:57,330 farlo in modo elegante, come puoi aggiungere la convalida, quindi qui in questa app lo terremo molto semplice, non 105 00:07:57,330 --> 00:08:00,870 controlleremo se l'utente ha inserito qualcosa di corretto o qualcosa del genere, lo 106 00:08:00,870 --> 00:08:02,350 faremo più avanti nel corso. 107 00:08:02,430 --> 00:08:07,470 Qui abbiamo appena raccolto quell'input di base quando questo pulsante qui, questo pulsante di spunta 108 00:08:07,830 --> 00:08:13,560 qui viene premuto, torniamo a questa pagina e ovviamente usiamo Redux nel nostro sistema di gestione dello stato 109 00:08:13,560 --> 00:08:20,100 per aggiungere un nuovo prodotto all'elenco di prodotti che quindi appare anche qui nel nostro negozio e che compare qui 110 00:08:20,100 --> 00:08:23,280 nel nostro elenco di prodotti, ovviamente, che possiamo amministrare. 111 00:08:23,340 --> 00:08:24,420 Quindi è quello che abbiamo qui. 112 00:08:24,480 --> 00:08:32,100 Ora se tocchiamo modifica qui, se selezioniamo questo pulsante di modifica qui, allora verremo portati anche nella stessa pagina di modifica 113 00:08:32,100 --> 00:08:40,410 del prodotto, ma ovviamente ora abbiamo alcuni valori prepopolati qui, prepopolati con il prodotto che abbiamo caricato e ci sono alcuni campi che non 114 00:08:40,770 --> 00:08:43,110 possiamo modificare, ad esempio il prezzo 115 00:08:43,110 --> 00:08:49,080 non dovrebbe essere modificabile perché se il prezzo fosse modificabile, quindi se lo avessimo già inserito nel 116 00:08:49,080 --> 00:08:51,230 carrello, sarebbe un problema, quindi 117 00:08:51,480 --> 00:08:54,390 non consentiremo la modifica del prezzo qui, noi 118 00:08:54,390 --> 00:08:57,840 consentirà comunque di modificare il titolo, la descrizione e imageUrl, 119 00:08:57,930 --> 00:09:00,210 quindi è qualcosa che è possibile. 120 00:09:00,210 --> 00:09:01,210 Quindi questa è 121 00:09:01,260 --> 00:09:04,180 l'unica differenza, abbiamo campi prepopolati e il prezzo non è modificabile. 122 00:09:04,260 --> 00:09:09,840 Se premiamo il segno di spunta nella modalità di modifica e possiamo scoprire se stiamo modificando o 123 00:09:09,840 --> 00:09:14,220 meno dal fatto che abbiamo ricevuto un ID prodotto come parametro, ad esempio, quindi 124 00:09:14,220 --> 00:09:20,100 una volta terminata la modifica, possiamo premere l'icona del segno di spunta e poi siamo anche ripresi e salviamo 125 00:09:20,100 --> 00:09:23,660 semplicemente tutto ciò che abbiamo modificato qui nel nostro prodotto. 126 00:09:23,670 --> 00:09:25,780 Questa è l'app qui. 127 00:09:25,890 --> 00:09:30,700 Come ho già detto, questa sarà una base anche per i moduli successivi, 128 00:09:30,700 --> 00:09:38,100 lì aggiungeremo anche la richiesta HTTP, l'autenticazione, faremo tutto quel modulo di validazione qui in un modo più elegante e così 129 00:09:38,100 --> 00:09:40,020 via, ma questo modulo 130 00:09:40,050 --> 00:09:46,110 qui ora è un'ottima pratica su come costruire una tale app, su come lavorare con i componenti, 131 00:09:46,200 --> 00:09:51,240 modellarli, come aggiungere la navigazione perché ovviamente abbiamo molta navigazione in questa app e 132 00:09:51,240 --> 00:09:54,940 come gestire il nostro stato in questa app di shopping. 133 00:09:55,020 --> 00:09:59,850 Come ho accennato nell'ultima lezione, potresti saltare questo modulo ma poi dovresti assolutamente immergerti nel codice 134 00:09:59,850 --> 00:10:05,100 finito in modo da poter seguire i moduli successivi ma la mia raccomandazione ovviamente è che a) o 135 00:10:05,100 --> 00:10:10,840 provare questo tutto da solo e, naturalmente, il tuo risultato non sarà lo stesso che ottengo, quindi dovresti sicuramente guardare 136 00:10:10,860 --> 00:10:16,230 i miei video in seguito per vedere come ho fatto questo e in modo da avere la stessa 137 00:10:16,230 --> 00:10:18,360 base di codice da seguire, ma questa 138 00:10:18,360 --> 00:10:23,280 sarà una grande pratica anche se il tuo risultato lì prima perché non c'è necessariamente un 139 00:10:23,280 --> 00:10:28,890 approccio sbagliato o giusto oppure b) l'altra tua opzione ovviamente è che non lo provi da solo e segui 140 00:10:28,890 --> 00:10:29,870 semplicemente, anche un'opzione 141 00:10:29,970 --> 00:10:34,830 valida ma credo che tu ottenere un po 'di più dal corso se lo provi da 142 00:10:34,830 --> 00:10:35,490 solo 143 00:10:35,490 --> 00:10:40,080 ma alla fine, fai quello che ti piace. Nella prossima lezione, ci immergeremo proprio in questo e inizieremo a costruire 144 00:10:40,080 --> 00:10:40,500 questa app.