저는 자동화된 MaaS 비즈니스를 만들었고 여러분도 할 수 있습니다!

지난 2년 동안 저는 MaaS라는 단순한 아이디어를 중심으로 비즈니스를 구축하는 것에 대해 친구 및 이전 동료들과 농담을 했습니다. 지난 6개월 동안 저는 컨퍼런스 참석자들에게 제가 MaaS 제품에 대해 정말로, 진지하게 작업하고 있다고 말했고, 그것이 저를 따라갈 수 있기를 바랐습니다. 오랜 시간이 흘렀지만 드디어 완성했고 작동합니다!

오 - MaaS는 무엇을 의미합니까? 그것은 서비스로서의 밈을 의미합니다! 당신은 밈을 얻는 것이 식료품을 사는 것만큼 쉬운 21세기에 살고 있다는 것을 정말로 알고 있습니다.

내 프로젝트 이름은 Memeogram이며 사용할 수 있습니다RIGHT NOW! 당신이 해야 할 일은 친구를 선택하고, 그들에게 보낼 밈의 수를 결정하고, 밈을 얼마나 "축축"하게 할지 선택하는 것입니다. 약 2주 후에 그들은 우편을 통해 밈을 받게 될 것입니다.

네, 메일로 말씀드렸습니다. 실제로 엽서는 밈이 당신에게 도착할 것이라고 기대하지 않는 바로 그 방식입니다.

내부적으로 Memeogram이 작동하는 방식은 다음과 같습니다. 발신자가 Typeform 을 작성하면 메일로 밈을 보내는 데 필요한 모든 정보가 수집됩니다. 보낸 사람이 Submit(제출)을 클릭하면 aTypeform webhook가 aFirebase Cloud Function에게 제출을 보냅니다. Cloud Function은 주문을 구문 분석하고 작업에 가장 적합한 밈을 찾은 다음 Lob으로 전송된 이메일을 통해 발신자에게 최신 정보를 유지하면서 주문을 인쇄하고 우편으로 보내도록 요청을 Mailgun으로 보냅니다.

알아요, 너무 멋져요!

4단계로 나만의 MaaS 프로젝트 생성

1단계. Typeform 양식 만들기

Memeogram과 같은 애플리케이션을 빌드하려면 다음과 같이 Typeform을 생성하여 시작하십시오.



Lob으로 엽서를 보내려면 몇 가지 정보를 수집해야 합니다. 주로 보낸 사람과 받는 사람의 이름과 우편 주소가 다음 필드로 나뉩니다.

거리 주소

시티

주

우편번호

보낸 사람의 이메일 주소나 엽서에 포함할 메시지와 같은 추가 정보가 있으면 좋겠지만 Lob을 사용하는 데 필수는 아닙니다.

2단계. Firebase를 사용하여 Webhook 처리

양식을 만든 후 다음 단계는 제출을 처리하는 것입니다. 이Firebase Cloud Function를 통해 제출을 처리할 수 있으며 Typeform이 양식 제출 시 POST 요청을 보내는 끝점 역할을 합니다.

import * as express from 'express';
import * as admin from 'firebase-admin';

// Our endpoint for handling the Typeform Webhook.
export const webhook = async (request: express.Request, response: express.Response) => {
  const submission = request.body;

  // This is our initial postcard, we will fill it out as we continue...
  const postcard = {
    sender: {},
    recipient: {}
  };

  // Here we parse out details from the form submission. By using an answers `ref` we map the response to in our postcard object.
  submission.form_response.answers.forEach((answer: any) => {
    const ref = answer['field']['ref'];
    switch (ref) {
      case 'sender-name':
        order['sender']['name'] = answer.text;
      case 'sender-email':
        order['sender']['email'] = answer.email;
      case 'recipient-name':
        order['recipient']['name'] = answer.text;
        break;
      default:
        break;
    }
  });

  // We will now save the postcard into a collection for our reference
  return admin.firestore().collection('orders').add(postcard)
    // We also will create a status document to keep a sender up to date on their order
    .then((ref) => admin.firestore().collection('status').doc(ref.id).set({
      lastUpdated: new Date(),
      message: 'Order to be sent to Lob',
      email: order.sender.email,
    }))
    .then(() => response.status(200).send({ success: true }));
}

여기에서 두 가지 중요한 일이 발생합니다. 모든 컬렉션orders에 엽서를 저장하고(Lob에 대한 제출을 트리거함) 엽서 주문 상태를 status 컬렉션에 저장합니다(트리거하는 데 사용됨). Mailgun 발신자에게 보내는 상태 이메일).

3단계. Lob과 함께 엽서 보내기

Firebase를 사용하면 trigger functions when a Firestore Collection is written to . 새 엽서가 Firestore 컬렉션에 저장되면 엽서 인쇄를 트리거Lob할 수 있습니다.

import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';
import { readFileSync } from 'fs';
import { join } from 'path';

const Lob = require('lob')('<YOUR-LOB-API-KEY-HERE>');

// The front and the back of postcards being sent can be stored/created as HTML files, with variables swapped in by Lob
const POSTCARD_FRONT: string = readFileSync(join(__dirname, 'templates', 'front.html'), 'utf8');
const POSTCARD_BACK: string = readFileSync(join(__dirname, 'templates', 'back.html'), 'utf8');

// This function will be triggered whenever a new document is created in the `order` collection. So when the above `webhook` function resolves, this function is automatically triggered.
export const ordersOnCreate = functions.firestore.document('orders/{id}').onCreate((snapshot, context) => {
  const id = context.params.id;
  const postcard = snapshot.data();

  // Let's send the order to Lob for printing!
  return Lob.postcards.create({
    description: `Typeform 💌 Lob - ${id}`,
    to: {
      name: postcard.recipient.name,
      address_line1: postcard.recipient.address,
      address_line2: '',
      address_city: postcard.recipient.city,
      address_state: postcard.recipient.state,
      address_zip: postcard.recipient.zip
    },
    from: {
      name: postcard.sender.name,
      address_line1: postcard.sender.address,
      address_line2: '',
      address_city: postcard.sender.city,
      address_state: postcard.sender.state,
      address_zip: postcard.sender.zip
    },
    front: POSTCARD_FRONT,
    back: POSTCARD_BACK,
    merge_variables: {
      // This is a variable that will be swapped into out postcard HTML templates
      message: postcard.message
    }
  }, (error: any, success: any) => {
    if (error) {
      // If we are unable to send the order to Lob we will update our status with an error
      admin.firestore().collection('status').doc(id).update({
        error: true,
        message: 'Your order could not be sent to Lob',
        lastUpdated: new Date()
      });
    } else {
      // If successful we will update the order status accordingly
      admin.firestore().collection('status').doc(id).update({
        error: false,
        message: 'Your order has been successfully sent to Lob',
        completed: true,
        lastUpdated: new Date(),
        sent: success
      });
    }
  });
});

4단계. Mailgun으로 발신자에게 알림

이전 두 섹션의 코드가 status 컬렉션에 기록된다는 사실을 눈치채셨을 것입니다. 발신자가 주문 상태를 최신 상태로 유지하기를 원하기 때문입니다. 주문이 생성될 때 트리거되는 Cloud 함수와 마찬가지로 상태가 생성되거나 업데이트될 때 이 함수를 트리거하여Mailgun 상태 이메일을 보냅니다.

import * as functions from 'firebase-functions';
import * as Mailgun from 'mailgun-js';

const mailgun = Mailgun({
  apiKey: '<YOUR-MAILGUN-API-KEY-HERE>',
  domain: '<YOUR-MAILGUN-DOMAIN-HERE>'
});

// This function will be triggered whenever a status is created
export const statusOnCreate = functions.firestore.document('status/{statusId}').onCreate((snapshot, context) => {
  // First we parse out the ID of the status document (it should match the order's ID)
  const id = context.params.statusId;
  // Then we parse out the status document
  const status = snapshot.data();
  // We then send the status and id to our `sendEmail` function that will handle sending the email
  return sendEmail(status, id);
});

// This function will be triggered whenever a status is changed (updated)
export const statusOnUpdate = functions.firestore.document('status/{statusId}').onUpdate((change, context) => {
  // Here we just ensure it's an update and not a delete
  if (!change.after) { return Promise.resolve(); }
  const id = context.params.statusId;
  const status = change.after.data();
  return sendEmail(status, id);
});

// All we do here is send the email via Mailgun
function sendEmail(status: any, id: string): Promise<any> {
  return mailgun.messages().send({
    from: '[email protected]',
    to: status.email,
    subject: `Typeform 💌 Lob - Order ${id} Update`,
    text: `${status.message} \n View order at https://typeform-lob.firebaseapp.com/order?id=${id}`
  });
}

최종 제품

Firebase에 프로젝트를 배포한 후 주문을 추적하는 데 사용할 수 있는 확인 이메일을 받을 때까지 양식을 작성하고 프로세스 실행을 지켜볼 수 있습니다.



직접 해보십시오! 이 가이드는 위에서 설명한 애플리케이션을 설정하고 배포하는 전체 프로세스를 안내합니다.

git clone https://github.com/MichaelSolati/typeform-lob.git
cd typeform-lob
npm i
npm run start

또는 데모 앱의 배포된 버전을 사용해 볼 수 있습니다right here.

밈은 재미있을 수 있지만 존재할 수 있는 다른 실제 사용 사례는 제품을 구매하는 고객에게 보내는 감사 카드를 자동화하려는 경우입니다. 또는 contact ones local congress person via mail에 대한 플랫폼일 수도 있습니다.


내가 하고 있는 모든 일을 따라잡으려면 에서 나를 팔로우하세요. "코드를 보여줘!"GitHub에서 나를 찾을 수 있습니다.