1
00:00:02,410 --> 00:00:05,440
Jadi apa saja alternatif kami untuk alur kerja yang dikelola?

2
00:00:05,440 --> 00:00:08,450
Salah satu alternatif adalah dengan menggunakan React Native CLI, Anda

3
00:00:08,470 --> 00:00:10,950
dapat mempelajari tentang ini di halaman React Native

4
00:00:10,960 --> 00:00:15,430
resmi jika Anda mengunjunginya, Anda dapat dengan mudah google React Native untuk menemukannya dan di sana

5
00:00:15,880 --> 00:00:22,120
jika Anda mengklik memulai, Anda benar-benar akan disambut dengan dua cara berbeda untuk memulai dan cara yang dipilih sebelumnya untuk menggunakan

6
00:00:22,130 --> 00:00:23,080
Expo CLI, itu

7
00:00:23,080 --> 00:00:24,960
adalah pendekatan yang kami gunakan, kan?

8
00:00:24,970 --> 00:00:30,220
Jadi tidak ada yang terlalu mewah tentang ini, ini memberi Anda aplikasi React Native menggunakan expo, itulah yang

9
00:00:30,220 --> 00:00:31,720
kami gunakan dalam kursus ini.

10
00:00:31,750 --> 00:00:35,410
Anda juga dapat mengeklik pada mulai cepat

11
00:00:35,410 --> 00:00:41,170
React Native CLI dan sekarang di sini Anda pertama-tama perlu mengatur sistem Anda

12
00:00:41,170 --> 00:00:47,530
dengan cara tertentu dan kemudian Anda dapat menginstal paket terpisah, React Native CLI yang sekarang

13
00:00:47,530 --> 00:00:55,060
harus Anda buat proyek. dan untuk menjalankannya dan sebagainya. Sekarang penting, di sini Anda akan menemukan petunjuk instalasi terperinci untuk berbagai sistem operasi

14
00:00:55,300 --> 00:00:57,070
dan aplikasi yang ingin Anda buat.

15
00:00:57,100 --> 00:01:02,680
Ketahuilah bahwa pada Windows seperti yang dikatakan di sini, Anda tidak dapat membangun aplikasi iOS, sama di Linux, Anda

16
00:01:02,680 --> 00:01:07,870
hanya dapat membangun aplikasi Android di sana dan Anda akan menemukan instruksi pemasangan jika memilih opsi tertentu.

17
00:01:08,590 --> 00:01:09,730
Di macOS Anda

18
00:01:09,760 --> 00:01:14,170
dapat membangun iOS dan Android dan Anda juga harus mengikuti petunjuk instalasi ini.

19
00:01:14,170 --> 00:01:19,030
Sekarang saya tidak akan melakukan ini secara rinci di sini karena Anda akan menemukan semuanya tertulis

20
00:01:19,030 --> 00:01:20,110
di sini tentu

21
00:01:20,110 --> 00:01:25,960
saja jika Anda ingin mengikuti, pada akhirnya Anda akan perlu menginstal beberapa paket, bukan paket npm tetapi paket sistem

22
00:01:25,960 --> 00:01:30,490
yang luas dan proses pemasangan yang tepat berbeda mengenai platform mana yang Anda jalankan.

23
00:01:30,580 --> 00:01:36,670
Anda perlu menginstal Android Studio atau Xcode, jadi Xcode untuk aplikasi iOS, Android Studio untuk aplikasi Android

24
00:01:36,670 --> 00:01:39,130
dan Anda harus menginstalnya sekarang, sebelumnya itu

25
00:01:39,160 --> 00:01:40,610
opsional, saya hanya

26
00:01:40,630 --> 00:01:42,840
melakukannya untuk mendapatkan simulator, sekarang Anda

27
00:01:42,850 --> 00:01:47,020
membutuhkannya karena sekarang ini alat akan digunakan untuk membangun aplikasi Anda.

28
00:01:47,080 --> 00:01:52,750
Sebelumnya itu tidak diperlukan karena pembungkus expo pada dasarnya jenis membaca kode kami dan host itu dan Anda

29
00:01:52,750 --> 00:01:56,780
dapat membangun aplikasi mandiri dengan expo dalam alur kerja yang dikelola juga,

30
00:01:56,810 --> 00:01:59,030
ada yang akan terjadi di cloud.

31
00:01:59,320 --> 00:02:04,780
Sekarang semua terjadi secara lokal, jadi Anda harus menginstal Android Studio dan seterusnya dan menginstalnya dengan

32
00:02:04,780 --> 00:02:07,540
semua opsi yang Anda temukan di sini.

33
00:02:07,550 --> 00:02:14,130
Sekarang Anda juga tidak masalah untuk platform mana Anda bekerja, Anda juga perlu menginstal React Native CLI, Anda dapat

34
00:02:14,140 --> 00:02:22,420
melakukan ini di command prompt atau terminal normal Anda, di Mac atau Linux Anda mungkin perlu menambahkan sudo di depan ini untuk dapatkan izin

35
00:02:22,420 --> 00:02:27,670
yang tepat dan ini sekarang akan menginstal React Native CLI secara global, untuk itu Anda

36
00:02:27,670 --> 00:02:32,860
juga perlu menginstal NodeJS karena ini menggunakan npm yang merupakan manajer paket node, jadi

37
00:02:32,860 --> 00:02:34,450
pastikan Anda juga memilikinya.

38
00:02:35,540 --> 00:02:38,330
Sekarang dengan React Native CLI terinstal,

39
00:02:38,330 --> 00:02:44,990
kita dapat mulai membuat proyek sama sekali tanpa expo dan untuk itu saya akan membuat

40
00:02:44,990 --> 00:02:49,110
proyek baru dan saya memilih folder untuk itu dengan menjalankan

41
00:02:49,130 --> 00:02:53,120
init asli-reaksi dan sekarang nama apa pun pilihan Anda,

42
00:02:56,120 --> 00:02:59,950
untuk contoh RNWithoutExpo. Untuk namanya, penting ditulis seperti ini,

43
00:02:59,990 --> 00:03:03,380
tidak ada tanda garis atau garis bawah di sana, tetapi hanya satu kata.

44
00:03:03,890 --> 00:03:08,780
Jadi RNWithoutExpo adalah nama yang akan saya pilih dan ini sekarang akan membuat proyek React Native baru

45
00:03:08,810 --> 00:03:14,450
menggunakan React Native CLI di tempat ini Anda menjalankan perintah ini dan itu akan memberi Anda folder baru ini

46
00:03:14,450 --> 00:03:16,870
yang berisi proyek React Native baru ini.

47
00:03:16,970 --> 00:03:18,260
Sekarang penting lagi,

48
00:03:18,260 --> 00:03:24,800
Anda sekarang harus memiliki Android Studio dan Xcode diinstal dan dikonfigurasi seperti yang disebutkan dalam dokumen resmi di

49
00:03:24,800 --> 00:03:25,690
sini, jika

50
00:03:25,700 --> 00:03:28,520
tidak, apa yang akan saya tunjukkan kepada

51
00:03:28,520 --> 00:03:34,100
Anda sekarang tidak akan berfungsi, Anda perlu menginstal karena sekarang alat ini akan dimanfaatkan oleh

52
00:03:34,100 --> 00:03:40,820
Bereaksi Asli CLI untuk membangun dan menjalankan aplikasi Anda. Juga putar beberapa emulator atau simulator, bisa sama dengan yang digunakan

53
00:03:40,820 --> 00:03:46,060
sebelumnya dalam kursus, tetapi Anda harus menjalankannya agar kita dapat melihat aplikasi React Native kami yang berjalan di sana.

54
00:03:46,560 --> 00:03:52,830
Jadi sekarang mari kita tunggu setup ini selesai di sini dan setelah ini selesai dan proses ini dapat memakan waktu cukup lama,

55
00:03:52,860 --> 00:03:59,900
Anda dapat mengikuti instruksi di sini untuk pada akhirnya menjalankan aplikasi Anda. Jadi izinkan saya menavigasi ke folder yang baru

56
00:03:59,900 --> 00:04:00,560
dibuat

57
00:04:01,640 --> 00:04:04,670
ini di sini dan menjalankan react-native run-ios

58
00:04:04,750 --> 00:04:12,260
misalnya untuk menjalankannya di simulator iOS yang saya dapatkan. Sekarang ini di belakang layar menggunakan Xcode untuk membangun aplikasi

59
00:04:12,260 --> 00:04:13,070
ini,

60
00:04:13,070 --> 00:04:19,180
tidak menggunakan expo lagi, Anda dapat menghapus instalan klien expo di sini, Anda dapat menghapus instalan

61
00:04:19,220 --> 00:04:20,390
CLI expo dari

62
00:04:20,390 --> 00:04:26,510
sistem Anda, ini tidak memanfaatkan expo sama sekali, itu hanya menggunakan Xcode di belakang adegan untuk

63
00:04:26,540 --> 00:04:33,020
membangun aplikasi Anda, jadi alat pengembangan Apple asli ini. Jadi mari kita tunggu sampai pembangunan ini selesai dan pertama kali Anda

64
00:04:33,020 --> 00:04:34,260
membangun ini, ini membutuhkan

65
00:04:34,280 --> 00:04:38,960
waktu lebih lama, pembangunan kembali selanjutnya akan lebih cepat. Jadi mari kita tunggu sampai selesai.

66
00:04:39,870 --> 00:04:43,980
Sekarang selama proses pembuatan ini, tab baru akan dibuka atau jendela baru di terminal Anda,

67
00:04:43,980 --> 00:04:47,430
menjaga proses itu berjalan dan juga menjaga proses pembuatan berjalan tentu saja, jangan

68
00:04:47,430 --> 00:04:48,080
keluar, jadi

69
00:04:48,090 --> 00:04:53,610
pertahankan kedua proses ini dan berjalan di sini dan sekarang ini menginstal aplikasi pada, dalam hal ini, simulator, jika Anda

70
00:04:53,610 --> 00:04:58,650
memiliki perangkat nyata yang terhubung, itu akan menginstalnya di sana dan meluncurkan aplikasi di sana dan oleh karena

71
00:04:58,650 --> 00:05:00,490
itu di sini, itu benar-benar membuat

72
00:05:00,580 --> 00:05:03,060
simulator baru di sini untuk saya, tidak meskipun penting,

73
00:05:03,090 --> 00:05:07,830
sekarang meluncurkan aplikasi di sini di simulator ini. Sekali lagi untuk peluncuran pertama, ini sekarang

74
00:05:07,830 --> 00:05:14,030
mengunduh aplikasi yang dibangun pada perangkat ini pada dasarnya dan Anda memiliki beberapa fitur pengembangan yang bagus di sana, debugging jarak

75
00:05:14,030 --> 00:05:18,270
jauh dapat diaktifkan, sehingga Anda memiliki semua fitur bagus di sini juga, itu bukan

76
00:05:18,300 --> 00:05:22,750
pameran eksklusif dan peluncuran pertama ini akan memakan waktu sedikit lebih lama seperti yang disebutkan.

77
00:05:22,770 --> 00:05:30,220
Jadi mari kita tunggu unduhan ini selesai di sini sehingga aplikasi tersebut diluncurkan dan ini akan muncul. Sekarang layar mulai persis yang Anda lihat di sini,

78
00:05:30,250 --> 00:05:32,410
yang mungkin berbeda dari

79
00:05:32,500 --> 00:05:37,450
waktu ke waktu karena itu hanya kode awal yang Anda dapatkan

80
00:05:37,450 --> 00:05:43,990
dalam proyek yang akan kita lihat sebentar lagi tapi ini sekarang aplikasi, aplikasi asli tanpa

81
00:05:44,080 --> 00:05:50,740
pameran jika tidak sama, berjalan di iOS. Kami juga dapat menjalankannya di Android dan untuk itu, proses yang sekarang selesai

82
00:05:50,740 --> 00:05:52,330
dapat dihapus, yang lain harus tetap

83
00:05:52,330 --> 00:05:57,360
berjalan, itu server pengembangan Anda yang berbicara ke perangkat dan yang mengawasi perubahan file dan mendorong kode baru ke perangkat

84
00:05:57,360 --> 00:05:58,270
, jadi apa

85
00:05:58,270 --> 00:06:03,250
yang Anda ketahui dari expo, yang bekerja di sini juga. Jadi teruskan proses lainnya, tetapi

86
00:06:03,250 --> 00:06:10,300
sekarang kita juga dapat menjalankan react-native run-android untuk juga membangun aplikasi untuk Android dan memanfaatkan server yang sama

87
00:06:10,300 --> 00:06:16,260
untuk kemudian juga membangun dan mendorong aplikasi Android ke emulator Android dan kemudian melihatnya juga.

88
00:06:16,270 --> 00:06:17,950
Jadi mari kita tunggu ini

89
00:06:17,950 --> 00:06:22,850
selesai, sekali lagi build pertama ini akan memakan waktu lebih lama, reload selanjutnya akan jauh lebih cepat.

90
00:06:22,930 --> 00:06:28,150
Proses pembuatan ini sekarang memanfaatkan Android Studio yang juga harus Anda instal dan

91
00:06:28,330 --> 00:06:34,130
konfigurasikan seperti yang dijelaskan dalam dokumen resmi dan karenanya sekarang ini juga tentu saja berfungsi

92
00:06:34,140 --> 00:06:37,190
sepenuhnya tanpa expo, hanya menggunakan Android Studio.

93
00:06:37,370 --> 00:06:44,030
Sekarang ini juga meluncurkan aplikasi Android di sini di emulator Android saya, tetapi seperti sebelumnya, peluncuran awal ini dapat memakan waktu cukup

94
00:06:44,030 --> 00:06:45,470
lama, sekarang ini terhubung ke

95
00:06:45,470 --> 00:06:48,600
server pengembangan yang oleh karena itu Anda di sini tentu

96
00:06:48,710 --> 00:06:53,900
saja juga harus terus berjalan, tidak hanya ketika itu membangun bundel ini tetapi sepanjang waktu agar perubahan

97
00:06:53,900 --> 00:06:59,180
pada file Anda, Anda mendapatkan membangun kembali hidup dan setelah ini selesai, mari kita lihat aplikasi selesai

98
00:06:59,180 --> 00:07:00,530
berjalan di Android.

99
00:07:00,530 --> 00:07:03,500
Sekarang mari kita lihat kode yang bertanggung jawab untuk

100
00:07:03,500 --> 00:07:07,420
itu, apakah sekarang terlihat sama sekali berbeda dari apa yang kita lihat sejauh ini?

101
00:07:07,550 --> 00:07:12,620
Untuk itu, saya memuat proyek di sini lagi dengan Visual Studio Code, jadi pengaturan yang sama seperti

102
00:07:12,620 --> 00:07:18,140
sebelumnya dan apa yang Anda lihat terlihat sedikit berbeda tetapi kebanyakan, kami memiliki banyak file konfigurasi yang berbeda,

103
00:07:18,140 --> 00:07:22,040
cukup adil tetapi itu tidak benar-benar berubah cara kita menulis kode kita.

104
00:07:22,130 --> 00:07:24,960
Sangat penting, kami punya folder Android dan iOS,

105
00:07:24,980 --> 00:07:26,320
kami tidak punya

106
00:07:26,360 --> 00:07:31,270
sebelumnya, folder itu dan Windows, Linux Anda tidak punya iOS, Anda hanya punya Android

107
00:07:31,460 --> 00:07:36,740
di sana, tapi folder itu berisi aplikasi asli asli proyek-proyek yang dibangun dengan bantuan Android

108
00:07:36,740 --> 00:07:40,570
Studio dan Xcode dan kode Anda menjadi semacam built-in sehingga

109
00:07:40,570 --> 00:07:45,710
Anda bisa mengatakan, React Native melakukan semua itu untuk Anda, proses React Native CLI tetapi

110
00:07:45,710 --> 00:07:51,230
jika kita melihat kode konkret di aplikasi. File js, yah itulah

111
00:07:51,230 --> 00:07:58,430
yang kami gunakan dalam kursus ini, kan? Di sana kami memiliki beberapa impor dan beberapa tautan tambahan yang menunjukkan Anda beberapa

112
00:07:58,430 --> 00:08:00,180
peringatan di sini mengenai gaya kode.

113
00:08:00,230 --> 00:08:04,160
Ini bukan kesalahan sebenarnya, hanya saja saya harus menggunakan tanda kutip ganda

114
00:08:04,170 --> 00:08:08,570
alih-alih tanda kutip tunggal, ya beberapa rekomendasi yang tidak saya pedulikan di sini tetapi

115
00:08:08,630 --> 00:08:13,560
jika Anda melihat apa yang diimpor di sini, bereaksi, simpan tampilan area, stylesheet, tampilan gulir ,

116
00:08:13,700 --> 00:08:18,520
lihat, teks - ini semua hal yang sudah kami kerjakan, jadi kami memiliki komponen normal

117
00:08:18,710 --> 00:08:26,690
yang sudah kami kerjakan dan tentu saja kami lakukan karena apa yang saya katakan selama kursus ini, Bereaksi Asli adalah Bereaksi Asli, expo adalah pembungkus tipis

118
00:08:26,690 --> 00:08:27,780
di sekitarnya .

119
00:08:27,860 --> 00:08:34,580
Kami menulis kode yang sama, kami menggunakan komponen yang sama, mereka dikompilasi ke widget asli, bahwa semua tidak berubah

120
00:08:34,580 --> 00:08:36,920
ketika kita menggunakan expo, satu-satunya perbedaan

121
00:08:36,920 --> 00:08:41,360
adalah bahwa dengan expo, kita tidak perlu mengatur sebanyak, build sedikit lebih

122
00:08:41,390 --> 00:08:48,220
cepat dan menambahkan modul asli sangat mudah, pengujian pada perangkat nyata sangat mudah, hanya lebih mudah, kami membangun aplikasi

123
00:08:48,230 --> 00:08:49,580
dengan cara yang

124
00:08:49,580 --> 00:08:54,110
sama dan itu adalah sesuatu yang dapat Anda lihat di sini juga.

125
00:08:54,110 --> 00:08:56,920
Gaya diatur dengan cara yang sama dengan Stylesheet. buat, itu saja seperti

126
00:08:56,990 --> 00:09:00,530
yang kami lakukan sepanjang kursus ini dan itu penting

127
00:09:01,570 --> 00:09:02,960
bagi Anda.

128
00:09:03,020 --> 00:09:05,870
Sekarang satu hal tambahan yang akan Anda temukan di sini adalah indeks. File js, kami

129
00:09:05,870 --> 00:09:11,780
tidak memiliki itu di expo, semacam itu adalah file konfigurasi dasar yang meluncurkan aplikasi Anda, Anda dapat

130
00:09:11,780 --> 00:09:16,150
mengatakan, yang memastikan bahwa komponen aplikasi ini ditampilkan ke layar, itu adalah sesuatu

131
00:09:16,160 --> 00:09:22,160
yang dilakukan expo untuk Anda di Bereaksi Aplikasi expo asli tetapi selain itu, itu benar-benar sama dan Anda

132
00:09:22,160 --> 00:09:24,460
akan membangun aplikasi dengan cara yang sama.