1
00:00:02,090 --> 00:00:05,970
Pour éviter que l'image ne soit finalement supprimée, nous devons

2
00:00:06,140 --> 00:00:11,180
la stocker dans un chemin plus permanent sur notre système de fichiers de périphérique local.

3
00:00:11,180 --> 00:00:15,350
Bien sûr, nous pouvons également le télécharger sur un serveur, mais nous avons déjà parlé du service et ainsi

4
00:00:15,410 --> 00:00:21,970
de suite, ici, je veux me concentrer sur toutes les capacités des appareils natifs. Maintenant, pour travailler avec notre système de fichiers

5
00:00:22,100 --> 00:00:23,660
natif, expo nous

6
00:00:23,690 --> 00:00:26,180
a couverts, nous pouvons utiliser le

7
00:00:26,270 --> 00:00:32,900
package de système de fichiers ici pour le faire. Vous l'installez comme vous installez les autres packages natifs,

8
00:00:32,900 --> 00:00:34,320
avec expo install

9
00:00:34,320 --> 00:00:41,470
expo-file-system, alors faisons-le ici, expo install, encore une fois un wrapper autour de npm install que vous pouvez également

10
00:00:41,510 --> 00:00:48,950
utiliser, vous avez juste besoin de vous assurer que vous utilisons la bonne version pour la version du SDK de

11
00:00:48,950 --> 00:00:52,980
votre expo que vous utilisez et avec cela, nous l'avons installée,

12
00:00:53,010 --> 00:00:56,000
maintenant nous pouvons déplacer l'image après l'avoir prise.

13
00:00:56,010 --> 00:00:59,080
Maintenant, il existe différents endroits dans l'application où nous

14
00:00:59,160 --> 00:01:04,080
pourrions le faire, nous pourrions le faire dans le sélecteur d'image juste après avoir pris l'image, mais

15
00:01:04,080 --> 00:01:09,720
à ce stade, nous ne savons pas encore si nous allons réellement soumettre le formulaire, si nous gardons cette image.

16
00:01:09,720 --> 00:01:15,330
Et si nous prenions juste une image ici, mais ensuite nous la rejetons et nous retournons?

17
00:01:15,330 --> 00:01:20,460
Je ne veux pas que l'image soit déplacée à un endroit permanent dans ce cas, elle devrait certainement être nettoyée et

18
00:01:20,460 --> 00:01:24,300
c'est le comportement par défaut, donc je ne veux pas encore la déplacer à ce

19
00:01:24,300 --> 00:01:25,390
stade, mais je veux

20
00:01:25,740 --> 00:01:28,330
la déplacer une fois que nous avons soumis le formulaire.

21
00:01:28,560 --> 00:01:32,610
Par conséquent, nous pourrions le faire ici dans le nouvel écran de lieu, dans le gestionnaire de

22
00:01:32,610 --> 00:01:38,280
lieu de sauvegarde, mais ensuite nous ajouterions toute cette logique de système de fichiers à ce composant, ce qui est possible mais qui

23
00:01:38,280 --> 00:01:41,190
ajoute beaucoup de logique à ce composant que je ne veux pas

24
00:01:41,190 --> 00:01:43,930
vraiment avoir là, je veux garder ce composant relativement maigre.

25
00:01:44,280 --> 00:01:47,640
Cependant, le créateur d'action est un excellent endroit pour cela.

26
00:01:47,730 --> 00:01:53,220
Nous l'avons déjà utilisé dans le passé pour avoir des effets secondaires, comme l'envoi de requêtes HTTP.

27
00:01:53,220 --> 00:01:58,680
Maintenant, déplacer un fichier est essentiellement la même catégorie de choses que nous faisons, au lieu d'envoyer une demande à un serveur,

28
00:01:58,680 --> 00:01:59,180
nous

29
00:01:59,190 --> 00:02:00,200
déplaçons un fichier, eh

30
00:02:00,200 --> 00:02:01,620
bien ce n'est pas si différent.

31
00:02:03,390 --> 00:02:12,210
Donc donc dans ce dossier ici, dans les lieux-action. fichier js, je vais tout importer en tant que système de fichiers

32
00:02:12,210 --> 00:02:19,500
à partir du système de fichiers expo, donc à partir de ce nouveau paquet que nous avons installé et ici

33
00:02:19,500 --> 00:02:26,970
en plus, j'utiliserai maintenant cette syntaxe alternative de répartition ou d'avoir un créateur d'action qui utilise Redux Thunk, où nous

34
00:02:26,970 --> 00:02:34,230
renvoie ici une fonction interne qui reçoit la fonction de répartition comme argument afin que dans cette fonction interne,

35
00:02:34,230 --> 00:02:44,970
nous puissions distribuer cette action en appelant répartition ici et en passant notre objet d'action et j'ajouterai async ici afin que nous puissions utiliser async attendre parce que nous

36
00:02:44,970 --> 00:02:50,670
' va faire un travail asynchrone ici. Ici, je veux maintenant déplacer

37
00:02:50,670 --> 00:02:53,030
le fichier, non?

38
00:02:53,220 --> 00:02:58,980
Donc, pour cela, je veux utiliser ce package de système de fichiers. Le déplacement du fichier implique en fait deux

39
00:02:58,980 --> 00:03:00,060
ou trois choses.

40
00:03:00,060 --> 00:03:05,160
Tout d'abord, nous devons dériver le nouveau chemin du fichier et cela

41
00:03:05,160 --> 00:03:12,270
devrait bien sûr être un répertoire plus permanent. Pour cela, nous pouvons utiliser le système de fichiers et là, vous avez quelques répertoires auxquels vous pouvez accéder.

42
00:03:12,270 --> 00:03:16,980
Vous avez le répertoire de cache qui est en fait le répertoire dans lequel le

43
00:03:16,980 --> 00:03:25,200
fichier est déjà stocké, le répertoire de l'ensemble qui n'est pas vraiment un bon répertoire pour stocker les fichiers que votre application utilise non plus, mais

44
00:03:25,200 --> 00:03:28,080
vous avez également obtenu le répertoire de document,

45
00:03:28,080 --> 00:03:34,140
c'est le répertoire principal pour tous les fichiers dont votre application a besoin et qui sont garantis pour survivre.

46
00:03:34,140 --> 00:03:38,000
Maintenant, lorsque vous désinstallez votre application, ce dossier sera également effacé,

47
00:03:38,010 --> 00:03:45,540
donc ces fichiers sont perdus mais jusque-là, ils persisteront pendant les redémarrages de l'application, pendant de longues pauses où les gens n'ont

48
00:03:45,540 --> 00:03:47,070
pas utilisé votre

49
00:03:47,400 --> 00:03:49,470
application, donc ici les fichiers survivront.

50
00:03:50,220 --> 00:03:55,620
Le répertoire de documents du système de fichiers est donc le chemin vers lequel je veux déplacer mon fichier et

51
00:03:55,620 --> 00:04:01,570
maintenant il y a une chose importante à savoir, votre chemin doit également inclure le nom de fichier que vous souhaitez utiliser à l'avenir.

52
00:04:01,710 --> 00:04:07,410
Bien sûr, vous obtenez également un nom de fichier temporaire lorsque vous prenez l'image, mais lorsque vous déplacez un fichier, ce nom n'est en

53
00:04:07,410 --> 00:04:14,570
fait pas conservé, il prendra ce chemin ici comme un nom pour ainsi dire. Par conséquent, cela ne doit pas seulement être un pointeur sur

54
00:04:14,570 --> 00:04:18,050
le dossier dans lequel vous souhaitez déplacer le fichier, il

55
00:04:18,150 --> 00:04:20,990
doit également inclure le nom du fichier.

56
00:04:21,060 --> 00:04:24,530
Maintenant, pour cela, je suis heureux de garder le nom de

57
00:04:24,540 --> 00:04:31,220
l'image générée automatiquement, bien sûr, vous pouvez également générer vos propres noms d'image uniques ici, mais pour cela, je vais dériver le nom

58
00:04:31,290 --> 00:04:33,560
du fichier de l'image que j'ai obtenue

59
00:04:33,570 --> 00:04:38,120
ici, gardez à l'esprit cette image ici est un chemin, le chemin temporaire vers l'image.

60
00:04:38,160 --> 00:04:44,880
Donc ici, je vais réellement utiliser l'image qui est une chaîne et appeler split sur cela pour le diviser par des

61
00:04:44,880 --> 00:04:52,440
barres obliques parce que ce chemin implique bien sûr quelques barres obliques à la fin et que split convertit cette chaîne en un tableau de

62
00:04:52,440 --> 00:04:58,620
segments de chaîne où chaque segment est un segment avant et après une telle barre oblique dans la chaîne et

63
00:04:59,040 --> 00:05:00,420
là en appelant

64
00:05:00,420 --> 00:05:01,850
pop, j'obtiens le dernier segment.

65
00:05:01,860 --> 00:05:09,090
Donc, ce que fait ce code ici, c'est qu'il jette un œil à notre chemin d'image, le divise par des barres obliques qui composent notre

66
00:05:09,300 --> 00:05:13,140
chemin complet là-bas et en faisant apparaître le dernier élément, eh bien quel

67
00:05:13,140 --> 00:05:15,830
est le dernier élément? C'est notre nom

68
00:05:15,870 --> 00:05:26,060
de fichier, à droite, donc si vous avez un chemin comme somefolder / myimage. jpg, alors ce que nous faisons avec split, c'est que nous

69
00:05:26,060 --> 00:05:34,880
obtenons un tableau avec un dossier et avec myimage. jpg et en appelant pop à ce sujet, nous obtenons

70
00:05:35,180 --> 00:05:36,920
myimage. jpg, c'est

71
00:05:36,950 --> 00:05:39,250
donc ce que nous obtenons ici.

72
00:05:40,590 --> 00:05:42,630
Donc, cela nous renverra notre nom

73
00:05:42,630 --> 00:05:49,300
de fichier, cet extrait de code ici et maintenant nous pouvons l'ajouter ici à notre chemin en l'ajoutant simplement comme ceci.

74
00:05:49,320 --> 00:05:53,730
Alors maintenant, cela génère un chemin d'accès qui comprend à la fois un dossier et ensuite le nom du fichier.

75
00:05:53,730 --> 00:06:00,900
C'est là que je veux déplacer ce fichier et maintenant nous pouvons le déplacer en accédant à FileSystem. moveAsync.

76
00:06:00,990 --> 00:06:04,130
C'est une méthode qui déplace un fichier de a vers b et elle

77
00:06:04,260 --> 00:06:09,540
utilise également une promesse car le déplacement de ce fichier peut prendre un peu plus de temps et donc il nous dira

78
00:06:09,540 --> 00:06:10,730
quand il sera terminé.

79
00:06:11,750 --> 00:06:18,100
Maintenant, déplacer asynchrone prend un objet avec deux informations - de et vers lesquelles est assez simple

80
00:06:18,140 --> 00:06:19,010
je suppose.

81
00:06:19,010 --> 00:06:25,070
Donc, from est image parce que image est le chemin d'accès au répertoire temporaire, c'est donc la chose from, c'est là que le

82
00:06:25,070 --> 00:06:32,290
fichier se trouve actuellement et, bien sûr, est notre nouveau chemin, comme celui-ci. Maintenant, comme je l'ai dit, cela renvoie une

83
00:06:32,290 --> 00:06:32,770
promesse

84
00:06:32,800 --> 00:06:36,420
afin que nous puissions attendre cela et c'est tout.

85
00:06:36,430 --> 00:06:41,200
Maintenant, nous devons envelopper cela dans un bloc try catch car cela pourrait échouer car, par

86
00:06:41,200 --> 00:06:48,090
exemple, il n'y a pas assez d'espace sur le périphérique ou d'une manière ou d'une autre, nous avons une erreur d'autorisations ou tout autre problème.

87
00:06:48,160 --> 00:06:55,690
Donc, nous devons absolument essayer d'attraper nos actions sur le système de fichiers car les opérations sur le système de fichiers peuvent toujours échouer et là,

88
00:06:55,690 --> 00:06:56,400
nous pourrions

89
00:06:56,620 --> 00:06:59,520
alors vouloir faire quelque chose, ici, je journalise l'erreur

90
00:06:59,530 --> 00:07:04,680
et je la rejette, mais bien sûr, vous pouvez faire d'autres choses là-bas comme Eh bien, vous pouvez

91
00:07:04,690 --> 00:07:09,310
en quelque sorte les stocker sur votre propre serveur d'analyse, quoi que vous ayez à faire.

92
00:07:09,610 --> 00:07:15,100
Maintenant, vous voudrez peut-être finalement gérer cela dans un composant pour y afficher une alerte, je ne

93
00:07:15,100 --> 00:07:20,650
le ferai pas, mais vous le feriez de la même manière que par exemple pour les erreurs

94
00:07:20,650 --> 00:07:22,160
HTTP, ce que j'ai

95
00:07:22,200 --> 00:07:24,040
examiné dans le module HTTP.

96
00:07:24,040 --> 00:07:28,980
Donc ici, nous supposons que cela fonctionnera principalement ou que cela fonctionnera toujours et nous

97
00:07:29,050 --> 00:07:31,350
déplaçons le fichier. Maintenant, une fois

98
00:07:31,420 --> 00:07:34,870
qu'il a été déplacé, nous savons qu'il sera dans le

99
00:07:34,900 --> 00:07:41,140
nouveau chemin, donc bien sûr c'est le nouveau chemin que je veux maintenant stocker ici dans mes données

100
00:07:41,140 --> 00:07:46,320
de lieu ou dans mon magasin Redux. C'est très bien, cela devrait stocker

101
00:07:46,330 --> 00:07:50,040
notre image dans un répertoire permanent mais ce que nous

102
00:07:50,140 --> 00:07:56,110
ne faisons pas, c'est que nous ne stockons pas nos données elles-mêmes dans un endroit permanent.

103
00:07:56,110 --> 00:08:01,510
Nous utilisons bien sûr Redux ici et cela signifie qu'il est stocké en mémoire mais chaque fois que nous fermons et redémarrons

104
00:08:01,510 --> 00:08:08,010
notre application, toutes nos données seront perdues car elles ne sont pas stockées sur l'appareil ou sur un serveur ou dans une base de données, elles

105
00:08:08,010 --> 00:08:12,730
sont juste en mémoire qui est actif aussi longtemps que notre application fonctionne et qui est ensuite effacée.

106
00:08:12,730 --> 00:08:19,630
Donc, dans une prochaine étape, je veux vous montrer comment utiliser SQLite qui est une base de données sur l'appareil, à la fois disponible sur

107
00:08:19,630 --> 00:08:25,360
iOS et Android, pour stocker plus que des fichiers mais également pour stocker nos données, comme le titre et le

108
00:08:25,360 --> 00:08:26,800
chemin de l'image et bientôt.