基于 Quasar 和 Firebase 构建的简单生产力应用程序

更新 (2020)：我使用 Quasar v1 创建了一个可离线运行的更新版本应用。您可以在这里查看该应用。而且，它是开源的！如果您想了解我通常如何构建我的 Quasar 项目，可以在这里查看。如果您感兴趣的话，我在第一次 Quasar 大会期间进一步讨论了它的构建原理。

本文最初发布在我的博客上，并且还刊登在Quasar 的官方媒体出版物上。

Chronocross源自希腊语“ chronos ”（意为“时间”）和拉丁语“ curos ”（意为“参加” ），是一款 Todo 应用，它将其他生产力技术：番茄工作法和艾森豪威尔矩阵，整合到一个有凝聚力的工作流程中。

简而言之，Chronocross 其实只是我为了补充工作流程而开发的一款简单工具。我是个超级效率狂，沉迷于完成清单上的任务。我使用Cirillo 的番茄工作法来管理拖延症，保持专注。

番茄工作法® 是一种时间管理方法，它使用计时器将你的工作分解成几个时间段，通常每个时间段为 25 分钟，中间间隔短暂休息。——维基百科

再加上另一项效率技巧——艾森豪威尔矩阵，它帮我确定了哪些任务应该在早上第一件事做，哪些应该放在最后做。我的每一天工作都感觉无比幸福。

最终，在待办事项应用、单独的番茄工作法应用和艾森豪威尔盒子里的电子表格之间切换，感觉有些力不从心。感觉就像在恳求我把它们整合成一个统一的应用。到了这个时候，如果我不能立即响应这个号召，就真的不能称自己为一名软件开发者了。

Chronocross最初是用 Angular 构建的。当时我正在学习 Angular，用它开发应用似乎是一个不错的选择。但我不想再开发一个 Web 应用，因为这样会让我在其他网站上切换和折腾，从而拖延开发进度，降低我的效率。所以我决定使用 Electron 并将其开发成一个桌面应用。

这听起来不错，但除了日常工作之外还要学习 Angular 和 Electron，这真的很难实现。当时我是一名 Java 开发者，这是 JavaScript 革命之后我第一次回归前端。我在大学里学过一些基础知识：HTML、CSS、JQuery 和 JavaScript。但结果却让我大吃一惊。配置 Electron 与 Angular 配合使用，对我这个不熟悉的脑袋来说简直是一场噩梦。修改 tsconfig？还有 Webpack？加载器？安装 NPM？什么？JavaScript 现在能访问 I/O 了吗？Nodejs？

我最终还是设法让它运行起来了（不知怎么的）。这花了我很长时间，也经历了无数的挫折；那一年我差点就放弃了，转而使用 Java 和 Swing，而不再费心学习新东西。功能列表写到一半的时候，我最终搁置了这个小小的心头好项目。

差不多一年后，我在另一家公司担任全栈工程师，不管这意味着什么（我想应该是：我懂 Java 和一点 HTML），前端使用 Angular。我又开始渴望学习新东西了。我发现自己已经来到了 Vue 生态系统的门槛。早在我刚开始学习 Angular 的时候，我就听说过 Vue，但因为 Angular 是公司选择的框架，所以我就放弃了。依我拙见，Vue。真是。漂亮。太棒了。体验简直是一见钟情。

Quasar框架

将我之前的 Angular 作品集网站移植到 Vue 后，我进一步探索了 Vue 生态系统，并发现自己正处于 Quasar 框架的低谷之中。我阅读了文档。它真的太好用了。

Quasar 是一个框架，它允许你使用相同的代码库构建响应式单页应用、服务器端渲染应用、渐进式 Web 应用、混合移动应用和 Electron 应用。不仅如此，它还内置了 Material 和 iOS 主题的 UI 库。这就像做梦一样。你只需要担心如何构建你的想法，如果你操作正确，只需一个命令，就可以为其他平台构建你的项目。这有多棒？我知道有些人听到“混合 Cordova 和 Electron 应用”可能会感到惊讶。但在我看来，Quasar 可以满足 90% 甚至更高的用例。而且它每天都在不断改进。

穿越时空 2.0

我借学习Quasar的机会，重新开始开发Chronocross。这次我决定把它做成一个移动应用。我希望至少能有类似的体验，就像离开显示器和键盘，真正地上发条番茄钟或厨房计时器一样。

我放弃了之前的设计，重新开始。在这个小应用中，我决定实现四个主要功能，并分别用不同的标签页来表示：番茄工作法标签页、任务标签页、艾森豪威尔盒子标签页和报告标签页。

番茄工作法标签页是一个非常常规的计时器，你可以播放、暂停、停止和重启。顶部有冲刺指示器，每25分钟的工作冲刺后都会有一个5分钟的休息冲刺。最后一个休息冲刺，我称之为长休息，是15分钟。当然，这些冲刺时长可以在设置中调整，但这些是传统的时长，所以我把它们设为默认。

第二个选项卡包含“任务”列表。您可以在这里找到您的任务。这些任务以卡片形式列出，每张卡片都包含一些基本信息，一目了然：任务名称、优先级以及进度条，进度条表示该任务的实际耗时与预计耗时。还有一个可折叠的选项卡，其中包含其他信息，例如实际预计耗时、当前进度和简短描述。此外，还有一个子任务列表，方便您将主任务拆分成多个子任务。

点击一个任务即可选中它，之前的小FAB会变成一个可扩展的FAB，其中包含其他选项。删除、编辑、重置（将进度重置回0）、标记为已完成以及播放。点击播放按钮将在所选任务上运行番茄钟，这意味着你所有的工作冲刺都会记录在当前选定的任务上。这对于追踪进度非常有用。如果没有选定任务（或者你再次点击取消选择当前任务），计时器选项卡仍然可以独立使用，它的功能与普通的番茄钟相同。为了防止记录损坏，如果计时器当前处于活动状态，我禁用了选择功能——但仍然可以查看其他任务的详细信息。

我使用了 Firebase 的实时数据库来存储所有任务和进度时间记录，这确实是一项非常便捷的服务。此外，还有一个专门为 Vue 开发的插件Vuefire ，使用起来更加便捷。当然，我还会将它与FirebaseAuth配合使用，用于登录和注册。

我为第三个选项卡创建了四张卡片，分别代表艾森豪威尔象限。每个象限的标签下方都放置了任务预览。这些任务的优先级取决于您在任务选项卡中创建任务时选择的优先级。高优先级任务将自动归类为“紧急”和“重要”任务。

展开一个象限会列出该象限下所有当前任务。如果您觉得优先级发生了变化，可以将其移至其他象限。如果您在“任务”选项卡中重新编辑优先级，也可以实现同样的效果。但此处的操作是以艾森豪威尔矩阵的视角进行的。

最后，最后一个选项卡是报告。作为一名软件工程师，工作的一部分需要处理一些文书工作（我敢打赌你肯定没想到），但并非像大多数办公室工作那样的传统文书工作。我们的文书工作与指标、任务跟踪、燃尽图和其他东西有关——如果你不是经理或Scrum Master，而且你真的不在乎进度，只想写代码然后回家，这些工作就相当无聊了。不过，我们得承认，记录任务的工时确实很无聊。当你沉浸在编程的狂热中，一个接一个地实现功能，像喝咖啡一样快速地修复错误时，它会消耗你的动力。这个简单应用程序的大部分灵感都是为了处理这种情况。在一天或一周结束时，我想看看我在这段时间内完成了哪些任务，以及我花了多长时间来完成它们。

现在剩下要做的就是在一天结束时更新那些 Jira 卡片，我的 Scrum Master 会非常高兴。如果我忘记记录一天的工作时间，我仍然可以过滤日期，并从 Quasar 提供的简单易用的日期选择器中进行选择。

有时，有些任务需要超过一天才能完成。也许是任务太大，或者还有其他任务需要你处理，导致你不得不暂停当前正在处理的任务——我为这种情况添加了一个任务视图。有趣的是，这个报告图表功能虽然很简单，但我最终还是最喜欢它。

我还实现了其他功能，例如：

• 保持清醒，防止屏幕休眠，以便您始终可以看到计时器。
• 后台持久化，让您在后台运行应用程序。
• 本地推送通知，当应用程序在后台运行时，计时器到时显示通知。
• 永久全屏，我只是觉得当应用程序全屏时感觉更“能引起注意”。

为了真正完成这个项目，我注册了一个谷歌开发者账号，以便在 Google Play 商店发布应用。注册费是一次性的 25 美元，但之后你可以发布任意数量的应用。这笔交易还算划算。在 Google Play 上发布应用非常简单，填写所有必要信息，上传 APK 文件，就大功告成了。（点击此链接了解更多关于发布版本的信息）你需要等待几个小时，应用才会在 Play 商店上架。

上传 APK 之前，我必须先确保它已签名并压缩对齐。Android 要求所有 APK 在安装之前都必须使用证书进行数字签名。使用构建我的 Quasar 应用后，quasar build -m cordova结果.apk将在相应的发布文件夹 ( project-dir/src-cordova/platforms/android/app/build/outputs/apk/release) 中提供。我使用 keytool 生成了我的私钥，然后用来jarsigner对包进行签名。apksigner也可以用来实现相同的结果。成功对我的 APK 进行签名后，还需要对包进行压缩对齐，否则 Google Play 控制台会抛出错误。我曾经zipalign完成过这个。（如果您打算使用apksigner，如果您对 APK 进行进一步更改，它会使包无效，因此，您必须在对包进行签名之前使用 zipalign）。有关应用签名的更多信息，请点击此处。

短短几个小时后，Chronocross 就出现在 Play Store 上。我把链接告诉了一些对番茄工作法和效率相关的朋友，并给了他们。

我其实并不指望它在 Playstore 上能有好的表现，只是能把 Chronocross 从我的未完成项目清单里划掉就很满足了。它还有很多可以改进的地方。我甚至可以用它来生成一个 Electron 应用，添加一个报告提取功能，然后直接在 Jira 之类的应用上自动化运行。如果我觉得它有用，或者有人觉得它有用，想要更多功能，我可能会不时地更新它。

总的来说，我对这次体验非常满意，我可能会继续使用 Quasar 构建一些随机应用。毕竟，编程的乐趣之一并不总是在于创造下一个成功的产品。有时，乐趣在于构建一些能够解决你每天遇到的小问题的东西。

本文与 Pomodoro Technique® 或 Francesco Cirillo 并无关联、联系或认可。