Home Bound - Twilio x DEV Hackathon에 제출합니다!

우리가 지은

범주 제출: 2019 관상 바이러스 질병 통신

이전 두 글에서 우리의 과정을 이해하지 못했다면, HomeBound는 PROTOTYP 에서 온 다섯 명의 동료로 구성된 팀이 3주 안에 완성한 프로젝트입니다.

Adrian Bece - 개발/프로젝트 책임자

Vlatko Vlahek-개발상

Josip Ravas - 개발업체

Igor Plac-Design

Valentina Bermanec- 컨텐츠 및 제품 관리자

Valentina는 Twilio의 API가 어플리케이션에 어떻게 적합한지 결정하기 전에 몇 가지 연구를 수행하여 주요 문제점을 파악했습니다.

실내 활동에 대한 생각과 동기가 부족하여 건강에 유익한 새로운 일상 활동을 생각하고 유지할 수 없다.

자가격리의 일반적인 규칙에 대한 이해가 부족하여 때때로 사람들의 행위 방식이 타인을 위험에 처하게 할 수 있다.

2019 관상바이러스 질병 검사에서 양성을 보인 사람은 지난 2주간의 밀접 접촉자를 회상할 때 문제가 발생할 수 있으며 이는 다른 사람을 위험에 처하게 할 수도 있다.

이러한 결론을 바탕으로 우리는 이런 상황에서 스위스 칼과 같은 응용 프로그램을 개발하기로 결정했다.
우리는 우리의 응용 프로그램에 다음과 같은 목표를 설정했다.

해커 경기 규칙 준수

고품질 외관

즐거운 사용자 환경

오늘 설치 및 사용 가능(허구 장면이나 사용 선결 조건 없음)

조명 및 성능

모바일 사용자 인터페이스로 축소하여 설계 및 개발 프로세스를 가속화하지만 필요한 경우 손쉽게 확장 가능

우리는 디자인과 사용자 체험에 특히 관심을 가지기로 결정했다. 왜냐하면 한 응용 프로그램에 있어서 외관과 감각이 모두 좋으며 예상대로 실행되는 것이 아니라 이 점이 매우 중요하기 때문이다.이러한 응용 프로그램은 특히 곤경에서 벗어나 어려운 시기에 정신을 차리도록 돕기 위한 것이다.
우리가 이 관건에 대해 일치된 의견을 얻은 후에 이고르는 일을 시작하여 놀라운 디자인을 창조했다. 오늘 보시다시피 플라트코와 나는 코드를 작성하기 시작했고, 조시프는 마지막 단락에 우리에 합류했다.Vlatko와 Josip은 이 프로그램을 번갈아 개발합니다. 그들은 Twilio API 통합에 더 관심을 가지고, 저는 UI와 백엔드에 더 관심을 갖습니다.

Igor의 놀라운 디자인의 일부입니다.
약 3주 동안의 고된 작업 (낮과 밤) 끝에 HomeBound를 만들었습니다.

게임화 요소가 있는 활동 추적기 - 사용자는 작업(사용자 정의 또는 제안된 작업)을 완료하여 포인트를 획득합니다.이렇게 하면 그들이 실내에서 새로운 건강 활동을 찾도록 격려할 수 있다.

밀접한 연락처 목록 - 사용자는 연락처 세부 정보를 사용하여 밀접한 연락처 목록을 유지할 수 있습니다.그들은 또한 트와일리오의 프로그래밍 가능한 문자를 사용하여 긴급한 상황에서 그들에게 메시지를 보낼 수 있다.

상황에 따라 맞춤형 체험 - 다음 기준에 따라 사용자에게 다양한 활동을 추천합니다. 강제 자가격리 상태인지, 혼자 사는지.

채팅 로봇 협조 - 사용자는 자가격리 규칙을 이해할 수 있다.현재 매우 기본적인 채팅 기기의 인파를 가지고 있지만 이를 확장할 가능성이 매우 크다. 구체적으로는 Twilio 컨트롤러의 설정에 달려 있다.

각 기능을 개별적으로 살펴보고 그 배후의 생각과 절차를 설명하자.

그다지 유쾌하지 않은 시간에 적합한 유쾌한 응용 프로그램

게임화된 활동 추적기

"Keep regular routines and schedules as much as possible or help create new ones in a new environment, including regular exercising, cleaning, daily chores, singing, painting or other activities."

Mental health and psychosocial considerations during the COVID-19 outbreak
(World Health Organization)

대다수의 사람들이 당분간 대부분의 야외와 사교 활동을 선택할 수 없기 때문에, 사람들은 심신 건강을 유지하기 위해 하루 동안 새로운 활동을 해야 한다.HomeBound를 통해 우리는 사용자가 새로운 건강 활동에 가입하고 건강한 일상 활동을 발전시키도록 장려하기를 희망합니다.
사용자는 자신을 위해 각종 임무와 활동을 분배할 수 있으며, 어떠한 제한도 없이 그것들을 완성할 수 있다.사용자가 이벤트를 완료하면 랜덤 점수를 얻습니다.이것이 바로 게임화의 용무지이다.이 기능(시스템 업그레이드, 성취, 연승 등)을 더욱 확장할 수 있는 흥미로운 기회도 많다.

사용자 활동 및 일반 프로세스

근거리 접촉 추적기

"Let’s say you test positive for COVID-19. A health professional will then ask you where you have been in the past two weeks and most of us can’t remember that kind of information with accuracy."

Alán Aspuru-Guzik, Professor at University of Toronto

2019 관상바이러스 질환이 양성으로 검출된 사람들에게는 지난 2주 동안의 밀접한 접촉을 회상하는 것이 중요하다.정확성은 바이러스의 전파를 방지하는 데 큰 역할을 발휘할 수 있다.회사는 우리의 모바일 기기를 이용하여 자동 근접 접촉 추적을 하는 것을 연구하고 있는데, 이것은 미래를 반오토피아 영화처럼 보일 것이다.
HomeBound에서, 우리는 사용자에게 그들의 밀접한 연락처를 추적하고 그들의 데이터를 완전히 제어할 수 있는 간단한 도구를 제공하기를 희망한다.만약 한 사용자가 2019 관상바이러스 질환이 양성으로 검출된다면, 지난 2주간의 밀접 접촉자 명단을 완전하고 정확하게 가지고 있는 것은 의료진에게 매우 귀중한 것이다.

밀접한 연계 관리
Twilio API가 통합된 곳이기도 합니다. Twilio의 프로그래밍 가능한 문자 기능으로 사용자는 친밀한 연락처에게 빠른 메시지를 보내 경고하고 제자리에 남아 친밀한 연락처와 거리를 두도록 할 수 있습니다.Firebase 클라우드 함수를 사용하여 API를 통합하여 모든 백엔드 기능을 유지합니다.

Twilio API를 사용하여 친밀한 연락처에 문자 보내기
프레젠테이션 사이트에서 SMS 기능이 비활성화되어 있으므로 테스트 휴대전화가 야간에 울리지 않습니다.) 유효한 설정을 제공하여 로컬 실례에서 Twilio 계정을 사용하여 이 기능을 테스트할 수 있습니다.

맞춤형 환경

사용자가 등록할 때, 그들은 강제적인 자가격리를 배정받았는지, 그리고 혼자 살았는지 물어볼 것이다.이러한 데이터에 근거하여 우리는 타인에게 해를 끼칠 수 있는 활동을 추천 목록에 넣지 않도록 조심할 수 있다.

사용자 프로필 설정

쿠키를 알아요. - 우리 채팅 로봇!

중요한 것은 사용자가 수시로 상황을 이해하고 간단한 방식으로 그들의 질문에 대답하도록 하는 것이다.우리는 Firebase 클라우드 기능을 사용하여 Twilio의 오토매틱 기기와 채팅 기능을 통합시켰다.비록 이것은 현재 기본적인 절차를 가지고 있지만, 광범위한 지식 라이브러리와 다양한 가능한 절차(증상 검사, 자가격리 규칙, 추천 활동, 뉴스, 통계 등)를 통해 확장될 수 있다.

간단한 흐름을 가진 채팅 로봇 화면
모든 버그를 없애는 데 필요한 복잡성과 시간 때문에 채팅 로봇 통합은 약간의 변두리 상황이 발생할 수 있음을 주의하십시오.하지만 여전히 멋지고 효과적입니다!:)

데모 링크

https://twilio-prototyp.web.app/

코드에 연결

GitHub 저장소: https://github.com/codeAdrian/homeBound

우리가 어떻게 만들었는지

HomeBound를 구축했습니다. 전면은 React이고 후면은 Firebase Firestore입니다.또한 Firebase 클라우드 기능을 사용하여 Twilio 기능을 통합하여 추가적인 유연성과 보안을 실현했습니다.

import * as functions from 'firebase-functions';
import { Twilio } from 'twilio';

export const sendSMSMessage = functions.https.onCall(async (data) => {
  const { sid, token } = functions.config().twilio;
  const client = new Twilio(sid, token);

  const { from, to, body } = data;
  return client.messages
    .create({
      from,
      to,
      body,
    })
    .then(() => ({ success: true }))
    .catch((err: string) => {
      console.log(err);
      return { success: false };
    });
});

Firebase 클라우드 함수를 이용한 Twilio SMS API 통합
Firebase Firestore 데이터베이스의 구조는 확장성과 성능을 가지고 엄격한 규칙의 보호를 받는다.인증을 받은 사용자만 새로운 데이터 노드를 만들 수 있습니다.사용자는 그들만의 데이터를 읽고 업데이트할 수 있다.

    match /contacts/{userId}/{document=**} {
      allow read, update, delete: if request.auth.uid == userId;
      allow create: if request.auth.uid != null;
    }

데이터베이스 보안 규칙 예
또한 Twilio API 키는 Firebase에 저장되고, Firebase API 키는 .env 파일에 저장되며 이 파일은 사용할 수 없습니다.".sample"파일을 제공하기 때문에 설정 키를 설정할 수 있습니다.홈 바운드 인스턴스를 만들려면 Firebase Firestore와 Twilio 자격 증명을 제공해야 합니다.
프런트엔드의 경우 다음을 사용합니다.

과 사용자 정의 연결

반응

글로벌 상태의 Redux

사용postcss-preset-env 및 cssnano PostSS 구축

react-circular-progressbar분수 표시

react-hook-form 테이블용

react-toastify 글로벌 메시지

결론

저는 팀의 부지런한 업무와 노력에 감사를 드리고 DEV와 Twilio가 해커 경연을 조직하여 마지막 3주를 재미있게 만들어 준 것에 감사를 드립니다.
안전하고 즐겁게 인코딩!:)