1
00:00:02,160 --> 00:00:05,140
Per questo modulo e per questa app

2
00:00:05,160 --> 00:00:11,310
che stiamo costruendo, troverai di nuovo un progetto iniziale allegato a questa lezione che puoi usare per iniziare

3
00:00:11,310 --> 00:00:15,480
con questo o puoi creare una nuova app expo da solo, ovviamente.

4
00:00:15,480 --> 00:00:21,300
Ora questa è l'app che ho allegato, un'app molto semplice con io sono la tua app che possiamo a malapena vedere che

5
00:00:21,330 --> 00:00:23,980
non ha importanza perché non terremo comunque questo testo e

6
00:00:24,160 --> 00:00:26,370
abbiamo solo quell'app. file js.

7
00:00:26,430 --> 00:00:32,130
Ora molte delle cose che faccio in questo modulo saranno cose che hai visto nei moduli precedenti perché ovviamente questa

8
00:00:32,130 --> 00:00:33,660
è l'idea di base qui.

9
00:00:33,660 --> 00:00:39,480
Praticheremo ciò che abbiamo appreso finora e ci saranno alcune cose nuove o alcuni schemi che

10
00:00:39,480 --> 00:00:41,710
potrebbero essere interessanti anche per te.

11
00:00:41,730 --> 00:00:47,160
Ora, ovviamente, in questa app che ho delineato nell'ultima lezione, avremo un paio di schermate, quindi avremo sicuramente bisogno

12
00:00:47,160 --> 00:00:52,230
di navigazione e quindi aggiungerò una cartella di navigazione in modo da poter memorizzare la mia configurazione di

13
00:00:52,230 --> 00:00:54,380
navigazione lì e questo è ovviamente solo

14
00:00:54,420 --> 00:00:57,480
un possibile setup, come ho già detto prima, puoi lavorare

15
00:00:57,480 --> 00:01:03,690
con qualsiasi struttura di cartelle desideri e che funzioni per te. Oltre alla cartella di navigazione, voglio anche

16
00:01:03,690 --> 00:01:04,740
avere

17
00:01:04,740 --> 00:01:09,690
una cartella di schermate qui, in quella cartella di schermate voglio anche

18
00:01:09,690 --> 00:01:15,660
memorizzare le schermate tra cui possiamo navigare e aggiungerò una cartella di componenti per

19
00:01:15,660 --> 00:01:18,460
tutti i miei componenti normali, ovviamente

20
00:01:18,520 --> 00:01:24,450
anche le schermate sono React componenti ma i componenti normali intendo qui sono i

21
00:01:24,450 --> 00:01:30,720
componenti che non cariciamo direttamente come schermate ma che invece incorporiamo nelle schermate o in

22
00:01:30,720 --> 00:01:37,500
altri componenti, quindi è quello che avremo qui. Aggiungerò anche una cartella delle costanti perché, di nuovo,

23
00:01:37,500 --> 00:01:43,860
lavorerò qui con le mie costanti di colore in modo da poter usare i miei colori preselezionati nell'intera applicazione.

24
00:01:43,880 --> 00:01:49,280
Ora ci sono un sacco di modi diversi di iniziare, quello che mi piace fare prima nelle mie

25
00:01:49,280 --> 00:01:51,020
app è che inizio con

26
00:01:51,020 --> 00:01:56,870
le schermate, anche se non aggiungo ancora il contenuto a tutte, mi piace aggiungere questo generale struttura in modo

27
00:01:56,870 --> 00:02:01,570
da poter sempre vedere su cosa ho ancora bisogno di lavorare, quali funzioni mancano ancora.

28
00:02:01,880 --> 00:02:04,980
Quindi, aggiungerò le schermate che avrò in questa app e

29
00:02:05,180 --> 00:02:09,890
qui farò qualcosa che non ho mai fatto prima e che è totalmente opzionale ma organizzerò

30
00:02:09,890 --> 00:02:12,120
le mie schermate in sottocartelle separate.

31
00:02:12,170 --> 00:02:15,770
Avrò una cartella con le schermate relative al mio negozio e

32
00:02:15,770 --> 00:02:20,930
ovviamente poiché costruiremo un'app per lo shopping, tutte le schermate sono in qualche modo correlate al

33
00:02:20,930 --> 00:02:26,540
negozio ma qui voglio avere le schermate che ci aiutano direttamente a visualizzare i nostri prodotti, aggiungendoli al

34
00:02:26,540 --> 00:02:27,120
carrello

35
00:02:27,530 --> 00:02:34,430
e così via e quindi desidero avere una cartella separata e quella è la mia cartella utente che potresti dire, lì voglio

36
00:02:34,430 --> 00:02:36,400
avere le schermate relative all'utente, in

37
00:02:36,470 --> 00:02:40,370
modo che siano i miei prodotti utente e i prodotti di amministrazione.

38
00:02:40,440 --> 00:02:42,590
È così che lo

39
00:02:42,590 --> 00:02:45,950
dividerò, ma ovviamente puoi organizzarlo come preferisci.

40
00:02:45,950 --> 00:02:52,670
Quindi nella cartella del negozio qui, ad esempio, voglio avere la schermata di panoramica dei miei prodotti e quella sarà la

41
00:02:52,760 --> 00:02:58,340
schermata che vediamo quando l'app carica dove abbiamo tutti i prodotti con cui lavorare e dove possiamo

42
00:02:58,340 --> 00:03:04,880
quindi selezionare un prodotto o aggiungerlo direttamente al carrello. Avremo quindi bisogno anche di una schermata di dettaglio del prodotto, che è

43
00:03:04,880 --> 00:03:10,520
la schermata che vediamo quando selezioniamo un prodotto e vogliamo saperne di più su di esso, quindi possiamo fare clic su

44
00:03:10,520 --> 00:03:16,940
di esso o toccarlo e portarci a quella schermata di dettagli. Avremo anche bisogno di una schermata del carrello, che è ovviamente lo

45
00:03:16,940 --> 00:03:22,430
schermo che vediamo quando aggiungiamo un articolo al carrello o meno che poi vediamo ma che possiamo visitare per visualizzare

46
00:03:22,430 --> 00:03:23,000
l'oggetto

47
00:03:23,000 --> 00:03:24,440
lì, quindi è qualcosa che

48
00:03:25,470 --> 00:03:30,600
possiamo fare lì e io ' Aggiungerò anche una schermata degli ordini in cui possiamo visualizzare i nostri ordini.

49
00:03:30,600 --> 00:03:35,730
Ora potresti in ogni caso affermare che la schermata del carrello e la schermata dell'ordine appartengono alla cartella

50
00:03:35,730 --> 00:03:39,450
dell'utente perché sono in qualche modo esclusive per l'utente, ogni utente ha i

51
00:03:39,450 --> 00:03:44,340
suoi ordini e il suo carrello e quindi puoi andare in entrambi i modi, Credo che siano

52
00:03:44,340 --> 00:03:47,970
un po 'più dal punto di vista dei prodotti del negozio, ma

53
00:03:47,970 --> 00:03:51,960
ancora una volta, dipende da te. Nella cartella utente, voglio

54
00:03:51,960 --> 00:03:58,980
avere la schermata dei miei prodotti utente, quindi quella sarà la schermata in cui vedo un elenco di tutti i

55
00:03:59,040 --> 00:04:06,570
prodotti che appartengono a quell'utente e la schermata di modifica del prodotto che è la schermata che useremo per aggiungere nuovi prodotti

56
00:04:06,690 --> 00:04:08,710
o per la modifica di prodotti

57
00:04:08,730 --> 00:04:10,940
esistenti, saremo in grado di riutilizzarli.

58
00:04:11,160 --> 00:04:13,490
Queste sono le schermate in cui lavoreremo

59
00:04:13,500 --> 00:04:20,280
in questo modulo e non le popoleremo di vita immediatamente in questo momento, invece lavoreremo su quel passo per passo

60
00:04:20,280 --> 00:04:20,990
ma

61
00:04:21,000 --> 00:04:23,090
è quello di cui avremo bisogno.

62
00:04:23,220 --> 00:04:27,450
Ora, naturalmente, c'è anche un'altra cartella che possiamo già aggiungere e questa è la cartella

63
00:04:27,450 --> 00:04:32,820
del negozio in cui gestiremo il nostro negozio Redux e il nostro stato Redux, quindi quale è il nostro

64
00:04:32,820 --> 00:04:38,070
sistema di gestione dello stato con cui voglio lavorare, di cui ovviamente abbiamo bisogno perché ne abbiamo molti schermi

65
00:04:38,070 --> 00:04:44,280
che devono funzionare su tipi di dati correlati e quindi abbiamo bisogno di gestire quei dati, i nostri prodotti e cosa c'è

66
00:04:44,280 --> 00:04:45,090
nel carrello

67
00:04:45,090 --> 00:04:48,200
e così via a livello globale e Redux è davvero

68
00:04:48,240 --> 00:04:53,520
ottimo per questo, quindi ne avremo sicuramente bisogno . Sulla stessa nota, dobbiamo anche installare alcuni pacchetti,

69
00:04:53,550 --> 00:05:00,900
quindi eseguirò npm install --save e installerò Redux e anche React Redux. Avremo anche bisogno di React -navigation

70
00:05:00,900 --> 00:05:07,480
perché ovviamente aggiungeremo di nuovo la navigazione, quindi possiamo già inserirla.

71
00:05:07,500 --> 00:05:14,540
Aggiungerò anche i pulsanti di intestazione di navigazione di React perché aggiungerò qui i pulsanti di intestazione e voglio avere

72
00:05:14,550 --> 00:05:19,380
questi pulsanti ben posizionati e posizionati senza dover fare tutto quel posizionamento di

73
00:05:19,380 --> 00:05:22,650
stile da solo e dovrebbe essere per ora.

74
00:05:22,950 --> 00:05:28,770
Quindi installerò già tutti questi pacchetti, ne avremo bisogno in tutto questo

75
00:05:28,770 --> 00:05:36,570
modulo e con questi pacchetti installati e questi file di base creati, abbiamo una solida base per iniziare.

76
00:05:36,580 --> 00:05:41,820
Ora oltre a questi pacchetti, abbiamo anche bisogno di installare altri due pacchetti con

77
00:05:41,820 --> 00:05:49,050
l'aiuto del comando expo install e questo è il gestore di gesti-reazione-nativi, quindi expo installa il gestore di gesti-nativi di

78
00:05:49,050 --> 00:05:55,800
React e anche il pacchetto rianimato di reazione-nativa . Entrambi i pacchetti devono anche essere installati

79
00:05:55,980 --> 00:05:58,800
con il comando expo install.

80
00:05:58,860 --> 00:06:02,100
Ora, ovviamente, si tratta di popolarlo con la vita e lì

81
00:06:02,190 --> 00:06:06,720
voglio iniziare con la prima schermata che vedremo effettivamente qual è la schermata di panoramica dei prodotti.