reactjs - 如何设计系统以在移动应用程序和 Web 上共享相同的内容？

Question

我正在为 iOS、Android 和 Web 开发 LMS。移动应用程序是使用 Flutter 开发的，Web 是基于 React 的，我决定使用 Firebase 作为后端和存储。包含的功能类似于通用 LMS，列表

• 用户认证
• 一次性密码发送
• 视频/图像/文件访问
• 进度跟踪等

我想知道我怎样才能加快这个发展？在这个开发中如何使用 REST API？如何在两个平台上共享相同的内容、用户数据？你还有什么建议吗？

您的建议将有助于农村孩子的学习。

Answer 1

为了加快开发速度，既然您已经询问了如何在移动设备和网络上共享相似的内容，

您可能有兴趣将移动技术堆栈从 Flutter 转移到 React Native，因为这样您就可以共享 React Web 和 React Native 移动代码库的逻辑端。由于 React Native 使用的是移动组件，因此视图可能会有所不同。

• https://reactjs.org/
• https://reactnative.dev/

您可能会考虑使用相同的设计组件（如 Material UI 或 Bootstrap）在 Web 和移动设备中构建相似的外观和感觉。如果需要定制，定制也应该是一样的。只是一点点差异是可以容忍的。

要使用的预制组件的一些示例。

• https://react-bootstrap.github.io/
• https://nativebase.io/
• https://material-ui.com/
• https://callstack.github.io/react-native-paper/

• 用户认证
• OTP 发送视频/图像/文件访问
• 进度跟踪等

可以使用服务提供商来完成。Firebase 已有用户身份验证。可以在 Google 中研究 OTP 发送以获得最佳提供商。

对于视频/图像/文件，Firebase 也有存储服务。还提供进度跟踪和分析。

• https://firebase.google.com/docs/storage
• https://firebase.google.com/docs/analytics

为了方便起见，您可能需要考虑使用 firebase 团队提供的 SDK，而不是使用纯 REST API 进行数据获取/发送。

https://firebase.google.com/docs/firestore/client/libraries

如果您认为同时维护移动和 Web 代码库很麻烦，您可以考虑将纯 Web 切换到 PWA 等移动优先响应式 Web 应用。如果您不关心性能，使用 Cordova 或 Ionic Web 视图包装 React Web 是另一个可行的选择。