1 00:00:02,230 --> 00:00:08,830 Maintenant, en plus de configurer un nouveau projet à partir de zéro avec React Native CLI ou avec l'expo CLI, puis de 2 00:00:08,860 --> 00:00:10,820 choisir le flux de travail nu, 3 00:00:11,020 --> 00:00:19,710 vous pouvez même convertir un projet géré en un projet de flux de travail nu React Native et c'est plutôt cool parce que cela signifie que vous pouvez obtenir 4 00:00:19,900 --> 00:00:24,480 tout les fonctionnalités de commodité du flux de travail géré pendant le développement et une 5 00:00:24,490 --> 00:00:32,170 fois que vous avez terminé par exemple ou une fois que vous avez besoin d'un certain package tiers qui intègre certaines fonctionnalités que vous n'avez 6 00:00:32,230 --> 00:00:38,110 pas intégrées dans expo et dont vous avez absolument besoin, dans un tel cas, vous pouvez basculez toujours et 7 00:00:38,110 --> 00:00:43,180 vous n'avez pas à reconstruire l'application à partir de zéro et à créer un nouveau projet 8 00:00:43,180 --> 00:00:44,890 et à copier votre code. 9 00:00:45,010 --> 00:00:51,380 Comment? Eh bien dans votre projet et c'est la fonctionnalité 10 00:00:51,380 --> 00:00:57,520 native de l'appareil, le grand projet de lieux que nous construisons plus tôt dans le cours où nous pouvons ajouter 11 00:00:57,520 --> 00:01:05,230 des lieux, où nous utilisons bien sûr l'emplacement, les cartes, la caméra, SQLite, où nous utilisons tous ces éléments choses, là dans ce projet, vous 12 00:01:05,230 --> 00:01:10,390 pouvez simplement exécuter expo eject et cela transforme votre projet en un projet de workflow géré non-expo. 13 00:01:10,390 --> 00:01:13,110 Important cependant, il n'y a pas de retour en arrière, 14 00:01:13,110 --> 00:01:18,550 bien sûr, vous pouvez copier votre dossier et faire une copie de sauvegarde et l'enregistrer ou si vous utilisez git, vous 15 00:01:18,550 --> 00:01:23,860 pouvez bien sûr revenir à un commit précédent mais si vous n'avez pas enregistré votre projet, une fois que vous l'éjectez, 16 00:01:23,860 --> 00:01:25,360 vous ne pouvez pas le 17 00:01:25,360 --> 00:01:26,900 retransformer, alors soyez conscient de cela. 18 00:01:27,160 --> 00:01:32,680 Vous devriez créer un tout nouveau projet géré par expo et copier tout votre code si vous vouliez 19 00:01:32,680 --> 00:01:33,970 revenir en arrière. 20 00:01:33,970 --> 00:01:40,720 Donc, ici, si vous exécutez expo éjecter, on devrait vous demander en fait quel type de projet vous voulez 21 00:01:40,750 --> 00:01:46,180 éjecter et ici, j'ai finalement deux options. Maintenant, les options que vous voyez ici en passant peuvent différer au 22 00:01:46,210 --> 00:01:52,360 fil du temps, mais ici, les deux options que j'ai sont kit nu et expo. Le kit Expo est obsolète, c'est essentiellement ce 23 00:01:52,360 --> 00:01:58,780 que nous avions avant d'avoir le flux de travail nu, vous ne devriez donc pas vraiment passer à cela, 24 00:01:58,780 --> 00:02:02,520 vous pouvez plutôt passer à nu ici, ce qui signifie 25 00:02:02,530 --> 00:02:08,710 simplement que maintenant cela sera transformé en un projet React Native, comme s'il serait créé avec React Native 26 00:02:08,710 --> 00:02:13,010 CLI sans le wrapper expo mais il sera préconfiguré comme mentionné ici 27 00:02:13,030 --> 00:02:18,640 sur la page react-native-unimodules qui est une sorte de ce package dont expo a besoin pour 28 00:02:18,670 --> 00:02:26,200 exposer toutes ces API expo à un application non expo. Il va donc préconfigurer toutes ces choses au cours de chaque action 29 00:02:26,200 --> 00:02:29,140 afin que vous n'ayez pas à le faire, 30 00:02:29,350 --> 00:02:36,120 vous obtenez donc une application React Native plus pour ainsi dire. Donc, si je clique sur Entrée ici et maintenant 31 00:02:36,120 --> 00:02:42,310 important, vous ne pouvez pas revenir en arrière une fois cela terminé, vous pouvez choisir un nom pour l'écran 32 00:02:42,910 --> 00:02:50,490 d'accueil et je choisirai de bons endroits ici par exemple, appuyez sur Entrée, nommez maintenant mon Android Studio et Xcode projets rn-guide mais 33 00:02:50,530 --> 00:02:54,670 cela ne dépend que de vous et maintenant cela fera son travail. 34 00:02:54,880 --> 00:02:56,280 Il transforme le projet, il ajoute 35 00:02:56,290 --> 00:03:02,380 un dossier Android et comme je suis sur macOS, il ajoute également un dossier iOS. Bien sûr, sur Windows et Linux, cela ne 36 00:03:02,380 --> 00:03:06,970 fonctionnera pas car là, puisque vous devez maintenant le construire localement, il 37 00:03:06,970 --> 00:03:08,660 ne peut pas construire 38 00:03:09,640 --> 00:03:16,450 d'applications iOS et il préconfigure tout et installe quelques dépendances afin que vous puissiez utiliser votre code existant 39 00:03:16,450 --> 00:03:22,150 et tous les packages expo que vous avez déjà installés dans cette configuration nue, donc 40 00:03:22,150 --> 00:03:25,130 il ne se contente pas de configurer tous 41 00:03:25,240 --> 00:03:32,710 les trucs unimodules ici, il s'assure également que tous les packages que vous utilisez déjà, comme expo location ou expo 42 00:03:33,130 --> 00:03:37,980 SQLite, que ces packages également travail. Alors maintenant, cela peut prendre un 43 00:03:38,010 --> 00:03:46,260 certain temps, alors attendons que cela se termine et ici c'est fait et vous voyez que cela me dit en fait qu'il a généralement fait 44 00:03:46,260 --> 00:03:50,430 son travail mais qu'il y avait deux packages qui nécessitent une configuration manuelle. 45 00:03:50,430 --> 00:03:54,750 Vous pouvez simplement cliquer sur ces liens pour obtenir des instructions sur ce que vous 46 00:03:54,780 --> 00:04:00,810 devez y faire, c'est le sélecteur d'images expo et le package de cartes React Native où vous devez effectuer une installation 47 00:04:00,810 --> 00:04:01,980 manuelle pour le terminer. 48 00:04:02,820 --> 00:04:05,010 Donc, ici, sur la page du sélecteur 49 00:04:05,010 --> 00:04:11,400 d'images expo, ce que nous devons faire en fin de compte, c'est que nous devons exécuter l'installation du port dans le dossier 50 00:04:11,400 --> 00:04:11,810 iOS, 51 00:04:11,820 --> 00:04:18,660 nous devons donc faire toutes les choses après l'installation du package. Donc, dans le dossier du projet, je vais naviguer dans 52 00:04:18,660 --> 00:04:24,930 iOS et exécuter l'installation du port, le port est comme npm pour iOS, il installe certaines dépendances dont iOS a 53 00:04:25,050 --> 00:04:32,040 besoin pour fonctionner correctement, donc c'est ce qui se passe maintenant et une fois cela fait, nous allons également devez ajouter cette 54 00:04:32,040 --> 00:04:36,030 entrée ici au manifeste Android, c'est aussi quelque chose que nous devrons faire. 55 00:04:36,270 --> 00:04:42,030 Nous devons donc aller dans le dossier Android, le dossier de l'application là-bas et dans le dossier 56 00:04:42,360 --> 00:04:47,070 source, le AndroidManifest, puis comme décrit ici, ajoutez-le à l'intérieur des balises d'application. 57 00:04:47,070 --> 00:04:57,060 Voici donc l'application et là-dedans, nous devons ajouter cette entrée d'activité ici, comme ceci, c'est obligatoire. 58 00:04:57,300 --> 00:05:02,280 Maintenant que je suis déjà là, vous verrez également que ce fichier manifeste a également été configuré 59 00:05:02,280 --> 00:05:02,950 d'une certaine 60 00:05:03,090 --> 00:05:08,940 manière, il inclut toutes les autorisations et bien sûr, vous ne voulez pas le faire, vous voulez seulement demander les 61 00:05:08,940 --> 00:05:10,390 autorisations vous avez vraiment besoin. 62 00:05:10,410 --> 00:05:18,480 Donc, comme il est dit ici, supprimez toutes les autorisations dont votre application n'a pas besoin et, par exemple, mon 63 00:05:18,480 --> 00:05:24,300 application de démonstration ici ne devrait avoir besoin que de l'autorisation d'accès à la 64 00:05:27,440 --> 00:05:36,890 localisation que je déplacerai là-haut et de la caméra bien sûr que je déplacerai là-haut ainsi que l'autorisation d'écriture sur le stockage externe, qui 65 00:05:41,790 --> 00:05:43,520 devrait également être requise. 66 00:05:43,530 --> 00:05:48,900 Il doit s'agir de toutes les autorisations et vous pouvez vérifier tous les packages tiers ou tous 67 00:05:48,900 --> 00:05:54,110 les packages API expo que vous utilisez pour vous assurer que vous ne manquez aucune autorisation. 68 00:05:54,300 --> 00:06:00,840 Avec cela, je vais en fait commenter toutes ces autorisations ici et aussi toutes ces autorisations et nous allons 69 00:06:00,840 --> 00:06:09,170 le tester pour voir si cela fonctionne. Donc, avec cela, la configuration du package de sélection d'image est terminée. Désormais, les cartes React Native 70 00:06:09,190 --> 00:06:14,880 doivent également être configurées et nous pouvons y plonger dans les instructions d'installation. 71 00:06:14,880 --> 00:06:18,260 Maintenant, cette commande d'installation npm, qui s'est déjà produite, mais maintenant ce que nous devons 72 00:06:18,390 --> 00:06:24,960 faire, c'est que nous devons exécuter le lien React Native React Native maps. Donc, remontons simplement d'un niveau dans 73 00:06:25,020 --> 00:06:32,380 le dossier racine du projet et exécutons le lien React Native React Native maps et 74 00:06:32,380 --> 00:06:34,590 cela va maintenant tout 75 00:06:34,600 --> 00:06:40,870 lier, assurez-vous que tout fonctionne correctement, que tout est configuré correctement et 76 00:06:40,870 --> 00:06:49,120 que vous devrez toujours faire du manuel trucs, toutes ces choses ici ne devraient pas être obligatoires, 77 00:06:49,270 --> 00:07:00,230 cela devrait être fait avec un lien heureusement mais sur Android, vous devez vous assurer que vous ajoutez cette entrée ici, cette 78 00:07:00,230 --> 00:07:00,790 entrée 79 00:07:00,790 --> 00:07:05,520 de métadonnées dans votre clé d'application dans le AndroidManifest. 80 00:07:05,630 --> 00:07:11,990 Donc, ici à l'intérieur de l'application, nous pouvons ajouter cette entrée et là, vous devez placer votre clé API 81 00:07:11,990 --> 00:07:12,740 Google Maps. 82 00:07:12,840 --> 00:07:14,680 Maintenant, je l'ai dans le 83 00:07:14,690 --> 00:07:21,230 dossier env si vous vous en souvenez, donc je vais juste saisir cette clé et l'ajouter ici, remplacer votre clé 84 00:07:21,230 --> 00:07:23,490 API Google Maps ici avec elle et 85 00:07:23,660 --> 00:07:31,040 aussi important, si vous allez sur la page API Google Maps, vous avez besoin pour activer ce SDK de cartes pour Android pour 86 00:07:31,040 --> 00:07:31,790 votre projet, 87 00:07:31,790 --> 00:07:36,500 c'est important sinon cela ne fonctionnera pas. Pour iOS, vous n'avez rien à faire de spécial, 88 00:07:36,500 --> 00:07:41,690 sauf si vous souhaitez y utiliser Google Maps, auquel cas vous devez suivre les instructions données dans les instructions React Native 89 00:07:41,870 --> 00:07:44,920 maps ici pour savoir comment utiliser Google Maps sur iOS mais pour 90 00:07:45,800 --> 00:07:52,930 Android vous vous devez absolument activer le SDK Google Maps pour l'API Android ici. Pour activer cette API, vous pouvez accéder à la plateforme Google 91 00:07:52,940 --> 00:07:58,760 Cloud ici pour le projet sur lequel vous avez travaillé plus tôt lorsque vous configurez cette clé 92 00:07:59,000 --> 00:08:05,240 d'API, etc., puis ici, sous API et services, vous pouvez accéder à la bibliothèque qui vous amène à une 93 00:08:05,240 --> 00:08:09,710 bibliothèque de toutes les API Google et du SDK de cartes pour Android, 94 00:08:09,710 --> 00:08:11,120 vous devez l'activer. 95 00:08:11,120 --> 00:08:15,980 Vous devrez également configurer le SDK de cartes pour iOS si vous souhaitez utiliser Google Maps sur iOS que je 96 00:08:15,980 --> 00:08:17,150 n'utiliserai pas ici cependant. 97 00:08:17,350 --> 00:08:18,760 Maintenant, il devrait déjà être activé 98 00:08:18,770 --> 00:08:21,500 ici, mais assurez-vous qu'il l'est. Donc, au cas où il ne 99 00:08:21,590 --> 00:08:22,710 serait pas activé, faites-le. 100 00:08:24,370 --> 00:08:27,240 Avec cela, cela devrait également être configuré de telle sorte 101 00:08:27,250 --> 00:08:34,450 que cela fonctionne et maintenant si nous exécutons run-android react-native, l'application que nous avons construite dans un module précédent avec le flux de travail géré 102 00:08:34,450 --> 00:08:41,260 par expo devrait désormais fonctionner, maintenant sans le flux de travail géré par expo sans le client expo utilisé sur le simulateur ou 103 00:08:41,260 --> 00:08:47,770 le vrai appareil, mais au lieu de cela construire localement avec Android Studio ou bien sûr aussi avec iOS si vous voulez 104 00:08:47,770 --> 00:08:54,000 l'utiliser et donc de la même manière que vous le feriez dans un projet créé par React Native CLI mais maintenant 105 00:08:54,010 --> 00:08:55,510 après avoir été éjecté 106 00:08:55,510 --> 00:09:01,000 du flux de travail géré, ce qui signifie bien sûr que tout ce code a été écrit dans le 107 00:09:01,000 --> 00:09:07,180 flux de travail géré et pourtant je l'exécute maintenant dans le flux de travail non géré, ce qui est plutôt agréable. 108 00:09:07,180 --> 00:09:10,830 Attendons donc que cela se termine et voyons si cette application fonctionne comme il se doit. 109 00:09:11,590 --> 00:09:16,780 Cela arrive sur l'émulateur Android ici, qui est l'émulateur que je veux utiliser pour les tests parce 110 00:09:16,780 --> 00:09:23,020 que là, je peux utiliser la caméra de l'émulateur pour les tests et encore, juste pour le souligner, cela n'utilise plus 111 00:09:23,020 --> 00:09:24,400 l'application client expo, nous 112 00:09:24,400 --> 00:09:28,930 ne pourrions pas non plus '' t scannez un code-barres ici car il n'y a 113 00:09:28,940 --> 00:09:34,570 pas de code-barres à scanner, c'est maintenant vraiment une application construite avec Android Studio et poussée vers notre application. 114 00:09:34,720 --> 00:09:38,710 Alors, voici notre application et essayons maintenant d'ajouter un nouvel 115 00:09:38,710 --> 00:09:44,470 endroit ici, testez, prenez une image, autorisez l'accès à la caméra bien sûr, puis prenez 116 00:09:49,370 --> 00:09:50,630 cette image oui 117 00:09:53,960 --> 00:09:55,190 recadrez-la, choisissez un 118 00:09:56,060 --> 00:09:58,010 emplacement sur la carte peut-être, 119 00:10:00,760 --> 00:10:04,050 voici la carte à venir, cet emplacement me semble 120 00:10:04,070 --> 00:10:06,760 bon, enregistrez-le, enregistrez le lieu, nous y 121 00:10:06,760 --> 00:10:07,540 sommes 122 00:10:07,540 --> 00:10:09,940 et laissez-moi maintenant fermer cette application. 123 00:10:10,060 --> 00:10:13,210 Là, vous voyez également que c'est vraiment une application 124 00:10:13,210 --> 00:10:19,210 autonome installée, si j'ouvre le tiroir des applications ici sur l'appareil, ici sur le simulateur, c'est cette 125 00:10:19,380 --> 00:10:22,040 grande appli que vous voyez ici. 126 00:10:22,040 --> 00:10:28,920 Donc, si je lance cela, cela relance maintenant l'application dans laquelle nous venons de travailler et il y a notre place car 127 00:10:29,190 --> 00:10:30,330 elle était stockée dans 128 00:10:30,330 --> 00:10:34,540 le stockage local, l'image était évidemment stockée sur le système de fichiers sinon 129 00:10:34,710 --> 00:10:41,370 nous ne la verrions pas et cela fonctionne comme avant mais maintenant pas à l'intérieur du client expo mais en tant 130 00:10:41,370 --> 00:10:41,970 qu'application 131 00:10:41,970 --> 00:10:48,300 autonome sans enveloppe expo, utilisant toujours certaines des API expo et des packages expo à l'aide de ce package unimodules 132 00:10:48,300 --> 00:10:53,640 qui est automatiquement ajouté et configuré au flux de travail nu que nous avons d'autre part obtenu 133 00:10:53,700 --> 00:10:55,080 à l'aide de l'éjection. 134 00:10:55,080 --> 00:10:57,000 Donc, beaucoup de choses sympas se passent là-bas.