我的第一款(ban)产(cheng)品(pin)—

最初想做铛铛打卡是因为，软件工程课程有个大作业要求几个人组一个小组！要求按照完整的软件开发流程来做一款软件，老师考虑到一部分同学的编程能力说可以不编码，只画图写文档也可以。但是这种可以展(zhuang)示(bi)的机会能错过吗？当然不能。所以我拉着我正在学JS的下铺，跟我组队，又捎带着一个打酱油求过的室友开始了我第一款产品的开发之路。

想了好久都没找到没有好的项目，正好手头有一个自己写的用来实验室同学打卡签到的web应用。因为没有前端写的很难看，不过能用。既然现在“骗来“了一个前端何尝不把我这个软件重新写一遍呢！

项目初期

之前我是用于实验室学生打卡，使用范围较小，功能也很少！既然我们团队扩大了，怎么得也得确定个高大上的需求吧！以我最初的作品为蓝本，为了制定更加贴合实际需求的产品功能我将用户锁定在了校园中的学生。其实在确定了这个项目之后，我在网上搜了下打卡类的产品发现也已经“烂大街”了。

所以为了突出我们产品的创新性（好难！只后悔自己生的太晚），打卡功能分为两类！一是普通类：创建一个目标，每个人都可以参加，也可设置成只允许个人使用等。这是社交性质的一类。另一种是考勤类：发起人设置好一些参数，如地点、时间等，通过二维码或者超链接的形式发布（主要是针对老师点名太慢，浪费时间。这样老师可以上课前将手机的二维码投到大屏幕上课前签到，课后签退！其实厉害的老师从来不需要点名的… …）

需求分析

1、调用微信登陆接口或者自行注册账号登陆

调用微信接口，自动获取用户头像和昵称等公开信息，以达到快速登陆、快速打卡或快速创建的目的。如不想使用微信登陆，也可自己注册账号。（账号即为用户ID，一经注册不可更改。

2、调用高德地图接口获取位置信息

对于高级模式的打卡活动，定位偏向于考勤性质。即会强制进行定位，并使用高德地图的接口获取用户位置，达到防止打卡作弊的目的。

3、搜索并加入兴趣圈

对于一些设置为开放的兴趣圈，每个人都可搜到并可以加入，进行打卡。

4、创建打卡兴趣圈

用户对于已有的兴趣圈不满意，可以自己进行创建（简单模式），设置兴趣圈基本信息。然后邀请朋友等人加入。

5、发表动态完成打卡

对已参加的常规性兴趣（活动），进行打卡。可以发表说说等内容。

6、关注其他人

对感兴趣的用户进行关注，可以浏览其主页，查看用户公开的兴趣圈子（活动）。

7、对别人的打卡记录点赞评论

在首页显示好评最多的用户记录，用户即可对其他用户的记录进行评价和点赞。

8、查看互相关注用户动态

当两个人成为互为关注的用户时，即可查看对方的打卡动态。

9、创建打卡签到活动

即此打卡签到活动为高级模式，限制条件较多，比如位置、时间、时效等。

10、生成活动签到二维码

将自己创建好的考勤活动生成二维码，方便其他人打卡。

11、用户通过微信扫一扫打卡

对于其他人发布的二维码，使用微信扫一扫再通过微信登录接口登陆，使整个流程更加便捷。

12、私信功能

用户之间，可以相互发送私信。也可以设置不接受陌生人私信。

13、数据统计

根据全部的打卡数据，自动生成各种图表信息，可供用户参考。

数据库设计

图1-数据库总览

图2-打卡记录表 dangdang_record_list

图3-目标信息表 dangdang_target_info

图4-用户信息表 dangdang_user_info

图5-用户与目标关系表 dangdang_user_target

编码

大概功能确定了之后，设计完数据库（仅仅只有四张表… …所以是个半成品）我们就准备动手了！当时也没来的及考虑写文档，画用例图、类图各种图了。因为现在不仅仅是我自己写代码，所以面临着用什么样的方式开发与和前端沟通的问题（之前的版本我是直接在前端页面写PHP代码）。我俩讨论之后，决定采用前后端分离的方式来编写。前端通过ajax 异步请求数据。这样我的只写后台的话任务就特别轻松了（后来我自己当“全栈”开发我的资源分享网站www.qingning99.cn时深有感触，前端ajax异步真难调，不过掉到一个一个的坑之后也学到了很多东西）。我只负责编写后台的逻辑代码，写写sql语句（由于没学框架，全部手动写的回滚… …）。这样前端用的 bootstrap 和 JQuery框架，他写好页面后，会告诉我，向后台发起请求的数据格式、参数等和要求返回的数据。我会将处理后的各种状态和数据返回给他。我第一次感觉到，前后端分离就是轻松啊！对了，为了较快的完成开发，我用PHP写的后台。

我们为了可以尽快的使项目上线，就先开发了简单模式及其配套功能（创建目标、搜索目标、个人主页等）。

项目部分页面展示

首页展示

登陆成功后，首页会显示20条所有目标(public)中点赞数最多的打卡记录（按点赞数排列）。

图6-首页

我的目标

点击【我的目标】之后会显示用户已经参加的全部活动。每条记录上会显示打卡的总次数和是否已经打卡。已打卡的按钮不可再点击，点击活动名称后可以查看相关信息。

图6-我的目标

搜索目标

如果想参加一个其他人的目标可以点击【搜索兴趣】进行搜索。

图7-搜索目标

我的主页

展示一些相关信息，背景、头像、个性签名和一些操作等。

图8-我的主页

我的动态

可以查看自己所有的打卡动态。

图9-我的动态

修改信息

可以修改个人信息。

图10-修改信息

定位功能模块

后期由于简单模式没有强制要求定位，即功能也没有加上去，但是已经做出来了。

图11-定位功能模块

项目部分功能展示

打卡操作

在【我的目标】页面进行打卡操作。

图12-打卡操作

创建目标

搜索目标后，发现没有符合自己要求的目标后可以进行创建。

图13-创建目标

加入目标并打卡

搜索目标后点击加入并进行打卡。

图14-加入目标并打卡

查看目标信息并退出

可以查看所有参加此活动用户的打卡动态及活动的相关信息并退出活动。

图15-查看目标信息并退出

查看打卡记录

查看自己所有的打卡动态

图16-查看打卡记录

更新目标信息

更新目标信息，将私有活动改为公开的。

图17-更新目标信息

更新个人信息

更改个性签名和邮箱

图18-更新个人信息

小结

遗憾的是，由于一些原因项目没有开发完就结课了！最后展示了一下效果图，并且将各种图都补画完。第一款产品就成为了个半成品，心痛… …