Dinamik zengin kart oluşturmak için HTML'den resim oluşturma

RCS Business'taki en güçlü ve çok yönlü içerik türlerinden biri Mesajlaşma zengin karttır. Zengin bir kartla, alakalı bilgileri tek bir seferde gönderebilirsiniz (bir resim veya video, başlık, açıklama ve en fazla dört başlık dahil) yanıt veya işlem önerilerinde bulunmak için kullanılır.

Bağımsız zengin kartlar ve zengin kart ruloları, kullanıcılar için ilgi çekici deneyimler oluşturmanıza yardımcı olur. RACI matrisinde resimler kupon veya ürün gibi statik resimlerdir. Ama ne kullanıcı hakkındaki bilgilere dayalı olarak dinamik içerik göndermeniz gerektiğinde biniş kartı gibi mi?

Bu dokümanda, HTML ve Google Slaytlar ile anında nasıl görüntü oluşturacağınızı bu resimleri, temsilcinizin gönderdiği zengin kartlara yerleştirin. Nasıl dönüştürüleceğini öğrenin HTML'yi sonraki resme ekleyin.

HTML'den resme

HTML, metin ve medya kombinasyonlarını yerleştirmek için idealdir. Geliştirici olarak, kullanıcıya biniş kartı, veri kartı gibi bir şey göndermek için veya kullanıcıya özgü diğer bilgi türlerini dinamik olarak büyük olasılıkla kullanacağınız araç olacaktır. RCS Business Messaging'in zengin özellikleri kartları yalnızca resim ve video medya türlerini desteklediğinden gücüne sahip olduğundan, öncelikle HTML'nin bir resme dönüştürülür.

Neyse ki çoğu modern programlama dili, bilgisayar korsanı en azından temel HTML oluşturabilen web sayfalarının veya bileşenlerin ekran görüntüleri ( örneğin, JEditorPane), Resim oluşturmak için kullanabileceğiniz bir resim.

Web sayfalarının resimlerini çekmek için kullanabileceğiniz API'ler de vardır. Örneğin, Google Page Insights API bir URL'den otomatik olarak ekran görüntüleri oluşturabilir.

Örnek:

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true

Ardından, kullanıcıya özel bir veri kümesi oluşturmak için Node.js biniş kartını resme dönüştürebilir, herkese açık olarak yükleyebilir erişilebilir bir URL'ye gönderebilir ve daha sonra, resmi kullanıcıya göndermek için bir zengin kart içinde ekleyebilirsiniz.

Dinamik biniş kartı oluşturma

Başlamak için aşağıdaki gibi bir biniş kartı oluşturmak üzere HTML'ye ihtiyacımız var: görüntüsüdür.

Bunu yapmanın pek çok yolu vardır ancak biz bir URL uç noktası tanımlayacağız HTML kodunu oluşturan /getTicket?msisdn=[phone] adlı bir Node.js uygulamasında EJS görüntüleme motorunu kullanarak biniş kartına ihtiyacımız var.

getUserTicket adında, kullanıcının ve şu bilgileri içeren bir bilet nesnesini döndürür: kalkış saati, koltuk, bilet türü ve başlangıç konumu.

Ekspres uygulamanın yönlendiricisinde getTicket uç noktasını tanımlarız. getUserTicket işlevini kullanın ve bileti EJS şablonuna iletin.

router.get('/getTicket', function(req, res, next) {
    // Get the passed in phone number
    let msisdn = req.body.msisdn;

    // Get the ticket object for this user
    let ticket = getUserTicket(msisdn);

    // Render the ticket in HTML using an EJS template
    res.render('ticket', {ticket: ticket});
});

Bilet EJS şablonu, örnek Bonjour'u oluşturmak için aşağıdaki HTML'yi tanımlar Tren bileti.

<div>
  <div>
    <div class="left"><img width="200" src="/images/bonjour-rail-logo.png" /></div>
    <div class="right muted-text"><%= ticket.dateOfDeparture; %></div>
    <div class="cl"></div>
  </div>
  <div>
    <div class="left highlighted-text-color"><h2><%= ticket.startingLocation.city %></h2><br/><%= ticket.startingLocation.station %></div>
    <div class="right highlighted-text-color"><h2><%= ticket.endingLocation.city %></h2><br/><%= ticket.endingLocation.station %></div>
    <div class="cl"></div>
  </div>

  <div>
    <div class="left">
        <h3>PLATFORM <%= ticket.platform %></h3>
      <div>
        <div class="left">
          <div><h4>DEPART</h4></div>
          <div><%= ticket.departureTime %></div>
        </div>
        <div class="left">
          <div><h4>ARRIVE</h4></div>
          <div><%= ticket.arrivalTime %></div>
        </div>
        <div class="cl"></div>
      </div>
      <div>
        <div class="left">
          <div><h4>TICKET TYPE</h4></div>
          <div><%= ticket.ticketType %></div>
        </div>
        <div class="left">
          <div><h4>SEAT</h4></div>
          <div><%= ticket.seat %></div>
        </div>
        <div class="cl"></div>
      </div>
    </div>
    <div class="right">
      <img src="<%= ticket.qrCode %>" width="170" />
    </div>
    <div class="cl"></div>
  </div>
</div>

HTML'den resim oluşturma

Biniş kartını oluşturmak için HTML'yi tanımladık ancak bunu yapmanın bir yolunu bulmamız gerekiyor. resme dönüştürebilirsiniz.

Hem ham HTML hem de ham HTML'yi dönüştürmek için kullanılabilecek birçok açık kaynak Node.js modülü vardır. ve URL'leri resimlere dönüştürür. Bu örnekte, düğüm-web-fotoğrafı, Bu, PhantomJS ile ilgili ışık sarmalayıcıdır.

PhantomJS, HTML'yi resimlere dönüştürebilen komut dosyası çalıştırılabilen gözetimsiz bir tarayıcıdır. PhantomJS, oluşturma için WebKit'i kullandığından karmaşık sayfaları resimler, CSS ve JavaScript.

Düğüm web fotoğrafını (npm install --save node-webshot) yükledikten sonra HTML'yi görsele dönüştürmek çok basittir.

var webshot = require('node-webshot');
let url = '/getTicket?msisdn=' + msisdn;
let htmlAsImageFileLocation = 'ticket.png';

// Define screenshot options
var options = {
      screenSize: {
            width: 550,
            height: 450
      },
      shotSize: {
            width: 550,
            height: 450
      },
      userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'
    };

// Save html as an image
webshot(url, htmlAsImageFileLocation, options, function(err) {
  // TODO: Upload image to a publicly accessible URL
});

Dosyaları herkesin erişebileceği bir URL'de depolama

Webshot ile oluşturulan görselden yararlanabilmemiz için URL'yi tıklayın. Görüntüyü özel bir web sunucusunda oluşturuyorsanız kaydedeceğiz, ancak bu örnekte iki kopyayı da dosyayı Google Cloud Storage'a yükleyin.

Aşağıdaki işlev, yerel görsel konumunu alıp bunu Google'a yükler Cloud Storage, yeni oluşturulan medya bağlantısını döndürüyor.

function uploadImage(imageLocation) {
    const {Storage} = require('@google-cloud/storage');

    // Creates a client
    const storage = new Storage();

    // Define the Cloud storage location and filename
    const bucketName = 'sample-image-uploads';
    const yourFileDestination = 'uploaded-image.png';

    // Set the options for the upload to be readable by anyone
    const options = {
        destination: yourFileDestination,
        predefinedAcl: 'publicRead'
    };

    // Return a promise that includes the storage upload
    return new Promise(function(resolve, reject) {
        // Uploads a local file to the bucket
        storage.bucket(bucketName).upload(imageLocation, options)
            .then(results => {
                // Return the image URL
                resolve(results[0].metadata.mediaLink);
            }).catch(error => {
                reject(error);
            });
    });
}

Ardından, daha önce yorum yapılan TODO öğesini, uploadImage işlevini kullanın.

// Save html as image
webshot(url, htmlAsImageFileLocation, options, function(err) {
      let uploadRequest = uploadImage(filename);

      uploadRequest.then(function(imageUrl) {
         // TODO: Use the imageUrl in a rich card to send to the user
      });
});

Resim içeren zengin kart gönderme

Neredeyse bitti. RBM zengin kartı oluşturan sendBoardingPass(imageUrl, msisdn) işlevi kullanıcıya gönderir.

Zengin kartı RBM ile göndermek için İlk Aracı Örneği.

function sendBoardingPass(imageUrl, msisdn) {
    let title = 'Here is your boarding pass.';

    let suggestions = [
                {
                    reply: {
                        text: 'See more options',
                        postbackData: 'more_options',
                    }
                },
            ];

    let params = {
        messageText: title,
        msisdn: msisdn,
        imageUrl: imageUrl,
        suggestions: suggestions,
        height: 'TALL',
    };

    // Send the boarding pass
    rbmApiHelper.sendRichCard(params);
}

Aşağıda nihai sonucun ekran görüntüsünü görebilirsiniz.

Özet ve özet

Zengin kartları daha çok yönlü hale getirmenin en basit yolu, dinamik HTML kullanmaktır HTML'yi resimlere dönüştürür. Çoğu modern programlama dili desteği kitaplıklar veya API'ler vardır. Şunları yapmanız gerekebilir: resim boyutlandırmasıyla denemeler yaparak kullanım alanınıza uygun Ancak reklam öğelerinizde daha ilgi çekici görseller oluşturmak için mükemmel bir yaklaşım. RBM temsilcileridir.

İyi şanslar ve iyi kodlamalar!