1
00:00:02,530 --> 00:00:07,990
Maintenant, nous avons testé l'application sur un véritable appareil qui est bien sûr assez agréable et aussi incroyable de le voir fonctionner là-bas,

2
00:00:07,990 --> 00:00:10,520
mais pour le développement, j'utiliserai en fait un simulateur qui

3
00:00:16,270 --> 00:00:20,310
est un appareil virtuel fonctionnant sur ma machine, simplement pour que je ne le fasse pas devoir

4
00:00:20,460 --> 00:00:23,660
constamment tester l'application sur mon appareil réel, j'aime l'avoir ici, cela facilite également l'enregistrement.

5
00:00:23,680 --> 00:00:29,680
Vous souhaitez probablement tester l'application sur un simulateur à un moment donné, par exemple parce que vous ne possédez probablement que

6
00:00:29,680 --> 00:00:35,530
Android ou un appareil iOS et que vous souhaitez également tester et voir votre application sur l'autre plate-forme respective ou

7
00:00:35,530 --> 00:00:41,410
si vous avez les deux appareils, vous avoir un iPhone, vous avez un téléphone Android mais vous voulez également tester

8
00:00:41,410 --> 00:00:47,530
votre application sur un iPhone plus ancien, sur un appareil Android plus petit et avec des simulateurs et émulateurs, vous pouvez lancer

9
00:00:47,680 --> 00:00:52,860
différents types d'appareils et tester votre application là-bas. Pour commencer, allez dans la section des guides en bas et cliquez

10
00:00:52,870 --> 00:00:55,030
sur Up and Running, peu importe où vous cliquez, au

11
00:00:55,030 --> 00:00:59,710
final, il vous suffit d'accéder aux documents. expo. io et là

12
00:00:59,740 --> 00:01:03,460
dans le workflow géré, vous pouvez cliquer sur

13
00:01:03,520 --> 00:01:09,910
le simulateur iOS ou l'émulateur Android Studio et là, vous avez appris à installer Android

14
00:01:10,000 --> 00:01:16,690
Studio puis à lancer un appareil virtuel ou à installer Xcode qui est l'environnement de développement

15
00:01:16,900 --> 00:01:23,620
d'Apple et à lancer un simulateur iOS. Important, un simulateur iOS ne peut être lancé que sur des

16
00:01:23,710 --> 00:01:30,020
appareils MacOS car Xcode, un outil dont vous avez absolument besoin pour cela n'est pas disponible sur Windows ou Linux, donc

17
00:01:30,040 --> 00:01:37,180
vous ne pouvez pas exécuter un simulateur iOS sur Windows ou Linux, vous pouvez exécuter un Android L'émulateur Studio là-bas cependant, sur MacOS, vous

18
00:01:37,180 --> 00:01:38,510
pouvez exécuter les deux.

19
00:01:38,530 --> 00:01:41,710
Alors installons maintenant ces choses et commençons par l'émulateur Android

20
00:01:41,770 --> 00:01:47,650
Studio, pour cela, vous devez d'abord installer Android Studio. Pour cela, vous pouvez bien sûr simplement google pour Android

21
00:01:47,650 --> 00:01:53,080
Studio et vous devriez trouver développeur. Android. com / studio, il

22
00:01:53,080 --> 00:02:00,550
vous suffit de cliquer ici et là, choisissez de télécharger Android Studio et acceptez ces conditions ici.

23
00:02:00,550 --> 00:02:05,090
Maintenant, cela ouvrira cette fenêtre de téléchargement et téléchargera maintenant Android Studio qui est assez grand et

24
00:02:05,090 --> 00:02:07,280
donc ce téléchargement peut prendre un certain temps.

25
00:02:07,360 --> 00:02:09,810
Maintenant, je serai de retour une

26
00:02:09,920 --> 00:02:16,250
fois ce téléchargement terminé pour continuer la configuration. Donc, le téléchargement est terminé pour moi et avec

27
00:02:16,280 --> 00:02:22,490
ça, je l'ouvre, maintenant je suis sur Mac ici mais aussi Windows, vous double-cliquez simplement sur ce fichier téléchargé pour

28
00:02:22,490 --> 00:02:27,750
démarrer le programme d'installation et le programme d'installation s'ouvrira et vous guidera à travers quelques étapes.

29
00:02:27,810 --> 00:02:33,590
Maintenant, dans ce programme d'installation, vous pouvez simplement laisser tous les paramètres par défaut. Maintenant, avec Android Studio installé et l'installation terminée,

30
00:02:33,590 --> 00:02:36,080
nous allons lancer dans une seconde.

31
00:02:36,080 --> 00:02:41,960
Maintenant, avant de lancer avec vous et de parcourir cette première étape, assurez-vous que

32
00:02:41,960 --> 00:02:45,860
ces paramètres sont correctement configurés sur MacOS et Linux.

33
00:02:46,010 --> 00:02:47,780
Donc, sous Windows, vous devriez

34
00:02:47,840 --> 00:02:52,580
avoir besoin de le faire, mais sous MacOS et Linux, assurez-vous de suivre ces deux étapes

35
00:02:52,640 --> 00:03:00,170
que vous trouverez dans les documents officiels afin que tout fonctionne correctement. Maintenant, avec cela, lançons Android Studio, une fois que vous l'avez démarré, vous

36
00:03:00,170 --> 00:03:02,640
devriez voir un écran qui ressemble à ceci.

37
00:03:02,750 --> 00:03:07,580
Là, vous pouvez cliquer sur configurer puis choisir le gestionnaire du SDK.

38
00:03:07,610 --> 00:03:15,310
Maintenant, ici, dans le gestionnaire de SDK, assurez-vous que l'un des derniers SDK est installé.

39
00:03:15,350 --> 00:03:20,180
Maintenant, généralement, vous avez le SDK le plus haut qui est toujours en version bêta,

40
00:03:20,480 --> 00:03:26,150
donc dans mon cas, c'est le niveau d'API Android 29q qui n'a pas encore de nom officiel et la

41
00:03:26,390 --> 00:03:30,050
dernière version stable, dans mon cas pi, est celle que vous devez

42
00:03:30,050 --> 00:03:33,170
installer, généralement le deuxième élément ici dans cette liste.

43
00:03:33,170 --> 00:03:37,190
Donc, la première version qui a un vrai nom pour ainsi

44
00:03:37,190 --> 00:03:40,920
dire, dans ce cas pi, assurez-vous qu'elle est installée simplement en

45
00:03:41,000 --> 00:03:46,460
la vérifiant ici et une fois que vous l'avez vérifiée, vous pouvez cliquer sur appliquer

46
00:03:46,460 --> 00:03:53,830
là-bas et cela sera automatiquement téléchargé et installé il. En plus d'avoir un SDK installé, assurez-vous que dans les

47
00:03:53,830 --> 00:03:54,640
outils SDK,

48
00:03:54,640 --> 00:04:01,120
vous avez installé l'émulateur Android ici, alors cliquez simplement dessus ici, ajoutez une coche ici et les outils de

49
00:04:01,120 --> 00:04:11,890
la plateforme SDK et les outils SDK, que tous ces trois sont vérifiés ici . Consultez également l'accélérateur d'émulateur Intl 86 ici et les services Google Play.

50
00:04:13,110 --> 00:04:16,100
Une fois toutes les cases cochées, cliquez sur

51
00:04:16,100 --> 00:04:21,300
Appliquer et maintenant, cela vous invitera, puis lancez le téléchargement de tous ces éléments et installez-les

52
00:04:21,300 --> 00:04:27,600
dans votre configuration Android ici et vous avez besoin de toutes ces choses installées pour développer des applications Android.

53
00:04:27,600 --> 00:04:34,620
Attendons donc que ce téléchargement et cette installation se terminent ici et que cela soit terminé, vous avez terminé ici, vous

54
00:04:34,630 --> 00:04:40,300
pouvez fermer cela et l'étape suivante, toujours dans cette fenêtre Android Studio ici, consiste à cliquer

55
00:04:40,570 --> 00:04:42,410
sur configurer le gestionnaire AVD.

56
00:04:42,490 --> 00:04:46,750
Il s'agit du gestionnaire qui vous permet de créer et de lancer des appareils virtuels.

57
00:04:46,750 --> 00:04:49,120
Vous voyez, j'ai déjà quelques appareils, vous n'en

58
00:04:49,120 --> 00:04:53,830
avez peut-être aucun, vous pouvez toujours en créer un nouveau dans le coin inférieur gauche en cliquant

59
00:04:53,830 --> 00:05:00,070
sur créer un appareil virtuel, puis choisissez un téléphone ici et vous pouvez choisir n'importe quelle image que vous souhaitez créer ici différents

60
00:05:00,070 --> 00:05:01,340
appareils de différentes tailles.

61
00:05:01,360 --> 00:05:06,310
Je recommanderais d'aller avec celui sur lequel le Play Store est installé, qui peut aider à tester certaines fonctionnalités

62
00:05:06,310 --> 00:05:08,430
dont nous pourrions avoir besoin plus tard, mais

63
00:05:08,440 --> 00:05:11,830
en général, vous pouvez choisir n'importe quelle image ici que vous voulez, j'irai

64
00:05:11,860 --> 00:05:15,350
avec le pixel 2 ici. Cliquez sur Suivant, puis choisissez

65
00:05:15,490 --> 00:05:17,150
une version Android que

66
00:05:17,170 --> 00:05:20,230
vous souhaitez utiliser sur cet appareil et là, j'utiliserai la

67
00:05:20,230 --> 00:05:22,500
dernière version stable, donc pas la version

68
00:05:22,510 --> 00:05:28,110
bêta, pas le Q dans mon cas mais la dernière version stable, vous devrez peut-être la télécharger

69
00:05:28,120 --> 00:05:32,350
d'abord, cette image, elle est indépendante des SDK que vous avez installés il

70
00:05:32,350 --> 00:05:38,730
y a une seconde, ce sont des images de périphérique. Assurez-vous donc de télécharger la dernière version stable et de la sélectionner par

71
00:05:39,040 --> 00:05:40,420
la suite, cliquez sur suivant.

72
00:05:40,420 --> 00:05:42,600
Vous pouvez laisser les paramètres par

73
00:05:42,610 --> 00:05:46,680
défaut ici, vous pouvez plonger dans les paramètres avancés si vous savez vraiment

74
00:05:46,700 --> 00:05:51,520
ce que vous faites mais sinon, vous pouvez laisser les valeurs par défaut et cliquer

75
00:05:51,610 --> 00:05:57,250
sur Terminer et cela créera maintenant un nouvel émulateur, dans mon cas celui-ci ici et vous pouvez lancer

76
00:05:57,250 --> 00:06:04,200
l'émulateur en cliquant sur ce bouton de lecture vert ici et cela démarrera maintenant cet émulateur qui démarre maintenant ici et une fois

77
00:06:04,200 --> 00:06:09,180
qu'il est démarré, vous pouvez exécuter votre application expo, votre application React Native, sur cet émulateur.

78
00:06:09,180 --> 00:06:10,530
Attendons donc que cela se

79
00:06:10,530 --> 00:06:17,420
termine et laissez-moi vous montrer comment lancer votre application expo sur cet émulateur. L'émulateur a donc terminé le démarrage et vous pouvez

80
00:06:18,890 --> 00:06:25,640
maintenant lancer votre application sur cet émulateur simplement en allant dans votre projet où vous pourriez avoir votre processus

81
00:06:25,640 --> 00:06:28,190
en cours d'exécution, si vous le

82
00:06:28,220 --> 00:06:33,020
quittez, vous pouvez simplement redémarrer npm start dans votre projet d'expo React Native.

83
00:06:33,020 --> 00:06:39,930
C'est donc ce que je fais ici et il démarre à nouveau les outils de développement expo dans le navigateur ici et maintenant ici où

84
00:06:39,930 --> 00:06:46,530
nous avons précédemment scanné ce code QR, vous pouvez appuyer sur Exécuter sur un appareil ou un émulateur Android et si vous avez

85
00:06:46,530 --> 00:06:51,870
un émulateur opérationnel, il exécutera automatiquement votre application là-bas ou dans votre terminal ici où vous avez ce processus

86
00:06:51,870 --> 00:06:54,120
de démarrage de npm en cours d'exécution,

87
00:06:54,120 --> 00:06:57,720
vous pouvez appuyer sur a pour lancer également votre application sur l'émulateur.

88
00:06:57,750 --> 00:06:58,950
C'est ce que

89
00:06:59,100 --> 00:07:02,850
je viens de faire, cela va maintenant installer le client expo sur l'émulateur

90
00:07:02,880 --> 00:07:07,750
automatiquement, donc vous n'avez pas besoin d'installer ou d'installer manuellement le client expo là-bas, c'est fait pour

91
00:07:07,830 --> 00:07:12,540
vous et une fois cela fait, il construit votre application et l'exécute sur cet appareil Android.

92
00:07:12,570 --> 00:07:15,060
Attendons donc que cela se

93
00:07:15,060 --> 00:07:21,610
termine, le voici, le démarrage démarre et oui, cliquez ici, vous êtes invité à autoriser l'affichage

94
00:07:21,610 --> 00:07:29,800
de cette application la première fois que vous la lancez. Activez ceci ici, puis revenez en arrière, allez dans le tiroir de l'application ici

95
00:07:29,800 --> 00:07:36,460
ou dans le gestionnaire de tâches et revenez dans votre application ici et maintenant voici le lancement de votre application expo, c'est à nouveau

96
00:07:36,460 --> 00:07:42,490
la construction de ce bundle Javascript en bas et une fois cela fait, il lancera votre application expo ici et seule la

97
00:07:42,490 --> 00:07:48,240
première génération prend assez de temps, les reconstructions suivantes et les rechargements à chaud comme vous l'avez vu sont assez rapides.

98
00:07:48,520 --> 00:07:55,960
Attendons donc la fin de cette version et maintenant elle se termine ici et ici, nous voyons notre application. Soit dit en passant, c'est bien, nous l'avons

99
00:07:55,960 --> 00:07:57,130
vu sur

100
00:07:57,130 --> 00:08:00,700
l'iPhone avant, du moins ici dans les vidéos.

101
00:08:00,700 --> 00:08:05,440
Maintenant, il fonctionne sur Android et le bouton est l'un des très rares composants que React

102
00:08:05,470 --> 00:08:08,410
Native offre qui ajuste automatiquement son apparence à la plate-forme,

103
00:08:08,410 --> 00:08:09,940
donc c'est plutôt agréable

104
00:08:09,940 --> 00:08:15,820
et nous avons les mêmes fonctionnalités qu'auparavant et cela nous permet de tester cela, non uniquement sur le vrai appareil

105
00:08:15,850 --> 00:08:17,560
mais aussi dans un simulateur et

106
00:08:17,590 --> 00:08:23,020
là vous pouvez simuler n'importe quel appareil Android que vous voulez, ce qui est bien sûr assez utile.

107
00:08:23,020 --> 00:08:25,500
C'est donc l'application qui s'exécute sur un simulateur

108
00:08:25,510 --> 00:08:31,540
Android et tout au long de ce cours, je montrerai toujours comment cela fonctionne et fonctionne sur un émulateur Android.

109
00:08:31,540 --> 00:08:34,390
Plongeons maintenant dans l'exécution de ceci sur iOS.