1
00:00:02,230 --> 00:00:08,830
Sekarang selain membuat proyek baru dari awal dengan React Native CLI atau dengan expo CLI dan kemudian

2
00:00:08,860 --> 00:00:10,820
memilih workflow telanjang, Anda bahkan

3
00:00:11,020 --> 00:00:19,710
dapat mengubah proyek yang dikelola menjadi proyek workflow telanjang asli React Native dan itu cukup keren karena itu berarti Anda bisa mendapatkan

4
00:00:19,900 --> 00:00:24,480
semua fitur kenyamanan alur kerja yang dikelola selama pengembangan dan setelah

5
00:00:24,490 --> 00:00:32,170
Anda selesai misalnya atau sekali Anda membutuhkan paket pihak ketiga tertentu yang mengintegrasikan beberapa fitur yang tidak Anda buat

6
00:00:32,230 --> 00:00:38,110
dalam expo dan Anda benar-benar perlu, dalam hal ini Anda bisa masih beralih dan Anda

7
00:00:38,110 --> 00:00:43,180
tidak perlu membangun kembali aplikasi dari awal dan membuat proyek baru dan

8
00:00:43,180 --> 00:00:44,890
menyalin kode Anda.

9
00:00:45,010 --> 00:00:51,380
Bagaimana? Baik dalam proyek Anda dan ini adalah fitur

10
00:00:51,380 --> 00:00:57,520
perangkat asli, proyek tempat hebat yang kami bangun sebelumnya di mana kami dapat menambahkan tempat, di mana

11
00:00:57,520 --> 00:01:05,230
kami tentu saja menggunakan lokasi, peta, kamera, SQLite, tempat kami menggunakan semua ini hal-hal, di sana dalam proyek ini, Anda cukup menjalankan

12
00:01:05,230 --> 00:01:10,390
expo eject dan ini mengubah proyek Anda menjadi proyek alur kerja yang dikelola non-expo.

13
00:01:10,390 --> 00:01:13,110
Namun penting, tidak ada jalan untuk kembali, tentu saja

14
00:01:13,110 --> 00:01:18,550
Anda dapat menyalin folder Anda dan membuat salinan cadangan dan menyimpan ini atau jika Anda menggunakan git,

15
00:01:18,550 --> 00:01:23,860
Anda tentu saja dapat kembali ke komit sebelumnya tetapi jika Anda belum menyimpan proyek, setelah Anda mengeluarkannya,

16
00:01:23,860 --> 00:01:25,360
Anda tidak dapat

17
00:01:25,360 --> 00:01:26,900
mengubahnya kembali, jadi sadarilah ini.

18
00:01:27,160 --> 00:01:32,680
Anda harus membuat proyek terkelola expo baru dan menyalin semua kode Anda jika

19
00:01:32,680 --> 00:01:33,970
Anda ingin kembali.

20
00:01:33,970 --> 00:01:40,720
Jadi di sini jika Anda menjalankan expo eject, Anda sebenarnya harus diminta untuk jenis proyek yang ingin Anda keluarkan dan

21
00:01:40,750 --> 00:01:46,180
di sini saya punya dua opsi pada akhirnya. Sekarang opsi yang Anda lihat di sini mungkin berbeda dari waktu ke

22
00:01:46,210 --> 00:01:52,360
waktu tetapi di sini, dua opsi yang saya miliki adalah bare and expo kit. Kit Expo sudah usang, ini pada dasarnya

23
00:01:52,360 --> 00:01:58,780
adalah apa yang kami miliki sebelum kami memiliki alur kerja kosong, jadi Anda tidak harus benar-benar beralih

24
00:01:58,780 --> 00:02:02,520
ke ini, alih-alih Anda dapat beralih ke telanjang di

25
00:02:02,530 --> 00:02:08,710
sini yang berarti bahwa sekarang ini akan diubah menjadi proyek Asli Bereaksi, seolah-olah itu akan dibuat

26
00:02:08,710 --> 00:02:13,010
dengan React Native CLI tanpa pembungkus expo tetapi akan dikonfigurasikan sebelumnya

27
00:02:13,030 --> 00:02:18,640
seperti yang disebutkan di sini pada halaman react-native-unimodules yang merupakan jenis paket ini yang expo

28
00:02:18,670 --> 00:02:26,200
perlu memaparkan semua API expo ini ke sebuah aplikasi non-pameran. Jadi itu akan mengkonfigurasi ulang semua hal ini selama

29
00:02:26,200 --> 00:02:29,140
setiap tindakan sehingga Anda tidak perlu

30
00:02:29,350 --> 00:02:36,120
melakukan itu, sehingga Anda mendapatkan aplikasi React Native plus. Jadi jika saya menekan enter di sini dan

31
00:02:36,120 --> 00:02:42,310
sekarang penting, Anda tidak dapat kembali setelah ini selesai, Anda dapat memilih nama untuk layar beranda

32
00:02:42,910 --> 00:02:50,490
dan saya akan memilih tempat yang bagus di sini misalnya, tekan enter, sekarang beri nama Android Studio dan Xcode saya

33
00:02:50,530 --> 00:02:54,670
memproyeksikan rn-guide tetapi terserah Anda dan sekarang ini akan melakukan tugasnya.

34
00:02:54,880 --> 00:02:56,280
Ini mengubah proyek, menambah folder

35
00:02:56,290 --> 00:03:02,380
Android dan karena saya menggunakan MacOS, itu juga menambahkan folder iOS. Tentu saja di Windows dan Linux, itu

36
00:03:02,380 --> 00:03:06,970
tidak akan melakukan itu karena di sana, karena Anda sekarang perlu

37
00:03:06,970 --> 00:03:08,660
membangun ini secara

38
00:03:09,640 --> 00:03:16,450
lokal, itu tidak dapat membangun aplikasi iOS dan itu mengkonfigurasi segalanya dan menginstal beberapa dependensi sehingga Anda

39
00:03:16,450 --> 00:03:22,150
dapat menggunakan kode yang ada dan semua paket expo yang telah Anda instal dalam

40
00:03:22,150 --> 00:03:25,130
pengaturan kosong ini, sehingga tidak hanya mengatur

41
00:03:25,240 --> 00:03:32,710
semua unimodules di sini, tetapi juga memastikan bahwa semua paket yang sudah Anda gunakan, seperti lokasi expo atau SQLite

42
00:03:33,130 --> 00:03:37,980
expo, bahwa paket itu juga kerja. Jadi sekarang ini bisa memakan waktu

43
00:03:38,010 --> 00:03:46,260
cukup lama, jadi mari kita tunggu sampai ini selesai dan di sini sudah selesai dan Anda melihatnya benar-benar memberitahu saya bahwa pada

44
00:03:46,260 --> 00:03:50,430
umumnya melakukan tugasnya tetapi ada dua paket yang memerlukan pengaturan manual.

45
00:03:50,430 --> 00:03:54,750
Anda cukup mengklik tautan ini untuk mendapatkan instruksi tentang apa yang perlu Anda

46
00:03:54,780 --> 00:04:00,810
lakukan di sana, itu adalah pemetik gambar pameran dan paket React Native maps di mana Anda perlu melakukan instalasi

47
00:04:00,810 --> 00:04:01,980
manual untuk menyelesaikannya.

48
00:04:02,820 --> 00:04:05,010
Jadi di sini, di halaman

49
00:04:05,010 --> 00:04:11,810
picker image expo, pada akhirnya apa yang perlu kita lakukan adalah kita perlu menjalankan port install di folder iOS,

50
00:04:11,820 --> 00:04:18,660
jadi kita perlu melakukan semua hal setelah menginstal paket. Jadi di folder proyek, saya akan menavigasi ke iOS

51
00:04:18,660 --> 00:04:24,930
dan menjalankan instalasi port, port seperti npm untuk iOS, itu menginstal beberapa dependensi yang dibutuhkan iOS untuk bekerja

52
00:04:25,050 --> 00:04:32,040
dengan benar, jadi itulah yang terjadi sekarang dan setelah ini selesai, kami juga akan perlu menambahkan entri ini di sini

53
00:04:32,040 --> 00:04:36,030
ke manifes Android, jadi itu juga sesuatu yang perlu kita lakukan.

54
00:04:36,270 --> 00:04:42,030
Jadi kita harus pergi ke folder Android, folder aplikasi di sana dan di folder sumber, AndroidManifest

55
00:04:42,360 --> 00:04:47,070
dan kemudian seperti yang dijelaskan di sini, tambahkan ini di dalam tag aplikasi.

56
00:04:47,070 --> 00:04:57,060
Jadi di sini ada aplikasi dan di sana, kita harus menambahkan entri aktivitas ini di sini, seperti ini, itu wajib.

57
00:04:57,300 --> 00:05:02,280
Sekarang, sementara saya sudah di sini, Anda juga akan melihat bahwa file manifes ini juga

58
00:05:02,280 --> 00:05:02,950
telah

59
00:05:03,090 --> 00:05:08,940
diatur dengan cara tertentu, itu mencakup semua izin dan tentu saja, Anda tidak ingin melakukan itu, Anda hanya ingin

60
00:05:08,940 --> 00:05:10,390
meminta izin kamu benar-benar membutuhkan.

61
00:05:10,410 --> 00:05:18,480
Jadi seperti yang tertulis di sini, hapus semua izin yang tidak diperlukan aplikasi Anda dan misalnya aplikasi demo

62
00:05:18,480 --> 00:05:24,300
saya di sini hanya perlu akses mencari lokasi izin yang akan saya

63
00:05:27,440 --> 00:05:36,890
pindah ke sana dan izin kamera tentu saja yang saya akan pindah ke sana dan juga izin penyimpanan eksternal tulis, yang

64
00:05:41,790 --> 00:05:43,520
juga harus diminta.

65
00:05:43,530 --> 00:05:48,900
Ini sebenarnya harus semua izin dan Anda dapat memeriksa semua paket pihak ketiga atau semua

66
00:05:48,900 --> 00:05:54,110
paket API expo yang Anda gunakan untuk memastikan Anda tidak kehilangan izin apa pun.

67
00:05:54,300 --> 00:06:00,840
Dengan itu, saya benar-benar akan mengomentari semua izin ini di sini dan juga semua izin ini dan kami

68
00:06:00,840 --> 00:06:09,170
akan mengujinya untuk melihat apakah itu berfungsi. Maka dengan itu, pengaturan paket pemilih gambar selesai. Sekarang Bereaksi peta asli juga

69
00:06:09,190 --> 00:06:14,880
perlu dikonfigurasi dan di sana kita bisa masuk ke petunjuk instalasi.

70
00:06:14,880 --> 00:06:18,260
Sekarang perintah instal npm ini, yang sudah terjadi tetapi sekarang yang perlu kita

71
00:06:18,390 --> 00:06:24,960
lakukan adalah kita perlu menjalankan React Native link React Native maps. Jadi mari kita naik satu tingkat

72
00:06:25,020 --> 00:06:32,380
kembali ke folder proyek root dan menjalankan React Native link React Native maps dan

73
00:06:32,380 --> 00:06:34,590
yang sekarang akan

74
00:06:34,600 --> 00:06:40,870
menghubungkan semuanya, pastikan semuanya bekerja dengan benar, bahwa semuanya sudah dikonfigurasikan dengan

75
00:06:40,870 --> 00:06:49,120
benar dan Anda masih perlu melakukan beberapa manual hal-hal, semua hal ini di sini seharusnya tidak

76
00:06:49,270 --> 00:07:00,230
diperlukan, yang semua harus dilakukan dengan menautkan terima kasih tetapi pada Android, Anda perlu memastikan bahwa Anda menambahkan entri ini di

77
00:07:00,230 --> 00:07:05,520
sini, entri metadata ini menjadi kunci aplikasi Anda di AndroidManifest.

78
00:07:05,630 --> 00:07:11,990
Jadi di sini di dalam aplikasi, kita dapat menambahkan entri ini dan di sana Anda perlu menempatkan kunci Google Maps

79
00:07:11,990 --> 00:07:12,740
API Anda.

80
00:07:12,840 --> 00:07:14,680
Sekarang saya memiliki itu di

81
00:07:14,690 --> 00:07:21,230
folder env jika Anda ingat, jadi saya hanya akan mengambil kunci ini dan menambahkannya di sini, ganti kunci Google

82
00:07:21,230 --> 00:07:23,490
Maps API Anda di sini dengan itu

83
00:07:23,660 --> 00:07:31,040
dan juga penting, jika Anda pergi ke halaman Google Maps API, Anda perlu untuk mengaktifkan ini memetakan SDK untuk Android untuk proyek

84
00:07:31,040 --> 00:07:31,790
Anda,

85
00:07:31,790 --> 00:07:36,500
itu penting jika ini tidak akan berhasil. Untuk iOS, Anda tidak perlu melakukan sesuatu yang istimewa

86
00:07:36,500 --> 00:07:41,690
kecuali jika Anda ingin menggunakan Google Maps di sana, dalam hal ini Anda harus mengikuti instruksi yang diberikan dalam petunjuk peta

87
00:07:41,870 --> 00:07:44,920
React Native di sini untuk cara menggunakan Google Maps di iOS tetapi

88
00:07:45,800 --> 00:07:52,930
untuk Android Anda pasti perlu mengaktifkan Google Maps SDK untuk Android API di sini. Untuk mengaktifkan API ini, Anda dapat pergi ke Google Cloud

89
00:07:52,940 --> 00:07:58,760
Platform di sini untuk proyek yang Anda kerjakan sebelumnya ketika Anda mengatur kunci API dan seterusnya

90
00:07:59,000 --> 00:08:05,240
dan kemudian di sini di bawah API dan layanan, Anda dapat pergi ke perpustakaan yang akan membawa Anda

91
00:08:05,240 --> 00:08:09,710
ke perpustakaan dari semua Google API dan ada peta SDK untuk Android,

92
00:08:09,710 --> 00:08:11,120
Anda harus mengaktifkannya.

93
00:08:11,120 --> 00:08:15,980
Anda juga perlu mengatur peta SDK untuk iOS jika Anda ingin menggunakan Google Maps di iOS yang saya tidak

94
00:08:15,980 --> 00:08:17,150
akan gunakan di sini.

95
00:08:17,350 --> 00:08:18,760
Sekarang seharusnya sudah diaktifkan di

96
00:08:18,770 --> 00:08:21,500
sini, tetapi pastikan sudah. Jadi kalau-kalau itu tidak

97
00:08:21,590 --> 00:08:22,710
diaktifkan, pasti melakukannya.

98
00:08:24,370 --> 00:08:27,240
Dengan itu, ini juga harus diatur sedemikian rupa

99
00:08:27,250 --> 00:08:34,450
sehingga berfungsi dan sekarang jika kita menjalankan react-native run-android, aplikasi yang kita buat dalam modul sebelumnya dengan alur kerja yang dikelola dengan

100
00:08:34,450 --> 00:08:41,260
expo sekarang masih dapat berfungsi, sekarang tanpa alur kerja yang dikelola oleh expo tanpa klien pameran yang digunakan pada simulator atau

101
00:08:41,260 --> 00:08:47,770
perangkat nyata tetapi sebaliknya membangun secara lokal dengan Android Studio atau tentu saja juga dengan iOS jika Anda ingin menggunakannya

102
00:08:47,770 --> 00:08:54,000
dan oleh karena itu dengan cara yang sama seperti Anda akan melakukannya dalam proyek yang dibuat asli CLI

103
00:08:54,010 --> 00:08:55,510
tetapi menciptakan proyek tetapi

104
00:08:55,510 --> 00:09:01,000
sekarang setelah mengeluarkan dari alur kerja yang dikelola yang tentu saja berarti semua kode ini ditulis

105
00:09:01,000 --> 00:09:07,180
dalam alur kerja yang dikelola dan sekarang saya menjalankannya dalam alur kerja yang tidak dikelola yang cukup manis.

106
00:09:07,180 --> 00:09:10,830
Jadi mari kita tunggu sampai selesai dan lihat apakah aplikasi ini berfungsi sebagaimana mestinya.

107
00:09:11,590 --> 00:09:16,780
Ini muncul pada emulator Android di sini yang merupakan emulator yang ingin saya gunakan untuk pengujian

108
00:09:16,780 --> 00:09:23,020
karena di sana saya dapat menggunakan kamera emulator untuk pengujian dan sekali lagi, hanya untuk menekankan ini, ini sekarang tidak

109
00:09:23,020 --> 00:09:24,400
menggunakan aplikasi klien

110
00:09:24,400 --> 00:09:28,930
expo, kami juga tidak bisa t memindai barcode di sini karena tidak ada barcode

111
00:09:28,940 --> 00:09:34,570
untuk dipindai, ini sekarang benar-benar sebuah aplikasi yang dibangun dengan Android Studio dan didorong ke aplikasi kami.

112
00:09:34,720 --> 00:09:38,710
Jadi, inilah aplikasi kami dan sekarang mari kita coba menambahkan

113
00:09:38,710 --> 00:09:44,470
tempat baru di sini, uji, ambil gambar, izinkan akses ke kamera, lalu ambil gambar ini

114
00:09:49,370 --> 00:09:50,630
ya potong, pilih

115
00:09:53,960 --> 00:09:55,190
lokasi di

116
00:09:56,060 --> 00:09:58,010
peta mungkin, inilah peta yang

117
00:10:00,760 --> 00:10:04,050
muncul, lokasi ini terlihat bagus untuk saya, simpan

118
00:10:04,070 --> 00:10:06,760
ini, simpan tempat, di sini kita berada

119
00:10:06,760 --> 00:10:07,540
dan

120
00:10:07,540 --> 00:10:09,940
sekarang izinkan saya menutup aplikasi ini.

121
00:10:10,060 --> 00:10:13,210
Di sana, Anda juga melihat bahwa ini adalah aplikasi mandiri

122
00:10:13,210 --> 00:10:19,210
yang diinstal, jika saya membuka laci aplikasi di sini di perangkat, di sini di simulator, ini adalah aplikasi tempat

123
00:10:19,380 --> 00:10:22,040
yang luar biasa yang Anda lihat di sini.

124
00:10:22,040 --> 00:10:28,920
Jadi jika saya meluncurkan ini, ini sekarang meluncurkan kembali aplikasi yang baru saja kami kerjakan dan ada tempat kami

125
00:10:29,190 --> 00:10:30,330
karena disimpan

126
00:10:30,330 --> 00:10:34,540
di penyimpanan lokal, gambar jelas disimpan pada sistem file jika tidak

127
00:10:34,710 --> 00:10:41,370
kita tidak akan melihatnya dan berfungsi seperti sebelumnya tapi sekarang bukan di dalam klien expo tetapi sebagai aplikasi

128
00:10:41,370 --> 00:10:41,970
mandiri

129
00:10:41,970 --> 00:10:48,300
tanpa bungkus expo, masih menggunakan beberapa API expo dan paket expo dengan bantuan paket unimodules ini yang

130
00:10:48,300 --> 00:10:53,640
secara otomatis ditambahkan dan dikonfigurasikan ke alur kerja kosong yang kami dapatkan di sisi

131
00:10:53,700 --> 00:10:55,080
lain dengan bantuan pengeluaran.

132
00:10:55,080 --> 00:10:57,000
Banyak hal keren terjadi di sana.