<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Carlos Eduardo</title>
    <description>The latest articles on DEV Community by Carlos Eduardo (@cpwaldow).</description>
    <link>https://dev.to/cpwaldow</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F766444%2F8ac22cb1-9683-4f0b-a051-ee5cfbe19129.jpeg</url>
      <title>DEV Community: Carlos Eduardo</title>
      <link>https://dev.to/cpwaldow</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/cpwaldow"/>
    <language>en</language>
    <item>
      <title>Automatizando likes no Tinder com JavaScript</title>
      <dc:creator>Carlos Eduardo</dc:creator>
      <pubDate>Fri, 15 Apr 2022 05:02:36 +0000</pubDate>
      <link>https://dev.to/cpwaldow/automatizando-likes-no-tinder-58cj</link>
      <guid>https://dev.to/cpwaldow/automatizando-likes-no-tinder-58cj</guid>
      <description>&lt;p&gt;Você já pensou em algum momento que o fato de utilizar aplicativos de relacionamentos e o tempo que gasta só dando like nas pessoas procurando por um match? &lt;/p&gt;

&lt;p&gt;E se eu te disser que tem uma maneira de automatizar essa ação de clicar em um botão para depois você apenas gastar suas energias com a conversa? Parece bem mais interessante, né?&lt;/p&gt;

&lt;p&gt;Esse script foi feito para funcionar no Tinder, mas pode ser refatorado para outros sites do segmento, lembrando que estamos utilizando a versão do Tinder no navegador!&lt;/p&gt;

&lt;p&gt;Nesse artigo, vamos trabalhar com manipulação de DOM pelo JavaScript, entender sobre seletores CSS e um método de como fazer um bloco de código ser executado em determinado período de tempo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Capturando o botão (DOM)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Antes de mais nada, precisamos encontrar o botão de like dentro de todo o código HTML.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163517854-a575f3ee-1492-47d2-afaa-4acb0adc3e9d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163517854-a575f3ee-1492-47d2-afaa-4acb0adc3e9d.png" alt="Captura de Tela_Área de Seleção_20220415011802"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Analisando o botão de like, vemos que tem muitas classes dinâmicas e que isso dificultaria no momento de reutilizar esse código, pois se dermos um refresh na página ou utilizarmos em uma nova página ou em outro computador, percebemos que nosso código não vai mais funcionar.&lt;/p&gt;

&lt;p&gt;Uma maneira de conseguirmos capturar esse botão com algo que é fixo, ou seja, não muda com frequência, com isso, podemos perceber que o Tinder usa react testing library e tem o campo &lt;code&gt;data-testid="gamepadLike"&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Uma maneira de capturar o botão pelo &lt;code&gt;data-testid&lt;/code&gt; seria utilizar o seletor &lt;code&gt;querySelector&lt;/code&gt;, podemos colocar esse seletor em uma constante para facilitar nossa vida depois e deixando nosso código mais legível.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const likeBtn = document.querySelector('[data-testid="gamepadLike"]');&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163518535-07815dc1-fba0-470b-b51b-9b03818c052a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163518535-07815dc1-fba0-470b-b51b-9b03818c052a.png" alt="Captura de Tela_Área de Seleção_20220415012756"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Primeira parte finalizada.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Clicando no botão&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;O JavaScript tem um método nativo que é &lt;code&gt;HTMLElement.click()&lt;/code&gt;, segundo informações da própria &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/click" rel="noopener noreferrer"&gt;documentação&lt;/a&gt;: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;É um método que simula o clique do mouse em um elemento.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sabendo disso, podemos fazer dessa maneira para dar um like sem ao menos clicar no elemento:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;likeBtn.click();&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"Automatizando" a rotina&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Agora, para finalizar nossa linha de montagem, precisamos fazer com que o clique no botão aconteça de uma forma que não precise mais da nossa ação após rodar o código.&lt;/p&gt;

&lt;p&gt;Olhando os métodos do JavaScript que tem essa funcionalidade, temos o &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/API/setInterval" rel="noopener noreferrer"&gt;setInterval&lt;/a&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Esse método repete chamadas de funções ou executam trechos de código, com um tempo de espera fixo entre cada chamada.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Podemos utilizar da  seguinte forma:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;window.setInterval(() =&amp;gt; likeBtn.click(), 1000);&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Lembrando que quando utilizamos algum método que ocorre após um tempo previamente estabelecido como é o caso do &lt;code&gt;setInterval&lt;/code&gt;, passamos o valor de intervalo em milissegundos, nesse caso, o trecho de código acima acontecerá após 1 segundo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusão&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Depois de toda essa explicação, o código que vimos até aqui tem nada mais do que 2 linhas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const likeBtn = document.querySelector('[data-testid="gamepadLike"]');
window.setInterval(() =&amp;gt; likeBtn.click(), 1000);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Executando o código&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;abrir o Tinder pelo navegador;&lt;/li&gt;
&lt;li&gt;clicar com o botão direito na tela e ir em inspecionar;&lt;/li&gt;
&lt;li&gt;No menu superior, entrar na sessão &lt;code&gt;Console&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Copiar o código e colar no campo abaixo.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163520228-edc902a6-864d-46a1-9188-69605bda485d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163520228-edc902a6-864d-46a1-9188-69605bda485d.png" alt="Captura de Tela_Área de Seleção_20220415015339"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Código funcionando&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163520856-6825fdf1-f1cc-4c8b-b543-00aaccd20d42.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F59023543%2F163520856-6825fdf1-f1cc-4c8b-b543-00aaccd20d42.gif" alt="tinder"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Críticas, sugestões e elogios, deixe no comentário abaixo! :)&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>css</category>
      <category>tutorial</category>
      <category>html</category>
    </item>
  </channel>
</rss>
