RCS Business에서 가장 강력하고 다양한 콘텐츠 유형 중 하나 메시지는 리치 카드입니다. 리치 카드를 사용하면 관련 정보 청크를 여기에는 이미지나 동영상, 제목, 설명을 포함하여 확인할 수 있습니다.
독립형 리치 카드와 리치 카드 캐러셀은 사용자를 위한 흥미로운 환경을 만드는 데 도움이 됩니다. 이것들은 공유해야 하는 이미지는 쿠폰이나 제품과 같은 정적 이미지입니다. 하지만 사용자에 관한 정보를 기반으로 동적 콘텐츠를 전송해야 하는 경우 예를 들어 탑승권 등은 무엇인가요?
이 문서에서는 HTML을 사용하여 즉석에서 이미지를 만들고 에이전트가 보내는 리치 카드 내에 해당 이미지를 삽입합니다. 전환 방법 보기 HTML을 이미지로 변환합니다.
HTML에서 이미지로
HTML은 텍스트와 미디어의 조합을 배치하는 데 적합합니다. 개발자가 사용자에게 탑승권, 데이터 레이크, 데이터 링크, 사용량 차트 또는 기타 유형의 사용자별 정보를 동적으로 아마도 생성된 HTML이 우리가 사용할 도구일 것입니다. RCS Business Messaging에서 카드는 이미지 및 동영상 미디어 유형만 지원하므로 동적 콘텐츠 생성을 위한 HTML의 강력한 기능을 사용하려면 먼저 HTML에서 이미지로 변환되었습니다
다행히 대부분의 최신 프로그래밍 언어는 최소한 기본 HTML을 렌더링할 수 있는 웹페이지나 구성요소의 스크린샷( (예: JEditorPane) 이미지를 생성하는 데 사용할 수 있습니다.
웹페이지의 사진을 찍는 데 사용할 수 있는 API도 있습니다. 예를 들어 Google의 페이지 통계 API URL에서 스크린샷을 자동으로 생성할 수 있습니다.
예:
https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true
다음 섹션에서는 Node.js Express 앱을 사용하여 사용자별 탑승권을 HTML로 변환하여 이미지로 변환하고 공개적으로 리치 카드 내에 이미지를 첨부하여 사용자에게 보낼 수 있습니다.
동적 탑승권 만들기
먼저 다음과 같이 탑승권을 생성하기 위한 HTML이 필요합니다. 이미지
이를 달성하는 방법에는 여러 가지가 있지만 URL 엔드포인트를 정의해 보겠습니다.
(HTML을 렌더링하는 /getTicket?msisdn=+12223334444라는 Node.js 앱)
탑승권에 필요한 정보를 제공합니다.
사용자의getUserTicket
정보를 제공하고
출발 시간, 좌석, 티켓 유형, 출발지가 포함됩니다.
Express 앱의 라우터 내에서 getTicket 엔드포인트를 정의하고
getUserTicket 함수를 호출하고 티켓을 EJS 템플릿에 전달합니다.
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});
});
티켓 EJS 템플릿은 샘플 Bonjour를 렌더링하기 위해 다음 HTML을 정의합니다. 기차표
<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에서 이미지 만들기
탑승권을 구성하기 위해 HTML을 정의했지만 이미지로 변환할 수 있습니다
원시 HTML과 원시 HTML을 모두 변환하는 데 사용할 수 있는 많은 오픈소스 Node.js 모듈이 있습니다. URL을 이미지로 변환할 수 있습니다. 이 예에서는 node-webshot PhantomJS를 둘러싼 라이트 래퍼입니다.
PhantomJS는 HTML을 이미지로 렌더링할 수 있는 스크립트 가능한 헤드리스 브라우저입니다. PhantomJS는 렌더링을 위해 WebKit을 사용하므로, WebKit을 사용하여 복잡한 페이지를 이미지, CSS, JavaScript를 지원합니다.
노드 웹샷 (npm install --save node-webshot)을 설치한 후, 변환
HTML을 이미지로 변환하는 것은 간단합니다.
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
});
공개적으로 액세스할 수 있는 URL에 파일 저장
웹샷으로 생성된 이미지를 사용하려면 공개적으로 액세스할 수 있는 URL입니다. 전용 웹 서버에서 이미지를 생성하는 경우 공개 폴더에 저장할 수 있지만 이 예에서는 파일을 Google Cloud Storage에 저장합니다.
다음 함수는 로컬 이미지 위치를 가져와 Google에 업로드합니다. Cloud Storage: 새로 만든 미디어 링크를 반환합니다.
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);
});
});
}
다음으로, 이전에 주석 처리된 TODO를 사용할 호출로 바꿔야 합니다.
이 uploadImage 함수를 호출합니다.
// 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
});
});
이미지가 포함된 리치 카드 보내기
거의 다 되었습니다. 마지막 단계를 완료하려면
sendBoardingPass(imageUrl, msisdn) 함수: RBM 리치 카드를 만듭니다.
이전 단계에서 만든 이미지를 사용하여 사용자에게 전송합니다.
RBM을 사용하여 리치 카드를 전송하기 위해 첫 번째 상담사 샘플
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);
}
다음은 최종 결과의 스크린샷입니다.
마무리 및 요약
리치 카드의 활용도를 높이는 가장 간단한 방법은 동적 HTML을 사용하는 것입니다. HTML을 이미지로 변환할 수 있습니다. 대부분의 최신 프로그래밍 언어는 전환을 완료하는 데 도움이 되는 라이브러리나 API를 추가하는 것이 좋습니다 다음 작업을 해야 할 수도 있습니다. 이미지 크기를 조절해 사용 사례에 맞게 설정을 조정할 수 있습니다. 브랜드 내에서 더 매력적인 비주얼을 만들 수 있는 좋은 접근 방식입니다. RBM 상담사
행운을 빌고 즐거운 코딩을 하시기 바랍니다.