1
00:00:02,090 --> 00:00:05,970
Untuk menghindari agar gambar pada akhirnya dihapus, kita perlu

2
00:00:06,140 --> 00:00:11,180
menyimpannya di jalur yang lebih permanen di sistem file perangkat lokal kita.

3
00:00:11,180 --> 00:00:15,350
Tentu saja, kami juga dapat mengunggahnya ke server tetapi kami sudah berbicara tentang layanan dan

4
00:00:15,410 --> 00:00:21,970
seterusnya, di sini saya ingin fokus pada semua kemampuan perangkat asli. Sekarang untuk bekerja dengan sistem file asli kita,

5
00:00:22,100 --> 00:00:23,660
expo telah membuat

6
00:00:23,690 --> 00:00:26,180
kita membahasnya, kita dapat menggunakan

7
00:00:26,270 --> 00:00:32,900
paket sistem file di sini untuk melakukan itu. Anda menginstalnya sama seperti Anda menginstal paket asli lainnya,

8
00:00:32,900 --> 00:00:34,320
dengan expo instal

9
00:00:34,320 --> 00:00:41,470
expo-file-system, jadi mari kita lakukan itu di sini, expo instal, sekali lagi hanya pembungkus di sekitar instalasi npm yang

10
00:00:41,510 --> 00:00:48,950
dapat Anda gunakan sebagai alternatif, Anda hanya perlu memastikan Anda Kami menggunakan versi yang tepat untuk versi SDK expo

11
00:00:48,950 --> 00:00:52,980
yang Anda gunakan dan dengan itu, kami telah menginstalnya, sekarang

12
00:00:53,010 --> 00:00:56,000
kami dapat memindahkan gambar setelah kami mengambilnya.

13
00:00:56,010 --> 00:00:59,080
Sekarang ada berbagai tempat di aplikasi di mana kita

14
00:00:59,160 --> 00:01:04,080
bisa melakukan itu, kita bisa melakukannya di pemetik gambar segera setelah kita mengambil gambar tetapi pada

15
00:01:04,080 --> 00:01:09,720
titik waktu ini, kita belum tahu apakah kita benar-benar akan mengirimkan formulir, jika kami benar-benar menyimpan gambar itu.

16
00:01:09,720 --> 00:01:15,330
Jadi bagaimana jika kita hanya mengambil gambar di sini tapi kemudian kita membuang ini dan kita kembali?

17
00:01:15,330 --> 00:01:20,460
Saya tidak ingin gambar dipindahkan ke tempat permanen dalam kasus itu, itu pasti harus dibersihkan dan

18
00:01:20,460 --> 00:01:24,300
itu adalah perilaku default, jadi saya tidak ingin memindahkannya pada saat

19
00:01:24,300 --> 00:01:25,390
ini, sebagai

20
00:01:25,740 --> 00:01:28,330
gantinya saya ingin memindahkannya setelah kami mengirimkan formulir.

21
00:01:28,560 --> 00:01:32,610
Oleh karena itu kita bisa melakukannya di sini di layar tempat baru, di save place

22
00:01:32,610 --> 00:01:38,280
handler tapi kemudian kita akan menambahkan semua logika sistem file ini ke komponen ini yang mungkin tetapi yang menambahkan banyak

23
00:01:38,280 --> 00:01:41,190
logika ke dalam komponen ini yang saya tidak benar-benar ingin

24
00:01:41,190 --> 00:01:43,930
sudah ada, saya ingin menjaga komponen ini relatif ramping.

25
00:01:44,280 --> 00:01:47,640
Namun tempat yang tepat untuk ini adalah pencipta aksi.

26
00:01:47,730 --> 00:01:53,220
Kami telah menggunakan ini di masa lalu untuk memiliki efek samping, seperti mengirim permintaan HTTP.

27
00:01:53,220 --> 00:01:58,680
Sekarang memindahkan file pada dasarnya adalah kategori yang sama dengan yang kami lakukan, alih-alih mengirim permintaan ke

28
00:01:58,680 --> 00:01:59,180
server,

29
00:01:59,190 --> 00:02:00,200
kami memindahkan file,

30
00:02:00,200 --> 00:02:01,620
nah itu tidak jauh berbeda.

31
00:02:03,390 --> 00:02:12,210
Jadi karena itu di file ini di sini, di tempat-tindakan. js file, saya akan mengimpor semuanya sebagai filesystem dari sistem file

32
00:02:12,210 --> 00:02:19,500
expo, jadi dari paket baru ini kami instal dan di sini di tambah tempat, sekarang saya akan menggunakan

33
00:02:19,500 --> 00:02:26,970
sintaks alternatif pengiriman ini atau memiliki pencipta tindakan yang menggunakan Redux Thunk, di mana kami mengembalikan fungsi internal

34
00:02:26,970 --> 00:02:34,230
di sini yang menerima fungsi pengiriman sebagai argumen sehingga dalam fungsi internal ini, kita dapat mengirim tindakan

35
00:02:34,230 --> 00:02:44,970
ini dengan memanggil pengiriman di sini dan melewati objek tindakan kita dan saya akan menambahkan async di sini sehingga kita dapat menggunakan async menunggu karena kita akan

36
00:02:44,970 --> 00:02:50,670
melakukan beberapa pekerjaan asinkron di sini. Di sini, saya sekarang ingin

37
00:02:50,670 --> 00:02:53,030
memindahkan file, kan?

38
00:02:53,220 --> 00:02:58,980
Jadi untuk itu, saya ingin menggunakan paket sistem file ini. Sekarang memindahkan file sebenarnya melibatkan beberapa

39
00:02:58,980 --> 00:03:00,060
hal.

40
00:03:00,060 --> 00:03:05,160
Pertama-tama, kita perlu mendapatkan path baru dari file tersebut dan itu tentu

41
00:03:05,160 --> 00:03:12,270
saja harus menjadi direktori yang lebih permanen. Untuk itu, kita dapat menggunakan sistem file dan di sana, Anda memiliki beberapa direktori yang dapat Anda akses.

42
00:03:12,270 --> 00:03:16,980
Anda mendapat direktori cache yang sebenarnya adalah direktori di mana file tersebut

43
00:03:16,980 --> 00:03:25,200
sudah disimpan di luar kotak, direktori bundel yang sebenarnya bukan direktori yang baik untuk menyimpan file yang digunakan aplikasi Anda, tetapi

44
00:03:25,200 --> 00:03:28,080
Anda juga mendapat direktori dokumen, ini

45
00:03:28,080 --> 00:03:34,140
adalah direktori utama untuk semua file yang dibutuhkan aplikasi Anda yang dijamin untuk bertahan hidup.

46
00:03:34,140 --> 00:03:38,000
Sekarang ketika Anda menghapus aplikasi Anda, folder ini juga akan dihapus,

47
00:03:38,010 --> 00:03:45,540
sehingga file-file ini hilang tetapi sampai saat itu, mereka akan bertahan di seluruh restart aplikasi, melintasi jeda panjang di mana orang belum

48
00:03:45,540 --> 00:03:47,070
menggunakan aplikasi Anda,

49
00:03:47,400 --> 00:03:49,470
jadi di sini file akan bertahan.

50
00:03:50,220 --> 00:03:55,620
Jadi direktori dokumen sistem file adalah jalur yang ingin saya pindahkan file saya dan sekarang ada satu

51
00:03:55,620 --> 00:04:01,570
hal penting yang perlu diketahui, jalur Anda juga perlu menyertakan nama file yang ingin Anda gunakan di masa depan.

52
00:04:01,710 --> 00:04:07,410
Tentu saja, Anda juga mendapatkan nama file sementara ketika Anda mengambil gambar tetapi ketika Anda memindahkan file, nama ini sebenarnya tidak disimpan di luar

53
00:04:07,410 --> 00:04:14,570
kotak, alih-alih itu akan menganggap jalur ini di sini sebagai nama yang bisa dikatakan. Jadi karena itu ini seharusnya tidak hanya menjadi

54
00:04:14,570 --> 00:04:18,050
pointer di folder yang ingin Anda pindahkan file,

55
00:04:18,150 --> 00:04:20,990
itu juga harus menyertakan nama file.

56
00:04:21,060 --> 00:04:24,530
Sekarang untuk itu, saya senang dengan menjaga nama gambar yang

57
00:04:24,540 --> 00:04:31,220
di-autogenerasi, tentu saja Anda juga bisa sekarang menghasilkan nama gambar unik Anda sendiri di sini, tetapi untuk itu, saya akan mengambil

58
00:04:31,290 --> 00:04:33,560
nama file dari gambar yang saya

59
00:04:33,570 --> 00:04:38,120
dapatkan di sini, perlu diingat gambar di sini adalah jalan, jalur sementara ke gambar.

60
00:04:38,160 --> 00:04:44,880
Jadi di sini, saya akan benar-benar menggunakan gambar yang merupakan string dan panggilan split pada ini untuk membaginya

61
00:04:44,880 --> 00:04:52,440
dengan garis miring karena jalur ini tentu saja melibatkan beberapa garis miring pada akhirnya dan split mengubah string ini menjadi array

62
00:04:52,440 --> 00:04:58,620
segmen string di mana setiap segmen adalah segmen sebelum dan sesudah slash di string dan di sana

63
00:04:59,040 --> 00:05:00,420
dengan memanggil pop,

64
00:05:00,420 --> 00:05:01,850
saya mendapatkan segmen terakhir.

65
00:05:01,860 --> 00:05:09,090
Jadi apa yang dilakukan kode ini di sini adalah melihat jalur gambar kita, membaginya dengan memangkas jenis apa yang membentuk

66
00:05:09,300 --> 00:05:13,140
jalur penuh kita di sana dan dengan membuka elemen terakhir, nah

67
00:05:13,140 --> 00:05:15,830
apa elemen terakhir? Itu nama file

68
00:05:15,870 --> 00:05:26,060
kami, benar, jadi jika Anda memiliki path seperti folder / gambar lain. jpg, lalu apa yang kita lakukan dengan split adalah kita

69
00:05:26,060 --> 00:05:34,880
mendapatkan array dengan beberapa folder dan dengan myimage. jpg dan dengan memanggil pop pada ini, kita mendapatkan

70
00:05:35,180 --> 00:05:36,920
myimage. jpg, jadi

71
00:05:36,950 --> 00:05:39,250
itulah yang kita dapatkan di sini.

72
00:05:40,590 --> 00:05:42,630
Jadi ini akan mengembalikan nama file

73
00:05:42,630 --> 00:05:49,300
kita, potongan kode ini di sini dan sekarang kita dapat menambahkan ini di sini ke jalur kita dengan hanya menambahkannya seperti ini.

74
00:05:49,320 --> 00:05:53,730
Jadi sekarang ini menghasilkan path yang keduanya termasuk folder dan kemudian nama file.

75
00:05:53,730 --> 00:06:00,900
Di sinilah saya ingin memindahkan file itu dan sekarang kita dapat memindahkannya dengan mengakses FileSystem. moveAsync.

76
00:06:00,990 --> 00:06:04,130
Itu adalah metode yang memindahkan file dari a ke b dan

77
00:06:04,260 --> 00:06:09,540
itu juga menggunakan janji karena memindahkan file itu bisa memakan waktu sedikit lebih lama dan karena itu akan memberi tahu

78
00:06:09,540 --> 00:06:10,730
kita ketika sudah selesai.

79
00:06:11,750 --> 00:06:18,100
Sekarang memindahkan async mengambil objek dengan dua potong informasi - dari dan yang cukup mudah

80
00:06:18,140 --> 00:06:19,010
saya kira.

81
00:06:19,010 --> 00:06:25,070
Jadi dari adalah gambar karena gambar adalah jalur ke direktori sementara, jadi dari situ, dari situlah file saat ini

82
00:06:25,070 --> 00:06:32,290
duduk dan tentu saja adalah jalur baru kita, seperti ini. Sekarang seperti yang saya katakan, ini mengembalikan

83
00:06:32,290 --> 00:06:36,420
janji sehingga kita bisa menunggu ini dan hanya itu.

84
00:06:36,430 --> 00:06:41,200
Sekarang kita harus membungkus ini menjadi blok coba tangkap karena ini bisa gagal

85
00:06:41,200 --> 00:06:48,090
karena misalnya tidak ada cukup ruang pada perangkat atau entah bagaimana kita memiliki kesalahan izin atau hal lain salah.

86
00:06:48,160 --> 00:06:55,690
Jadi kita harus mencoba menangkap tindakan filesystem kita karena operasi pada filesystem selalu dapat gagal dan di sana kita mungkin ingin

87
00:06:55,690 --> 00:06:56,400
melakukan

88
00:06:56,620 --> 00:06:59,520
sesuatu, di sini saya mencatat kesalahan dan saya

89
00:06:59,530 --> 00:07:04,680
rethrowing tetapi tentu saja Anda dapat melakukan hal-hal lain di sana sebagai baik, Anda dapat

90
00:07:04,690 --> 00:07:09,310
menyimpan ini di server analytics Anda sendiri, apa pun yang perlu Anda lakukan.

91
00:07:09,610 --> 00:07:15,100
Sekarang Anda akhirnya mungkin ingin menangani ini dalam komponen juga untuk menunjukkan peringatan di sana, saya tidak

92
00:07:15,100 --> 00:07:20,650
akan melakukannya tetapi Anda akan menanganinya dengan cara yang sama seperti yang Anda lakukan misalnya menangani kesalahan

93
00:07:20,650 --> 00:07:22,160
HTTP yang merupakan sesuatu

94
00:07:22,200 --> 00:07:24,040
yang saya lihat di modul HTTP.

95
00:07:24,040 --> 00:07:28,980
Jadi di sini, kami mengasumsikan bahwa ini sebagian besar akan berhasil atau ini akan selalu berhasil dan kami

96
00:07:29,050 --> 00:07:31,350
sedang memindahkan file. Sekarang setelah

97
00:07:31,420 --> 00:07:34,870
dipindahkan, kita tahu itu akan berada di jalur baru,

98
00:07:34,900 --> 00:07:41,140
jadi tentu saja itu jalur baru yang sekarang ingin saya simpan di sini di data tempat

99
00:07:41,140 --> 00:07:46,320
saya atau di toko Redux saya. Itu semua bagus, ini seharusnya

100
00:07:46,330 --> 00:07:50,040
menyimpan gambar kita di direktori permanen tetapi yang

101
00:07:50,140 --> 00:07:56,110
tidak kita lakukan adalah kita tidak menyimpan data kita sendiri di tempat permanen.

102
00:07:56,110 --> 00:08:01,510
Kami tentu saja menggunakan Redux di sini dan itu berarti itu disimpan dalam memori tetapi setiap kali kami

103
00:08:01,510 --> 00:08:08,010
menutup dan memulai ulang aplikasi kami, semua data kami akan hilang karena itu tidak disimpan di perangkat atau di server atau di

104
00:08:08,010 --> 00:08:12,730
database, itu hanya di memori yang aktif selama aplikasi kami berjalan dan setelah itu dihapus.

105
00:08:12,730 --> 00:08:19,630
Jadi sebagai langkah selanjutnya, saya ingin menunjukkan kepada Anda cara menggunakan SQLite yang merupakan basis data perangkat, keduanya tersedia di iOS

106
00:08:19,630 --> 00:08:25,360
dan Android, untuk menyimpan lebih dari sekadar file tetapi juga menyimpan data kami, seperti judul dan jalur

107
00:08:25,360 --> 00:08:26,800
gambar dan begitu seterusnya.