游乐游手机版
首页/AI教程/文章详情

“死了么”用户暴涨800倍估值近亿 创业者推出“活着呢”

时间:2026-06-01 16:50
前言 最近一款名为“死了么”的App迅速火爆,精准切入独居人群的安全痛点,目前已登顶苹果付费榜第一名。其核心逻辑极其简明:签到报平安,断联即发邮件。出于好奇,我查阅了相关数据。第七次全国人口普查显示,我国一人户家庭已超过1 25亿户,占全国户口总数的25%。对于独居者而言,意外发生不可怕,可怕的是无

前言

最近一款名为“死了么”的App迅速火爆,精准切入独居人群的安全痛点,目前已登顶苹果付费榜第一名。其核心逻辑极其简明:签到报平安,断联即发邮件。出于好奇,我查阅了相关数据。第七次全国人口普查显示,我国一人户家庭已超过1.25亿户,占全国户口总数的25%。对于独居者而言,意外发生不可怕,可怕的是无人知晓。这款应用恰恰命中了这一深层需求。趁着这波热度,我也重新梳理思路,打造了一款对标产品——“活着呢”(TO BE LIVE)

产品哲学

首先阐述核心逻辑,简洁直观,用户一目了然:

  1. 生存契约:用户设定一个确认周期,默认48小时。
  2. 打卡续命:在倒计时结束前,用户需主动点击“我还活着呢”按钮完成签到。
  3. 失联预警:若超时未签到,系统自动判定“可能发生意外”,并立即通知预设的紧急联系人。

简而言之,这相当于一个24小时不间断的守护卫士,时刻关注你最根本的问题——你是否还在。

技术选型

探讨完产品逻辑,接下来介绍技术搭建方案。技术栈围绕“快速验证”这一目标进行选择:

  • 前端框架:Next.js 14(App Router)。兼顾SEO友好与流畅的路由体验。
  • 状态动效:Framer Motion。为倒计时和按钮注入“呼吸感”,避免界面沉闷。
  • 后端支撑:Supabase(BaaS)。无需自行编写CRUD,秒级完成Auth授权与数据库存储,大幅节省开发时间。
  • 通知服务:Resend。用于定时发送邮件,轻量且够用。
  • 主题适配:Tailwind CSS。支持“深邃绿”和“荧光绿”两套主题——白天呈现沉静的翡翠色,夜晚则化作守护的微光,视觉质感突出。
  • 部署环境:Vercel。全球加速,毕竟生命经不起等待。

核心代码实现

核心功能分为三大块:注册/登录退出、签到与紧急联系人设置、主题切换。这里重点拆解登录页和签到页的逻辑实现。

登录页

用户未注册时先创建账号,再登录。核心代码非常简洁:注册和登录共用同一表单,通过isLogin状态进行分支判断。

const handleSubmit = async (e) => {
  e.preventDefault()
  setLoading(true)
  try {
    if (isLogin) {
      const { error } = await supabase.auth.signInWithPassword({ email, password })
      if (error) throw error
      router.push('/')
    } else {
      const { error } = await supabase.auth.signUp({ email, password })
      if (error) throw error
      alert('验证邮件已发送,请查收!')
    }
  } catch (err) {
    alert(err.message)
  } finally {
    setLoading(false)
  }
}

签到页

签到页是整个应用的核心,动态倒计时逻辑需在客户端实时计算,并根据紧迫程度变换颜色。当前安全周期固定为48小时,后续可改为用户自定义。按钮设计颇具巧思:点击时有缩放反馈,当倒计时剩余不足8小时时,图标变为警示三角,颜色从绿色过渡到琥珀色再到红色。该逻辑通过getAlertColorClass函数实现:

// 动态获取当前的强调色(预警系统)
const getAlertColorClass = () => {
  if (timeLeft.h < 8) return "text-red-500";
  if (timeLeft.h < 24) return "text-amber-500";
  return "text-app-accent"; // 使用主题定义的强调色
};

倒计时更新核心逻辑通过useEffect定时器,每秒计算一次剩余时间:

const updateCountdown = useCallback(() => {
  if (!profile?.last_check_in) return;
  const last = new Date(profile.last_check_in).getTime();
  const now = new Date().getTime();
  const total = 48 * 60 * 60 * 1000;
  const remaining = Math.max(0, total - (now - last));
  setTimeLeft({
    h: Math.floor(remaining / (1000 * 60 * 60)),
    m: Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60)),
    s: Math.floor((remaining % (1000 * 60)) / 1000),
    percent: (remaining / total) * 100
  });
}, [profile]);

useEffect(() => {
  const timer = setInterval(updateCountdown, 1000);
  return () => clearInterval(timer);
}, [updateCountdown]);

点击签到按钮时,将当前时间写入数据库,同时触发手机振动(若设备支持),给予用户物理层面的确认反馈:

const handleCheckIn = async () => {
  if (!user) return;
  const now = new Date().toISOString();
  const { error } = await supabase.from("profiles").update({ last_check_in: now }).eq("id", user.id);
  if (!error) {
    setProfile((prev) => ({ ...prev, last_check_in: now }));
    if ("vibrate" in na vigator) na vigator.vibrate([50, 30, 50]);
  }
};

整体逻辑虽不复杂,但胜在简洁高效。

PWA 改造:从网页变成桌面 App

作为一款守护工具,必须做到触手可及。因此为其集成了PWA功能,用户“一键添加到桌面”后,使用体验将显著提升。通过配置 manifest.json,应用实现了:

  • Standalone 模式:隐藏浏览器地址栏,提供全屏沉浸体验。
  • 自定义图标:一个可爱鬼(代表用户当下状态)和一颗回答“YES”的小心脏。

该配置本身并不复杂,但效果立竿见影——用户打开时如同使用原生App,不会产生“仍在浏览器中”的突兀感。

后记

“我还活着呢”(TO BE LIVE),在每一个平凡的24小时里,温柔地问一句:“嘿,还在吗?”

项目已开源,欢迎来“续命”。

来源:https://juejin.cn/post/7594863660297322538
上一篇年度工作总结范文与高效撰写提示词 下一篇LEX AI全球法律合规平台 高效应对复杂法律变革
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
年最新JetBrains AI助手Windows本地详细安装配置教程(含下载与环境要求)
AI教程 · 2026-07-03

年最新JetBrains AI助手Windows本地详细安装配置教程(含下载与环境要求)

JetBrainsAIAssistant可在Windows上通过IDE内置市场或离线包安装,需匹配新版JetBrainsIDE、账号登录与稳定网络。配置时应关注版本兼容、隐私设置、项目索引、快捷键和代码提交前复核,避免上传密钥与敏感业务资料。

Amazon Q Developer新手安装指南:从下载到首次运行的保姆级教程
AI教程 · 2026-07-03

Amazon Q Developer新手安装指南:从下载到首次运行的保姆级教程

AmazonQDeveloper可为编码、调试、解释项目和生成测试提供辅助。安装前需确认账号、开发环境和插件来源,按IDE或命令行路径完成配置,并在首次运行时注意权限、数据与项目安全。

Amazon Q Developer安装失败怎么办?报错日志排查与升级回滚方案
AI教程 · 2026-07-03

Amazon Q Developer安装失败怎么办?报错日志排查与升级回滚方案

AmazonQDeveloper安装失败通常与版本兼容、网络连接、身份登录、插件残留或权限配置有关。排查时应先确认环境,再查看IDE与终端日志,必要时采用清理重装、固定版本升级或回滚方案。

Amazon Q Developer本地模型运行:下载、路径与性能优化
AI教程 · 2026-07-03

Amazon Q Developer本地模型运行:下载、路径与性能优化

AmazonQDeveloper以云端能力为主,本地模型方案更适合离线补充、代码检索和私有环境辅助。配置时需确认版本、模型来源、路径权限、硬件资源与IDE集成方式,并通过量化、上下文控制和缓存策略优化性能。

Amazon Q Developer插件安装全流程:浏览器编辑器扩展市场配置
AI教程 · 2026-07-03

Amazon Q Developer插件安装全流程:浏览器编辑器扩展市场配置

AmazonQDeveloper可在浏览器控制台、VSCode、JetBrains等环境中辅助写代码、解释项目和生成测试。安装前需确认账号权限、编辑器版本与网络环境,配置时重点关注登录授权、工作区信任、数据权限和团队使用规范。