1 00:00:02,530 --> 00:00:07,990 Jetzt haben wir die Anwendung auf einem realen Gerät getestet, was natürlich sehr schön und auch erstaunlich ist, wenn es dort ausgeführt wird, aber für die Entwicklung 2 00:00:07,990 --> 00:00:10,520 werde ich tatsächlich einen Simulator verwenden, bei dem es sich um ein 3 00:00:16,270 --> 00:00:20,310 virtuelles Gerät handelt, das auf meinem Computer ausgeführt wird, einfach damit ich es nicht tue Ich muss die App ständig 4 00:00:20,460 --> 00:00:23,660 auf meinem realen Gerät testen. Ich mag es hier zu haben. Das erleichtert auch die Aufnahme. 5 00:00:23,680 --> 00:00:29,680 Sie möchten die App wahrscheinlich auch irgendwann auf einem Simulator testen, zum Beispiel, weil Sie wahrscheinlich nur 6 00:00:29,680 --> 00:00:35,530 Android- oder iOS-Geräte besitzen und Ihre App auch auf der jeweiligen anderen Plattform testen und sehen 7 00:00:35,530 --> 00:00:41,410 möchten oder wenn Sie beide Geräte haben Sie haben ein iPhone, ein Android-Telefon, möchten Ihre App aber 8 00:00:41,410 --> 00:00:47,530 auch auf einem älteren iPhone oder einem kleineren Android-Gerät testen. Mit Simulatoren und Emulatoren können Sie verschiedene Gerätetypen 9 00:00:47,680 --> 00:00:52,860 starten und Ihre App dort testen. Um damit zu beginnen, gehen Sie zum Abschnitt "Anleitungen" dort unten und klicken 10 00:00:52,870 --> 00:00:55,030 Sie auf "In Betrieb", egal wo Sie klicken. Am Ende 11 00:00:55,030 --> 00:00:59,710 müssen Sie nur zu den Dokumenten gelangen. Messe. io und 12 00:00:59,740 --> 00:01:03,460 dort können Sie im verwalteten Workflow auf 13 00:01:03,520 --> 00:01:09,910 iOS-Simulator oder Android Studio-Emulator klicken. Dort haben Sie gelernt, wie Sie Android 14 00:01:10,000 --> 00:01:16,690 Studio installieren und dann ein virtuelles Gerät starten oder Xcode installieren, die Apples 15 00:01:16,900 --> 00:01:23,620 Entwicklungsumgebung, und einen iOS-Simulator starten. Wichtig ist, dass ein iOS-Simulator nur auf MacOS-Geräten 16 00:01:23,710 --> 00:01:30,020 gestartet werden kann, da Xcode, ein Tool, das Sie unbedingt benötigen, unter Windows oder Linux nicht verfügbar 17 00:01:30,040 --> 00:01:37,180 ist. Sie können also keinen iOS-Simulator unter Windows oder Linux ausführen, sondern Android Studio Emulator dort, unter MacOS können 18 00:01:37,180 --> 00:01:38,510 Sie beide ausführen. 19 00:01:38,530 --> 00:01:41,710 Lassen Sie uns nun diese Dinge installieren und mit dem Android 20 00:01:41,770 --> 00:01:47,650 Studio-Emulator beginnen. Dazu müssen Sie zunächst Android Studio installieren. Dafür können Sie natürlich einfach für Android Studio googeln 21 00:01:47,650 --> 00:01:53,080 und sollten Entwickler finden. Android. com / studio, klicken 22 00:01:53,080 --> 00:02:00,550 Sie einfach dort und dann dort, wählen Sie Download Android Studio und stimmen Sie diesen Bedingungen hier zu. 23 00:02:00,550 --> 00:02:05,090 Dies öffnet nun das Download-Fenster und lädt jetzt Android Studio herunter, das ziemlich groß ist. 24 00:02:05,090 --> 00:02:07,280 Daher kann dieser Download eine Weile dauern. 25 00:02:07,360 --> 00:02:09,810 Jetzt bin ich zurück, sobald dieser 26 00:02:09,920 --> 00:02:16,250 Download abgeschlossen ist, um mit dem Setup fortzufahren. Der Download ist für mich beendet und damit öffne ich 27 00:02:16,280 --> 00:02:22,490 ihn. Jetzt bin ich hier auf dem Mac, aber auch auf Windows. Sie doppelklicken einfach auf diese heruntergeladene Datei, um 28 00:02:22,490 --> 00:02:27,750 das Installationsprogramm zu starten. Das Installationsprogramm wird geöffnet und führt Sie durch die Datei ein paar Schritte. 29 00:02:27,810 --> 00:02:33,590 In diesem Installationsprogramm können Sie einfach alle Standardeinstellungen beibehalten. Nachdem Android Studio installiert und die Installation abgeschlossen ist, 30 00:02:33,590 --> 00:02:36,080 werden wir in einer Sekunde starten. 31 00:02:36,080 --> 00:02:41,960 Bevor ich mit Ihnen zusammen starte und wir diesen ersten Schritt ausführen, stellen Sie sicher, dass 32 00:02:41,960 --> 00:02:45,860 Sie diese Einstellungen unter MacOS und Linux richtig konfiguriert haben. 33 00:02:46,010 --> 00:02:47,780 Unter Windows sollten Sie 34 00:02:47,840 --> 00:02:52,580 dies tun müssen. Unter MacOS und Linux müssen Sie jedoch die beiden Schritte ausführen, 35 00:02:52,640 --> 00:03:00,170 die Sie in den offiziellen Dokumenten finden, damit alles ordnungsgemäß funktioniert. Lassen Sie uns nun Android Studio starten. Sobald Sie es starten, sollten Sie 36 00:03:00,170 --> 00:03:02,640 einen Bildschirm sehen, der ungefähr so aussieht. 37 00:03:02,750 --> 00:03:07,580 Dort können Sie auf Konfigurieren klicken und dann den SDK-Manager auswählen. 38 00:03:07,610 --> 00:03:15,310 Stellen Sie jetzt hier im SDK-Manager sicher, dass Sie eines der neuesten SDKs installiert haben. 39 00:03:15,350 --> 00:03:20,180 Normalerweise haben Sie das oberste SDK, das sich noch in der Beta-Phase befindet. In meinem 40 00:03:20,480 --> 00:03:26,150 Fall ist dies also die Android-API-Version 29q, die noch keinen offiziellen Namen hat, und die neueste stabile 41 00:03:26,390 --> 00:03:30,050 Version, in meinem Fall pi, ist diejenige, die Sie normalerweise installieren 42 00:03:30,050 --> 00:03:33,170 sollten der zweite Punkt hier in dieser Liste. 43 00:03:33,170 --> 00:03:37,190 Die erste Version, die sozusagen einen richtigen Namen hat, in diesem 44 00:03:37,190 --> 00:03:40,920 Fall pi, stellen Sie sicher, dass diese installiert ist, indem 45 00:03:41,000 --> 00:03:46,460 Sie sie hier überprüfen. Sobald Sie sie überprüft haben, können Sie dort unten auf Übernehmen 46 00:03:46,460 --> 00:03:53,830 klicken. Diese wird automatisch heruntergeladen und installiert es. Stellen Sie neben der Installation eines SDK sicher, dass 47 00:03:53,830 --> 00:03:54,640 in 48 00:03:54,640 --> 00:04:01,120 den SDK-Tools der Android-Emulator hier installiert ist. Klicken Sie hier einfach darauf, setzen Sie hier ein 49 00:04:01,120 --> 00:04:11,890 Häkchen und die SDK-Plattform-Tools und die SDK-Tools, damit alle drei hier aktiviert sind . Überprüfen Sie hier auch den Intl 86 Emulator Accelerator und die Google Play Services. 50 00:04:13,110 --> 00:04:16,100 Wenn Sie alle Kontrollkästchen aktiviert haben, klicken Sie 51 00:04:16,100 --> 00:04:21,300 auf "Anwenden". Dies fordert Sie erneut auf, den Download all dieser Elemente zu starten 52 00:04:21,300 --> 00:04:27,600 und sie hier in Ihrem Android-Setup zu installieren. All diese Dinge müssen installiert sein, um Android-Anwendungen zu entwickeln. 53 00:04:27,600 --> 00:04:34,620 Warten wir also, bis dieser Download und diese Installation hier abgeschlossen sind. Wenn Sie fertig sind, können Sie das 54 00:04:34,630 --> 00:04:40,300 schließen. Der nächste Schritt, der sich noch in diesem Android Studio-Fenster befindet, besteht darin, auf 55 00:04:40,570 --> 00:04:42,410 AVD-Manager konfigurieren zu klicken. 56 00:04:42,490 --> 00:04:46,750 Dies ist der Manager, mit dem Sie virtuelle Geräte erstellen und starten können. 57 00:04:46,750 --> 00:04:49,120 Sie sehen, ich habe bereits einige Geräte, möglicherweise 58 00:04:49,120 --> 00:04:53,830 haben Sie keines. Sie können jederzeit ein neues in der unteren linken Ecke erstellen, indem Sie 59 00:04:53,830 --> 00:05:00,070 auf Virtuelles Gerät erstellen klicken und dann hier ein Telefon auswählen. Sie können jedes Bild auswählen, das Sie hier erstellen möchten 60 00:05:00,070 --> 00:05:01,340 verschiedene Geräte unterschiedlicher Größe. 61 00:05:01,360 --> 00:05:06,310 Ich würde empfehlen, einen zu verwenden, auf dem der Play Store installiert ist, der beim Testen bestimmter Funktionen 62 00:05:06,310 --> 00:05:08,430 helfen kann, die wir möglicherweise später benötigen. 63 00:05:08,440 --> 00:05:11,830 Im Allgemeinen können Sie hier jedoch jedes gewünschte Bild auswählen. Ich werde 64 00:05:11,860 --> 00:05:15,350 hier das Pixel 2 verwenden. Klicken Sie auf Weiter und 65 00:05:15,490 --> 00:05:17,150 wählen Sie dann eine 66 00:05:17,170 --> 00:05:20,230 Android-Version aus, die Sie auf diesem Gerät verwenden möchten. 67 00:05:20,230 --> 00:05:22,500 Dort verwende ich die neueste stabile 68 00:05:22,510 --> 00:05:28,110 Version, also nicht die Beta-Version, in meinem Fall nicht die Q-Version, sondern die neueste stabile Version. Möglicherweise 69 00:05:28,120 --> 00:05:32,350 müssen Sie sie herunterladen Erstens ist dieses Image unabhängig von den SDKs, die 70 00:05:32,350 --> 00:05:38,730 Sie vor einer Sekunde installiert haben. Dies sind Geräte-Images. Stellen Sie also sicher, dass Sie den neuesten stabilen herunterladen und anschließend auswählen, 71 00:05:39,040 --> 00:05:40,420 und klicken Sie auf Weiter. 72 00:05:40,420 --> 00:05:42,600 Sie können die Standardeinstellungen hier 73 00:05:42,610 --> 00:05:46,680 belassen. Sie können in die erweiterten Einstellungen eintauchen, wenn Sie wirklich wissen, 74 00:05:46,700 --> 00:05:51,520 was Sie tun. Andernfalls können Sie die Standardeinstellungen beibehalten und auf Fertig stellen klicken. 75 00:05:51,610 --> 00:05:57,250 Dadurch wird jetzt ein neuer Emulator erstellt, in meinem Fall dieser hier und Sie können den Emulator 76 00:05:57,250 --> 00:06:04,200 starten, indem Sie hier auf diese grüne Wiedergabetaste klicken. Dadurch wird nun der Emulator hier gestartet, der jetzt hier hochfährt. Sobald 77 00:06:04,200 --> 00:06:09,180 er hochgefahren ist, können Sie Ihre Expo-App, Ihre React Native-App, auf diesem Emulator ausführen. 78 00:06:09,180 --> 00:06:10,530 Warten wir also, bis dies abgeschlossen 79 00:06:10,530 --> 00:06:17,420 ist, und lassen Sie mich Ihnen dann zeigen, wie Sie Ihre Expo-App auf diesem Emulator starten. Der Emulator ist also fertig gebootet und jetzt können 80 00:06:18,890 --> 00:06:25,640 Sie Ihre App auf diesem Emulator starten, indem Sie einfach zu Ihrem Projekt gehen, in dem Ihr Prozess 81 00:06:25,640 --> 00:06:28,190 möglicherweise noch ausgeführt wird. Wenn Sie 82 00:06:28,220 --> 00:06:33,020 ihn beenden, können Sie npm start in Ihrem React Native-Expo-Projekt einfach neu starten. 83 00:06:33,020 --> 00:06:39,930 Das ist es, was ich hier mache und es startet wieder die Expo-Entwicklungstools im Browser hier und jetzt hier, wo wir 84 00:06:39,930 --> 00:06:46,530 zuvor diesen QR-Code gescannt haben. Sie können auf Android-Gerät oder Emulator auf Ausführen klicken. Wenn Sie einen Emulator in 85 00:06:46,530 --> 00:06:51,870 Betrieb haben, Es wird automatisch Ihre App dort oder in Ihrem Terminal hier ausführen, wo Sie 86 00:06:51,870 --> 00:06:54,120 diesen npm-Startvorgang ausführen. Sie können a 87 00:06:54,120 --> 00:06:57,720 drücken, um Ihre App auch auf dem Emulator zu starten. 88 00:06:57,750 --> 00:06:58,950 Das habe ich 89 00:06:59,100 --> 00:07:02,850 gerade getan. Dadurch wird der Expo-Client jetzt automatisch auf dem Emulator installiert, 90 00:07:02,880 --> 00:07:07,750 sodass Sie den Expo-Client dort nicht installieren oder manuell installieren müssen. Er wird für Sie erledigt 91 00:07:07,830 --> 00:07:12,540 und sobald er damit fertig ist, erstellt er Ihre App und Läuft auf diesem Android-Gerät. 92 00:07:12,570 --> 00:07:15,060 Warten wir also, bis dies 93 00:07:15,060 --> 00:07:21,610 abgeschlossen ist. Hier wird es gestartet. Klicken Sie hier auf OK. Sie werden gefragt, ob 94 00:07:21,610 --> 00:07:29,800 Sie die Anzeige dieser App beim ersten Start zulassen möchten. Schalten Sie dies hier ein, gehen Sie dann zurück, gehen Sie 95 00:07:29,800 --> 00:07:36,460 hier zur App-Schublade oder zum Task-Manager und kehren Sie hier zu Ihrer App zurück. Jetzt wird Ihre Expo-App gestartet. Sie 96 00:07:36,460 --> 00:07:42,490 baut das Javascript-Bundle unten wieder auf und sobald es fertig ist, Hier wird Ihre Expo-App gestartet, und nur 97 00:07:42,490 --> 00:07:48,240 der erste Build dauert ziemlich lange. Nachfolgende Neuerstellungen und Hot-Reloads sind, wie Sie gesehen haben, ziemlich schnell. 98 00:07:48,520 --> 00:07:55,960 Warten wir also, bis dieser Build fertig ist, und jetzt ist er hier fertig. Hier sehen wir unsere App. Das ist übrigens schön, wir haben es schon 99 00:07:55,960 --> 00:07:57,130 mal auf 100 00:07:57,130 --> 00:08:00,700 dem iPhone gesehen, zumindest hier in den Videos. 101 00:08:00,700 --> 00:08:05,440 Jetzt läuft es hier auf Android und die Schaltfläche ist eine der wenigen Komponenten, die 102 00:08:05,470 --> 00:08:08,410 React Native anbietet, die ihr Aussehen automatisch an die Plattform 103 00:08:08,410 --> 00:08:09,940 anpasst. Das ist also 104 00:08:09,940 --> 00:08:15,820 ziemlich süß und wir haben die gleiche Funktionalität wie zuvor und dies ermöglicht es uns, dies zu testen, nicht 105 00:08:15,850 --> 00:08:17,560 Nur auf dem realen Gerät, 106 00:08:17,590 --> 00:08:23,020 aber auch in einem Simulator und dort können Sie jedes gewünschte Android-Gerät simulieren, was natürlich sehr nützlich ist. 107 00:08:23,020 --> 00:08:25,500 Das ist also die App, die auf 108 00:08:25,510 --> 00:08:31,540 einem Android-Simulator ausgeführt wird. Während dieses Kurses werde ich immer zeigen, wie dies auf einem Android-Emulator ausgeführt wird und funktioniert. 109 00:08:31,540 --> 00:08:34,390 Lassen Sie uns nun als nächstes darauf eingehen, dies unter iOS auszuführen.