Javscript

Netlify Derlemelerinizi Tidbyt ve Pipedream ile Entegre Edin

Birkaç ay önce, tamamen gereksiz görünen ama aynı zamanda tamamen havalı görünen küçük bir cihaz için rastgele bir Facebook uygulamasına rastladım: tidbyt. Tidbyt, örneğin gün doğumu ve gün batımı gibi farklı veri parçalarını gösteren küçük bir donanım LED cihazıdır:

Veya ay evresi bilgileri:

Tidbyt'te görüntülenen Ay evresi

Ve elbette, Nyan kedisi:

Tidbyt'te Nyan kedisi

Dediğim gibi bu benim işim değil ihtiyaç Hayatımda, ama aldığım için çok mutluyum. Bu sadece eğlenceli bir donanım parçası. Ancak daha da havalı olanı, bir API’ye sahip olmasıdır. API’yi tam uygulamalar veya yalnızca bir kerelik mesajlar oluşturmak için kullanabilirsiniz. Onların geliştirici belgeleri oldukça iyi durumda ve bir veya iki hıçkırıkla karşılaştığımda, donanımıma özel mesajlar göndermeye başlamak oldukça kolaydı. Tek gerçek nit, bir resim, 64×32 bir resim göndermeniz gerektiğidir. Sadece hızlı bir metin mesajı göndermek istediğinizde bu biraz can sıkıcıdır, ancak orada görüntü oluşturmanın birden fazla yolu vardır, bu yüzden çok fazla sorun olmaz.

Bunu akılda tutarak – bir Netlify entegrasyonunu nasıl kurduğumu paylaşmama izin verin!

Ne İnşa Ediyorum

Kısa ve basit – sitemi (bu site, şu anda bulunduğunuz site!) dağıttığımda, derleme tamamlandığında bir bildirim istiyorum. Şöyle bir şey:

Netlify, sitemi oluştururken iki ila dört dakika arasında sürüyor, bu sayede derleme tamamlandığında görsel bir bildirim alabiliyorum. Nasıl yaptığımı paylaşayım.

Pipedream İş Akışı

Sürecin ana kısmı, bir Ulaşılması mümkün olmayan istek HTTP tetikleyicisi kullanan iş akışı. Esasen basit bir sunucusuz uç nokta. Tetikleyicinin dışında bir kod adımı vardır. Şimdi, işlerin biraz karmaşıklaştığı yer burası. Metin içeren bir resim oluşturmam gerektiğini biliyordum. Geçmişte görüntüleri okumak ve işlemek için Düğüm kitaplıklarıyla bazı çalışmalar yapmış olsam da, bir tane kullanmayalı uzun zaman oldu. Ayrıca bulduğum NPM modüllerinin Pipedream’de iyi çalışmadığı bir sorunla karşılaştım.

İlk başta, bir yer tutucu görüntü hizmeti kullanmayı düşündüm. Birçoğu, üzerinde zaten ortalanmış bir metin bulunan bir görüntü tanımlamanıza izin veriyor ve biraz uğraşırken orada çalışan bir şey elde ettim.

Pipedream bolluğunda bunun hakkında sohbet ederken, oradaki üyelerden biri tavsiye etti afiş ayısı. Bu bir Gerçekten çok basit bir API’ye sahip harika görüntü API hizmeti. Web tabanlı araçlarını kullanarak bir temel şablon tasarlarsınız ve ardından bir API kullanarak “Bu şablonu alın, değiştirin ve sonucu bana geri verin” diyebilirsiniz.

İşte nasıl kullandım:

var data = {
    "template" : "V32jY9bBeN0DBGWrlo",
    "modifications" : [
    {
        "name" : "text_container_3",
        "text" : "Build Complete",
        "text_align_h":"center",
        "text_align_v":"center",
        "color" : "#FFFFFF",
    }
    ]
}

let resp = await fetch('https://sync.api.bannerbear.com/v2/images', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
    'Content-Type' : 'application/json',
    'Authorization' : `Bearer ${process.env.BANNER_BEAR_API_KEY}`
    }
    });

let result = await resp.json();

Gördüğünüz gibi, çok fazla bir şey yok. Bir şablon (ki benim için Tidbyt için uygun boyutu kullanan siyah bir dikdörtgendi) ve sonra kullanmak istediğim metni belirtiyorum. Bunu Bannerbear’a gönderiyorum ve sonuç, oluşturulan görüntünün URL’sini içeren bir JSON paketi oluyor. Şimdi açık olmak istiyorum, Bannerbear’ın bir sürü seçeneği var, imajımı oluşturmak için yapabileceğim en hızlı ve en basit şeyi kullandım, ama kesinlikle kontrol edilmesi gereken bir hizmet. Bittiğinde bu görüntü şöyle görünür:

Yapı Tamamlandı

Bir sonraki adım, bu verileri Tidbyt’ime almaktı. Bahsettiğim gibi, bir API’leri var, ancak bir NPM paketi de bulabilirsiniz: https://npm.io/package/tidbyt. Kurulduktan sonra ve anahtarlarınız ortam değişkenlerinde ayarlandığında, kullanımı oldukça hızlıdır:

const tidbyt = new Tidbyt(process.env.TIDBYT_TOKEN);
const device = await tidbyt.devices.get(process.env.TIDBYT_DEVICE_ID);

let image = await fetch(result.image_url);
let img_data = await image.arrayBuffer();

await device.push(Buffer.from(img_data), {
    installationId:'Custom',
    background:false
});

Şimdi… bu ilk versiyondu ve muhtemelen fark etmişsinizdir. Statik metinli dinamik bir görüntü oluşturmak için bir API arıyorum. Bu biraz aptalca. Bu yüzden, onu çalıştırdıktan ve Bannerbear’a sanal bir beşlik çaktıktan sonra, API’lerini kullanmayı bıraktım ve görüntüyü Pipedream iş akışı eklerime kaydettim. Şimdi kod adımı biraz daha basit:

import Tidbyt from 'tidbyt';
import fs from 'fs';

export default defineComponent({
  async run({ steps, $ }) {
    
    const tidbyt = new Tidbyt(process.env.TIDBYT_TOKEN);
    const device = await tidbyt.devices.get(process.env.TIDBYT_DEVICE_ID);

    let img_data = fs.readFileSync(steps.trigger.context.attachments["build_complete.png"]);

    await device.push(Buffer.from(img_data), {
      installationId:'Custom',
      background:false
    });


  },
})

Netlify Entegrasyonu

Son adım, Pipedream iş akışından URL’yi kopyalamak ve Netlify’a başarılı bir yapı oluşturmasını söylemekti. Sitemin ayarlarına girdim, Oluştur ve dağıt, Bildirimleri dağıt. Yeni bir bildirim ekledim ve “dağıtım başarılı” bildirimini seçtim. Son olarak, URL’mi Pipedream’den yapıştırdım:

Dağıtım bildirimi

Sarmak

Dediğim gibi, donanımı gerçekten beğendim ve onunla kullanabileceğiniz birçok uygulama var. API güzel bir şekilde yapılmış ve çok daha karmaşık bir şey yapabilirdim, ancak hızlı bir entegrasyon testi için bu basit iş akışı iyi çalıştı. Cihazı alırsanız ve ne düşündüğünüzü bana bildirin.

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu