1 00:00:02,160 --> 00:00:07,040 Jadi mari kita bekerja pada layar pesanan sekarang dan menghasilkan lebih dari sekedar teks membosankan ini. 2 00:00:07,040 --> 00:00:12,390 Sekarang sama seperti layar keranjang dan layar tinjauan umum produk, saya ingin item pesanan lebih kompleks dan 3 00:00:12,390 --> 00:00:17,970 oleh karena itu saya akan membuat komponen item pesanan terpisah di folder komponen dan ada di folder toko. 4 00:00:18,000 --> 00:00:20,550 Seperti biasa, terserah Anda apakah Anda juga 5 00:00:20,550 --> 00:00:26,420 melakukan itu tetapi karena ini bukan komponen yang super kecil, saya lebih suka memilikinya dalam file terpisah. 6 00:00:26,550 --> 00:00:32,880 Jadi saya akan mengimpor Bereaksi dari Bereaksi di sini dan tidak mengherankan tentu saja mengimpor banyak hal 7 00:00:32,880 --> 00:00:39,660 dari Bereaksi Asli dan itu akan menjadi tampilan, teks, stylesheet karena kita pasti akan mengatur beberapa gaya juga 8 00:00:39,990 --> 00:00:47,100 dan juga tombol karena saya juga ingin dapat memperluas pesanan sehingga kami tidak selalu melihat semua item yang merupakan 9 00:00:47,100 --> 00:00:54,200 bagian dari pesanan tetapi kami dapat melihatnya jika ingin. Sekarang dengan itu, kita dapat membuat item pesanan kita konstan di 10 00:00:54,290 --> 00:01:00,710 sini, sehingga akan menjadi komponen itu sendiri yang menerima alat peraga dan kemudian pada akhirnya akan memiliki tubuhnya di sini dan 11 00:01:00,740 --> 00:01:08,460 mengembalikan beberapa kode jsx dan kita memerlukan objek gaya di sini dengan Stylesheet. buat seperti ini dan 12 00:01:08,520 --> 00:01:13,990 juga ekspor item pesanan sebagai default. 13 00:01:14,070 --> 00:01:16,460 Sekarang bagaimana seharusnya barang pesanan terlihat? 14 00:01:16,470 --> 00:01:23,280 Sekarang seperti biasa, terserah Anda, tetapi saya akan bekerja dengan tampilan di sini dan ide saya adalah bahwa saya selalu menunjukkan seperti 15 00:01:23,280 --> 00:01:29,880 jumlah total pesanan dan tanggal dan kemudian tombol detail acara yang dapat kita tekan untuk melihat masing-masing item yang merupakan bagian 16 00:01:29,880 --> 00:01:35,130 dari pesanan dan untuk barang-barang ini, saya akan benar-benar menggunakan komponen barang keranjang di sini karena saya 17 00:01:35,130 --> 00:01:39,620 ingin membuat barang yang sama persis seperti yang saya tampilkan di dalam kereta. 18 00:01:39,690 --> 00:01:46,190 Jadi saya benar-benar akan mengimpor item keranjang dari komponen item keranjang dan menggunakan kembali komponen itu di sini. 19 00:01:46,380 --> 00:01:48,400 Sekarang kembali ke kode jsx itu, 20 00:01:48,540 --> 00:01:54,110 jadi kami memiliki tampilan pembungkus di sekitar seluruh objek pesanan kami, seluruh entri pesanan kami di sini. 21 00:01:54,270 --> 00:01:58,980 Sekarang di sana, saya ingin memiliki baris pertama dan oleh karena itu saya akan 22 00:01:58,980 --> 00:02:06,660 menggunakan tampilan lain sehingga kita dapat gaya ini dengan tepat yang akan menampung beberapa teks yang menampilkan total kami, jadi jumlah dari urutan itu 23 00:02:06,660 --> 00:02:13,470 katakanlah dan teks lain di mana saya menunjukkan tanggal dan ini harus di baris yang sama dengan spasi di antara mereka. 24 00:02:14,370 --> 00:02:20,660 Di bawah mereka seperti yang saya sebutkan harus berupa tombol yang dapat kita tekan untuk menunjukkan detail yang kemudian menunjukkan semua 25 00:02:20,660 --> 00:02:25,440 item yang merupakan bagian dari pesanan itu. Sekarang dengan pengaturan itu, 26 00:02:25,470 --> 00:02:32,040 tentu saja jelas bahwa jumlah di sini harus diterima dengan bantuan alat peraga. 27 00:02:32,040 --> 00:02:38,100 Jadi di sana saya berharap untuk mendapatkan jumlah prop dan saya akan menelepon untuk memperbaiki 2 untuk menampilkan jumlah tempat 28 00:02:38,100 --> 00:02:40,350 desimal yang sesuai. Sekarang untuk tanggal, 29 00:02:40,350 --> 00:02:49,360 saya ingin menampilkan tanggal alat peraga di sini sehingga kami memiliki tanggal yang dapat kami hasilkan. Untuk penataan, secara keseluruhan di sini saya ingin memiliki penugasan 30 00:02:49,380 --> 00:02:55,860 gaya item pesanan sehingga kita dapat menata seluruh pesanan dan kemudian di sana, kita perlu 31 00:02:55,860 --> 00:03:00,380 seperti katakanlah ringkasan gaya sehingga kita dapat mendesain baris ini 32 00:03:00,450 --> 00:03:09,240 dan mengenai teks di sini, ini seharusnya memiliki gaya katakanlah jumlah total, seperti biasa pengidentifikasi gaya ini terserah Anda, di 33 00:03:09,300 --> 00:03:10,290 sini 34 00:03:10,290 --> 00:03:12,720 saya ingin memiliki gaya tanggal. 35 00:03:16,000 --> 00:03:21,640 Tombol juga harus mendapatkan warna sendiri yang akan saya dapatkan dari warna konstan, oleh karena itu impor ini perlu ditambahkan 36 00:03:21,640 --> 00:03:22,830 dan di sana, 37 00:03:22,840 --> 00:03:26,130 saya akan menggunakan warna primer saya. Oke, jadi itu untuk sekarang, 38 00:03:26,610 --> 00:03:27,430 saya akan 39 00:03:27,450 --> 00:03:29,160 kembali ke detail dalam satu detik, 40 00:03:29,160 --> 00:03:36,380 sekarang mari kita terapkan beberapa styling di sini sehingga kita dapat melihat sesuatu. Untuk item pesanan itu sendiri, saya akan menggunakan 41 00:03:36,480 --> 00:03:43,050 kembali tampilan keranjang yang sudah saya miliki di item produk, jadi saya akan menyalin semua pengaturan 42 00:03:43,050 --> 00:03:46,770 ini dari item produk dan memindahkannya ke item pesanan 43 00:03:46,770 --> 00:03:51,770 sehingga bayangan diterapkan , warna latar belakang, radius batas, semua itu harus diterapkan. 44 00:03:52,010 --> 00:03:57,210 Selain itu, saya akan menambahkan margin 20 di semua arah sehingga setiap item pesanan memiliki beberapa spasi di sekitarnya. 45 00:03:58,790 --> 00:04:03,830 Di dalam item pesanan, saya juga ingin memiliki padding 10 sehingga konten di sana 46 00:04:03,830 --> 00:04:10,800 tidak duduk langsung di tepi perbatasan sekitarnya dan seterusnya. Sekarang untuk ringkasan yang merupakan pandangan ini yang memegang 47 00:04:10,800 --> 00:04:13,700 dua potongan teks, di sana gaya sebenarnya 48 00:04:13,770 --> 00:04:17,940 harus bahwa kita memiliki arah fleksibel dari baris tentu saja karena 49 00:04:17,940 --> 00:04:22,590 item harus duduk bersebelahan. Justifikasi konten harus berupa 50 00:04:22,590 --> 00:04:31,230 ruang antara dan di samping itu, sejajarkan item harus berada di tengah, sehingga pada sumbu silang yang di sini 51 00:04:31,230 --> 00:04:34,280 adalah sumbu vertikal, item berada di tengah. 52 00:04:34,290 --> 00:04:40,160 Saya juga ingin memastikan bahwa kami mengambil lebar penuh yang tersedia di sini untuk mendistribusikan teks. Sekarang untuk jumlah total yang merupakan gaya 53 00:04:40,180 --> 00:04:47,620 yang diterapkan pada potongan teks pertama ini yang menghasilkan jumlah, di sana seperti biasa Anda dapat mengaturnya sesuka Anda, 54 00:04:47,830 --> 00:04:53,350 tetapi saya akan menetapkan keluarga font sans terbuka untuk menggunakan versi huruf tebal dari 55 00:04:53,350 --> 00:05:01,180 font saya dan berikan ukuran font 16 katakanlah dan kemudian untuk tanggal yang merupakan gaya saya saya terapkan ke teks 56 00:05:01,180 --> 00:05:04,630 tanggal di sini, di sana saya pada akhirnya juga 57 00:05:04,630 --> 00:05:10,840 ingin menggunakan ukuran font 16 tetapi keluarga font hanya akan menjadi sans terbuka, tanpa versi tebal 58 00:05:10,840 --> 00:05:12,010 dan di 59 00:05:12,040 --> 00:05:20,800 samping itu, kita juga dapat menggunakan kembali warna abu-abu gelap di sini. Sekarang dengan ini, mari kita coba dan mari kita gunakan 60 00:05:20,810 --> 00:05:24,080 item pesanan itu di layar pesanan. 61 00:05:24,080 --> 00:05:29,480 Jadi di sana, pertama-tama kita perlu mengimpor item pesanan dari dan kemudian tentu saja pergi 62 00:05:29,480 --> 00:05:34,970 ke folder komponen, di sana ke folder toko dan kemudian mengimpor item pesanan dari file item 63 00:05:34,970 --> 00:05:36,520 pesanan itu dan di 64 00:05:36,710 --> 00:05:42,800 sini alih-alih merender teks itu, kita sekarang render item pesanan di sini sebagai tag penutup sendiri dan tentu 65 00:05:42,800 --> 00:05:44,710 saja, kita perlu mengkonfigurasi ini. 66 00:05:44,720 --> 00:05:50,780 Ini mengharuskan kita untuk mengirimkan jumlah dan tanggal dan kemudian juga item detail, sehingga item dalam 67 00:05:50,780 --> 00:05:52,160 urutan tetapi itu 68 00:05:52,190 --> 00:05:54,400 akan datang di langkah kedua. 69 00:05:54,410 --> 00:06:02,120 Jadi untuk sekarang di sini, kita perlu memberikan jumlah dan itu tentu saja hanya itemData. item yang merupakan satu pesanan, jangan lupa kami mengulang-ulang semua 70 00:06:02,120 --> 00:06:03,290 pesanan di 71 00:06:03,290 --> 00:06:07,020 sini yang merupakan array pesanan, jadi itu adalah satu 72 00:06:07,040 --> 00:06:08,260 pesanan dan di 73 00:06:08,720 --> 00:06:15,030 sana, jumlah jika kita melihat model pesanan kami disimpan dalam sebuah bidang jumlah total, tanggal kemudian 74 00:06:15,030 --> 00:06:16,830 disimpan di bidang tanggal. 75 00:06:16,850 --> 00:06:21,980 Jadi di sini kita mengakses bidang jumlah total dan untuk prop tanggal yang juga harus kita lewati, 76 00:06:21,980 --> 00:06:28,070 kita dapat mengakses itemData. barang. tanggal. Jika sekarang kita 77 00:06:28,070 --> 00:06:37,940 menyimpan ini dan kita melihatnya, mari kita tambahkan beberapa konten di sini, pesan ini dan kemudian pergi ke layar pesanan kami dan kami mendapatkan kesalahan ini. 78 00:06:38,030 --> 00:06:42,980 Sekarang ini mengacu pada objek yang tidak valid seperti Bereaksi seharusnya dan menunjukkan kepada 79 00:06:42,980 --> 00:06:50,010 kita bahwa pada akhirnya, itu adalah objek keadaan yang mengalami masalah dan itu masuk akal karena tanggal dalam pesanan kami ketika 80 00:06:50,010 --> 00:06:54,540 kami membuatnya di sini di toko Redux kami adalah tanggal Javascript obyek. 81 00:06:54,650 --> 00:06:58,150 Sekarang kita tidak bisa menampilkan ini sebagai teks seperti itu. Untuk meng-output-nya, kita bisa 82 00:06:58,160 --> 00:07:03,230 masuk ke model kita di sini, yang pada akhirnya cetak biru yang kita gunakan untuk 83 00:07:03,820 --> 00:07:09,830 membuat pesanan dan dalam model pemesanan, kita bisa melakukan sesuatu yang belum pernah kita lakukan sebelumnya, kita bisa 84 00:07:10,070 --> 00:07:15,650 menambahkan metode untuk ini model atau lebih tepatnya, pengambil yang merupakan fitur Javascript default dari Javascript modern. 85 00:07:15,650 --> 00:07:21,200 Jadi di sini, kita dapat menggunakan kata kunci get dan kemudian nama apa pun pilihan Anda seperti tanggal 86 00:07:21,200 --> 00:07:26,330 yang dapat dibaca yang seperti fungsi tetapi bukan fungsi yang Anda panggil seperti fungsi tetapi yang Anda 87 00:07:26,330 --> 00:07:32,600 akses seperti properti pada akhirnya yang mengembalikan nilai yang dihitung dan ada Saya ingin mengembalikan tanggal ini, jadi objek tanggal yang 88 00:07:32,600 --> 00:07:40,100 disimpan untuk objek ini, tetapi kemudian kita dapat memanggil ke string tanggal lokal yang merupakan metode Javascript bawaan yang dapat kita gunakan pada objek tanggal 89 00:07:40,130 --> 00:07:46,790 untuk mengonversi objek ini ke tanggal yang dapat dibaca manusia. Di sana kami mengirimkan bahasa yang ingin 90 00:07:46,790 --> 00:07:52,190 kami optimalkan seperti ini misalnya dan sekarang kami dapat mengonfigurasinya dengan argumen 91 00:07:52,220 --> 00:07:58,100 kedua yang merupakan objek Javascript. Di sana Anda dapat menentukan 92 00:07:58,100 --> 00:08:03,260 bagaimana tahun harus dikonfigurasi dan dilampirkan Anda menemukan dokumen terperinci untuk 93 00:08:03,260 --> 00:08:11,020 metode ini jika Anda ingin mempelajari semua tentang hal itu dan misalnya, kita dapat mengatur tahun 94 00:08:14,470 --> 00:08:22,980 ke numerik, bulan ke panjang, hari ke numerik, jam ke dua digit dan menit juga ke dua digit. 95 00:08:23,160 --> 00:08:28,650 Sekarang kita memiliki properti tanggal yang dapat dibaca yang dapat kita akses pada item pesanan apa pun 96 00:08:29,190 --> 00:08:34,960 dan di sana untuk saat ini di layar pesanan, alih-alih meneruskan objek data seperti ini, saya mengakses tanggal yang 97 00:08:35,010 --> 00:08:41,520 dapat dibaca yang sekarang menjadi properti pengambil baru ini yang kita tambahkan dan sekarang apa Anda akan melihat bahwa jika saya sekali 98 00:08:41,520 --> 00:08:48,960 lagi melakukan pemesanan di sini dengan mengklik pesanan sekarang dan sekarang saya pergi ke pesanan saya, sekarang Anda melihat jumlah total dan tanggal ini diformat 99 00:08:48,960 --> 00:08:55,320 rapi dan sekarang jika saya melakukan hal yang sama di Android dan saya melakukan pemesanan di sini dan saya pergi ke 100 00:08:55,320 --> 00:09:02,130 layar pesanan saya, Anda melihat hal yang sama di sana. Sekarang di sana saya hanya ingin mengubah sedikit tombol itu, 101 00:09:02,130 --> 00:09:09,840 secara umum juga di iOS, seharusnya tidak seluas, tidak seluas di sini. Jadi dalam komponen item pesanan di mana saya memiliki tombol ini, pada 102 00:09:09,840 --> 00:09:21,750 akhirnya apa yang dapat kita lakukan adalah pada tampilan ini di sini, kita dapat menambahkan item align center untuk memusatkan konten di sepanjang sumbu silang yang dibiarkan ke kanan dan oleh karena itu sekarang jika saya mencoba ini lagi dan 103 00:09:21,750 --> 00:09:28,550 saya melakukan pemesanan ini dan saya pergi ke pesanan, Anda lihat ini sekarang tidak dapat ditekan di sana dan itu bahkan lebih jelas 104 00:09:28,550 --> 00:09:32,760 di Android jika kita memuatnya kembali di sana dan saya memesan ini dengan sangat 105 00:09:35,950 --> 00:09:43,060 cepat di sini, buka layar pesanan, sekarang kami memiliki tombol ini. Sekarang tentu saja tujuannya adalah ketika kita 106 00:09:43,060 --> 00:09:50,530 menekan tombol ini, pesanan ini diperluas di sini. Omong-omong, apa yang akan Anda catat di Android adalah 107 00:09:50,530 --> 00:09:53,460 bahwa tanggal ini tidak ditampilkan dengan 108 00:09:53,470 --> 00:09:56,970 benar, jadi itu hal lain yang perlu kami perbaiki. 109 00:09:57,050 --> 00:10:02,240 Sekarang alasan untuk itu tidak ditampilkan dengan benar adalah bagaimana React Native bekerja secara internal, 110 00:10:02,300 --> 00:10:08,810 mesin Javascript yang digunakan secara internal dan yang digunakan untuk Android di sana atau pada platform Android tidak 111 00:10:08,810 --> 00:10:13,980 hanya mendukung metode string tanggal yang bagus yang saya gunakan di sini . 112 00:10:14,180 --> 00:10:17,500 Mesin yang digunakan pada iOS tetapi pada 113 00:10:17,510 --> 00:10:23,030 Android, itu tidak terjadi, yang tentu saja tidak nyaman dan tidak terlalu bagus. 114 00:10:23,030 --> 00:10:26,030 Jadi apa yang bisa kita lakukan pada Android untuk memperbaikinya? 115 00:10:26,030 --> 00:10:34,610 Solusinya adalah menginstal perpustakaan terpisah yang disebut momen. js, kami instal dengan npm install 116 00:10:34,610 --> 00:10:36,440 --save moment. 117 00:10:36,740 --> 00:10:39,580 Ini adalah perpustakaan pihak ketiga yang akan 118 00:10:39,590 --> 00:10:43,830 bekerja pada kedua platform yang membuat format tanggal juga sangat sederhana. 119 00:10:44,420 --> 00:10:47,000 Jadi mari kita tunggu sampai instalasi ini selesai. 120 00:10:47,090 --> 00:10:53,400 Sekarang dengan yang diinstal, Anda mengimpor semuanya sebagai momen dari saat dan dari perpustakaan yang baru saja Anda instal dan 121 00:10:53,570 --> 00:10:56,530 sekarang Anda dapat menggunakannya dalam file ini di sini. 122 00:10:56,540 --> 00:11:03,950 Sekarang kita dapat berkomentar di sini dan sebagai gantinya mengembalikan momen, dieksekusi seperti fungsi dan 123 00:11:03,950 --> 00:11:05,030 meneruskannya. tanggal, 124 00:11:05,050 --> 00:11:12,800 jadi objek tanggal yang ingin kita format dan format panggilan. Sekarang format mengambil string di mana Anda dapat mengkonfigurasi cara memformat ini dan 125 00:11:12,800 --> 00:11:16,880 melampirkan, Anda juga menemukan tautan ke dokumen resmi di mana Anda dapat mempelajari semua 126 00:11:16,880 --> 00:11:19,330 tentang kemungkinan yang Anda miliki di sana. 127 00:11:19,360 --> 00:11:26,760 Sekarang di sini, salah satu contoh, satu cara memformat ini, katakanlah bulan yang panjang yang Anda lakukan 128 00:11:26,770 --> 00:11:34,570 dengan 4 modal Ms, maka o untuk memiliki tanggal yang diformat dengan baik di bulan itu, hari 129 00:11:34,570 --> 00:11:44,730 dalam output bulan, tahun diwakili oleh empat digit dan lalu satu jam selalu diwakili dengan dua digit dan menit dan sekarang jika kita 130 00:11:45,180 --> 00:11:47,160 menyimpan ini dan kita 131 00:11:47,180 --> 00:11:56,250 coba ini, mulai dari iOS, tambahkan ini di sini ke troli, pergi ke troli dan pesan ini dan sekarang pergi 132 00:11:56,250 --> 00:11:57,840 ke pesanan, ini terlihat 133 00:11:57,840 --> 00:11:58,870 baik. 134 00:11:59,040 --> 00:12:02,440 Dan sekarang jika kami mencobanya di Android juga, kami 135 00:12:02,730 --> 00:12:06,860 memesannya dan kemudian kami memesan, sekarang juga terlihat bagus di sana. 136 00:12:06,960 --> 00:12:10,610 Nah, itu sedikit perbaikan, sekarang mari kita bekerja 137 00:12:10,740 --> 00:12:17,220 pada tombol dan memberinya spasi juga selain menyusut ukurannya dan itu dapat dilakukan dengan pergi ke ringkasan 138 00:12:17,220 --> 00:12:22,260 di sini yang gaya berlaku untuk tampilan yang memegang dua potongan teks, ada 139 00:12:22,260 --> 00:12:29,190 kita cukup menambahkan margin di bagian bawah misalkan 15 sehingga kita memiliki jarak antara baris ringkasan yang merupakan 140 00:12:29,190 --> 00:12:36,540 baris teks ini di bagian atas dan tombol di bawahnya. Jadi saya akan menambahkan ini ke keranjang saya di sini, pesan ini, lalu kembali ke sini, pergi ke 141 00:12:36,690 --> 00:12:37,750 pesanan, sekarang ini terlihat bagus. 142 00:12:37,770 --> 00:12:39,300 Sekarang mari kita pastikan 143 00:12:39,300 --> 00:12:41,000 tombol detail acara melakukan sesuatu juga.