因为买了个域名,所以再做了一个打卡的 app

2018-05-29 21:27:48 +08:00
 ctt

每日打卡,健康一生!

前段时间 app 后缀开放注册,交了不少学费,包括一个daka.app,于是我开始了这个打卡项目,希望做好了之后可以每天设定一点小目标,走向健康人生。。。

本来想做一个有社区功能的应用,是个不错的计划,但是写了几行 php 和 sql 和 ajax 就累了,所以就改成纯前端的单页应用,花了几天搞成现在这样。

市场上的效率软件很多,gtd 啥的,可能都做得很不错,但我需要一个非常简单的,不用怎么动脑子的,每天打开就只要点一下加号,打卡了。

同时,我也需要能够了解到近几日的打卡情况,通过比对最近的平均完成情况,用进度条告诉我今日完成量是否达标。

我已经开始用它来记录自己每天的生活。比如早睡(+1 once ),打飞机(+1 ),看书(+20 分钟),俯卧撑(+10 下),跳绳(+100 下),希望后期可以对每个项目的加入类似 github 那个小网格一样的统计显示,再后期是服务器端!

使用方法

使用起来很简单,我发网址给同学,他打开网址自己就会用了,所以就不啰嗦了,总之还比较简陋。如果要更方便打开,可以用发送到主屏幕的功能,下面是图例。

用到的一些开源项目

作为一个非 it 行业人士,技术上我基本都是伸手党,感谢这个时代提供了这么多 js 框架和 css 框架,使得我能够勉强完成这些功能,和一个稍微不那么搓的界面。代码还是很挫的,但也想上传 github 贡献一份微小的力量,但装了客户端之后上传代码总是失败,提示 tls 问题,所以暂时还没上传,不过真有需要学习的我这个代码的同学,保存网页也是一样的,前端直接和开源差不多:)

这是一个纯前端应用。vue.js实现大部分业务逻辑和渲染工作,director.js实现前端路由,store.js实现对 localstorage 的操作,dayjs.js实现了日期的计算,以及spectre.css这个界面库。感谢这些优秀的项目

也引用了一些 serviceworker 的工作,使得可以离线运行,在安卓的 chrome 上是没问题的,ios 的 safari 还是偶尔不能离线。而且据说 ios 的 pwa 会定期清除数据,所以提前做了数据导入导出的功能,目前 safari 上的数据能保存多久,还在测试中。

最初想用 framework7 做界面的,比较有原生 app 的感觉,但文档太长,而且它是个开发框架,需要学习的太多了,所以作罢。也想再来点 seo,通过 pushstate 实现 url 的正常化,但需要服务器端的配合,在我的 phpstudy 上测试也不太顺利(当然都是水平问题),就暂时搁置。

后面的计划

接下来会进一步完善打卡任务、打卡记录的编辑功能,如标签、或者打卡的备注等等,后期再搞起社区,因为为了保持好习惯打卡的人还是很多的,通过社区的力量也会鼓励人们保持打卡,比如说豆瓣上就很多这种小组。

第一次发原创帖,有兴趣使用的 v 友可以提提建议!谢谢!

3742 次点击
所在节点    分享创造
16 条回复
alvin666
2018-05-29 21:30:09 +08:00
帮顶一下,感觉很好用的样子
Willjim
2018-05-29 21:39:57 +08:00
为啥都是 BMV1048,这是代表什么特殊的含义吗?做 PWA 形式非常不错👍
leaves7i
2018-05-29 21:41:05 +08:00
为什么我这里也是 BMV1048 ?这个不是随机的?
ctt
2018-05-29 21:41:09 +08:00
@Willjim 可以输入[im 啥啥]回车,就能改成你自己的名字
ctt
2018-05-29 21:44:51 +08:00
@leaves7i 可以改名啊,输入[im 啥啥]回车即可
@Willjim 还想告诉你是一个古典音乐文件名里的代码,发现拼错了。
Willjim
2018-05-29 21:45:49 +08:00
@ctt 还有一点就是 Android 添加到桌面的时候 icon 是全白,还以为出错了,一看没想到是 icon 就是白的,建议加个背景
ctt
2018-05-29 21:47:10 +08:00
@Willjim 是的,主要不知啥颜色比较好,ios 上默认黑色的,那我暂时加个黑色如何
Willjim
2018-05-29 21:50:04 +08:00
@ctt 可以。哈哈还弄出 Bug 来了,按照你说的我输入了 括弧 im 啥啥 括弧,然后出来的任务删不掉了。
iamkun
2018-05-29 21:54:57 +08:00
进来看到了 dayjs 帮顶一下
codelover2016
2018-05-29 21:57:42 +08:00
可以了解一下 git ssh key 生成步骤,然后就可以把代码提交上去了.
链接:https://blog.csdn.net/hustpzb/article/details/8230454
ctt
2018-05-29 22:00:57 +08:00
@Willjim 哈哈,不包括括弧的,已经修复了,个别特殊符号没有 encode 一下的原因。不过也有终极方法,那个右上角小点打开翻下去里面有清空所有数据的选项。
lsytj0413
2018-05-29 22:15:58 +08:00
看着还很简单啊
mrant
2018-05-30 09:31:16 +08:00
同学,你的主机 /服务器用的哪个,app 域名直接解析就能用了吗
shimomiaizo
2018-05-30 10:06:57 +08:00
期待小网格功能上线,支持动手能力强的 lz。
ctt
2018-05-30 14:37:49 +08:00
@mrant 找的一个免费空间,比较慢的,cloudflare 解析的(因为那个空间不支持 ssl ),也比较慢
ctt
2018-06-03 18:06:31 +08:00
@shimomiaizo 上线了,为了节省版面,暂时是最近的 10 周作为小格子,颜色深浅方案暂时是 4 级,依次是 0,近 7 日完成量的 50%以内,近 7 日完成量的 100%以内,超过 100%的顺序加深。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/458763

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX