HomeBound——我向 Twilio x DEV Hackathon 提交的作品！

我们建造了什么

投稿类别：COVID-19 通讯

如果您还没有关注我们前两篇文章的旅程，HomeBound 是一个由PROTOTYP的五位同事组成的团队在 3 周内完成的项目：

• Adrian Bece - 开发人员/项目负责人
• Vlatko Vlahek - 开发人员
• Josip Ravas - 开发人员
• Igor Plac - 设计师
• Valentina Bermanec - 内容和产品经理

在我们决定构建什么以及 Twilio 的 API 如何融入我们的应用程序之前，Valentina 做了一些研究并确定了关键问题：

• 缺乏室内活动的想法和动力来提出并保持健康、有益的活动的新日常生活。
• 缺乏对自我隔离一般规则的了解，有时会导致人们做出危及他人安全的行为。
• 新冠病毒检测呈阳性的人可能无法回忆起过去两周的密切接触者，这也会给其他人带来危险。

基于这些结论，我们决定开发一款能够应对这些情况的应用程序。

我们为我们的应用程序设定了以下目标：

• 遵守黑客马拉松规则
• 高品质的外观和感觉
• 令人愉悦的用户体验
• 可以立即安装和使用（无需虚构场景或使用先决条件）
• 轻巧且性能卓越
• 缩小到移动用户界面以加快设计和开发过程，但如果需要的话也可以轻松扩大

我们决定特别关注设计和用户体验，因为一款应用不仅要功能符合预期，更要拥有良好的外观和使用体验。对于像这款旨在帮助人们度过艰难时期并为他们加油打气的应用来说，这一点尤其重要。

所以，在我们达成这些关键点之后，Igor 开始工作，并创作出今天看到的令人惊叹的设计。我和 Vlatko 开始编写代码，Josip 在最后阶段加入了我们。Vlatko 和 Josip 轮流开发应用程序，主要专注于 Twilio API 集成（稍后会详细介绍），而我则主要专注于 UI 和后端。

经过大约 3 周的日夜努力，我们创建了 HomeBound，它具有以下功能：

• 融入游戏化元素的活动追踪器- 用户通过完成任务（自定义或推荐任务）即可获得积分。这样一来，他们便有机会在室内探索新的健康活动。
• 密切联系人列表- 用户可以维护密切联系人的列表及其联系方式。他们还可以使用 Twilio 的可编程短信功能，在紧急情况下向他们发送消息。
• 根据情况定制体验——根据以下标准为用户推荐不同的活动：他们是否处于强制自我隔离状态以及他们是否独自生活。
• 聊天机器人协助- 用户可以了解自我隔离规则。目前，聊天机器人的流程非常基础，但根据 Twilio 控制台中的配置，可以进行广泛的扩展。

让我们分别看一下每个功能并解释其背后的想法和流程。

一款适合不太愉快时光的令人愉快的应用程序

具有游戏化功能的活动追踪器

“尽可能保持规律的作息和日程安排，或者帮助孩子在新环境中创建新的作息和日程安排，包括定期锻炼、清洁、日常家务、唱歌、绘画或其他活动。”

COVID-19 疫情期间的心理健康和社会心理考虑
（世界卫生组织）

由于大多数户外活动和社交活动暂时无法满足大多数人的需求，人们需要在日常生活中寻找新的活动来保持身心健康。通过 HomeBound，我们希望鼓励用户参与新的健康活动，并养成健康的日常生活习惯。

用户可以为自己分配各种任务和活动，并不受任何限制地完成它们。用户完成活动后，将获得随机积分。这就是游戏化的意义所在。此外，还有很多有趣的机会可以进一步扩展此功能（例如升级系统、成就、连胜等）。

密切接触者追踪

假设你的新冠肺炎检测呈阳性，医护人员会询问你过去两周去过哪里，而我们大多数人都无法准确记住这类信息。

Alán Aspuru-Guzik，多伦多大学教授

对于新冠病毒检测呈阳性的人来说，回忆起过去两周内的密切接触者至关重要。准确性对于预防病毒传播至关重要。许多公司正在研究使用我们自己的移动设备自动追踪密切接触者，这让未来看起来像是一部反乌托邦电影里的场景。

我们希望通过 HomeBound 为用户提供一款便捷的工具，让他们能够追踪密切接触者，并完全掌控自己的数据。如果用户的 COVID-19 检测结果呈阳性，那么拥有过去两周完整准确的密切接触者名单，对医务人员来说将无比宝贵。

这也正是我们 Twilio API 集成的用武之地。借助 Twilio 的可编程短信功能，用户可以向密切接触者发送快速消息，提醒他们待在原地并与密切接触者保持距离。我们使用 Firebase Cloud 函数集成了该 API，因此所有后端功能都保留在那里。

请注意，我们已在演示站点上禁用 SMS 功能，因此我们的测试电话不会在夜间响铃：) 您可以通过提供有效的配置在本地实例上使用您的 Twilio 帐户测试该功能。

量身定制的体验

用户注册时，系统会询问他们是否已被强制自我隔离以及是否独自居住。基于这些数据，我们可以谨慎地避免将可能对他人造成伤害的活动列入推荐列表中。

认识一下 Couchy——我们的聊天机器人！

在疫情期间，让用户随时了解最新情况并提供便捷的问答方式至关重要。我们已使用 Firebase Cloud Functions 集成了 Twilio 的 Autopilot 和 Chat 功能。虽然目前该功能仅提供基础流程，但未来仍有潜力扩展至广泛的知识库和多种可能的流程（例如检查症状、自我隔离规则、推荐活动、新闻、统计数据等）。

请注意，由于复杂性以及修复所有 bug 所需的时间，聊天机器人集成可能会出现一些极端情况。不过，它仍然很酷，而且有效！:)

演示链接

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

代码链接

GitHub 仓库：https://github.com/codeAdrian/homeBound

我们如何构建它

我们构建了 HomeBound，前端使用 React，后端使用 Firebase Firestore。我们还使用 Firebase Cloud Functions 集成了 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 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”文件，您可以自行设置配置密钥。如果您希望创建自己的 HomeBound 实例，则还必须提供 Firebase Firestore 和 Twilio 凭据。

至于前端，我们使用了以下内容：

• 使用自定义钩子进行响应
• Redux 用于全局状态
• PostCSS 构建postcss-preset-env与cssnano
• react-circular-progressbar为了得分
• react-hook-form用于表格
• react-toastify用于全球消息

结论

我要感谢团队的辛勤工作和努力，也要感谢 DEV 和 Twilio 组织这次黑客马拉松，让过去三周变得非常有趣。

保持安全并快乐编码！:)