RCS Business Messaging'teki en güçlü ve çok yönlü içerik türlerinden biri zengin karttır. Zengin kartlar sayesinde resim veya video, başlık, açıklama ve önerilen dört adede kadar yanıt veya işlem dahil olmak üzere ilgili bilgilerin parçalarını tek bir iletide gönderebilirsiniz.
Bağımsız zengin kartlar ve zengin kart bantları, kullanıcılar için ilgi çekici deneyimler oluşturmanıza yardımcı olabilecek güçlü özelliklerdir. Paylaşmanız gereken resimler kupon veya ürün gibi statik resimler olduğu sürece bunlar çok işe yarar. Peki ya kullanıcının biniş kartı gibi bilgilerini temel alan dinamik içerik göndermeniz gerekiyorsa ne olur?
Bu makalede size HTML ile anında resim oluşturmayı ve bu resimleri temsilcinizin gönderdiği zengin kartlara yerleştirmeyi göstereceğiz. HTML'yi resme nasıl dönüştüreceğimizi inceleyerek başlayalım.
HTML'den resme
HTML, metin ve medya kombinasyonlarını oluşturmak için mükemmeldir. Geliştirici olarak, bir kullanıcıya biniş kartı, veri kullanım grafiği veya kullanıcıya özel başka tür bilgiler göndermek için bir ürün oluşturmamız gerekiyorsa muhtemelen dinamik olarak oluşturulmuş HTML'yi kullanırız. RCS Business Messaging, rich media yalnızca resim ve video medya türlerini destekler. Bu nedenle, dinamik içerik oluşturma konusunda HTML'nin gücünden yararlanabilmek için HTML'nin öncelikle bir resme dönüştürülmesi gerekir.
Neyse ki çoğu modern programlama dili, resim oluşturmak için kullanabileceğiniz en azından temel HTML (ör. JEditorPane) oluşturabilen web sayfalarının veya bileşenlerin ekran görüntülerini alırken kitaplıkları destekler.
Ayrıca, web sayfalarının fotoğraflarını çekmek için de API'lar vardır. Örneğin, Google'ın Page Insights API'si 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
Sonraki adımlarda HTML ile kullanıcıya özel bir biniş kartı oluşturmak, bunu bir resme dönüştürmek, herkese açık bir URL'ye yüklemek ve ardından kullanıcıya göndermek üzere bir zengin karta eklemek için Node.js express uygulamasını kullanırız.
Dinamik biniş kartı oluşturma
Başlangıç olarak, aşağıdaki resimde gösterildiği gibi bir biniş kartı oluşturmak için HTML'ye ihtiyacımız vardır.
Bunu yapmanın birçok yolu vardır, ancak /getTicket?msisdn=+12223334444 adlı Node.js uygulamasında bir URL uç noktası tanımlayacağız. Bu kod, EJS görüntüleme motorunu kullanarak biniş kartı için ihtiyacımız olan HTML'yi oluşturur.
Kullanıcının telefon numarasını alıp kalkış saati, koltuk, bilet türü, başlangıç konumu gibi bilgiler içeren bir bilet nesnesi döndüren getUserTicket adlı bir işlevin olduğunu varsayalım.
Ekspres uygulamanın yönlendiricisinde, getTicket uç noktasını tanımlar, getUserTicket işlevini çağırır ve bileti EJS şablonuna iletiriz.
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 Rail biletini oluşturmak için aşağıdaki HTML'yi tanımlar.
<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ı oluşturmak için HTML'yi tanımladık ancak bunun bir resme dönüştürülmesi gerekiyor.
Hem ham HTML hem de URL'leri resimlere dönüştürmek için kullanabileceğiniz birçok açık kaynaklı Node.js modülü vardır. Bu örnekte, PhantomJS çevresinde ışık sarmalayıcı olan düğüm-webshot kullanalım.
PhantomJS, HTML'yi resimlere dönüştürebilen, komut dosyası içermeyen bir gözetimsiz tarayıcıdır. PhantomJS, oluşturma için WebKit'i kullandığından resim, CSS ve JavaScript içeren karmaşık sayfaları işleyebilir.
Düğüm web görüntüsü (npm install --save node-webshot) yüklendikten sonra HTML'yi görüntüye dönüştürmek kolaydır.
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
Web görüntüsü tarafından oluşturulan resimden yararlanmak için herkese açık bir URL'ye ihtiyacımız var. Görüntüyü özel bir web sunucusunda oluşturuyorsanız dosyayı herkese açık bir klasöre kaydetmeniz mümkün olabilir. Ancak bu örnekte dosyayı Google Cloud Storage'a yükleyeceğiz.
Aşağıdaki işlev, yerel bir görüntü konumunu alır ve Google Cloud Storage'a yükleyerek yeni oluşturulan medya bağlantısını döndürür.
function uploadImage(imageLocation) {
const {Storage} = require('@google-cloud/storage');
// Creates a client
const storage = new Storage();
// Define the Cloud storage location and file name
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, bu uploadImage işlevini kullanmak için daha önce yorum yapılan TODO öğesini bir aramayla değiştirmemiz gerekir.
// 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
});
});
Resimle birlikte bir zengin kart gönderme
Neredeyse tamamlandı. Son adımı, önceki adımda oluşturulan resmi kullanarak kullanıcıya RBM zengin kartı oluşturan ve kullanıcıya gönderen sendBoardingPass(imageUrl, msisdn) işlevini tanımlayarak tamamlayalım.
Zengin kartı RBM ile göndermek için Birinci Aracı Örneği'nde bulunan Node.js SDK'sını kullanırım.
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ü yer almaktadır.
Özet ve TL
Zengin kartları daha esnek hale getirmenin en basit yolu, dinamik HTML'den yararlanmak ve HTML'yi resimlere dönüştürmektir. Çoğu modern programlama dili, dönüşümü tamamlamanıza yardımcı olacak kitaplıkları veya API'leri destekler. Resim boyutuyla ilgili bir şeyler yaparak kullanım alanınıza uygun içerikler üretmeniz gerekebilir. Ancak bu yaklaşım, RBM temsilcilerinizde daha ilgi çekici görseller oluşturmak için idealdir.
İyi şanslar ve mutlu kodlamalar!