용역(이사, 도배, 용달 등) 주선업 app 개발하기

워드프레스로 용역(이사, 도배, 용달 등) 주선업 app 개발하고 정리해 보았습니다.  

 

개발 단계 개요

1. 견적요청 DB를 생성하여 구글 스프레드 시트로 공유하

     1-1. 구글 설문지로 견적 요청서 만들기

    1-2. 구글 설문지를 DB로 전환하기

    1-3. 생성된 DB를 데이터로 활용하기(도표 만들기 및 사이트에 집어넣기)

    1-4. 워드프레스 폼 플러그인들(form plugins)로 견적요청 DB를 생성하여 구글 스프레드 시트로 공유하기

2. 견적을 할 사업체/개인에게 견적하라고 e-mail 보내기 / app 알람 보내기 /문자보내기

3. 프로그레시브 웹 앱 (PWA, Progressive Web Apps ) 구현

    3-1. 프로그레시브 웹 앱 (PWA, Progressive Web Apps ) 연결

    3-2.  https 프로토콜 사용 서버 구축/SSL 인증 보안 서버 구축

 

 

1. 견적요청 DB를 생성하여 구글 스프레드 시트로 공유하기  

생성된 견적 요청 DB를 구글 스프레드 시트로 공유해야 공유도 가능하고 문자보내기나 e-mail 보내기를 할 수 있습니다. 

이것을 구현하는 방법은 워드프레스 폼 플러그인들도 있지만 구글 설문지를 이용하는 것이 구글 스프레드 시트와 통합이 쉽고 구글 앱스 스크립트와의 연결도 쉬습니다.  

 

1-1. 구글 설문지로 견적 요청서 만들기

구글 설문지 사용법

너무나 많은 자료가 있으니 문제없습니다. 

일단 초안으로 완성한 이사업체를 위한 견적 요청 설문지를 만들어 보았습니다. 

이사업체를 위한 견적 요청 설문지 초안 : https://drive.google.com/open?id=1CEd8724wYUVWkhZ2W28olLm89SU_kViqyCPa1HR0-jw

 

부가기능

구글 설문지_add-on_부가기능

공동작업자 추가

: ?

스크립트 편집기

: 구글 앱스 스크립트의 트리거를 이용하여 자동화할 수 있습니다. 

부가기능

: 구글 스프레드시트처럼 다양한 부가기능들이 제공됩니다. 

   – AppSheet(쉽게 모바일용 설문지를 만들 수 있습니다. 사용자 157,188명)

   – Advanced Summary by Awesome Table( 설문지에서 기본 제공되는 응답보다 훨씬 시각화하여 결과를 보여줍니다. 사용자 146,560명 )

 

1-2. 구글 설문지를 DB로 전환하기

구글 설문지의 응답을 스프레드시트로 전환하여 DB로 만들 수 있습니다.  자동으로 만들어지지 않고 한번 설정해주셔야 합니다. 

 

  • Google 설문지에서 설문지를 엽니다.
  • 상단에서 응답을 클릭합니다.
  • 우측상단의 스프레드시트 아이콘을 선택하시면 바로 만들기가 가능합니다.

구글 설문지 응답 수집_응답수집 장소선택_1

  • 스프레드시트 아이콘을 선택하여 바로 만들기하지 않고 단계별로 절차를 밟아 만들고자 하시는 경우,  더보기 더보기를 클릭합니다.

구글 설문지 응답 수집

  • 응답 수집 장소 선택을 클릭합니다.

구글 설문지 응답 수집_응답수집 장소선택

  • 다음 옵션 중에서 선택합니다.
    • 새 스프레드시트 만들기: Google 스프레드시트에서 응답용 스프레드시트를 만듭니다.
    • 기존 스프레드시트 선택: Google 스프레드시트의 기존 스프레드시트 중에서 선택하여 응답을 저장합니다.

구글 설문지 응답 수집_응답수집 장소선택_2

 

  • 만들기 또는 선택을 클릭합니다.

구글 드라이브( https://drive.google.com/ )로 이동하시면 구글 스프레드시트가 만들어진 것을 확인하실 수 있습니다. 

구글 설문지 응답_구글 드라이브 생성됨

 

((참고))

스프레드시트에 설문지 응답을 저장하는 경우 언제든지 위치를 변경할 수 있습니다.

  1. Google 설문지에서 설문지를 엽니다.
  2. 상단에서 응답을 클릭합니다.
  3. 아래에서 더보기 더보기를 클릭합니다.
  4. 응답 수집 장소 선택을 선택합니다.
  5. 새 스프레드시트를 만들지, 기존 스프레드시트를 사용할지를 선택합니다.
  6. 만들기 또는 선택을 클릭합니다.

스프레드시트에서 응답을 더 이상 수집하지 않으려는 경우 언제든지 설문지를 연결 해제할 수 있습니다.

  1. Google 설문지에서 설문지를 엽니다.
  2. 상단에서 응답을 클릭합니다.
  3. 아래에서 더보기 더보기를 클릭합니다.
  4. 설문지 연결 해제를 선택합니다.

새로운 응답에 대한 이메일 알림 받기

설문지와 스프레드시트를 이용하는 gmail 게정으로 알람이 갑니다. 

구글 설문지 응답_새로운 응답에 대한 이메일 알림 받기

 

잘못된 타임스탬프 : 생성된 DB)(=스프레드시트)의 타임스탬프의 시간이 이상하게 현재 시간과 다른 경우

사소한데 웹검색해도 안 나옵니다. 응답 스프레드시트에서 [파일] -> [스프레드시트 설정] -> [시간대](파랑색) 을 Seoul 로 고쳐주시면 쉽게 해결됩니다. 

구글설문지_타임스탬프 시간틀리는 문제 

 

1-3. 생성된 DB를 데이터로 활용하기(도표 만들기 및 사이트에 집어넣기)

설문지를 통해 생성된 DB는 “설문지이름(응답)”형태의 이름으로 구글 스프레드시트(이하 A시트로 하고 설명하겠습니다.) 로 구글 드라이브에 자동으로 만들어지고 설문지가 완성될때마다 자동으로 업데이트됩니다. 이것은 아래에 다루게 될 “견적을 할 사업체/개인에게 견적하라고 e-mail 보내기 / app 알람 보내기 /문자보내기”에 이용되어집니다. 

구글 설문지 응답에는 아래와 같이 설문에 응답한 내용을 기반으로 다양한 시각화 차트(도표)가 제공됩니다. 그리고 초록색 부분을 클릭하시면 복사하여구글 문서(Doc)에 넣어 편집하는 것도 가능합니다.  그러나 설문지가 쌓일때마다 수동으로 이것을 할 수는 없습니다. 또한 A시트에 개인정보가 있다면 당연히 A시트는 공개되어서는 안됩니다. 


구글 설문지 응답_도표

그런데, 구글 설문지를 통해 생성된 DB는 “설문지이름(응답)”형태의 구글 스프레드시트를 활용할 때 가장 난관은 받은 설문이 새로운 줄을 만들면서 들어간다는 것이다. 그래서 기존에 함수를 적용해 놓아도 셀 주소가 변경되는 바람에 입력받은 자료를 제대로 활용할 수가 없습니다. 또한 매크로도 사용할 수 없으며 구글 앱스스크립트(lastROW 등 사용불가)를 사용하여 보다 복잡한 자동화작업을 할 수가 없습니다. 이것이 “e-mail 보내기 / app 알람 보내기 /문자보내기”를 막는 최대의 난제입니다. 

 

이 프로젝트가 거의 완성되어가던 2019-04-17 에 뜻하지 않은데서 그 해결책을 찾게 되었습니다. 

importrange 함수를 이용하여 함수/매크로/앱스스크립트 적용이 가능한 스프레드시트 만들기(이하, A시트라고 하겠습니다.)

구글 설문 응답받은 데이터 활용하기 알려주시는 방법이 그것인데, 새로운 시트(이하, B시트라고 하겠습니다.)를 하나 만들고, 수정하기 어려운 구글 설문지를 통해 생성된 DB는 “설문지이름(응답)”형태의 구글 스프레드시트(이하 A시트로 하고 설명하겠습니다.) 를  importrange 함수를 이용하여 내용을 가져와 사용하는 방법입니다.  이 함수의 예시를 든다면 ” =IMPORTRANGE(“https://docs.google.com/spreadsheets/d/1BqEqTv9GgB-URYsXZf8PDabxt3VZstm-dYJrRCJrSGo/edit#gid=1835440727”, “A1:AE1000”)“) ” 와 같습니다. 이때 A시트는 설문지에서 요구한 설문에 따라 그리고 참여한 횟수만큼만 데이터가 쌓이게 되는데, 범위_문자열 를” A1:AE10000″와 같이 충분히 주면 설문지 참여횟수가 10,000건이 되어도 처리가 가능합니다. 

IMPORTRANGE

지정된 스프레드시트에서 셀 범위를 가져옵니다.

사용 예

IMPORTRANGE("https://docs.google.com/spreadsheets/d/abcd123abcd123", "시트1!A1:C10")

IMPORTRANGE(A2,B2)

구문

IMPORTRANGE(스프레드시트_키, 범위_문자열)

  • 스프레드시트_키 – 가져올 데이터가 있는 스프레드시트의 URL입니다.

    • 스프레드시트_키 값은 한 쌍의 따옴표 안에 있거나 적절한 텍스트가 입력된 셀을 참조해야 합니다.

  • 범위_문자열 – "[시트_이름!]범위" 형식의 문자열이며 가져올 범위를 지정합니다(예: "시트1!A2:B6" 또는 "A2:B6").

    • 범위_문자열의 시트_이름 요소는 선택사항이며 기본적으로 IMPORTRANGE는 첫 번째 시트의 지정된 범위를 가져옵니다.

    • 범위_문자열의 값은 한 쌍의 따옴표 안에 있거나 적절한 텍스트가 기입된 셀을 참조해야 합니다 .

  •  

 

B시트로 차트 만들기

셀범위를 선택하고 차트 아이콘을 누르면 만들어지므로 이 부분은 패스하겠습니다. 

B 시트로 만든 차트를 web에 게시하기

아이프레임을 이용하여 웹에 게시할 수 있습니다. 구글 스프레드에서 웹에 게시하는 방법이 현재(2019-04-17) 는 다르지만 그 기본 원리와 구성방법은 구글블로그 사용법: 구글 드라이브의 스프레드시트를 블로그에 삽입하기 (게시자에게 감사의 댓글을 달고 싶은데 댓글을 달수 없어 아쉽습니다. ) 설명이 잘 되어 있어서 따라 하시면 됩니다. 

 

1-4. 워드프레스 폼 플러그인들(form plugins)로 견적요청 DB를 생성하여 구글 스프레드 시트로 공유하기

구글 설문지가 편집도 쉽고 스프레드시트로 DB 생성도 더 잘되므로 설문지를 이용하시는 것이 좋을 것 같습니다. 

상세 내용 보기
Contact Form 7은 Caldera Form 처럼 google sheet 와 통합이 가능하고 활성사용자수도 더 많은 플러그인입니다.

Contact Form 7 에 관해서는 아래의 저희의 다른 게시글을 참조하세요.

 

CONTACT FORM 7 : 워드프레스 폼메일(Form mail) plugin


Contact Form 7과 Caldera 는 차이는 Caldera 는 여러 단계로 나눠어 DB를 수집할 수 있어 많은 속성을 가지 DB를 수집하기 위해 적당한 방법이라는 것입니다. 


고급 기능의 무료 폼이 필요할 때 – Caldera 에 따르면, 간단한 양식의 폼이라면 널리 알려진 contact form 7등으로도 충분히 커버할 수 있지만, logic이 들어간 양식이 필요할 때는 고급 폼을 사용해야 합니다. 
보통 고급 폼은 Gravity forms를 사용해서 만들곤 했는데 Caldera forms을 사용해서도 Gravity forms에서 만들던 폼들을 만들 수 있습니다.

고급 기능의 무료 폼이 필요할 때 – Caldera 에 따르면,  일단 개발자 측면에서 봤을 때 가장 마음에 들었던 점은 폼 소스에 다양한 filter와 action을 넣어서 다른 개발자들이 이 폼을 활용해 다른 무언가를 만들 수 있도록 하는 것입니다. Caldera forms의 documentation에서 Developer API에 잘 정리되어 있으니 참고하시기 바랍니다.

또한, Logic과 Multi page 기능을 제공하여 사용자의 입맛에 맞게 원하는 폼을 만들 수 있도록 하였습니다.

 

2. 견적을 할 사업체/개인에게 견적하라고 e-mail 보내기 / app 알람 보내기 /문자보내기

 

e-mail 보내기

e-mail 은 발송비용은 무료이니 이것부터 해보겠습니다. 

1. 설문지 부가기능을 통해 보내는 방법 과 2. 스크립트 편집기로 보내는 방법, 2가지가 있습니다. 

 

1. 설문지 부가기능을 통해 보내는 방법 : Email Notifications for Google Forms

양식 제출 트리거를 사용하여 전자 메일 알림을 설정할 수 있습니다. 2019-03-30 기준 사용자가 650,216 명이나 됩니다. 스프레드시트가 아니고 설문지의 부가기능입니다. 

구글폼에 응답이 접수됐을 때 (1)운영자에게 알람을 주거나 (2)응답자에게 자동으로 감사메일(이 기능은 PREMIUM(연간 29 달러)에서만 가능합니다. (3) 조건을 사용하여 운영자 1 인이외에 다른 담당자(예를들면 지점의 담당자 또는 파트너 사장님들)에게 따로email 을 보내기가 가능합니다.  개인적으로 3번 특징이 주선업 app을 만들고 있는 저에게 매우 매력적입니다. )을 보낼 수 있습니다. 

 

설치

설문지 우측 상단의 점3개아이콘을 클릭하시고 [부가기능]을 선택하세요.

Form Notifications_구글 설문지_부가기능

Email Notifications for Google Forms 검색하여 설치하시면  

Form Notifications_구글 설문지_부가기능_선택_1

설문지 우측상단에 퍼즐 모양의 아이콘이 생성된 것을 확인할 수 있으면 이것을 click하시면 시작하실 수 있습니다. 

Form Notifications_구글 설문지_부가기능_아이콘_2
 
설정 편집(Setting Edit)
[퍼즐 모양 아이콘] -> [Email Notifications for Google Forms] -> [Manage Form Settings] 하시어 설정을 변경하실 수 있습니다. 

Email Notifications for Google Forms_설정 편집_1

Rule Name, Email Address(es) to Notify, Sender’s Email, Sender’s Name 등을 변경하실 수 있습니다. 수정 편집한 후에는 [Save Rule]하시어 저장해 주세요.

Email Notifications for Google Forms_설정 편집_2

 

상세 사용법 동영상(11:00)

아래에 11분에 이르는 자세한 사용법 동영상이 있습니다. 

 

PREMIUM(가격 : 연간 29 달러)

✓ 이메일 발송 한도가 하루 20 명에서 400 명으로 증가했습니다.
✓ 다른 사람들에게 이메일을 보내기위한 여러 규칙을 만듭니다.
✓ 조건부 규칙을 만들고 양식 응답을 기반으로 다른 사람들에게 다른 응답을 보냅니다.
✓ 모든 통지에 CC 및 BCC 전자 메일 주소를 포함하십시오.
✓ 1 : 1 지원으로 업그레이드 할 수있는 무료 기술 지원.
✓ 발신 이메일에서 “Sent by Google Forms”브랜딩을 삭제하십시오.
✓ 간단한 가격 – 연간 29 달러.

 

조건부 알림을 사용하면 양식 응답을 기반으로 다른 사람에게 전자 메일을 보낼 수 있습니다. 정말 마음에 드는 기능으로 본사가 있고 해당 지역에 관한 문의가 들어오면 해당 지역을 담당하는 지점이나 파트너 사장님들에게 이메일 알람을 보낼 수 있습니다. 

상세 설명은 How to Send Emails with Google Forms Based on User’s Answers 을 참조하세요. form-conditional-email-notifications

( 이미지 출처 : How to Send Emails with Google Forms Based on User’s Answers )

 

2. 설문지 스크립트 편집기로 보내는 방법  : 이 방법은 e.values 가 값을 못가지고 와서 실패하였습니다. 

상세 내용 살펴보기
구글 앱스스크립트의 각종 CLASS와 METHODS를 오가며 거의 하루를 소비하였는데, 답은 의외의 곳에 있었습니다. 

점 3개아이콘 -> [<>스크립트 편집기]를 차례로 선택하시어 설문지의 스크립트 편집기를 열어주시고 아래의 스크립트 코드를 넣어주세요

구글 설문지_스크립트 편집기
function onFormSubmit(e) {

    MailApp.sendEmail(“관리자 메일 주소”, “000 설문이 접수되었습니다.”, e.values[1]);

    MailApp.sendEmail(e.values[2], “설문에 참여해주셔서 감사합니다.”, e.values[1] + “님 설문에 참여해 주셔서 감사합니다.\n님 최고!!! 사랑해요~”);

}

출처: https://it4edu.tistory.com/20 [IT for Education]

e.values 는 설문한 내용들을 담아둔 배열입니다. [0] 부터 시작해서 번호가 이어지는데요. e.values[0]은 설문지의 첫 번째 열(“Timestamp”), e.values[1]은 두 번째 열, e.values[2]는 세 번째 열, e.values[3]은 네 번째 열을 의미하므로 편집하여 사용하세요.

“\n” 는 한칸을 띄우라는 의미이고 “\n\n”는 줄을 바꾸라는 의미입니다. 

위에 코드를 기반으로 완성은 스크립트는 아래와 같습니다. 

function onFormSubmit(e) {

    MailApp.sendEmail(“kimsangheu@naver.com”, “견적 요청이 접수되었습니다.”, “(출발지 : “+e.values[1] + ” ” + e.values[2] + ” ” + e.values[3] + ” )” );

    MailApp.sendEmail(e.values[33], “견적을 요청해주셔서 감사합니다.”, e.values[33] + “빠른 시간안에 견적을 드리겠습니다. “);

}

 

트리거 추가

분홍색 시계아이콘의 트리거 버튼을 click합니다. 

설문지 스크립트 편집기_실행버튼_트리거버튼

우측 하단의 [+트리거 추가],

견적 요청 이메일 보내기_트리거 추가하기onFormSubmit 매쏘드를 사용하여서 자동으로 설정이 되어 있으므로, 실행할 함수 선택 등을 설정할 필요없이 바로 저장하시면 됩니다.

견적 요청 이메일 보내기_트리거 추가하기_1

 

이 스크립트를 (사용할 수 있도록)인증하고 계정을 연결해주고 허용해줍니다. 

인증이 필요합니다_권한검토
구글 설문지 스크립트_허용
 

이제 설문지 양식을 제출하여 이메일이 잘 발송되는지 확인하시면 됩니다.  

참고 : 하루에 보낼 수 있는 e-mail 의 숫자는 100개까지만 가능합니다.  

 

모바일 app으로 알람받기

문자보내기는 저만 애착을 갖고 있는 기능으로 1. 잔디 app으로 알람받기, 2. 네이버 메일 app이나 gmail app을 스마트폰에서 설치하여 보는 방법, 3. 구글 메신저 app을 이용하는 방법, 4. Google 양식에 대한 이메일 알림( Email Notifications for Google Forms) 을 이용하여 ifttt app으로 알람을 받는 방법등 다양한 알람을 받는 방법이 있습니다.  app을 이용하는 것이 문자 비용을 따로 지불하고 또 문자서비스 솔루션을 연결하는 어려움 작업없이 바로 이용할 수 있어 장점이 있습니다. 

 

1. 잔디( JANDI ) app으로 알람받기[추천]( www.jandi.com )

개요

잔디 JANDI 는 slack의 한국형 솔루션에 해당하며 알람에서 끝나는 것이 아니고 카톡처럼 메신저를 이어갈 수 있는 업무용 메신저로 협업의 도구로 매우 강력합니다. 주선업 솔루션으로 강추합니다. (slack 을 이용하면 좋을 것으나 한국어 단체방이 만들어지지 않아 잔디를 선택하였습니다. )

 

잔디(JANDI)는 협업에 최적화된 국내 대표 기업용 메신저입니다.
현재 NS홈쇼핑, 동성그룹, 컴투스게임빌, 무신사를 포함해 17만 개가 넘는 기업과 팀이 잔디를 통해 확연히 달라진 업무 환경을 경험하고 있습니다.  (2019년 3월 기준)

 

생성해 놓은 토픽에 잔디 커넥트 웹훅을 이용하여 제출된 설문지 정보를 실시간 업데이트시키기(알람받기)

잔디 커넥트 활용하기: 구글 시트 + 설문지 참가자 쉽게 관리하기 를 참고하세요. 잘 됩니다. 

 

zappier_make

 

제대로 설정하고 나니 아래와 같이 설문지가 제출되면 구글 스프레드시트가 업데이트되고 구글 스프레드시트가 업데이트되면 잔디의 (업무용 메신저방인) 토픽에 업데이트됩니다. 이것을 팀과 공유하고 견적을 할 사람에게 알려주시면 담당자가 견적을 할 수 있어 소기의 목적을 달성할 수 있습니다.  

잔디 JANDI_webhook 수신화면

 

 

[Step 1] 

 

1. (구글 스프레드 시트 정보를 연동할) 토픽 우측 상단에 플러그 모양의 [잔디 커넥트] 버튼을 누른 후에 [연동하기]를 클릭해주세요.

잔디컨넥트 연동하기

2. 잔디 커넥트 항목 중 하단에 있는 [Webhook 수신 (Incoming Webhook)] 의 [연동 항목 추가하기] 버튼을 클릭합니다.

( 이미지 출처 : 잔디 커넥트 활용하기: 구글 시트 + 설문지 참가자 쉽게 관리하기 ) 

3. 커넥트 세부 사항을 설정해주세요.

  • Webhook URL은 [복사하기] 버튼을 클릭해 클립보드에 저장합니다.
  • 연동할 토픽이 제대로 설정되어 있는지 확인해주세요.
  • 웹훅의 프로필 사진과 이름을 설정해주세요.

잔디컨넥트 연동하기_1

 

 

[Step 2]

4.  구글 스프레드 시트와 잔디 커넥트 웹훅을 연결하기 위해 재피어(Zapier)에 들어갑니다. 로그인 후, 메인 화면 우측 상단의 [Make A Zap!] 버튼을 클릭합니다.

( 이미지 출처 : 잔디 커넥트 활용하기: 구글 시트 + 설문지 참가자 쉽게 관리하기 ) 

  • Zapier는 여러 서비스를 연결하도록 도와주는 웹 서비스 연동 플랫폼입니다.
  • Zap은 Zapier 서비스의 연동항목의 단위입니다.
  • Zap은 이벤트가 발생하는 Trigger와 그 이벤트에 대한 알림을 발송하는 Action 두 단계로 구성됩니다.

 

5. Trigger 단계에서 ‘구글 시트(Google Sheets) 앱을 선택합니다.

zapier_trigger 설정

새 설문지가 만들어지면 결과 스프레드시트에 row가 추가되므로[New Spreadsheet Row]를 선택해주세요. 

zapier_trigger 설정_1

6. 구글 설문지를 운영하고 있는 구글 계정 연동 후 테스트를 완료해주세요.

zapier_trigger 설정_2_연동 테스트 완료

 

7. 작업할 Spreadsheet와 그 Spreadsheet내에 여러개의 sheet가 있는 경우, 작업할 worksheet를 선택해줍니다.

zapier_trigger 설정_3_연동할 스프레드시트와 그 스프레드시트내에 작업할 시트를 선택

다음 ‘Test this Step’이 성공적으로 완료되면 Trigger 부분 설정이 마무리됩니다.

 

[Step 3] 

11. Action 부분에서 ‘Webhooks’를 선택합니다.

zapier_trigger 설정_4_액션에서 웹훅을 선택

 

12. Post를 액션 방식으로 선택합니다.

zapier_trigger 설정_4_액션에서 웹훅을 선택_POST선택

 

13. 잔디에서 받게 될 웹훅 정보를 설정합니다.

  • URL 부분에는 위의 3번 단계에서 복사해 놓은 잔디 웹훅 URL을 그대로 붙여 넣습니다.
  • Payload Type은 Json으로 선택합니다.
  • Data는 첫번째 네모에 ‘body’라고 입력해주세요.
  • Data 항목의 두번째 슬롯에 입력하는 내용은 잔디에서 메시지 형태로 받게될 알림 템플릿입니다.
    • 구글 스프레드시트에 입력된 내용을 넣을 수 있습니다.
    • 참석자의 이름, 소속, 이메일주소, 연락처를 잔디 메시지로 받아보도록 설정했습니다.

zapier_trigger 설정_6_액션에서 웹훅_상세설정

14. 화면의 최하단에 위치한 Headers 부분만 이미지와 같이 입력합니다. 

  • Content-Type : application/json
  • Accept : application/vnd.tosslab.jandi-v2+json

zapier_trigger 설정_7

그 내용은 잔디 커넥트 설정 화면에서 [설정방법 보기]를 열면 표시됩니다.

잔디컨넥터 연동하기_2

 

재피어

( 이미지 출처 : 잔디 커넥트 활용하기: 구글 시트 + 설문지 참가자 쉽게 관리하기 ) 

15. 마지막입니다. [Continue] 버튼을 눌러 테스트를 진행합니다. 완료 뒤에는 Zap을 [On]으로 해주세요.

 

모든 과정을 마치면 아래와 같이 잔디 커넥트 웹훅이 토픽에 연동되어 설정한 알림 템플릿에 따라 메시지가 들어오는 걸 확인할 수 있습니다. 토픽에 웹훅이 정상적으로 연동되었고 나중에 수정/삭제도 가능합니다. 

 

( 이미지 출처 : 잔디 커넥트 활용하기: 구글 시트 + 설문지 참가자 쉽게 관리하기 ) 

고생하셨습니다! 지금까지 ‘잔디로 구글 시트 & 설문지로 참가자 쉽게 관리하는 방법을 알아보았는데요. 이 방법을 응용하면,

 

  • “새로운 주문이 들어왔습니다! ” 주문 내역 추가시 알림받기
  • “결제 부탁드려요~ ” 비용품의서 신청 알림받기
  • 직원명부 업데이트 사항 기록하기

((참고))

‘잔디 커넥트 활용하기: 구글 시트 + 설문지 참가자 쉽게 관리하기’ 가 안되면 slack 으로 구축해야 하며 구글 독스(google docs) 응답을 받을깨 slack으로 받기 을 참조하여 구축하시면 됩니다. 

슬랙(slack)은 팀간의 커뮤니케이션 도구입니다. 프로젝트 정보의 공유와 커뮤니케이션을 원할하게 하기 위한 응용 프로그램이지만 API가 출실하고 다른 서비스와 연계하기가 쉬우므로 다양한 용도로 사용하고 있습니다. 슬랙은 모바일 앱도 있습니다. API와 연계하여 정보 수집 등의 용도로도 사용할 수 있습니다. 

예를들어 Github이 개발한 bot개발/실행 프레임워크인 hubot 과 CI(CoIntegration)도구와 결합하여 ChatOps라는 채팅을 이용한 시스템 운용과 효율화 등의 용도로 퍼지고 있습니다. 

 

사용설명서(pdf)

pdf file 로 된 사용설명서 링크는 https://drive.google.com/file/d/1cZ2GuivE2JkJvzrKgsqywxnNtF7bhZxW/view 입니다.

 

요금제

잔디 JANDI 요금제

app 으로 이용하기

app 은 https://play.google.com/store/apps/details?id=com.tosslab.jandi.app 에서 download받아 이용할 수 있습니다. 

잔디 JANDI app

 

새 토픽 생성하기

잔디 JANDI_새토픽생성

 

2. 네이버 메일 app이나 gmail app을 스마트폰에서 설치하여 보는 방법

이건 app 설치하여 사용하면 되므로 추가로 설명드리지 않겠습니다.

 

3. 구글 메신저 app을 이용하는 방법[추천]

PC에서 카톡 쓰시는 분들, PC에서 문자보내고 받기를 이용하시는 분들은 그 편리함을 익히 아실 것입니다, 답답한 스마트폰 대신 키보드 자판을 사용하는 편리함을. 구글 메신저 app은 이런 편리함을 제공하는 app입니다.  이 app은 이번 “용역(이사, 도배, 용달 등) 주선업 app 개발하기” project가 완성되면 관리자단에서 파트너 사장님들에게 빠르게 문자를 보내 업무의 생산성을 올리기 위한 용도로 제안 드립니다. 

지금껏 pushbullet( https://www.pushbullet.com/ ) 을 이용해 왔는데, 구글에서 제공하는 이 app도 사용해보아야겠습니다. 

먼저, 스마트폰에서 구글 플레이 ( https://play.google.com/store/ )에서 메시지 검색하여 설치해줍니다. 

구글 메시지

 

구글 메시지_1

 

웹용 안드로이드 메시지 앱을 사용하려면 우선 안드로이드 스마트폰의 기본 SMS 앱을 메시지 앱으로 설정한 다음, 

휴대전화에서 메시지 Android 메시지를 엽니다.

더보기 더보기그리고 메시지 웹 버전을 탭합니다.

구글 메시지_1_1메시지 웹 버전

( 이미지 출처 : 문자 메시지를 컴퓨터에서 보내는 방법 )

그러면 스마트폰에서는 아래와 같은 화면이 나옵니다.  

구글 메시지_3_qr코드스캔 대기화면

( 이미지 출처 : 문자 메시지를 컴퓨터에서 보내는 방법 )

Chrome, Safari와 같은 컴퓨터의 브라우저에서 메시지 웹 버전을 엽니다 = pc/노트북에서 messages.android.com을 접속하세요

구글 메시지_2_pc에서 qr코드 대기화면

( 이미지 출처 : 문자 메시지를 컴퓨터에서 보내는 방법 )

 

선택사항: 다음번에 메시지 웹 버전에 자동으로 로그인하려면 ‘이 컴퓨터 기억하기’ 체크박스를 선택합니다. 체크박스를 선택하지 않았다면 로그인한 후 더보기 더보기그리고 설정을 탭하고 이 기기 기억하기 옵션을 사용으로 전환합니다.

스마트폰에서 [QR 코드 스캔] 버튼을 눌러 PC/노트북의 브라우저에 표시된 QR 코드를 비추어 스캔합니다. 준비가 되면 스마트폰이 진동합니다. PC/노트북의 브라우저에는 문자를 주고 받은 내용이 표시되고 문자를 보내고 받은 문자를 확인할 수 있습니다. 

구글 메시지_5_웹버전

참고: 최신 대화목록, 연락처, 기타 설정이 암호화되어 브라우저에 캐시됩니다. 14일 동안 메시지 계정을 사용하지 않으면 보안상의 이유로 자동 로그아웃됩니다.

 

4. 구글 설문지 부가기능중  Google Form Notifications 을 이용하여 스마트폰에 알람 보내기

이 방법은 구글 설문지가 제출될 때 자동으로 알람이 들어온다는 장점이 있습니다.

다른 app 처럼 스마트폰 최상단에 알람이 표시되고 ifttt app을 선택하면 내용을 확인할 수 있습니다. 그러나 영어위주로 되어 있고 ifttt app에서 2단정도 들어가야 알람을 확인할 수 있는  한계가 있습니다. 

이 게시글의 내용이 너무 장황해져 아래의 게시글로 따로 정리하였습니다. 

구글 설문지 부가기능중  Google Form Notifications 이용하여 스마트폰에 알람 보내기

 

문자보내기

((2019-04-08 memo))통신사와 연결되어 이상하게 설정할 수 없습니다. 문자보내기는 RingCentral for Gmail 을 이용하는 것으로 하고 더 이상은 알아보지 않기로 하였습니다.

자동 알람을 해주는 “잔디”나 수동으로 문자 및 메시지를 주고 받을 수 있는 구글 메시지를 이용하는 정도로도 충분할 것 같습니다. 너무나 많은 시간(2 일)을 소비하였습니다. 

[추천]1. Gmail 의 부가기능을 이용하여전화하기 및 문자보내기( RingCentral for Gmail )  : 훌륭합니다.

RingCentral for Gmail은 Gmail 내에서 주요 문맥 정보를 표시하여 이메일 경험을 향상시키는 Gmail 추가 기능입니다. RingCentral for Gmail 사용자는 모바일, PC 또는 크롬북의 기본 Gmail 애플리케이션에서 SMS 메시지를 신속하게 보내고 받고 전화를 걸 수 있습니다.

gmail 부가기능은 gmail 에 접속하시어 상단 우측 중간에 [+]을 선택하시어 이용하실 수 있습니다. 

gmail 부가기능 이용하기

 

gmail 부가기능으로 이동하시면 이용할 수 있는 부가기능들이 G Suite Marketplace 를 통해 제공되며 검색창에 sms 로 검색하시어 RingCentral for Gmail 을 찾으서 선택하시고

 RingCentral for Gmail

[설치]하세요.  

 RingCentral for Gmail_1

 

상세 내용 보기


2. zappier로 SMS 보내기

구글 스프레드시트에서 변동이 오면 자동으로 문자를 보낼 수 있습니다.

Zappier 의 Action 에 SMS가 있으나 미국과 영국에 대해서만 서비스가 됩니다. 

zappier_sms

 

3.  Twilio 는 구글 스프레드시트에서 바로 문자를 보낼 수 있습니다. 

How to Send SMS from a Google Spreadsheet – Twilio

한국 전화번호를 이용할 수 없으나 소비자를 상대로 이용하는 것이 아니고 비지니스 파트너들과의 소통을 위한 용도이므로 외국(미국)번호라도 상관없을 것 같습니다. 

 

4. msg91.com 의 경우, SMS 1건이 50원입니다. 

 https://help.msg91.com/ 에서 password를 생성한 적이 없는데 구글 스프레드시트 부가기능에서는 자꾸 username 과 password를 넣으라고 나와서 다음단계로 못 나아가고 있음.

 

5. “보내Go” 로 문자보내기 

구글 설문조사 후 문자 보내기 를 따라서 문자보내기 기능을 만들어 보았습니다. ( 코드는 구글 설문조사 후 문자 보내기 – 코드.gs 를 참조하세요 ). 보내Go에서 pdf 매뉴얼도 받아보고 다시 시도해 보았지만 결론은 저는 실패하였습니다.

원인을 찾을 수 없습니다. 저의 충전금 1만원은 아직도 보내Go 에 잠자고 있습니다. 성공하신 분은 조언주시면 감사하겠습니다. 

 

문자 전송을 위해서는 문자메세지 업체에 미리 가입되어있어야하며, 해당 업체에서 REST API를 제공해줘야 합니다. 이 예제에서는 보내고라는 메시지 업체를 이용하였습니다.

보내고 요금표( https://www.sendgo.co.kr/pay/pay_fee.php )

보내고 요금표

트리거

문자보내기의 트리거는 실행할 함수로 [smsSend]를 선택해 주시고 이벤트 소스는 [스프레드시트에서 , ]이벤트 유형을 [양식 제출시]로 선택하시고 [저장]하시됩니다. 

문자보내기 트리거_구글 설문 응답시

 

문자가 보내지지 않는다면, 해당 부분을 수정합니다.
 
코드.gs 파일의 smsSend라고 하는곳을 보면
 
remote_phone = e.values[3].replace(“-“, “”); 를 볼 수 있습니다
 
이는 설문조사 항목의 3번째 항목의 값에서 ‘-‘ 를 뺀 값 (01012345678) 인데,
 
예제에서는 전화번호에 해당합니다. 전화번호의 항목이 두번째이거나 세번째라면
 
e.values[3] 대신에 e.values[2]나 e.values[4]를 넣어주시면 됩니다.
 
 

 

3. 프로그레시브 웹 앱 (PWA, Progressive Web Apps ) 구현

     3-1. 프로그레시브 웹 앱 (PWA, Progressive Web Apps ) 연결

WordPress Mobile Pack plugin 으로 PWA 를 구축하세요. 이 플러그인으로 부족하면 WP-AppKit plugin 을 더 알아보세요. Super Progressive Web Apps 는 디자인(사용자 경험)이 별로 입니다. 

WordPress Mobile Pack plugin 은 아래의 게시글을 참조하세요. 

WordPress Mobile Pack plugin : 워드프레스 프로그레시브 웹 앱 플러그인 Progressive Web App plugin

WPtouch, WP-AppKit 플러그인은 아래의 게시글을 참조하세요. 

WPtouch plugin은 푸시 알람 기능이 없는 것 같습니다. 

프로그레시브 웹 앱 (PWA, Progressive Web Apps ) : 정의, 특징, 사업성, 워드프레스 플러그인 등

 

     3-2. https 프로토콜 사용 서버 구축/SSL 인증 보안 서버 구축

PWA를 구현하기 위해 https 프로토콜 사용 서버 구축/SSL 인증 보안 서버 구축은 필요충분 조건은 아닙니다.  그러나 Service Workers 는 사용자의 기기가 오프라인일 때 이를 사용할 수 있도록 하는 기능과 이외에도 알림 처리, 독립된 스레드에서의 복잡한 계산 등 많은 것들을 할 수 있습니다. Service Worker는 매우 강력하기때문에 안전한 컨텍스트(HTTPS를 의미)에서만 실행됩니다. 따라서 궁극적으로 https 프로토콜 사용 서버 구축/SSL 인증 보안 서버 구축이 필요합니다. 

 구글 디벨로퍼스( https://developers.google.com, 개발자 도구, API, 기술 리소스를 위한 구글의 사이트이다. 이 사이트에는 구글 개발자 도구 및 API 이용에 관한 문서가 포함되어 있으며 구글의 개발자 제품을 이용하는 개발자들을 위한 토론 그룹과 블로그를 아우른다) 에서 PWA( https://developers.google.com/web/progressive-web-apps/ ) 에 개발 전제 조건으로 

  • Move to HTTPS 
    Progressive Web Apps must be served from a secure origin.( 프로 그레시브 웹 앱은 안전한 출처에서 제공되어야합니다.)

으로 ‘프로 그레시브 웹 앱은 안전한 출처에서 제공되어야합니다’라고 정의하고 있으나 워드프레스 플러그인을 사용하면서 그 전제로 https 이어야 한다는 필수 조건은 없습니다.

 

 

저희는 사이트빌더로 워드프레스를 이용하고 있으며 카페24호스팅을 이용하고 있습니다.

워드프레스를 사이트 빌더로 이용하시고 있는 경우, Really Simple SSL(보안 인증서 설치 플러그인)으로 손쉽게  https 프로토콜 사용 서버(SSL 인증 보안 서버)를 구축할 수 있습니다. 

아래의 게시글은 워드프레스를 사이트빌더로 이용하고 있으시거나 카페24 호스팅을 이용하고 계신분들은 아래의 게시글을 참조하세요. 

워드프레스에 보안서버 SSL 인증서 적용하기(https 로 전환하기) : Really Simple SSL(보안 인증서 설치 플러그인) 포함

 

 

사이트 빌더로 카페24 쇼핑몰, 메이크샵, 고도몰, Wix 등을 이용하고 있으신 분들은 아래의 게시글을 참조하세요. 

사이트 빌더별(카페24 쇼핑몰, 메이크샵, Woocommerce(워드프레스) 등) https 로 사이트 구축하기/전환하기(SSL 인증서 적용하여 보안서버 구축하기)

 

   

 

참고자료 : 1. 고급 기능의 무료 폼이 필요할 때 – Caldera

2. 설문지 응답이 저장될 곳 선택하기

3. 새로운 설문이 제출될 때 메일로 자동 알림 받기, 보내기 – 구글 설문지 + 구글 앱스 스크립트 활용법 

4. 구글 설문조사 후 문자 보내기 – 코드.gs

5. 구글폼으로 설문지/신청서 작성시 유용한 알람기능 : Form Notification

6. How to Send Emails with Google Forms Based on User’s Answers 

7. How to Send Email in a Google Sheet With Google Scripts : 이 게시글은 특정 시트에 있는 e-mail  address들 전부에게 보내는 것에 관한 것입니다. 이 게시글 app은 마지막 이벤트(설문지 제출)시에 작동해야 하므로 용도가 다릅니다.  

8. “PC에서 SMS 보낸다”… 구글, 웹용 안드로이드 메시지 앱 공개

9. 문자 메시지를 컴퓨터에서 보내는 방법 

10.  구글 독스(google docs) 응답을 받을깨 slack으로 받기 

11. 구글 설문 응답받은 데이터 활용하기

12.  구글블로그 사용법: 구글 드라이브의 스프레드시트를 블로그에 삽입하기