Resumo do Vídeo

Esse vídeo é só de uma saída aqui para a gente explorar mais o problema que a gente teve com content URL no imediativo aqui que você... que a gente escolheu, optou para usar o thumbnail URL, em vez de o content URL, e por causa dos problemas de 1, que era o radiracionamento, o URL conteúdo era um link que radiracionava para outra imagem, e 2, o HTTPS, que nem toda imagem que a gente se extraiu do content URL vai ser HTTPS. Então, se for iOS, o da Apple, ele tem esse... esse... ele não aceita imagens que não for... não tenham HTTPS. Então, para resolver... a gente não dá para resolver o segundo problema, mas a gente pode resolver o problema do radiracionamento e até tentar... de mostrar uma imagem aqui. Nem que seja toda, mas as que forem HTTPS vão ser mostradas dentro do content URL. Então, esse vídeo é mais para explorar e para entender mais o que está acontecendo com esses dados, esses strings, e para trabalhar com strings, talvez usar regular expressions, expressões regulares, você nunca viu, é só para ter um... se divertir, não é? Então, se você não estiver interessado, não precisa assistir, não, tá bom? Aqui é só um bonus, né? Então, vamos começar aqui, eu falei... Eu já tenho esse aqui feito aqui, voltar, já funciona, mas o negócio é do content URL, né? Que vamos mudar aqui. Em vez de ter o Flameneer, eu vou voltar para o content URL. Content URL. Tá bom? Tá aqui também. Então, quando a gente tem o problema, né? Quando a gente clicou, a gente notou que content URL tem um string, não aparece, né? Vamos ver quando eu cliquei, eu dei um console log aqui, deixa eu ver aqui meu debugger, tô no debugger, tá bom? Eu vou dar aqui até o último, o item foi clicado, quando eu cliquei naquele cara, eu dei um console log aqui. Eu quero ver o que está dentro do content URL. Tem esse cara aqui, eu vou dar a copy-a, copy-a, e vou para o meu editor de texto. Já tem um aqui, mas, vamos ver. Vou colar aqui, né? Vou colocar esse aqui, content URL. Então, se eu aumentar o texto aqui para vocês verem melhor... Então, esse cara aqui, eu vou remover esses quotes, tá bom? Esse cara é um URL que vai redicionar para a imagem. Você nota aqui, eu vou copy-ar, colei, aí dá um tapinho, é ir redicionando para essa imagem aqui maior, muito legal. Então, parece que tem um problema aqui, não está funcionando. Então, o que a gente pode fazer é extrair o URL original. Na verdade, se você analisar esse URL aqui, você note que quando você chega nesse URL aqui, URL igual, aí aparece aqui, até o P aqui igual, tem o URL original, vou dar uma copy-ada, e vou colar aqui. Essa aqui é o original, se você não está. Sendo que está toda codificada, porque esse negócio aqui, que na verdade corresponde para os dois pontos e o barra-barra. Aí, esse %2f, na verdade, é barra. Quada vez que você olha esse 2f é barra, mais barra, eu vou não copy-ar aqui, só para ver se está funcionando. Copy-ei, e aí funcionou, né? Então, a gente conseguiu extrair o URL original desse cara. Então, como é que a gente faz isso usando JavaScript? Então, a gente pode fazer primeiro, vai pegar o contínuo URL, primeiro a gente tem que localizar onde é que está essa parte aqui dentro dessa string. A gente pode usar duas maneiras, se você não sabe a expressão é regulares, você pode usar o index of numa string, né? E aí você põe o pattern, qualquer coisa. Aí você vai localizar o index desse primeiro HTTP, talvez, ou você pode localizar pelo esse cara aqui. Eu vou usar esse cara, porque eu sei que quando tem esse R, essa query com R, é quando começa o URL original e só termina quando chega nesse outro aqui. Então, está depois desse cara e antes desse cara aqui, ou digita errado. Então, está dentro desse cara. Então, se você não sabe se faz o regulares, pode só dar um index of nesse cara com assim, né? Agora vai dar o index, o índice do começo desse cara aqui, né? Que é no 100%. Mas a gente não quer isso, então posso adicionar três para chegar aqui. Então, aqui, um, dois, três. Agora eu estou aqui, vou lugar certo. Começa certo, né? E o último começo, vou botar aqui o começo aqui, começo e o final vai ser antes desse cara. Eu vou dar também um counter, o URL index of o P aqui. E quando eu dou esse cara, ele vai chegar nesse aqui, vai dar o index desse cara. Nesse caso, está legal porque quando eu pô o entre esse e esse, sempre nunca inclui o index final, se eu dar um substring. Que é isso que eu vou usar. Substring no começo e o final. Sempre no começo, vai começar no index do começo e termina no índice final menos um, tá bom? Por isso que não adiciona um aqui. Ou subtrai um. Então, vamos ver o que acontece. Vou copiar isso aqui. Essa URL para a gente fazer um experimento aqui no web console, só para ver se está realmente funcionando. Só para se divertir, vamos ver. Vou dar aqui. Eu só abri o web console aqui no meu Chrome, abri a nova janela aqui, tem um console. Eu vou limpar tudo e vou definir um variável const com a URL, tá bom? Vou botar aqui as quotes e vou botar o cara aqui. Certo? Então, o URL é esse cara. Então, vamos dar um index, o que é isso aqui? Primeiro aquele cara, o R. O que é que a gente... um 150. Mas a gente tem que adicionar 3, tá bom? Esse é o primeiro, é o começo. Então, se você notar, a gente dá um substring com aquele cara aqui. Vamos botar dentro uma variável. Sei lá, vamos... Sei lá, eu vou... Pode botar a start, primeiro eu começo, sei lá, vou botar a start index aqui. Aqui é o que eu vou fazer, vou fazer o rl.substream com o start index, tá bom? Com o argumento. Aí você note que a gente já pega o começo, mas ainda tem o hold, cliquei aqui. Eu tenho essa parte aqui do final que a gente não quer. Então, vamos fazer isso, tá bom? Cadê? Vamos fazer o outro. Vou chamar de last index, tá bom? Eu quero a posição aqui desse cara do final. Vou botar o rl.indexof, vou dar o p. Então, vai achar a posição desse cara aqui, né? Você note, vai dar um 227. Então, se eu der um substring, eu começo no start index e termino antes do last index. Sempre antes, né? Um menos, last index, menos um, não inclui esse final, tá bom? Então, não vai incluir esse ampersand aqui. Então, vamos ver o que acontece, tá aí. A gente extraiu a rl toda, exceto que ainda está codificada. Na verdade, eles deram um encode, uri component, para codificar. Então, para decodificar, a gente vai fazer o decode, uri component. Essa é a função, aceita a string como argumento. Então, por exemplo, vou copiar esse cara aqui e vou passar como argumento aqui. Olha o que acontece. Não é lindo? Tá tudo bonitinho agora. Copiar isso só para ver se está funcionando. E legal. Então, a gente conseguiu com sucesso converter todo aquele negócio todo para o rl original. Tá bom? Então, vamos testar isso. Aqui, vou fazer a mesma coisa, tá bom? Estamos no imedit.tlt, aqui eu vou fazer primeiro, vamos fazer assim. Vamos chamar de encoder, uri.l. Vai ser o substring do contador rl, substring com o primeiro, u para index, mas a gente não definiu ainda, então vamos definir aqui. const start index. Vai ser o contador rl, ponto index of, a gente está procurando esse cara aqui. Tá bom? Agora vamos fazer o último contador rl, index of, procurando o p. Note que eu esqueci o plus 3, que eu tenho que adicionar 3 porque a gente começa aqui 1, 2, 3, depois desse sinal de igual. Então, dentro da encoder de uri.l, vai parecer esse cara aqui, mas está codificado, a gente vai ter que usar esse cara, decoder, uri, component. Então, finalmente, eu vou fazer o imed, uri.l, vou chamar o imed, uri.l, e vou fazer esse cara encoder de uri.l, ponto, oh, desculpa, é um argumento da função decoder, uri.l, component. Em vez de contador rl, eu vou em imed, uri.l. Vamos dar um console log, só para ver se está dando o cara certo, tá bom? Console log esse cara. Sala. A busca. Vamos ver o console log, não apareceu nada. Vamos ver o que é o console log aqui, vou para o meu debugger, vou até o final, está aqui, tudo certinho, né? Mas se você não está, não funcionou, porque a gente não tem HTTPS. Aí estamos lascados, né? Mas eu acho que essa URL não é HTTPS, se você não está aqui, eu vou copiar o conteúdo URL. E, boa, ele vai redirecionar, você nota que não é HTTPS, mas se eu voltar aqui e ver esse gato meditando, gato meditando eu sei que é HTTPS, ainda não aparece, mas por que? Vamos ver o console log. Da até o final, o sinal está aqui, a gente extraiu esse aqui. Note que não é HTTPS, mas quando eu aperto Enter e vou para a página, ele vira HTTPS. Mais um problema para a gente, né? São uma solução que eu achei para esse cara, é só dar um replace, e quando a gente vê HTTPS, a gente põe o S. A maneira fácil de fazer isso, é só que no imedio URL, depois de decodificar, a gente vai dar a replace com HTTPS, com HTTPS. Aí sempre vai mudar o negócio para HTTPS. Nem que o cara seja HTTPS, vai tentar. Vamos ver o que acontece. Tá bom? Eu sei que o gato meditando HTTPS, então funcionou. Mas vamos voltar aqui e ver os caras que não são HTTPS? Então não funcionou, né? Como eu disse no começo, a gente não dá para resolver esse segundo problema, se a gente continuar usando o URL. Se você sabe de uma solução para esse problema, por favor, deixa um comentário. Tá bom? Agora o mesmo é tudo aqui. Usou no solo na HTTPS, no iOS, né? O único motivo que eu dei esses hacking aqui é por causa que eu estou usando o iOS, que não deixa carregar a imagem de que não seja o HTTPS. Que ele funcionou, esse cara funciona. Será que isso funciona? Não. Não é HTTPS. Não em todas as imagens são. Então o código que eu usei aqui, eu usei o index of, mas se você sabe a expressão irregular, e se a gente pode fazer de outra maneira, talvez menos código, né? Deixa eu te mostrar como é que é. Tem o meu text editor aqui mostrando o que a gente fez. Então o que a gente fez foi esse aqui, o simples, né? Faz esse plot, o start, o last, e decode, e a gente dá um substring. Mas você tem também a expressão regular. Você pode usar esse aqui, você pode botar esse cara, e o ponto significa um único caractere, né? Single character. Essa estrela aqui diz que esse cara anterior zero ou mais. Então eu posso ter zero ou mais caractere. E de seguida desse cara, que eu sei que a URL está entre um e outro, e a match, ele retorna um array, e para pegar o primeiro elemento da array, eu dou um subzero aqui, o subzero. Aí depois eu dou uma der codificada, e dou um substring. E eu ponho três aqui, porque esse cara vai aparecer, então tem que ter um, dois, três, depois desse sinal de igual, e ponho a length, menos três, porque o length vai estar aqui, eu ponho um, dois, três, antes. Tudo que está dentro, entre os caras. Então vamos fazer esse método aqui também, só a piquinha, tá bom? Vou você ver, vou te mostrar aqui no browser, o que acontece, só para você ter uma ação. Cadê o negócio que a gente fez antes? Está aqui, URL, cadê? Esse cara, né? Deu a URL, o que a gente fez? Deu o match, né? A expressão regular, o r, ponto, estrela, zero mais caracteres, depois desse cara, e antes eu quero, e depois eu quero esse p. Vamos ver o que acontece. Isso, a gente pega um array, que tem um único elemento aqui, que é o negócio todo, not que inclui o r e o p aqui. Aí eu cliquei lá. Remover esse cara, eu dou o substring aqui, três, né? Você, o que aconteceu? Eu esqueci do zero, né? Pegar o elemento. Agora virou o string, eu dou o substring, começando no indice 3. Noto que eu tenho a gata de p, ba, ba, ba, mas ele não tem esse p aqui, né? Ok. Eu vou dar, ok, tem que ser a length desse cara todo, então vou botar de novo variável. Vou botar aqui, sei lá, encoder, URL, vou escolher o URL, ponto, substring, 3, e o encoder, URL, ponto length, para saber o length. Mas se eu pôr aqui, o que vai acontecer? Ainda eu tenho p lá, então ponto length minus 3, para tirar esse p. Começa 1, 2, 3, antes do p, nem por cento do p. A por cento do p, né? É assim que a gente faz. E dá o, finalmente, decode, o ri, pô, né? Como esse cara é um elemento. E aí? Aí, acabou, tá bom, né? Então vou só copiar esse código aqui, se você quiser fazer, se você tá um pausa, e copia o código, tá bom? Aqui eu vou me repover tudo isso. Vou botar esse cara aqui. Encoder o URL, dar um match, aqui, pego o primeiro elemento, aí faz o image URL, dá um decode, com substring, começando 3, e termina no length minus 3. E aqui, image URL, vamos ver o que acontece só para ver, vou dar um, atualizada, gato, não acho que eu esqueci de botar o replay do HTTPS, né? Vou clicar nesse cara aqui, ver o que que dá o console log, no final. Ah, é para ser legal, mas não tem um HTTPS, então, vamos voltar. E aqui, oh, talvez a gente um-botar aqui. O que eu vou fazer? A sanolinha tá muito longa, né? Eu vou fazer assim de novo, vou botar image URL. Você pode fazer isso, só vou fazer isso aqui. E vou dar o replays. HTTPS, 2 pontos, vou botar o gato de HTTPS, só de cara olhar. O que aconteceu? Read only, porque eu declarei como console, né? Às vezes o problema é botar let, tá bom? O que eu consto, você só pode definir uma vez e não mais. Mas se você botar let, ele pode definir mais de uma vez. É o negócio do S6, a nova versão de JavaScript. Vamos lá, dar um let, e posso mudar de novo. Gato. Vou buscar, vou buscar, vou buscar. Esse cara não funciona porque é HTTPS, né? A gente notar, aqui, voltar o cara aqui, a gente cadê, oops. A gente tira aqui o que o Zé, tá aí. Oh, não. Vou clicar, parece esse cara, né? Gato de HTTPS, não sei o que. Aí, parei com esse negócio. Não é gato de HTTPS, né? Esse cara aqui, não funciona, porque não é HTTPS. Eu removi o HTTPS. Só a HTTPS. Mas o meditando funciona, né? Esse cara aqui. O que, HTTPS? Não funciona, né? Legal. Esse não é. A gente adicionou, mas nem todos funcionam, por exemplo, ao cadê. Esse cara fica parecendo direto, será que eu pus o negócio aqui, ó. Tá bom. O que eu tinha copiado, ó. O que aparece. Não, não funciona, porque não é HTTPS. Eu removi, aí, tá aí. Tá bom, espero que, ó, você tenha gostado desse vídeo só para se divertir e explorar mais, porque o problema que a gente teve foi que a gente fez um esquizo de imagens, porque a gente usou o thumbnail URL, em vez do conta do URL, que seria o ideal, né? Mas não funcionou. Devido a esse negócio de um, vai direcionar o vídeo da imagem, e dois, no meu caso do meu projeto, que é no iOS, ele não aceita imagens carregadas do servidor remoto, que seja um HTTPS sem o iOS, né? A maneira que a gente tentou resolver o problema, vou extrair o URL original, e a gente resolveu o problema do redirecionamento. E a gente viu isso legal aqui, usando a Ragex, né? Espeções regulares, usando o match, em som match. E a gente decodificou o URL. Mas, aí, a gente não conseguiu resolver o problema, porque todos, nem todas as imagens são HTTPS, e não dá para ver quase tudo isso. Tá bom? Muito obrigado por assistir, por favor, subscreva. Vamos conectar nas redes sociais, eu tô no Twitter, também tenho GitHub. Muito obrigado.