Twilio, WhatsApp 및 Cloudinary를 사용하여 가상 스튜디오 만들기

만약 네가 베를린에 가 본 적이 있다면, 너는 아마도 술집과 거리에서 여러 개의 사진관을 볼 수 있을 것이다.베를린과 스튜디오가 함께 있다.올해JSConf EU에 우리는 자신의 가상 스튜디오를 구축하고 Twilio for WhatsApp가 지원하고자 한다.이 글에서 우리는 Twilio과Cloudinary로 스튜디오를 구축하는 디지털 부분을 어떻게 사용하는지 알게 될 것이다.
한 사람이 그림을 보낼 때, 우리는 이 그림을 처리하고 다시 보낼 수 있는 순수한 디지털 버전의 사진 박스를 만듭니다.

선결 조건

시작하기 전에 다음을 확인하십시오.

Twilio 계정(sign up for free

WhatsApp 샌드박스 채널 설치됨learn how to activate your WhatsApp sandbox

A free Cloudinary account

다음 단계를 비디오로 보려면 다음을 확인하십시오.

WhatsApp 번호 설정

한 사람이 우리의 Whats App 번호(또는 샌드박스)에 그림을 보내면 Twilio는 우리가 받아야 할 것을 터치합니다.우리는 어떤 HTTP 서버를 사용해도 이 점을 실현할 수 있지만, 이 예에서는 Twilio Function 을 사용할 것이다.이렇게 하면 Node를 사용하여 서버 없는 HTTP 노드를 호스팅할 수 있습니다.js.
Twilio Console 에서 Functions section 로 이동하여 "Hello SMS"템플릿을 사용하여 새 Twilio 함수를 만듭니다.

새 함수를 만들면 "Whats App Photobooth"와 같은 이름을 만들고 /photo 같은 경로를 지정합니다.변경 사항을 저장하고 Twilio 함수에 경로를 복사해야 합니다.

새 탭에서 WhatsApp sandbox configuration screen 으로 이동하여 "메시지가 전송될 때"의 URL을 Twilio 함수의 경로로 설정합니다.변경 사항을 저장하기 위해 끝까지 스크롤합니다.

WhatsApp 샌드박스에 메시지를 보내서 올바른 설정을 테스트할 수 있습니다.대답은 시종일관 "안녕하세요, 세상"이어야 합니다.

사진 수신

이제 Twilio 함수를 연결하여 이미지를 보낼 때 이미지를 검색하는 방법을 보여 줍니다.
Twilio가 웹 훅에 HTTP 요청을 보내면 이 요청에서 메시지를 둘러싸고 메시지를 보냅니다.Twilio 함수에서 우리는 함수에 전달된 event 대상을 통해 이 함수에 접근할 수 있다.
특히 우리의 예에서 event.MediaUrl0 흥미롭다. 왜냐하면 이미지가 메시지와 함께 발송되면 우리의 이미지의 URL을 포함하기 때문이다.만약 더 많은 그림을 보냈다면, 우리도 event.MediaUrl1 에서 event.MediaUrl9 까지 사용할 수 있을 것이다. 그러나 우리의 예에서 우리는 첫 번째 것에 중점을 두어야 한다.
이제 URL만 기록하고 Twilio 함수를 수정하고save를 누르면 됩니다.

exports.handler = function(context, event, callback) {
    console.log(event.MediaUrl0);
    let twiml = new Twilio.twiml.MessagingResponse();
    twiml.message("Hello World");
    callback(null, twiml);
};

그리고 그림을 샌드박스에 보내고 함수 밑에 있는 로그를 확인하세요.기록된 URL이 보일 것입니다.복사 버튼을 눌러 URL을 복사하고 다른 탭에서 열면 보낸 이미지를 볼 수 있습니다.

이제 전송된 이미지에 액세스할 수 있습니다.Cloudinary를 사용하여 수정하는 방법을 살펴보겠습니다.

사진 조작

Cloudinary는 이미지 관리와 조작에 사용되는 플랫폼입니다.이것은 우리의 용례에 매우 좋다. 왜냐하면 우리는 그림에 이미지 처리를 하고 싶기 때문이다.Twilio에 생성된 이미지를 보낼 수 있는 URL이 필요합니다.Cloudinary는 이 두 가지를 하나의 플랫폼에 결합시킨다.
먼저 SDK cloudinary 를 종속 항목으로 설치하고 Cloudinary 자격 증명을 설정합니다.Twilio 함수의 구성 페이지로 이동하여 환경 변수 섹션 Cloudinary Dashboard 에서 CLOUDINARY_URL 을 추가합니다.


그런 다음 Dependencies 섹션으로 스크롤하고 cloudinary 및 버전 * 을 추가하여 최신 버전을 설치합니다.

이 두 동작을 완성한 후,save를 누르면 변경 사항을 적용합니다.
이제 Cloudinary SDK의 모든 설정을 마쳤으니 이미지 처리를 시작할 때가 되었습니다.우리의 예에서 우리는 그림에 대해 다음과 같은 조작을 실행하기를 희망한다.

세로 비율을 3x4 이미지로 변경합니다.

높이를 1600px

로 조정

맨 위에 덮어쓰기를 적용합니다.우리의 예에서 그것은 this overlay

이미지 처리를 시작하기 전에 덮어쓰기 그림을 Cloudinary 미디어 라이브러리에 업로드해야 합니다.당신은 자신의 사이즈 1200px 너비, 1600px 높이 또는download one here을 사용할 수 있습니다.
Cloudinary 미디어 라이브러리에 업로드하고 이름을 지정합니다overlay-photo.

Cloudinary는 transformations 개념을 사용하여 이미지를 조작하고 다양한 옵션을 제공합니다.또한 즉각적인 변환도 지원합니다.이것은 우리가 이미지를 업로드하는 동안 변환 그룹을 전달해서 언제든지 어떤 변환을 캐시해야 하는지 알려줄 수 있다는 것을 의미한다.당신은 각종 available transforms in the Cloudinary docs를 이해할 수 있습니다.
우리의 경우 변환은 JavaScript에서 다음과 같이 변환됩니다.

const cloudinaryTransforms = {
  transformation: [
        { aspect_ratio: 0.75, crop: "crop" },
        { height: 1600, crop: "scale" },
        {
          overlay: "overlay-photo",
          flags: "relative",
          height: "1.0",
          width: "1.0"
        }
  ]
};

Cloudinary API는 리셋 기반이므로 내장된 promisify 방법을 사용하여 이 API에서 비동기식/대기 모드를 지원합니다.
업로드 과정에서 사진에 공통 ID를 이름으로 할당해야 합니다.이 작업은 사용자가 보낸 메시지의 IDMessageSid를 사용하여 수행됩니다. 이 ID는 매우 좋은 고유 식별자이기 때문입니다.
업로드 결과로 변환된 URL을 검색할 수 있습니다 eager.그리고 응답 메시지 TwiML에 설정할 수 있습니다 media .
Twilio 함수를 업데이트하여 다음을 포함합니다.

const cloudinary = require("cloudinary").v2;
const { promisify } = require("util");
const uploadImage = promisify(cloudinary.uploader.upload);
const cloudinaryTransforms = {
  transformation: [
        { aspect_ratio: 0.75, crop: "crop" },
        { height: 1600, crop: "scale" },
        {
          overlay: "overlay-photo",
          flags: "relative",
          height: "1.0",
          width: "1.0"
        }
  ]
};

exports.handler = async function(context, event, callback) {
  let twiml = new Twilio.twiml.MessagingResponse();

  if (!event.MediaUrl0) {
    twiml.message('Please send an image');
    callback(null, twiml);
    return;
  }

  const res = await uploadImage(event.MediaUrl0, {
        public_id: event.MessageSid,
        eager: [cloudinaryTransforms]
  });
  const url = res.eager[0].secure_url;

  twiml.message("Thanks").media(url);
  callback(null, twiml);
};

Save 를 눌러 변경 사항을 배포합니다.
현재 변경 사항을 배치했습니다. 그림 텍스트를 Whats App 샌드박스 번호에 입력하면 변환된 그림을 응답으로 받을 수 있습니다.

다음은 뭐예요?

축하합니다. 트와일리오, Whats App, Cloudinary가 지원하는 디지털 스튜디오를 만들었습니다.하지만 너와 트와일리오의 여정이 반드시 끝나야 하는 것은 아니다.너는 왜 체크아웃을 하지 않느냐

How to build an npm search bot with Twilio and WhatsApp

Jump into your own TwilioQuest adventure and learn in an interactive game how to use Twilio's APIs

질문이 있거나 구축한 내용을 보여주고 싶으면 언제든지 연락 주십시오.

트위터:

이메일: [email protected]

GitHub:dkundel

dkundel.com