1 00:00:02,340 --> 00:00:07,350 Jadi sekarang saya juga ingin menampilkan pratinjau peta kecil di sini dan tentu saja ada berbagai cara untuk 2 00:00:07,350 --> 00:00:11,000 melakukannya dan nanti kami juga akan menambahkan peta interaktif ke aplikasi ini. 3 00:00:11,010 --> 00:00:12,970 Untuk saat ini, saya hanya ingin 4 00:00:12,960 --> 00:00:19,570 memiliki gambar statis, jadi seperti snapshot peta dan yang keren adalah Google memiliki API untuk kami yang menghasilkan snapshot seperti itu. 5 00:00:19,620 --> 00:00:24,810 Anda dapat google untuk Google Maps API statis untuk menemukan dokumentasi resmi di mana Anda dapat 6 00:00:24,810 --> 00:00:26,010 mempelajari semua itu 7 00:00:26,190 --> 00:00:29,340 tentu saja dan pada akhirnya, menggunakan API itu sangat mudah. 8 00:00:29,400 --> 00:00:35,820 Anda hanya perlu mengirim permintaan ke URL ini dan ini sudah memberi Anda kembali gambar, jadi 9 00:00:35,820 --> 00:00:40,650 Anda bisa menggunakan tautan ini pada komponen gambar dan Anda baik-baik saja. 10 00:00:40,650 --> 00:00:46,740 Satu-satunya hal yang rumit di sini adalah hal kunci API ini, di sana Anda memerlukan kredensial API Anda 11 00:00:46,740 --> 00:00:49,300 dan untuk itu, Anda memerlukan kunci API. 12 00:00:49,410 --> 00:00:55,590 Sekarang untuk ini, Anda cukup mengklik pada kunci API Anda di sini dan menghasilkan satu dan sekarang Anda dapat 13 00:00:55,590 --> 00:00:59,660 memilih proyek yang sudah Anda miliki atau Anda membuat proyek baru 14 00:00:59,670 --> 00:01:05,220 dan untuk itu Anda perlu membatalkan di sini dan bukannya gulir ke bawah sedikit lebih jauh ke 15 00:01:05,250 --> 00:01:10,110 ini untuk memulai, aktifkan bagian API di sini dan klik untuk memulai di sini. 16 00:01:10,110 --> 00:01:15,840 Sekarang setelah Anda melakukannya, Anda akan dibawa ke konsol platform Google Maps di mana 17 00:01:15,840 --> 00:01:21,930 Anda sekarang dapat mengaktifkan berbagai fitur Google Maps yang ingin Anda gunakan dan di sini, saya 18 00:01:21,930 --> 00:01:29,590 tertarik pada peta yang nantinya akan membantu kami menggunakan aplikasi dinamis interaktif ini di Android dan saya tertarik pada tempat. 19 00:01:29,670 --> 00:01:31,420 Jadi kedua hal ini harus diperiksa, 20 00:01:31,470 --> 00:01:36,430 kita tidak perlu rute karena kita tidak membangun fitur navigasi di sini dan dengan itu, kita dapat mengklik 21 00:01:36,430 --> 00:01:40,600 lanjutkan, pilih proyek dan sekarang baik pilih proyek yang sudah ada atau cukup buat yang 22 00:01:40,600 --> 00:01:45,820 baru satu dan saya akan membuat yang baru di sini dan beri nama Bereaksi Panduan Lengkap tetapi Anda dapat 23 00:01:45,820 --> 00:01:47,560 memberi nama apa pun yang 24 00:01:50,460 --> 00:01:53,370 Anda inginkan, klik berikutnya di sini dan tunggu ini dihasilkan. 25 00:01:53,370 --> 00:01:57,320 Ini seharusnya relatif cepat dan sekarang kami khawatir tentang harga saat 26 00:01:57,360 --> 00:01:58,680 ini sedang dimuat. 27 00:01:58,770 --> 00:02:02,970 Anda biasanya dapat menggunakan ini secara gratis tetapi Anda memerlukan akun penagihan dan itulah 28 00:02:02,970 --> 00:02:04,740 yang saya minta di sini. 29 00:02:04,770 --> 00:02:06,080 Anda tentu saja 30 00:02:06,150 --> 00:02:09,930 memerlukan akun Google dan di akun Google ini, Anda harus memiliki 31 00:02:09,930 --> 00:02:13,570 kartu kredit untuk menggunakannya, jika tidak, sayangnya Anda tidak dapat menggunakannya. 32 00:02:13,590 --> 00:02:15,180 Jadi Anda memerlukan kartu kredit, 33 00:02:15,180 --> 00:02:19,590 Anda harus memiliki akun penagihan yang diatur di akun Google Anda dan kemudian Anda dapat menggunakan 34 00:02:19,590 --> 00:02:26,100 akun google login ini untuk proyek ini yang saya lakukan di sini. Dengan itu diaktifkan, Anda masih dapat menggunakannya secara gratis, Anda 35 00:02:26,160 --> 00:02:28,550 mendapatkan tingkat gratis yang sangat murah 36 00:02:28,550 --> 00:02:33,570 hati dan terlampir Anda menemukan tautan ke harga platform Google Maps dan hanya jika Anda 37 00:02:33,810 --> 00:02:39,540 melanggar batas-batas tertentu yang tidak akan kami langgar untuk sedikit penggunaan yang kami miliki di sini di video 38 00:02:39,540 --> 00:02:43,200 ini, hanya jika Anda akan melanggar batas ini Anda akan membayar. 39 00:02:43,200 --> 00:02:47,520 Sekarang tetap sadar bahwa mungkin ada titik di mana Anda harus membayar dan 40 00:02:47,520 --> 00:02:52,340 itu tergantung pada seberapa banyak Anda menggunakan API dan karena itu pasti memeriksa dokumen penetapan harga. 41 00:02:52,380 --> 00:02:57,190 Sekarang di sini, saya sudah mengaktifkan semuanya dan saya baru saja menyelesaikan ini 42 00:02:57,300 --> 00:03:03,160 dan pada akhirnya, Anda akan dihadapkan dengan kunci API yang tentu saja saya akan membatalkan setelah rekaman ini. 43 00:03:03,180 --> 00:03:06,440 Jadi Anda tidak dapat menggunakan milik saya tetapi Anda harus 44 00:03:06,460 --> 00:03:11,610 mengambil milik Anda dan sekarang ini adalah kunci API yang perlu Anda masukkan di sini ke URL ini. 45 00:03:11,670 --> 00:03:18,150 Jadi sekarang saya hanya akan menyalin seluruh URL ini di sini dan memindahkannya ke dalam kode kami dan di sana, 46 00:03:18,210 --> 00:03:23,790 saya sekarang ingin menampilkan gambar di sini yang menunjuk pada URL itu karena seperti yang saya sebutkan, 47 00:03:23,790 --> 00:03:27,900 ini adalah bagaimana Anda bisa mendapatkan gambar ini, URL ini mengembalikan gambar. 48 00:03:27,900 --> 00:03:33,390 Sekarang yang akan saya lakukan adalah saya akan membuat komponen baru di sini yang akan saya beri nama MapPreview. js karena saya juga akan menggunakannya 49 00:03:33,390 --> 00:03:39,090 di tempat lain dari aplikasi nanti di mana saya mengimpor Bereaksi dari Bereaksi 50 00:03:39,180 --> 00:03:44,890 dan di mana saya kemudian mengimpor gambar dan stylesheet dari Bereaksi Asli, seperti ini. 51 00:03:47,620 --> 00:03:55,180 Kemudian di sini, saya akan membuat komponen pratinjau peta saya yang menerima alat peraga tentu saja tidak mengejutkan, yang perlu mengembalikan beberapa 52 00:03:55,180 --> 00:04:02,310 jsx nanti dan mengatur beberapa gaya di sini dengan Stylesheet. buat dan tentu 53 00:04:04,970 --> 00:04:11,600 saja juga ekspor komponen pratinjau peta ini. 54 00:04:12,050 --> 00:04:16,430 Sekarang di sini, saya ingin membuat URL ini yang baru saja saya bicarakan, 55 00:04:17,660 --> 00:04:26,870 jadi di sini URL pratinjau gambar harus dibuat dan itu dapat dilakukan dengan menggunakan back ticks di sini sehingga saya dapat menambahkan konten dinamis ke dalam teks 56 00:04:26,900 --> 00:04:32,540 dengan mudah dan kemudian menyalinnya URL yang baru saja Anda salin dari dokumentasi di sini, pastikan 57 00:04:32,540 --> 00:04:34,110 semuanya dalam satu 58 00:04:34,190 --> 00:04:37,790 baris karena secara default tidak, jadi pastikan semuanya dalam satu 59 00:04:37,790 --> 00:04:40,360 baris jika tidak, ini tidak akan berfungsi 60 00:04:40,370 --> 00:04:42,460 dan sekarang tentu saja ada beberapa 61 00:04:42,460 --> 00:04:44,590 segmen yang perlu Anda lakukan. ganti, 62 00:04:44,600 --> 00:04:50,210 misalnya di sini, bagian tengah sama dengan bagian. Secara default, ini menunjuk ke Jembatan Brooklyn dan Anda 63 00:04:50,270 --> 00:04:55,100 dapat memasukkan alamat di sini tetapi Anda juga dapat memasukkan pasangan garis lintang dan bujur di sini. 64 00:04:55,100 --> 00:05:01,820 Jadi yang akan saya lakukan di sini adalah saya akan secara dinamis menambahkan dua informasi di sini yang dipisahkan oleh koma dan yang pertama 65 00:05:01,820 --> 00:05:04,090 adalah garis lintang. Di sini saya 66 00:05:04,100 --> 00:05:06,680 berharap untuk mendapatkan ini pada alat peraga 67 00:05:06,680 --> 00:05:12,100 saya, saya berharap untuk mendapatkan alat peraga lokasi dan tentu saja ini bisa menjadi nama 68 00:05:12,110 --> 00:05:20,600 alat peraga pilihan Anda yang kemudian harus memiliki kunci lat dan di sini, saya ingin memiliki kunci panjang, kunci lng juga, sehingga akan menjadi 69 00:05:20,660 --> 00:05:21,610 lintang 70 00:05:21,620 --> 00:05:27,130 dan bujur dari lokasi yang ingin saya pratinjau. Sekarang faktor pembesaran, saya akan mengatur ini 71 00:05:27,200 --> 00:05:33,110 menjadi 14, Anda dapat bereksperimen dengan berbagai faktor, ini pada dasarnya mempengaruhi seberapa jauh peta diperbesar atau diperkecil. 72 00:05:33,170 --> 00:05:36,350 Anda juga dapat bermain-main dengan ukuran Anda di sini. 73 00:05:36,360 --> 00:05:42,230 Sekarang karena saya akan memiliki wadah pratinjau peta yang biasanya akan saya gunakan dengan ketinggian 200, 74 00:05:42,230 --> 00:05:48,520 saya akan mengatur ketinggian menjadi 200 di sini dan karenanya saya akan mengatur lebarnya menjadi 400 di sini. 75 00:05:48,740 --> 00:05:55,640 Tentu saja, Anda dapat menggunakan ukuran yang lebih besar di sini daripada yang akan Anda gunakan untuk wadah untuk menampilkan gambar nanti, 76 00:05:55,640 --> 00:06:01,610 hanya perlu diketahui bahwa jika Anda mengambil gambar super besar di sini, tentu saja akan terlalu besar, terlalu 77 00:06:01,610 --> 00:06:06,290 banyak data untuk unduh, ini akan memuat lebih lambat dan Anda mungkin tidak membutuhkannya. 78 00:06:06,350 --> 00:06:12,260 Jadi Anda harus membidik ukuran gambar peta di sini yang sesuai dengan wadah tempat Anda ingin menampilkannya, tidak 79 00:06:12,260 --> 00:06:18,740 harus dengan ukuran yang sama persis tetapi secara kasar. Sekarang tipe peta adalah bagaimana peta harus ditampilkan, Anda bisa menggunakan satelit 80 00:06:18,740 --> 00:06:23,990 di sini tapi saya akan tetap berpegang pada peta jalan standar dan sekarang Anda juga dapat menambahkan penanda ke 81 00:06:23,990 --> 00:06:24,870 peta itu. 82 00:06:24,950 --> 00:06:27,840 Sekarang ada beberapa spidol yang diatur dalam cuplikan 83 00:06:28,040 --> 00:06:34,700 boneka ini, saya akan singkirkan semuanya tetapi satu sehingga saya hanya memiliki spidol di sini, warna merah, label a, 84 00:06:34,700 --> 00:06:35,600 ini bisa 85 00:06:35,630 --> 00:06:37,220 menjadi karakter tunggal di sini 86 00:06:37,220 --> 00:06:42,890 seperti ABC dan kemudian lintang dan bujur tempat penanda ini harus ditempatkan dan tentu saja, itu 87 00:06:42,890 --> 00:06:46,440 lagi alat peraga. lokasi. lat dan kemudian di 88 00:06:46,490 --> 00:06:53,960 sini koma dan sesudahnya, ganti nomor ini dengan alat peraga. lokasi. lng. 89 00:06:54,470 --> 00:07:01,500 Menempatkan spidol seperti itu opsional tapi tentu saja, saya ingin menunjukkan kepada pengguna di mana ini. 90 00:07:01,740 --> 00:07:09,360 Sekarang saya perlu kunci API, jadi saya akan menyalin kunci ini yang dibuat di sini dan ganti di sini. 91 00:07:09,480 --> 00:07:14,610 Sekarang saya tidak dapat menempelkannya seperti ini tetapi sebenarnya, saya ingin mengelola ini dalam file yang terpisah 92 00:07:14,610 --> 00:07:18,490 karena saya akan menggunakan kunci API di tempat lain dari aplikasi juga. 93 00:07:18,570 --> 00:07:24,180 Jadi di sini, saya akan membuat file baru yang akan saya beri nama env. js untuk lingkungan untuk mengatur beberapa 94 00:07:24,870 --> 00:07:34,970 variabel lingkungan dan di sana saya akan mengatur objek dengan kunci Google API saya dan yang seharusnya menjadi nilai ini di sini dan 95 00:07:34,970 --> 00:07:44,820 kemudian saya dapat mengekspor ini dan tentu saja karena itu, yang harus memiliki nama, vars sama dengan dan maka saya mengekspor vars 96 00:07:44,820 --> 00:07:45,980 di sini. 97 00:07:46,050 --> 00:07:51,000 Jadi dengan itu, saya cukup mengimpor dari file env itu dan itulah yang 98 00:07:51,000 --> 00:08:02,300 akan saya lakukan di sini, mengimpor env dari file env di sini dan itu hanya singkatan dari variabel lingkungan seperti yang saya katakan dan sekarang secara dinamis menyuntikkan ini di 99 00:08:02,300 --> 00:08:03,110 sini. 100 00:08:03,110 --> 00:08:07,670 Jadi sekarang kita memiliki satu tempat di mana kita dapat mengubah kunci itu dan di mana kita juga dapat 101 00:08:07,670 --> 00:08:09,550 mengimpornya dari semua tempat aplikasi yang berbeda. 102 00:08:09,590 --> 00:08:14,900 Jadi di sini saya akan secara dinamis menyuntikkan env. googleapikey. 103 00:08:15,010 --> 00:08:17,900 Jadi dengan itu, saya mengatur URL pratinjau 104 00:08:18,100 --> 00:08:23,550 gambar, sekarang dalam komponen ini, kita tentu saja harus mengembalikan pratinjau gambar dan itu umumnya 105 00:08:23,560 --> 00:08:30,250 adalah tampilan yang saya miliki di sini di pemilih lokasi. Jadi saya akan mengambilnya dari sana dan menambahkannya 106 00:08:31,500 --> 00:08:35,130 di pratinjau peta, seperti ini, meskipun konten mundur di sana, 107 00:08:35,130 --> 00:08:41,790 saya sebenarnya ingin meneruskannya dari luar, jadi saya akan memotong ini lagi dan memindahkannya kembali ke pemetik 108 00:08:41,790 --> 00:08:42,420 lokasi. 109 00:08:42,420 --> 00:08:44,370 Namun tidak seperti ini tetapi sebaliknya 110 00:08:45,180 --> 00:08:53,440 di sini, impor komponen pratinjau peta yang baru ditambahkan ini, jadi imporlah dari. / MapPreview, jadi komponen baru ini sedang kami 111 00:08:53,480 --> 00:08:55,910 kerjakan, tambahkan ini di 112 00:08:56,030 --> 00:08:57,960 sini, pratinjau peta 113 00:08:58,220 --> 00:09:05,240 dan kemudian periksa ini untuk pengambilan ini dan indikator serta teks cadangan di sini. 114 00:09:05,270 --> 00:09:12,250 Jadi dalam pratinjau peta, oleh karena itu saya hanya akan memiliki alat peraga anak-anak di sini untuk menampilkan apa yang ditambahkan antara 115 00:09:12,250 --> 00:09:15,480 tag pembuka dan penutup tetapi itu hanya konten cadangan, tentu 116 00:09:15,480 --> 00:09:21,760 saja saya peduli tentang menghasilkan pratinjau nyata di sini. Sekarang untuk itu kita harus memastikan bahwa URL 117 00:09:21,820 --> 00:09:28,190 pratinjau gambar sebenarnya juga bisa kosong jika belum ada tempat yang dipilih, jadi saya akan membuat URL pratinjau 118 00:09:28,220 --> 00:09:30,610 gambar variabel dan hanya menetapkan nilai 119 00:09:30,610 --> 00:09:37,990 di sini dan saya ingin memberikan nilai jika alat peraga. lokasi diatur karena itu juga tidak dapat diatur jika kita 120 00:09:37,990 --> 00:09:44,980 belum memilih lokasi dan sekarang URL pratinjau gambar kosong atau URL ini tergantung pada apakah kita memiliki lokasi yang 121 00:09:44,980 --> 00:09:51,400 dilewati pada prop lokasi dan sekarang kita dapat menggunakan ini di sana untuk menampilkan sesuatu dan omong-omong 122 00:09:51,400 --> 00:09:52,220 karena saya 123 00:09:52,220 --> 00:09:56,020 menggunakan view di sini, tentu saja kita juga harus memastikan 124 00:09:56,020 --> 00:09:57,640 bahwa kita mengimpor view. 125 00:09:57,870 --> 00:09:59,290 Sekarang bagaimana saya menggunakan URL ini? 126 00:09:59,310 --> 00:10:02,160 Nah jika kita memilikinya, saya ingin menggunakannya untuk 127 00:10:02,160 --> 00:10:06,170 menampilkan gambar, kalau tidak saya akan menunjukkan ini alat bantu anak-anak konten mundur. 128 00:10:06,240 --> 00:10:08,580 Jadi di sini kita dapat memeriksa 129 00:10:08,580 --> 00:10:10,140 alat peraga. lokasi, jika itu 130 00:10:10,140 --> 00:10:12,230 diatur saya tahu saya akan memiliki 131 00:10:12,240 --> 00:10:18,600 URL gambar juga, kita tentu saja bisa juga memeriksa keberadaan URL gambar dan jika ini diatur, saya akan menampilkan gambar 132 00:10:18,600 --> 00:10:19,260 di 133 00:10:19,260 --> 00:10:25,200 sini, jika tidak diatur, saya akan alat peraga keluaran anak-anak seperti ini, jadi saya akan menampilkan konten cadangan saya. 134 00:10:26,110 --> 00:10:29,960 Sekarang gambar di sini akan menerima beberapa gaya, 135 00:10:30,040 --> 00:10:39,650 gambar peta dan sumber dan sumber di sini mengambil URI yang menunjuk pada URL pratinjau gambar karena itu akan menjadi URL 136 00:10:39,650 --> 00:10:42,010 jaringan, gambar jaringan, kan? 137 00:10:43,000 --> 00:10:46,330 Jadi sekarang mari kita bawa gaya dari pemilih 138 00:10:46,390 --> 00:10:54,520 lokasi, saya bisa mengambil pratinjau peta tapi saya hanya ingin membawa bagian pembenaran konten dan benar-benar meneruskan sisanya secara manual di sini 139 00:10:54,520 --> 00:11:01,390 dan menggabungkannya, jadi saya akan tetap meneruskan gaya . MapPreview dari dalam pemilih lokasi saya dan di pratinjau peta, sekarang saya ingin 140 00:11:01,390 --> 00:11:07,300 menggabungkan ini dengan gaya saya yang saya atur di sini. Jadi di sini saya akan benar-benar membungkus ini menjadi 141 00:11:07,300 --> 00:11:13,270 objek di mana saya menarik semua gaya yang diatur dalam pratinjau peta di sini dan menggabungkan semua gaya 142 00:11:13,270 --> 00:11:19,240 yang diatur pada prop gaya ini sehingga kami dapat mengatur gaya dari luar juga dan menggabungkannya dengan gaya 143 00:11:19,240 --> 00:11:26,980 internal kami dan sekarang untuk gaya internal pada pratinjau peta, seperti yang baru saja saya katakan, saya akan membenarkan konten dan menyelaraskan item di 144 00:11:26,980 --> 00:11:29,050 sini dan untuk gambar itu sendiri, 145 00:11:29,200 --> 00:11:30,850 jadi untuk gambar peta, 146 00:11:30,910 --> 00:11:37,020 di sana saya ingin mengatur ini untuk mengambil semua lebar dan tinggi yang tersedia dapat diperoleh dan kita perlu 147 00:11:37,040 --> 00:11:41,410 mengatur ini karena ini adalah gambar jaringan. Seperti yang Anda pelajari, untuk itu Anda perlu mengatur 148 00:11:41,410 --> 00:11:43,040 lebar dan tinggi komponen gambar. 149 00:11:44,710 --> 00:11:51,040 Sekarang dengan itu, kita memiliki komponen pratinjau peta yang menampilkan gambar peta ini atau 150 00:11:51,040 --> 00:11:53,690 konten mundur kami yang dilewatkan 151 00:11:53,920 --> 00:11:57,640 dari luar dan melakukannya dengan memeriksa prop lokasi. 152 00:11:57,640 --> 00:12:02,950 Jadi di tempat di mana kita menggunakan komponen pratinjau peta yang tentu 153 00:12:02,950 --> 00:12:07,330 saja adalah pemilih lokasi, kita harus melewati prop lokasi ini 154 00:12:07,330 --> 00:12:15,190 dan prop lokasi, jika kita memeriksa pratinjau peta, pada akhirnya harus menjadi objek dengan garis lintang dan bujur 155 00:12:15,190 --> 00:12:19,840 atau tombol lat dan lng. Jadi karena itu kembali ke 156 00:12:19,910 --> 00:12:25,610 lokasi picker, saya ingin memberikan prop di sini dan memang, itulah yang kami kelola di 157 00:12:25,610 --> 00:12:32,870 sini dengan lokasi pick yang tentu saja bukan kebetulan. Itu adalah objek dengan lintang dan bujur atau itu tidak terdefinisi 158 00:12:33,050 --> 00:12:36,300 pada awalnya dan kami menangani kasus ini di komponen 159 00:12:36,410 --> 00:12:41,060 pratinjau peta juga, jika tidak terdefinisi, kami hanya menunjukkan konten mundur yang dilewatkan dari luar. 160 00:12:41,060 --> 00:12:46,880 Jadi untuk lokasi, kita bisa lewat di lokasi yang dipilih dan dengan itu, kita sekarang harus memiliki 161 00:12:46,880 --> 00:12:50,150 pengaturan di mana kita benar-benar dapat melihat pratinjau tempat. 162 00:12:50,630 --> 00:12:52,490 Jadi sekarang di sini, kita melihat konten 163 00:12:52,520 --> 00:12:59,120 fallback tetapi jika saya sekarang klik pada get user location, kita melihat spinner dan kemudian kita melihat snapshot nyata dari tempat yang 164 00:12:59,150 --> 00:13:00,010 kita pilih. 165 00:13:00,080 --> 00:13:02,180 Seperti yang saya sebutkan, ini bukan tempat saya duduk sekarang, ini 166 00:13:02,180 --> 00:13:05,930 hanya tempat boneka yang diberikan emulator kepada kita. Hal yang sama pada Android, 167 00:13:05,930 --> 00:13:08,370 jika saya mengambil lokasi di sini, sekarang 168 00:13:08,370 --> 00:13:12,140 ini sebenarnya kantor pusat Google yang saya pilih secara default di sana. 169 00:13:12,880 --> 00:13:17,370 Jadi ini berfungsi, sekarang sebagai langkah selanjutnya, saya ingin memastikan 170 00:13:17,410 --> 00:13:22,570 bahwa kami juga dapat memilih tempat ini di peta, bukan hanya mencari kami.