Geek Online 2020 编程挑战赛作品展示:冠军项目《缘拼》

由全球领先的互联网通信云服务商融云主办的 Geek Online 2020 编程挑战赛,于 2020 年 10 月 17 日举办了线上总决赛。本届大赛以“后疫情时代通信云技术的创新及实践”为主题,以融云 IM 和 RTC 的 SDK 为编程项目,历经近两个月的激烈角逐,15 支队伍在近百份参赛作品中突出重围,闯入总决赛,最终决出冠亚季团队及四个单项奖。

/uploads/files_user1/article/607e7d8097e9b481793.png

入围作品主要集中于社交、游戏和工具等多个类别,为鼓励开发者挖掘创意、实现更多实时音视频和即时通讯技术的应用场景,最终,评委根据作品完整性、项目创意性和潜在商业价值三个维度进行综合评分,与数百万在线观众一道,见证了冠军队伍的诞生。

尽管当下网络发达,沟通渠道众多,人们的孤独感仍然无法摆脱。开发者们通过研究发现,在线社交的应用领域还存在着大量“死角”,参赛团队缘拼的作品《缘拼》针对大学生群体,基于 WebRTC 技术,设计了一款专注于解决大学生社交难题的小程序。评委们一致认为,无论是作品的完整度、创意性,还是 SDK 编程使用方面都很出色,因此夺得了本次大赛的冠军。

决赛现场的 Demo 演示可以看到,这款小程序主页包含搜索框、官方公告、物流播图、缘拼分类、缘拼展示以及发起缘拼等按钮。大家可基于兴趣在学习、娱乐、出行、吃饭等方面发布诉求,帖子增加的同时会创建一个直播连麦群聊,用户可以在其中畅所欲言。这样利用地理位置提供精确的缘拼地点,通过语音、视频构建同城兴趣小组,最终可以将线上兴趣转换为线下社交行为。

/uploads/files_user1/article/607e7c41b1adf431703.png

团队:缘拼

作品:缘拼

源码地址:https://github.com/rongcloud-community/RongCloud_Hackathon_2020/pull/93/files

参赛类别:小程序

参赛选手:康帅 杨帧 张晨博

第1章 引言

1.1 缘拼的开发背景

随着中国互联网技术的不断地发展,手机社交已经成为我们日常生活里不可或缺的一部分。截至2020年3月,我国手机网民规模为8.97亿,我国网民使用手机上网的比例高达99.3%。在我国网民群体中,学生最多占比26.9%[1]。网络社交对我们生活的影响越来越明显,调查结果显示,96.03% 的学生认为网络社交对其生活学习有重要影响,但随之而来的孤独感也不乏见。74.17% 的学生认为现实生活中的孤独感对生活有一定影响,13.25% 的学生认为有很大影响[2]。我们基于此出发,通过缘拼呼吁大学生“走出去”,参加社会活动,增强实际中的沟通交往能力。

1.2 缘拼的应用领域及使用对象

缘拼是一款专注于解决大学生社交难题的小程序。便利了大学生的日常生活。在学习、娱乐、出行、吃饭等方面为使用小程序的大学生用户发布诉求,提供寻找志同道合好友的服务。

第2章 需求分析

2.1 需求概述

小程序设计帮助使用者利用本程序寻找有相同诉求的同学。根据使用者的需求发起缘拼参与缘拼。与其他同学进行交流,从而线上沟通,线下社交。扩大自己的社交圈

2.2 功能需求

  1. 发起缘拼,并提交相关信息

  2. 根据用户昵称,缘拼标题对缘拼进行搜索

  3. 浏览缘拼的内容

  4. 对当前缘拼内容进行点赞,评论,转发

  5. 与发起缘拼的同学进行交流

  6. 能够在详细了解后参与缘拼

第3章 团队与缘拼

3.1 团队组成

后端:杨帧

前端:康帅 张晨博

3.2 缘拼

AppID:wx5031f067550476e7
小程序体验版二维码:
/uploads/files_user1/article/607e8c32348dd951782.jpg

第4章 概要设计

4.1 设计思路

小程序设计帮助使用者利用本程序对缘拼进行操作。根据使用者的需求进行发起缘拼,浏览缘拼,模糊查找缘拼信息(按用户昵称,缘拼名称),与发起者进行沟通,并参与缘拼。

综上所述,该系统实现包括以下功能:

  1. 发起缘拼

  2. 对缘拼进行搜索

  3. 浏览内容

  4. 对缘拼内容进行点赞,评论,转发

  5. 与发起缘拼的同学进行交流

  6. 参与缘拼

  7. 浏览其他同学的主页

  8. 添加好友

  9. 与好友联系

4.2 设计流程图

/uploads/files_user1/article/607e8c9b58582683304.png

(设计流程图)

第5章 详细设计

5.1 技术方案

5.1.1 开发环境

5.1.1.1 前端部分

前端部分使用的是基于vue的uniapp框架,编辑器为Hbuilder X,即时通讯部分使用的是融云即时通讯服务,定位及路径规划使用的是腾讯位置服务

5.1.1.2 后端部分

后端框架大致分为5个模块,分别为模型类模块融云连接模块数据库操作类模块,操作类模块,和工具类模块。整体思路是前端与操作类进行通讯,操作类调用相应的数据库、工具类及组件完成前端的需求,并返回相应的数据。

后端主要为前端提供以下功能:

  1. 微信登陆:提供用户js_code,后端通过与微信通讯获取openid并返回。

  2. 融云登陆:提供用户openid,后端通过与融云通讯获取token并返回。

  3. 注册账户:提供用户openid、昵称、头像、性别、后端将数据存入mysql,并返回用户ID和图片链接等数据。

  4. 关注功能:提供用户ID、被关注用户ID、操作类型,后端依据操作类型进行判断是否关注、删除关注、获取列表等工作,并且利用pinyin4j组件把用户首字母区分,最后打包并将数据返回。

  5. 保存聊天图片及音频:提供图片或音频数据,后端将数据保存,并返回相应链接。

  6. 帖子发布:提供帖子标题、类型、内容、图片、位置等信息,后端按帖子的不同类型将数据保存。

  7. 帖子管理:提供操作类型、页数、名字、帖子ID等内容,后端依据操作类型进行相应操作,在查询帖子的同时后端对帖子进行分页操作和分类操作,最终返回相应数据。

  8. 收藏功能:提供操作类型、用户ID、物品ID,后端依据操作类型进行对用户收藏的增删查等工作,并将结果数据返回。

数据库共有7个表,Collections(用户收藏表),Comment(帖子评论表),HomeItemLike(帖子点赞表),HomeItems(帖子表),Partake(帖子状态表),UserFocu0073(用户关注表),UserInfo(用户信息表)。

后端部分完全使用java语言,使用maven构建项目,开发环境为win10系统eclipse + tomcat9 + mysql + jdk1.8

采用rongcloud融云通讯以及pinyin4j、javax.servlet-api、org.json, commons-fileupload组件。

/uploads/files_user1/article/607e8c7a7910e748023.png

(缘拼后端)

/uploads/files_user1/article/607e8c7fb5945411350.png

(融云数据库)

5.1.2 技术难点

融云即时通讯的实时接收和推送新消息。

5.2 界面设计效果

界面统一采用 扁平化+拟态 的美学设计,且巧妙利用 css3 动画来提升用户的交互体验,简化用户的操作逻辑。扁平化+拟态设计的大量运用也大大增加了信息的可读性,关键信息一目了然,赏心悦目的同时方便用户阅读。

5.3 各模块功能设计/交互逻辑

5.3.1 发布缘拼

发布缘拼的界面需要从首页的可移动的悬浮按钮处点击进入。可以根据需求选择想要发起的缘拼类型,从而跳转到不同的信息填写界面。

拼学习、拼美食、拼娱乐的设计思路大致相同,需要用户填写相关信息,并且可以选择上传一张图片(例如:拼美食中可以上传一张餐厅美食的图片)以供参与者进行选择是否参与。

拼出行需要在除上述信息外需要额外选择输入 出发地 和 目的地 ,从而寻找有相同或类似需求的同学。

在点击发布按钮后,软件在发布成功后会自动跳转到首页,此时下拉刷新,就可以看到您所发布的缘拼。

5.3.2 查看缘拼项目

使用者可以在首页查看当前所有的缘拼活动,或者点击首页的四个按钮分种类查看不同的缘拼。

在点击某一缘拼内容后,可以查看到此活动的相关详细信息,进行评论点赞收藏。也可以由此浏览活动发起人的主页并与他联系。

5.3.3 搜索缘拼项目

搜索框存在于首页,好友页,缘拼分类页,搜索逻辑为用户如果输入的是数字,即搜索用户ID,如搜索到该用户,直接跳转到该用户的详情页,若搜索无结果,显示无结果提示框。如果用户输入汉字,即搜索缘拼活动标题,跳转到搜索结果页面,支持模糊搜索

5.3.4 查看缘拼详情

在首页用户可以查看目前所有的缘拼,当用户点击想要查看的缘拼,会进入详情页,并提供显示缘拼基本信息位置查看点赞评论收藏添加发起用户为好友,以及主要功能:想拼

5.3.5 查看关注,粉丝,好友

当用户搜索其他用户并关注,或在缘拼详情页关注,被关注的用户会显示在好友页。

5.3.6 消息界面

消息界面,会显示用户和其他用户的聊天会话,双方都可以在会话中发起缘拼请求,也可以文字,语音,图片来聊天。聊天记录分为本地存储云存储,在第一次请求云存储后,聊天记录便被存储在本地缓存中。

5.3.7 我的界面

在我的界面,用户可以看到自己的头像昵称,及缘拼账号,还有用户自己的缘拼收藏,浏览历史和缘拼。在缘拼详情页收藏的缘拼都会在我的收藏里显示,点开的每一个缘拼也会在显示在历史中,我的缘拼则会显示用户发起的缘拼和用户成功的缘拼。

同时点击下面的帮助,可以显示常见的缘拼问题解答,帮助用户更好的使用缘拼。点击了解更多则会显示缘拼的主题理念,帮助用户更好的理解缘拼。而最下面的是退出登录,点击后会清空用户缘拼的本地缓存以及融云登出。

第6章 总结

缘拼是一款基于解决社交问题小程序,包括发布缘拼参与缘拼与人沟通等核心功能。我们还在不断地改进和完善缘拼的功能以及操作逻辑,希望可以给您带来良好的使用体验。

第7章 引用

7.1 第三方组件

  1. Uniapp popup弹出层(链接:https://ext.dcloud.net.cn/plugin?id=329)

  2. Uniapp小程序瀑布流示例(链接:https://ext.dcloud.net.cn/plugin?id=1640)

  3. Uniapp- calendar日历(链接:https://ext.dcloud.net.cn/plugin?id=577)

  4. Uniapp可拖动悬浮按钮(链接https://ext.dcloud.net.cn/plugin?id=1087)

  5. Uniapp聊天模板(链接:https://ext.dcloud.net.cn/plugin?id=324)

  6. 融云IM即时通讯(链接:https://www.rongcloud.cn/product/im)

  7. 腾讯位置服务(链接:https://lbs.qq.com/routeplan/)

7.2 参考文献

[1] 《第45次中国互联网络发展状况统计报告》,2020年04月28日

[2] 吕欢.大学生网络成瘾与抑郁、孤独的相关性研究[J].当代教育实践与教学研究,2018(11):223-224.

0 个评论

要回复文章请先登录注册