使用介绍——来这儿学

一、使用场景&目标用户&背景

学生：我是一名学生，我希望能够在寒暑假期间报一些补习班或者兴趣班(绘画)，但是我不知道可以通过什么途径去了解附近所有培训机构的信息(学费,招生条件,联系方式,学时制等)，以至于我最终放弃了线下培训的机会。

家长：我是一名家长，我的孩子已经上小学了，眼看假期来了，想让孩子赢在起跑线上，让孩子参加他最爱的兴趣班(篮球)或补习班，但是我没有人脉，不知道通过什么途径了解到附近所有培训机构的信息，只能满城跑，好不容易找到一家培训机构，学费昂贵等因素又困扰着我，该如何才能选购一家性价比合适的培训机构呢？

教育机构：我是教育机构老板，我希望我的机构能够让想报名的人都能够看得见，可是如今各大非专业平台都在该领域插一脚，例如美团，58同城等，我到底要选择什么样的平台提供信息，让想报名学习的人能够看到并信赖我的培训机构？

 就职人员：我是已经就职于某公司的员工，公司要求要在明年实现某个项目，实现该项目需要用到某技术，可我现在还不会该项技术，附近也不知道有没有现成的该技术的培训机构，眼看一天天过去了，问亲戚朋友也不懂，想培训却不知道去哪里可以培训，我到底该通过什么途径才能找到适合我的培训机构？

【 历 史 前 景 】

随着互联网的高速发展，线上互联网课程平台众多，例如腾讯课堂，慕课网，大学慕课等，但是通过市场调研，问卷调查等方式，许多学生反馈线上学习效率不高，学习监督能力不强，例如舞蹈，唱歌、乐器等兴趣培养需要在线下机构才能得到更好的效果。

可是，目前互联网上并没有很全面的线下机构采集平台为这样的需求人群提供便捷的线下机构查询服务；对于线下机构也没有专门的渠道向需求人群宣传机构。

因此，为解决这样一个需求人群“去哪儿学”与线下机构“去哪儿宣传”之间的现实问题。我们开发了一款名为“来这儿学”的线下机构信息采集平台的校园信息化小程序。

【 定 位 】

小程序描述：

学生、家长、在职人员不知道该去哪儿找机构学，而线下机构却不知道通过什么渠道向需求人群提供服务，而我们这款“来这儿学”小程序，正是解决用户“去哪儿学”的现实问题，它是机构与客户之间的润滑剂，是一款校园信息化小程序。

【概念创新&贴切实际】：

 在原有的美团、大众点评等店铺点评平台的基础上，单独为线下教育机构与用户之间成立专门而又全面的便捷服务平台。推动线下教育机构这个朝阳产业的发展，为需求用户能够更快找到心仪的机构平台。

【 产 品 】

一、易懂易用

1、我们将服务板块按照主次依次呈现给用户，将核心服务板块“找课”放在五大板块中间并将跳转按钮特殊化，使用户更易更快查询并解决主要问题。

2、在用户首次进入小程序时，弹出兴趣选择页面，让用户选择感兴趣的分类，例如舞蹈唱歌乐器等，平台将会优先推荐用户感兴趣的机构信息。使用户更易更快得到并解决主要问题。

【 技 术 】

一、合理性

利用小程序的易分享易推广的裂变式引流特点，平台功能提供“扫一扫”、“红包卡卷”、“团购砍价”和“分享有礼”等方式鼓励用户分享推广平台和线下机构，增加知名度，吸引更多用户参与到平台活动。

二、可靠性

1、非强制性授权微信信息：如果用户选择不授权提供微信登录信息，并不影响用户使用平台的核心服务功能：找课。只是不能使用一些例如文章点赞，评论，频道聊天等需要用户登录的功能，平台会温馨提醒用户需要授权登录后才可以使用此功能。

2、非强制性授权位置信息：如果用户选择不授权提供位置信息，并不影响用户使用平台的核心服务功能：找课。只是不提供显示用户与每个线下机构之间的距离，但除此之外所有的信息都可以正常提供。

3、良好的交互信息提醒：在提供数据操作展示等，提供等待加载、良好提示等界面给用户，让用户实时了解交互操作反馈信息。

三、性能

提供充足可信的真实测试数据，对数据的获取和操作使用异步方式等，让数据操作与界面操作分别独立，性能上优化至最佳。

二、需求分析

针对上述的需求场景，学生、家长、在职人员不知道该去哪儿找机构学，而线下机构却不知道通过什么渠道向需求人群提供服务，而我们这款“来这儿学”小程序，正是解决用户“去哪儿学”的现实问题，它是机构与客户之间的润滑剂，是一款校园信息化小程序。

三、团队介绍

队长：丘金龙

年龄：19

学籍：18级在读生

负责部分：主要负责数据展示和结构样式

感受：进入前端8个月了，终于把自己学的东西，基本都用上了，小程序给我们提供了云平台，为我们项目减少了不少负担

队员：刘海

年龄：20

学籍：19级在读生

负责部分：主要负责数据方面，对样式进行细节调试

感受：这段时间，我每天都在和组员两个人为了这个竞赛项目付出了很多精力，熬夜早起，学业也推了，我们都清楚认识到这次竞赛对我们的意义，我们都热爱编程，都有共同的目标。为了目标，为了前途，倾尽所有。

四、交互设计

1、通过统一的卡片式样式展示各种数据信息列表，经过无数次的精心细调，最后呈现的动画特效以及卡片样式得到了大众审美的好评。

2、内容主次突出，重要的内容摘要部分使用明显可见的样式让用户一眼便能得到大致的主体信息，在无关紧要的信息上停留时间少，快速定位了解到想要知道的内容。

五、技术模块

技术层面的介绍我们写了一个xmind来介绍我们的整个项目，下面整个是我们写的整个技术图，由于图片内使用的技术较多，您可以先点开图片放大来看看，或者来听听我下面对每个技术分支点进行的详细介绍。

①、我们先从五大模块进行讲解：

1、首页模块：首页展示了我们整个项目的门面：

Ⅰ、城市选择：根据用户所在的城市为用户优先推荐附近的机构。首次进入小程序默认定位当前位置所在城市，减少用户操作，为用户优先提供当前城市内的机构信息。用户也可以通过城市列表选择并切换当前城市，获取不同城市的机构信息。选择城市的列表页面提供精美的UI和方便的操作减少用户操作。

Ⅱ、该城市的天气的展示

Ⅲ、搜索框：点击后会快速跳转到本项目核心服务：找课模块，选购机构。

Ⅳ、业务功能：上面有扫一扫、付款码、活动、红包/卡卷等，上面的功能会陆续进行更新，提供用户更全面的线上线下服务。

Ⅴ、机构宣传位轮播图：首页亮眼部分提供大屏轮播图，为有意向宣传的机构提供平台宣传，促进新老机构的推广发展。点击相应的宣传图后跳转到相应机构的详情页，轮播宣传图的数据均是存放在云数据库和云存储中的JSON数据，通过修改云端数据，实时更新到每个用户的首页展示中，而无需更新版本。

Ⅵ、快速跳转分类入口：上面有小学、初中、高中、考研等等数据入口，展示在页面方便用户快速定位到需要了解的机构，提供点击可跳转

2、找课模块（项目核心服务板块）：提供搜索和分类，让用户可以快速查询并定位到需要了解的机构。

Ⅰ、搜索：热搜、历史搜索、快捷搜索，热搜展示我们平台最经常搜索的是个关键词，方便其他用户快速了解到最近热门的机构，且点击热搜 无需输入 即可快速搜索；通过缓存技术 存储用户每次成功查询后的关键词，用户下次点击历史关键词，无需输入关键词即可快速搜索；随着用户的输入，自动呈现搜索内容，无需点击搜索按钮，提供用户方便的懒操作。技术点：搜索功能由云数据库正则匹配技术实现，历史记录由缓存技术实现，通过延迟搜索技术让用户输入的同时能够得到搜索内容，无需点击搜索按钮，方便用户操作。

Ⅱ、分类：使用了二级分类的方法，通过分类机制，使用户能够快速筛选定位到需要了解的该分类下的机构列表，界面提供方便的操作增加用户体验感。技术点：分类数据采用JSON数据，界面提供“回到顶部”等快捷操作和滑动特效。

Ⅲ、搜索或点击关键词后，展示机构列表，机构列表上还添加了选类别的功能，机构列表上展示的是机构的大概信息：机构头像、机构名字、机构描述、机构星级、且根据我们写的原生js获取当前位置距离机构的长度。

Ⅳ、点击机构列表的机构后，会跳转到机构详情页，最上面展示了，头部信息：头像、名字、星级、距离、机构位置，然后是机构的四个选项区域：机构信息、课程、老师、动态，不同的选项的功能展示页不同，同时还可以快速关注该机构宿主用户和收藏机构。机构信息：机构图片的轮播图展示机构的风貌，轮播图点击即可放大预览，左右滑动切换上下一张图片览；地图定位到机构的位置，有小地图展示，点击小地图即可全屏放大地图展示；同时还有联系该机构的功能，接着是具体介绍机构的信息；还添加了机构的讨论功能，讨论的发表还可以进行点赞，记录到云数据库，添加了机构与用户的互动。展示该机构已有的课程，上面的信息有课程预览图、名称、价格、购买人数、和课程类型（线上、线下）。展示该机构的老师状况，上面的信息有老师的图片、名称、课程数、学生数、老师介绍。该机构曾经发表的动态或宣传，用于展示该机构发布的一些招生信息和活动等。

3、生态圈模块：生态圈提供用户和机构发表有关文章，供其他用户了解相关的活动，科普，福利等，提供用户与用户、用户与机构、用户与官方进行交流和展示的平台：

Ⅰ、生态圈文章列表展示：展示文章类型分为四种：推荐、热门、关注、搜索。其中，推荐 是根据用户感兴趣的内容为用户推荐文章列表；热门 是展示本平台下被用户点赞次数最多的前几个文章列表；关注 是展示用户关注的机构和用户发表的文章列表；搜索 是在搜索框搜索到的文章，展示的板块。提供搜索框给用户根据文章标题和内容关键词搜索相应的文章，快速定位用户需要了解的内容。延迟搜索技术，让用户输入的同时展现搜索结果，无需点击搜索按钮即可完成搜索功能。文章展示了发帖人的头像、名称、身份（我们官方给大家区分了四种类型：普通用户、专业人士、机构、官方）；展示了文章信息的浏览人数、点赞人数、发帖时间（“几天前”展示形式），快速浏览到文章的前面几行的摘要文字和图片；还给文章添加了快捷点赞操作，点击点赞列表（点击列表用户的头像即可查看详情），这个是查看点赞的人列表入口，可进入到一个我们用通用页面写的一个页面，上面展示了点赞列表（点赞人的头像、名称、发表的贴子数、关注数、粉丝数和身份）

Ⅱ、文章详情页（点击生态圈文章列表后进入文章详情页）：

a、发表用户信息栏：可快捷关注该用户，点击头像查看用户详情，发表时间。

b、文章信息主体：文章的标题、内容（纯文字或图片+文字），浏览次数，最后编辑时间，快捷点赞按钮，点赞的人 展示列表。

c、机构信息栏：展示该帖子涉及的机构的简略信息（机构头像、名称、星级、距离、地址），快速关注按钮。

d、讨论与评论：可对该文字进行发表评论，评论列表上展示了点赞评论，评论时间、评论内容、评论用户。

e、手机窗口底部快捷按钮：点赞文字、评论文章、关注用户、分享好友等功能

4、咨询模块：提供不同的分类频道供在线用户讨论交流相关机构选购知识、交友、咨询等：

Ⅰ、分类频道：用户通过选择分类频道，可以和该频道下的用户进行交流沟通。分类频道分为四种：默认大厅（全部用户刚登录时展示的大厅，可在此进行讨论）、用户消息列表（互相关注的用户可以进行聊天交流）、分类频道大厅（例如唱歌、跳舞、培训、语种等，连接到该频道下的在线用户可以交流沟通）、机构频道大厅（在关于某机构下的频道交流沟通，连接到该机构频道下的用户可以交流沟通有关该机构的问答），分类频道还有自动连接的功能（保存用户最后一次选择的频道，供用户下次打开咨询大厅时可以自动打开并连接上一次会话）

Ⅱ、使用技术：

a、频道连接、消息发送与接收，采用先进的第三方websocket SSL技术实现用户加密通讯，节省服务器消息存储传递资源。

b、支持发送图文消息，图片将会上传到云服务端存储，通过云链接传递。

c、websocket消息体：消息格式（JSON数据）、消息类型（图片、文字）、消息内容、发送时间、用户标识（用于获取发送该信息的用户的信息）

5、我的模块：用于登录和存放登录后在小程序中的操作记录：

Ⅰ、登录：通过点击头像按钮，快捷微信授权登录，技术点：云函数登录，云数据库和本地缓存存储用户信息。

Ⅱ、消息展示：用户头像、用户昵称、用户登录状态、粉丝数、关注数、收藏数（粉丝、收藏、关注数，目前由于大家第一次使用，数据都为0，不方便展示我们对这个数据加载时的功能，所以先使用了假数据）。

Ⅲ、信息列表展示：存放登录后在小程序中的操作记录：我的机构、我的文章、我的关注、我的粉丝、喜爱文章、收藏机构、分享有礼、浏览历史等。点击八大选项之一，会跳转到通用页面展示，操作记录。

Ⅳ、业务功能（后续会进行开通）：优惠劵、我的钱包、商家列表、联系客服、检测更新、关于我们、设置。

②、我们再讲解五大模块内用户、文章、机构的使用技术：

1、文章使用的字段：使用在文章详情页字段

Ⅰ、文章信息：存放了id、文章标题、发表时间、最后编辑时间、文章内容、点赞数、阅读数、分享数、图片列表。

Ⅱ、机构信息：通过机构id获取机构详情信息

Ⅲ、用户信息：通过用户id获取用户详情信息

Ⅳ、点赞的人列表：通过用户id获取用户详情信息

Ⅴ、评论：评论时间、评论内容、评论发表人信息（头像、名称）、点赞数

2、用户使用的字段：存放了用户登录后的数据：

Ⅰ、用户信息：id、名称、性别、地址、手机号码、注册时间、用户类型、擅长领域。

Ⅱ、关联列表：我收藏的机构、我喜爱的文章、我的关注、我的粉丝、机构查看历史记录

3、机构使用的字段：使用机构详情页的字段：

Ⅰ、机构信息：id、机构名称、机构介绍、联系电话、价格、阅读数、评分星级、距离、工作时间、创建时间、机构样貌图片列表、机构所属分类。

Ⅱ、宿主用户信息：创建该机构的用户的信息。

Ⅲ、评论：评论时间、评论内容、评论发表人信息（头像、名称）、点赞数。

③、其他技术

我们使用了第三方的插件colorui和GoEasy的websocket技术

六、作品特色

1、首次进入小程序，为新用户提供友好的分类标签去选择感兴趣的领域，优先为用户提供感兴趣推荐的机构列表。

2、同时也提供的选择查询的城市进定位，再展示出该城市下的机构列表，给用户进行选择目标机构。

3、在每个弹窗口都添加了各式各样的动画效果，且在用户列表，生态圈列表，机构列表上面都会有动画效果，提高了用户体验感。

4、在首页模块，我们还展示了不同类型的机构，用户点击后，进入到列表里且在列表里添加了一键回到顶部的功能，可进行选择目标机构。

5、在咨询模块，我们使用了websocket的方式，搭建了一个聊天平台（机构和大厅）和共同关注后的聊天列表，只要用户进入了相同的频道即可进行聊天发图片等功能。

6、在找课模块，我们不仅有搜索相关机构的功能且有热搜选项和历史搜索的选项，还有不同机构的总分类，上面有我们平台最全面的全部机构列表的分类。

7、在生态圈模块，有推荐、关注、热帖、搜索等选项，每个选项下，都有对应功能的文章，动态，及推广，搜索选项是搜索之后，将反馈的列表放到搜索选项上。文章上都有点赞和点赞列表显示、点击后的功能及显示这个文章发表群体是普通用户、专业人士、机构，点击文章进入里面还有更详细的内容，内容的展示功能有：Ⅰ、可对文章进行关注和收藏；Ⅱ、可跳转到机构上；Ⅲ、显示点赞列表上可跳转的通用页面上展示点赞的人；Ⅳ、可进行文章评论和分享。

8、在我的模块，展示关注、粉丝、收藏的数目，在粉丝、关注收藏数目上添加了定时展示功能，给用户一个良好的体验，接着有一个区块存放着：我的机构、文章、关注、粉丝、喜爱的文章、收藏的机构、浏览历史等选项，里面记录着用户曾经的操作的数据。

9、机构页面：里面存放着机构信息、课程、老师、及动态，不同的选项的功能展示页不同，同时还可对该机构进行关注和收藏。Ⅰ、机构信息：机构图片的轮播图展示机构的风貌，地图功定位到机构的位置，同时还有联系该机构的功能，接着是具体介绍机构的信息，还添加了机构的讨论功能；Ⅱ、展示该机构已有的课程；Ⅲ、展示该机构的老师状况；Ⅳ、该机构曾经发表的动态或宣传。

七、系统测试

五大模块：

其他模块：定位、文章详情页、组织详情页、通用页面（点赞、组织）、地图