1 00:00:02,340 --> 00:00:07,350 Agora, agora, também quero exibir uma pequena visualização do mapa aqui, e há diferentes maneiras de fazer 2 00:00:07,350 --> 00:00:11,000 isso, é claro. Depois, adicionaremos um mapa interativo a esse aplicativo. 3 00:00:11,010 --> 00:00:12,970 Por enquanto, eu só quero ter uma 4 00:00:12,960 --> 00:00:19,570 imagem estática, assim como um instantâneo de mapa e o interessante é que o Google tem uma API para nós que gera esses instantâneos. 5 00:00:19,620 --> 00:00:24,810 Você pode pesquisar na API estática do Google Maps no Google Maps para encontrar a documentação oficial, onde você pode 6 00:00:24,810 --> 00:00:26,010 aprender tudo sobre isso, 7 00:00:26,190 --> 00:00:29,340 é claro e no final, usar essa API é super direta. 8 00:00:29,400 --> 00:00:35,820 Você só precisa enviar a solicitação para este URL e isso já lhe retorna uma imagem. Assim, você 9 00:00:35,820 --> 00:00:40,650 pode usar este link em um componente de imagem e estará bem. 10 00:00:40,650 --> 00:00:46,740 A única coisa complicada aqui é essa chave da API, você precisa de suas credenciais da API e, para 11 00:00:46,740 --> 00:00:49,300 isso, precisa de uma chave da API. 12 00:00:49,410 --> 00:00:55,590 Agora, basta clicar na chave da API aqui e gerar uma. Agora você pode selecionar um projeto 13 00:00:55,590 --> 00:00:59,660 que já possui ou criar um novo projeto. Para isso, 14 00:00:59,670 --> 00:01:05,220 é necessário cancelar aqui e, em vez disso, rolar um pouco mais para este Para 15 00:01:05,250 --> 00:01:10,110 começar, ative a parte da API aqui e clique em Começar aqui. 16 00:01:10,110 --> 00:01:15,840 Agora que você faz isso, é direcionado ao console da plataforma Google Maps, onde 17 00:01:15,840 --> 00:01:21,930 agora pode ativar os diferentes recursos do Google Maps que deseja usar. Aqui, estou interessado em 18 00:01:21,930 --> 00:01:29,590 mapas que mais tarde nos ajudarão a usar esse aplicativo dinâmico interativo em Android e eu estou interessado em lugares. 19 00:01:29,670 --> 00:01:31,420 Portanto, essas duas coisas devem ser 20 00:01:31,470 --> 00:01:36,430 verificadas, não precisamos das rotas porque não estamos construindo nenhum recurso de navegação aqui e, com 21 00:01:36,430 --> 00:01:40,600 isso, podemos clicar em continuar, selecionar um projeto e agora selecionar um projeto existente 22 00:01:40,600 --> 00:01:45,820 ou simplesmente criar um novo um e criarei um novo aqui e nomeie-o React Complete Guide, mas 23 00:01:45,820 --> 00:01:47,560 você pode nomear o 24 00:01:50,460 --> 00:01:53,370 que quiser, clique em Avançar aqui e aguarde a geração. 25 00:01:53,370 --> 00:01:57,320 Isso deve ser relativamente rápido e agora estamos preocupados com os preços enquanto 26 00:01:57,360 --> 00:01:58,680 isso está sendo carregado. 27 00:01:58,770 --> 00:02:02,970 Geralmente, você pode usar isso de graça, mas precisa de uma conta de cobrança e é 28 00:02:02,970 --> 00:02:04,740 isso que estou sendo solicitado aqui. 29 00:02:04,770 --> 00:02:06,080 Você precisa de uma conta 30 00:02:06,150 --> 00:02:09,930 do Google, é claro, e nesta conta do Google, você precisa de um cartão de 31 00:02:09,930 --> 00:02:13,570 crédito para usá-lo, caso contrário, você não pode usá-lo, infelizmente, é o que é. 32 00:02:13,590 --> 00:02:15,180 Então, você precisa de um cartão 33 00:02:15,180 --> 00:02:19,590 de crédito, de uma conta de faturamento configurada em sua conta do Google e, em seguida, pode usar essa 34 00:02:19,590 --> 00:02:26,100 conta do Google conectada para este projeto, que é o que estou fazendo aqui. Com isso ativado, você ainda poderá usá-lo gratuitamente, 35 00:02:26,160 --> 00:02:28,550 terá um nível gratuito muito 36 00:02:28,550 --> 00:02:33,570 generoso e anexará um link para os preços da plataforma Google Maps e 37 00:02:33,810 --> 00:02:39,540 somente se você violar certos limites pelos quais não violaremos o pouco uso que temos 38 00:02:39,540 --> 00:02:43,200 aqui nesses vídeos, somente se você violar esses limites, pagaria. 39 00:02:43,200 --> 00:02:47,520 Agora, esteja ciente de que pode haver um ponto em que você precisa pagar 40 00:02:47,520 --> 00:02:52,340 e que depende de quanto você usa a API e, portanto, verifique definitivamente os documentos de preços. 41 00:02:52,380 --> 00:02:57,190 Agora aqui, eu tenho tudo isso ativado agora e estou terminando tudo e, 42 00:02:57,300 --> 00:03:03,160 no final, você deve receber uma chave de API que, obviamente, eu invalidarei após essas gravações. 43 00:03:03,180 --> 00:03:06,440 Portanto, você não pode usar o meu, mas deve usar 44 00:03:06,460 --> 00:03:11,610 o seu e agora essa é a chave da API que você precisa inserir aqui neste URL. 45 00:03:11,670 --> 00:03:18,150 Então agora eu vou copiar toda essa URL aqui e passar para o nosso código e lá, agora 46 00:03:18,210 --> 00:03:23,790 quero exibir uma imagem aqui que aponte para essa URL porque, como mencionei, é assim 47 00:03:23,790 --> 00:03:27,900 que você pode obter essa imagem, essa URL retorna uma imagem. 48 00:03:27,900 --> 00:03:33,390 Agora, o que farei, portanto, é criar um novo componente aqui, denominado MapPreview. js porque também o utilizarei em 49 00:03:33,390 --> 00:03:39,090 outro local do aplicativo posteriormente, onde importo o React do React e, em 50 00:03:39,180 --> 00:03:44,890 seguida, importo a imagem e a folha de estilo do React Native, dessa forma. 51 00:03:47,620 --> 00:03:55,180 Então, aqui, criarei meu componente de visualização de mapa, que recebe adereços, sem surpresa, que precisa retornar alguns jsx mais 52 00:03:55,180 --> 00:04:02,310 tarde e configurar alguns estilos aqui no Stylesheet. crie e, claro, 53 00:04:04,970 --> 00:04:11,600 também exporte esse componente de visualização do mapa. 54 00:04:12,050 --> 00:04:16,430 Agora, aqui, quero gerar esse URL sobre o qual acabei de falar, portanto, aqui, 55 00:04:17,660 --> 00:04:26,870 o URL de visualização da imagem deve ser gerado e isso pode ser feito usando as marcações de retorno aqui para que eu possa adicionar conteúdo dinâmico ao texto 56 00:04:26,900 --> 00:04:32,540 facilmente e depois copiar em o URL que você acabou de copiar da documentação aqui, verifique se está 57 00:04:32,540 --> 00:04:34,110 tudo em uma linha, 58 00:04:34,190 --> 00:04:37,790 porque, por padrão, não está; por isso, verifique se está tudo 59 00:04:37,790 --> 00:04:40,360 em uma linha, caso contrário isso não funcionará 60 00:04:40,370 --> 00:04:42,460 e agora é claro que há 61 00:04:42,460 --> 00:04:44,590 alguns segmentos que você precisa substitua, 62 00:04:44,600 --> 00:04:50,210 por exemplo, aqui, o centro é igual a parte. Por padrão, isso aponta para a Ponte do Brooklyn 63 00:04:50,270 --> 00:04:55,100 e você pode inserir endereços aqui, mas também pode inserir pares de latitude e longitude aqui. 64 00:04:55,100 --> 00:05:01,820 Então, o que vou fazer aqui é adicionar dinamicamente duas informações aqui separadas por vírgula e a primeira coisa 65 00:05:01,820 --> 00:05:04,090 é a latitude. Aqui, espero obter 66 00:05:04,100 --> 00:05:06,680 isso nos meus adereços, espero obter um 67 00:05:06,680 --> 00:05:12,100 adereço de localização e, claro, esse pode ser qualquer nome de adereço de sua 68 00:05:12,110 --> 00:05:20,600 escolha, que deve ter uma chave lat e aqui, quero ter uma chave longa, uma chave lng também, para que seja a 69 00:05:20,660 --> 00:05:21,610 latitude 70 00:05:21,620 --> 00:05:27,130 e longitude do local que eu quero visualizar. Agora, o fator de zoom, definirei como 71 00:05:27,200 --> 00:05:33,110 14, você pode experimentar diferentes fatores, isso influencia basicamente a distância ou o zoom do mapa. 72 00:05:33,170 --> 00:05:36,350 Você também pode brincar com seu tamanho aqui. 73 00:05:36,360 --> 00:05:42,230 Agora, como terei um contêiner de visualização de mapa que normalmente usarei com uma 74 00:05:42,230 --> 00:05:48,520 altura de 200, configurarei a altura para 200 aqui e, portanto, configurarei a largura para 400 aqui. 75 00:05:48,740 --> 00:05:55,640 Obviamente, você pode usar um tamanho maior aqui do que o contêiner para exibir a imagem posteriormente, mas lembre-se de 76 00:05:55,640 --> 00:06:01,610 que, se estiver buscando uma imagem super grande aqui, é claro que haverá dados muito grandes e 77 00:06:01,610 --> 00:06:06,290 demais para baixar, ele carregará mais lentamente e talvez você não precise disso. 78 00:06:06,350 --> 00:06:12,260 Portanto, você deve apontar para um tamanho da imagem do mapa aqui, que se encaixa no container onde você deseja 79 00:06:12,260 --> 00:06:18,740 exibi-lo, não precisa ter exatamente o mesmo tamanho, mas aproximadamente. Agora, o tipo de mapa é como o mapa deve ser exibido. 80 00:06:18,740 --> 00:06:23,990 Você pode usar o satélite aqui, mas seguirei o roteiro padrão e agora você também pode adicionar marcadores a 81 00:06:23,990 --> 00:06:24,870 esse mapa. 82 00:06:24,950 --> 00:06:27,840 Agora, existem alguns marcadores configurados neste trecho simulado, 83 00:06:28,040 --> 00:06:34,700 eu me livrarei de todos, exceto um, para que eu tenha apenas marcadores aqui, cor vermelha, um rótulo de, 84 00:06:34,700 --> 00:06:35,600 este pode 85 00:06:35,630 --> 00:06:37,220 ser um caractere aqui, como 86 00:06:37,220 --> 00:06:42,890 ABC e então a latitude e longitude onde esse marcador deve ser colocado e, claro, isso 87 00:06:42,890 --> 00:06:46,440 é novamente adereços. localização. lat e, em seguida, 88 00:06:46,490 --> 00:06:53,960 aqui uma vírgula e, em seguida, substitua esse número por adereços. localização. lng. 89 00:06:54,470 --> 00:07:01,500 A colocação desse marcador é opcional, mas é claro que quero mostrar ao usuário onde ele está. 90 00:07:01,740 --> 00:07:09,360 Agora eu preciso da chave da API, então copiarei essa chave que foi gerada aqui e substituí-la aqui. 91 00:07:09,480 --> 00:07:14,610 Agora não posso colá-lo dessa maneira, mas, na verdade, quero gerenciar isso em um arquivo separado, 92 00:07:14,610 --> 00:07:18,490 porque também usarei essa chave de API em outros locais do aplicativo. 93 00:07:18,570 --> 00:07:24,180 Então, aqui, eu vou criar um novo arquivo com o nome env. js para o ambiente configurar algumas 94 00:07:24,870 --> 00:07:34,970 variáveis de ambiente e lá eu configurarei um objeto com minha chave da API do Google e esse deve ser esse valor 95 00:07:34,970 --> 00:07:44,820 aqui e depois posso exportar isso e, é claro, portanto, que deve ter um nome, vars é igual a então eu exporto 96 00:07:44,820 --> 00:07:45,980 vars aqui. 97 00:07:46,050 --> 00:07:51,000 Então, com isso, eu posso simplesmente importar desse arquivo env e 98 00:07:51,000 --> 00:08:02,300 é exatamente o que farei aqui, importar env do arquivo env aqui e isso significa apenas variáveis de ambiente como eu disse e agora injeta dinamicamente 99 00:08:02,300 --> 00:08:03,110 aqui. 100 00:08:03,110 --> 00:08:07,670 Portanto, agora temos um lugar onde podemos alterar essa chave e onde também podemos importá-la de todos 101 00:08:07,670 --> 00:08:09,550 os lugares diferentes do nosso aplicativo. 102 00:08:09,590 --> 00:08:14,900 Então aqui vou injetar dinamicamente env. googleapikey. 103 00:08:15,010 --> 00:08:17,900 Então, com isso, configurei o URL de visualização 104 00:08:18,100 --> 00:08:23,550 da imagem, agora neste componente, é claro que precisamos retornar a visualização da imagem e essa geralmente 105 00:08:23,560 --> 00:08:30,250 é a visão que tenho aqui no seletor de local. Então, eu vou pegá-lo de lá e adicioná-lo na visualização do 106 00:08:31,500 --> 00:08:35,130 mapa, assim, embora o conteúdo de fallback esteja lá, na verdade 107 00:08:35,130 --> 00:08:41,790 eu quero passar isso de fora, então eu vou cortar isso de novo e mover isso de volta para o seletor de 108 00:08:41,790 --> 00:08:42,420 localização. 109 00:08:42,420 --> 00:08:44,370 No entanto, não assim, mas 110 00:08:45,180 --> 00:08:53,440 sim aqui, importe este componente de visualização de mapa recém-adicionado, então importe-o de. / MapPreview, portanto, neste novo componente em que 111 00:08:53,480 --> 00:08:55,910 estamos trabalhando, adicione-o aqui, visualize 112 00:08:56,030 --> 00:08:57,960 o mapa e 113 00:08:58,220 --> 00:09:05,240 faça essa verificação para essa busca e o indicador e o texto de fallback aqui. 114 00:09:05,270 --> 00:09:12,250 Portanto, na visualização do mapa, portanto, terei apenas filhos auxiliares aqui para exibir o que é adicionado entre a tag de abertura 115 00:09:12,250 --> 00:09:15,480 e fechamento, mas isso é apenas conteúdo de fallback, é claro 116 00:09:15,480 --> 00:09:21,760 que me importo em exibir a visualização real aqui. Agora, precisamos garantir que o URL de visualização da 117 00:09:21,820 --> 00:09:28,190 imagem também possa estar vazio, caso ainda não tenha sido escolhido um local. Por isso, criarei um URL de 118 00:09:28,220 --> 00:09:30,610 visualização da imagem variável e apenas 119 00:09:30,610 --> 00:09:37,990 atribui um valor aqui e quero atribuir um valor. se adereços. o local está definido porque isso também não pode ser definido, 120 00:09:37,990 --> 00:09:44,980 caso ainda não tenhamos escolhido um local e agora o URL de visualização da imagem esteja vazio ou seja esse URL, dependendo 121 00:09:44,980 --> 00:09:51,400 se temos um local transmitido no suporte de localização e agora podemos usá-lo lá embaixo para produzir algo e, a propósito, 122 00:09:51,400 --> 00:09:52,220 desde que 123 00:09:52,220 --> 00:09:56,020 eu estou usando o view aqui, é claro que também devemos nos 124 00:09:56,020 --> 00:09:57,640 certificar de importar o view. 125 00:09:57,870 --> 00:09:59,290 Agora, como uso esse URL? 126 00:09:59,310 --> 00:10:02,160 Bem, se a tivermos, quero usá-la para gerar uma 127 00:10:02,160 --> 00:10:06,170 imagem, caso contrário, mostrarei isso para adotar o conteúdo de fallback de crianças. 128 00:10:06,240 --> 00:10:08,580 Então aqui podemos verificar 129 00:10:08,580 --> 00:10:10,140 adereços. local, se estiver 130 00:10:10,140 --> 00:10:12,230 definido, sei que também terei um 131 00:10:12,240 --> 00:10:18,600 URL de imagem, é claro que também poderíamos apenas verificar a existência do URL da imagem e, se estiver definido, 132 00:10:18,600 --> 00:10:19,260 exibirei 133 00:10:19,260 --> 00:10:25,200 uma imagem aqui, se não estiver definido, output adota crianças assim, então eu mostrarei meu conteúdo de fallback. 134 00:10:26,110 --> 00:10:29,960 Agora, a imagem aqui receberá um estilo, uma imagem de 135 00:10:30,040 --> 00:10:39,650 mapa e uma fonte, e a fonte aqui usará um URI que aponta para o URL de visualização da imagem, porque será um URL de 136 00:10:39,650 --> 00:10:42,010 rede, uma imagem de rede, certo? 137 00:10:43,000 --> 00:10:46,330 Então agora vamos trazer os estilos do seletor de 138 00:10:46,390 --> 00:10:54,520 localização, posso fazer uma visualização do mapa, mas só quero trazer a parte do conteúdo justificado e, na verdade, passar o resto manualmente aqui 139 00:10:54,520 --> 00:11:01,390 e mesclá-lo, para que eu ainda passe pelos estilos . MapPreview de dentro do meu seletor de localização e na visualização do mapa, 140 00:11:01,390 --> 00:11:07,300 agora quero mesclar isso com meus estilos que estou configurando aqui. Então, aqui, na verdade, envolvo isso em um objeto 141 00:11:07,300 --> 00:11:13,270 em que puxo todos os estilos configurados na visualização de mapa aqui e mesclo em todos os estilos 142 00:11:13,270 --> 00:11:19,240 configurados nesse suporte de estilo, para que possamos definir estilos de fora também e mesclá-los com nossos estilos 143 00:11:19,240 --> 00:11:26,980 internos e agora os estilos internos na visualização do mapa, como acabei de dizer, terei justificado o conteúdo e alinhado os itens aqui e 144 00:11:26,980 --> 00:11:29,050 para a própria imagem. Portanto, para 145 00:11:29,200 --> 00:11:30,850 a imagem do mapa, 146 00:11:30,910 --> 00:11:37,020 quero definir isso para que toda a largura e altura disponíveis que ele pode obter e precisamos definir isso 147 00:11:37,040 --> 00:11:41,410 porque é uma imagem de rede. Como você aprendeu, para aqueles que você precisa definir a largura 148 00:11:41,410 --> 00:11:43,040 e a altura do componente da imagem. 149 00:11:44,710 --> 00:11:51,040 Agora, com isso, temos o componente de visualização do mapa que exibe essa imagem do mapa ou 150 00:11:51,040 --> 00:11:53,690 nosso conteúdo de fallback que é 151 00:11:53,920 --> 00:11:57,640 transmitido de fora e o faz verificando a localização prop. 152 00:11:57,640 --> 00:12:02,950 Portanto, no local em que usamos o componente de visualização do mapa, 153 00:12:02,950 --> 00:12:07,330 que obviamente é o seletor de localização, precisamos passar nesse 154 00:12:07,330 --> 00:12:15,190 local e no local, se verificarmos a visualização do mapa, no final, será um objeto com latitude longitude ou 155 00:12:15,190 --> 00:12:19,840 uma chave lat e lng. Portanto, de volta ao selecionador de 156 00:12:19,910 --> 00:12:25,610 local, quero passar esse suporte aqui e, de fato, é exatamente isso que gerenciamos aqui com 157 00:12:25,610 --> 00:12:32,870 o local de escolha, o que obviamente não é coincidência. Esse é um objeto com latitude e longitude ou é indefinido inicialmente e 158 00:12:33,050 --> 00:12:36,300 também lidamos com esse caso no componente de visualização de 159 00:12:36,410 --> 00:12:41,060 mapa; se não for definido, apenas mostramos o conteúdo de fallback que é passado de fora. 160 00:12:41,060 --> 00:12:46,880 Assim, para o local, podemos simplesmente passar o local escolhido e, com isso, agora devemos ter uma 161 00:12:46,880 --> 00:12:50,150 configuração em que possamos realmente visualizar o local. 162 00:12:50,630 --> 00:12:52,490 Agora, aqui, vemos o conteúdo de fallback, 163 00:12:52,520 --> 00:12:59,120 mas se eu clicar em obter a localização do usuário, vemos o botão giratório e, em seguida, vemos um instantâneo real do local 164 00:12:59,150 --> 00:13:00,010 que escolhemos. 165 00:13:00,080 --> 00:13:02,180 Como mencionei, não é aqui que estou sentado agora, este é 166 00:13:02,180 --> 00:13:05,930 apenas um lugar fictício que o emulador nos fornece. O mesmo no Android, se 167 00:13:05,930 --> 00:13:08,370 eu escolher um local aqui, agora essa 168 00:13:08,370 --> 00:13:12,140 é a sede do Google que eu selecionei por padrão lá. 169 00:13:12,880 --> 00:13:17,370 Portanto, isso funciona, agora como próximo passo, quero ter certeza de 170 00:13:17,410 --> 00:13:22,570 que também podemos escolher esse lugar no mapa em vez de apenas nos localizar.