CyberFortune (赛博求签)

🎬 个人项目：跨平台赛博运势档案库 (CyberFortune)

📌 项目简介 本项目是一款结合了传统东方玄学与赛博朋克 (“Cyber-Taoist”) 视觉美学的跨平台移动端与 Web 应用。它打破了传统算命应用“点一下出一个结果”的单调模式，引入了真实物理反馈、本地持久化存储与游戏化的收集图鉴系统。 作为独立开发者，我主导了该项目从零到一的设计、开发与 App Store 攻坚。通过极其严苛的极简黑底与 #00FF41 霓虹绿的视觉语言，为用户提供了一个兼具“解压玩具”与“精神手账”双重属性的现代化玄学工具。

核心价值： 本项目不仅是一次 React Native 跨平台工程能力的全面落地，更展现了在严苛的 App Store 审核机制下，如何通过敏捷的“产品化升级（工具化+游戏化）”赋予简单应用长期的用户留存价值。

💡 设计思路与反思 (Product Philosophy)

• 破局同质化（产品经理思维）： 面对苹果极其严格的 4.3(b) 重复应用审查规则，纯粹的随机生成器是没有生存空间的。我果断转变思路，引入了数据留存（历史记录）与类似《三国杀》的卡牌收集机制。通过产品维度的降维打击，将一个“一次性玩具”改造为具有长线粘性的“个人运势追踪器”，顺利扭转了审核员的判定。
• 优雅降级与防御性编程（跨平台架构）： 一套代码跑在 iOS、Android 和 Web 端，意味着必须面对硬件差异。当 Web 端没有加速度传感器，或者浏览器强行拦截自动播放的声音时，系统绝不能以白屏崩溃告终。通过底层环境嗅探与异常捕获，实现了 Web 端的无缝降级体验，保障了核心渲染链路的极高鲁棒性。
• 沉浸式交互设计： 摒弃生硬的 UI 按钮，转而深度调用设备硬件。让用户必须“真实摇晃”手机才能求签，配以震动与霓虹闪烁的极客美学，完成了赛博朋克主题的深度沉浸。

🛠️ 技术栈

🚀 核心功能

• 📿 沉浸式物理摇签引擎： 监听设备高频加速度传感器，结合算法过滤误触，还原真实的“摇签筒”手感与震动反馈。
• 🗄️ 赛博档案 (数据追踪)： 自动将用户的历史求签数据存入本地数据库，并生成趋势分析文案（如近7日运势走向），完成应用工具属性的升级。
• 🃏 稀有度卡牌图鉴系统 (Gamification)： 行业首创将运势包装为可收集的“赛博卡牌”。设定 SSR（大吉/隐藏）、SR、R、N 多级稀有度，并配有专属的霓虹动效与灰色卡槽点亮机制，大幅提升打开率。
• 🌐 多语言动态自适应： 内置完整的响应式中英双语逻辑，无缝适配海内外用户的系统语言环境。

⚔️ 技术亮点与挑战 (Challenges & Solutions)

• 挑战一：打破应用商店 4.3(b) 同质化魔咒
  • 问题： 早期版本因“功能单一，处于饱和分类”遭遇 Apple 多次拒审，甚至被建议“不如做个网页”。
  • 方案： 迅速重构业务逻辑，实装 AsyncStorage 与“图鉴系统”，在终极申诉中据理力争，强调其“个人精神管理工具”的闭环属性与原生硬件强依赖，最终成功突围。
• 挑战二：跨平台硬件 API 导致的 Web 端致命崩溃
  • 问题： Expo-Sensors 中的加速度计属于纯粹的移动端硬件原生模块。当应用在网页端运行时，React 树试图监听不存在的传感器，导致触发底层 TypeError: _nativeModule.addListener is not a function，引发全站白屏闪退。
  • 方案： 引入 Platform.OS 平台感知拦截器。在组件挂载的生命周期中，强制跳过 Web 端的硬件初始化流程，彻底隔离原生调用，确保了 Web 浏览器的安全渲染。
• 挑战三：Web 端 Audio 自动播放策略拦截与渲染崩溃
  • 问题： 现代浏览器的 Autoplay 策略会无情拦截无用户交互前的音频加载，引发 DOMException: play() failed。该未捕获异常导致 React 在首次挂载时直接树崩溃。
  • 方案： 针对所有音效分发模块穿上“防弹衣”，采用严格的 try-catch 包裹与静默失败（Silent Failure）机制。同时重构音频管线，将播放动作严格延后至用户发生第一次真实交互（点击/摇晃）之后，彻底消除了白屏隐患。

📝 结语 《赛博求签》是一次在技术限制、平台规则与产品创意间走钢丝的极致演练。它让我深刻领悟到： 一项优秀的前端工程，决不仅仅是 UI 界面的堆砌，更是对 “异常兜底（如何不白屏）”、“跨端妥协（如何做降级）” 以及 “用户心智（为何要留存）” 的深度洞察。 从面对红色的终端报错，到解决玄学般的渲染死锁；从与苹果审核团队的斗智斗勇，到完成 SSR 收集图鉴的优雅重构。这段经历将成为我走向全栈开发与产品设计之路的坚实护城河。