Twitter Hesabından Görüntü Alma (2022)

Raymond Camden

Bir süre önce, 2016’nın “önceki zamanında”, basit bir fikrin demosunu yazdım – medyayı (özellikle resimleri) bir Twitter hesabından almak. Sadece harika resimler yayınlayan birkaç Twitter hesabını takip ediyorum. Çevrimiçi platformların ne kadar toksik olabileceği düşünüldüğünde, sadece harika fotoğraflar görmek biraz rahatlatıcı olabilir. Demo, Node.js’yi kullandı ve IBM’in Bluemix platformunda çalıştı. Dilerseniz o eski yazıyı buradan okuyabilirsiniz: Twitter Hesabından Görüntü Alma. Bu gönderiyi iki yıl sonra Azure İşlevleri aracılığıyla çalışan aynı fikrin bir örneği ile takip ettim – İlk Azure İşlev Uygulamam – Twitter Image Displayer. Birkaç hafta önce birisi bana bir güncelleme hakkında soru sordu ve ben de buna bir şans vereceğimi düşündüm. Sadece demoyu görmek isterseniz, buradan görebilirsiniz:

https://cfjedimaster.github.io/webdemos/tweetimages2/

İşte görüntüleri almanın güzel bir örneği @randomcomicbook

Ve işte bu yeni sürümü nasıl oluşturdum. Elbette bir arka uç ve bir ön uç var, o yüzden arka uçla başlayalım.

sunucu

Başlamak için, bir HTTP isteğinde ateşlenen yeni bir Pipedream iş akışı oluşturdum. Ardından, sorgu dizesinde bir hesabın iletildiğini doğrulamak için bir kod adımı ekledim:

export default defineComponent({
  async run({ steps, $ }) {
    // Reference previous step data using the steps object and return data to use it in future steps
    if(!steps.trigger.event.query.account) {
      await $.respond({
        status:500,
        body:'account value not passed in response.'
      })
    }
    return steps.trigger.event.query.account;
  },
})

buna isim verdim get_account ve daha sonra sonucu referans aldığımı göreceksiniz.

Bir sonraki adım aslında işi Twitter ile yapıyor. Altı yıl önceki örnekte, bir Node.js uygulaması oluşturdum ve OAuth’u kullandım. Bunun anlamı, uygulamayı kullanmak için bir Twitter oturum açmanız ve önce Twitter ile kimlik doğrulaması yapmanız gerektiğidir. Bu, uygulamanın kendisinin bir çağrı kotası ile sınırlı olduğu, ancak bu sınırın kullanıcıya göre belirlendiği anlamına gelir. Bu hafta yaptığım sürüm için bunun yerine bir Twitter uygulamasından yararlanmaya karar verdim.

bu dokümanlar Twitter’ın arama API’sı, akademik erişiminiz olmadığı sürece yalnızca geçen hafta arama yapacağını belirtir. Bu yüzden test ederken bunu aklınızda bulundurun. Bir hesap bir hafta içinde resim yayınlamadıysa, sonuç bulunmayacaktır.

Ayrıca, için oran limitleri, bir uygulamanın 15 dakikalık pencere başına 450 istek sınırı vardır. Kullanıcılar için 180. Her şeyi daha basit hale getirmek için bir uygulamayla karar verdim. Ayrıca, bu blog yazısı “başlarsa”, muhtemelen hala oran sınırının çok altında olacağımı düşündüm, bu yüzden çok endişelenmiyorum, ancak bunun kendi versiyonunu oluşturursanız bunu aklınızda bulundurun.

Uygulamayı Twitter üzerinden oluşturdum. geliştirici Konsolualmış olan Gerçekten son birkaç yıldır iyi. Oluşturulan uygulama ile daha sonra Ulaşılması mümkün olmayan istek.

Pipedream, Twitter API’leri ile çalışmak için mükemmel bir desteğe sahiptir ve ben yol yanlarında çok fazla Twitter botu var. Ancak, normalde onların desteğini belirli bir hesaba dayanarak kullandım. Bununla demek istediğim – botumu bir programa göre yayınlayacak şekilde ayarladım ve tweet gönderme eylemi botun hesabına dayanıyor. Bu durumda, Twitter uygulamamı temel alan Twitter API’lerini kullanmak istedim ve bunun için farklı bir eylem kullanıyorsunuz – “Twitter Geliştirici Uygulaması”:

Pipedream'e eklemek için doğru adım

Bunu seçtikten sonra, “Herhangi bir Twitter Developer App API’sini kullan” seçeneğini seçin:

Doğru adımı seçmek neredeyse bitti...

Seçtikten sonra, Twitter Developer uygulamasını yapılandırmanıza izin veren bir adım verilir. Bunun için Twitter geliştirici portalından değerlerinizi gireceksiniz. Ve en iyisi – bunu yaptıktan sonra Pipedream bağlantıyı hatırlayacak ve tekrar seçmenize izin verecektir. Varsayılan kod, Twit kütüphane.

module.exports = defineComponent({
  props: {
    twitter_developer_app: {
      type: "app",
      app: "twitter_developer_app",
    }
  },
  async run({steps, $}) {
    const Twit = require('twit')
    
    const { api_key, api_secret_key, access_token, access_token_secret } = this.twitter_developer_app.$auth
    
    const T = new Twit({
      consumer_key: api_key,
      consumer_secret: api_secret_key,
      access_token,
      access_token_secret,
      timeout_ms: 60 * 1000,  // optional HTTP request timeout to apply to all requests.
      strictSSL: true,  // optional - requires SSL certificates to be valid.
    })
    
    return await T.get('account/verify_credentials', { skip_status: true })
  },
})

İşin güzel yanı, mantığınızı eklemeye başlamak için tek yapmanız gereken son satırı değiştirmek. Aramamı nasıl yaptığıma bir göz atalım:

module.exports = defineComponent({
  props: {
    twitter_developer_app: {
      type: "app",
      app: "twitter_developer_app",
    }
  },
  async run({steps, $}) {
    const Twit = require('twit')
    
    const { api_key, api_secret_key, access_token, access_token_secret } = this.twitter_developer_app.$auth
    
    const T = new Twit({
      consumer_key: api_key,
      consumer_secret: api_secret_key,
      access_token,
      access_token_secret,
      timeout_ms: 60 * 1000,  // optional HTTP request timeout to apply to all requests.
      strictSSL: true,  // optional - requires SSL certificates to be valid.
    })
    
    // https://stackoverflow.com/questions/40631127/twitter-api-response-not-always-returning-entities-media-as-expected
    console.log(`Get images for ${steps.get_account.$return_value}`)
    let result = await T.get('search/tweets', { q: `from:${steps.get_account.$return_value} filter:media`, count: 100, include_entities:true, tweet_mode: "extended" });
    let tweets = result.data.statuses;

    let images = [];
    tweets.forEach(tweet => {
      if(tweet.entities && tweet.entities.media && tweet.entities.media.length > 0) {
          tweet.entities.media.forEach(function(m) {
            images.push(m.media_url);   
          });
      }
    });
    return images;
  },
})

Görüntüleri taramak istediğiniz kullanıcıya göre bir arama sorgusu oluşturuyorum, işte bu from kısmı, medyaya filtrelemesini söylüyorum, işte bu filter Bölüm. Son olarak ve bu çok önemlidir, not edin tweet_mode değer. StackOverflow bağlantısının belirttiği gibi, bunu kullanmazsanız, tam sonuçları geri alamazsınız.

Sonuçları aldığımda, bunların üzerinde dolaşırım, bir görüntü varlığı ararım ve onu bir dizi sonuca eklerim.

Son adım, sonucu arayana döndüren bir kod adımıdır:

export default defineComponent({
  async run({ steps, $ }) {
    // Reference previous step data using the steps object and return data to use it in future steps
    await $.respond({
      status:200,
      headers: {
        'Content-Type':'application/json'
      },
      body:steps.get_images_for_user.$return_value
    })
  },
})

Bunu kesinlikle son adıma dahil edebilirdim, Pipedream şikayet etmeyecek, ancak iş akışlarımı her adımın somut bir şey yapması için oluşturmaya çalışıyorum. Pipedream’in tembel olmadığımda daha iyi bir geliştirici gibi davranmama izin vermesini seviyorum.

Müşteri

Ön uç için, altı yıl önceki demoma bir göz attım. Lightbox işlevselliği için jQuery ve bir jQuery eklentisinden yararlandı. ‘Modern’ sürüm için Vanilla JavaScript’e ve çerçeve tabanlı olmayan mükemmel bir kitaplığa karar verdim. Parvus. İşte ne yapacağımı açıklayan metinden ve birlikte çalışmam gereken birkaç DOM öğesinden oluşan HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Twitter Image Viewer</title>
    <link href="parvus.min.css" rel="stylesheet">
    <link href="app.css" rel="stylesheet">
</head>
<body>

    <h2>Twitter Image Suck</h2>

    <p>
        This tool provides an "image only" view of a Twitter account. Simply enter the username of an account 
        and you'll see the most recent pictures they've embedded into their Tweets. You can click an individual
        image for a close up view. A great example account is <code>oneperfectshot</code>.
    </p>

    <div id="statusArea"></div>

    <div id="searchForm" style="display:none">
        <p>
            <input type="text" id="twitterAccount" placeholder="Twitter Account">
            <button id="searchButton">Get Images</button>
        </p>
    </div>

    <div id="results" style="display:none"></div>

    <script src="parvus.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

Ve işte JavaScript:

let $status, $searchForm, $searchButton, $twitterAccount, $results;

const endpoint="https://eo73fogw8n2gknw.m.pipedream.net";

document.addEventListener('DOMContentLoaded', init, false);

function init() {
    $status = document.querySelector('#statusArea');
    $searchForm = document.querySelector('#searchForm');
    $searchButton = document.querySelector('#searchButton');
    $twitterAccount = document.querySelector('#twitterAccount');
    $results = document.querySelector('#results');

    $searchButton.addEventListener('click', search);
    $searchForm.style.display = '';

}

async function search() {
    let account = $twitterAccount.value.trim();
    if(!account) return;
    if(account.indexOf('@') === 0) account = account.replace('@','');
    $results.style.display = 'none';
    $status.innerText = `Finding images for the account, ${account}.`;
    let resp = await fetch(endpoint + `?account=${encodeURIComponent(account)}`);
    let data = await resp.json();
    let html="";
    if(data.length > 0) {

        data.forEach(i => {
            html += `
    <div><a href="${i}" class="lightbox" data-group="twitterImageResults"><img src="${i}"></a></div>
            `;
        });
    } else html="<div>Sorry, but no results were found. Twitter Search API results are date limited.</div>";

    $status.style.display = 'none';
    $results.innerHTML = html;
    $results.style.display = '';
    const prvs = new Parvus();

}

Temel olarak, düğme tıklatıldığında değeri alın (potansiyel olarak @ kaldırarak) ve ardından bunu Pipedream iş akışıma iletin. Diziyi geri aldığımda, ya onları işleyin (Parvus’un ihtiyaç duyduğu kod dahil) ya da hiçbir sonuç bulunamadığını bildirin.

Tam kaynak kodu burada bulunabilir: https://github.com/cfjedimaster/webdemos/tree/master/tweetimages2. Pipedream şu anda en son düzenleme ortamını kullanarak iş akışlarını paylaşmayı desteklememektedir, ancak oluşturduklarımdan daha fazlasına ihtiyacınız olursa doğrudan bana ulaşmaktan çekinmeyin. Son olarak, burada denemekten çekinmeyin ve ne düşündüğünüzü bana bildirin!

https://cfjedimaster.github.io/webdemos/tweetimages2/

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.