评论

#小程序云开发挑战赛#-同学在哪儿-你说的都队

「同学在哪儿」是一个地图小程序,可以在地图上查看班级同学的毕业去向以及地域分布,多联(蹭)系(饭)

「同学在哪儿」是一个地图小程序,可以在地图上查看班级同学的毕业去向以及地域分布,多联(蹭)系(饭)

作品简介

「同学在哪儿」是一个地图小程序,用户可以创建班级,同学通过填写自己的毕业去向,就可以加入班级,并查看其他的同学的毕业位置去向。小程序的初衷就是希望能够将同学们联系的更加紧密,等到一个陌生的城市,打开这个小程序,可以直接找到能够联(蹭)络(饭)的人。

目标用户

即将毕业、或者已经毕业的学生群体。

实现思路

产品设计

项目的灵感来源于自己的一个 idea,这是我来到初次来到杭州实习的一个感受。刚来的那几天,迫切地想知道有没有同学在杭州。因此有了这样的一个 idea。做一个分布地图,让我能直接在地图上知道大家目前所在的位置以及目前的状态,是在工作 or 在学习。

在网上查了相关信息,没有类似的产品,而知乎上有相关的提问需求,因此也坚定了我做这个产品的信念。

这是最初的一个手稿:

之后学习了 Sketch,将这个手稿用 Skech 进行完善,这是小程序的设计稿:「同学在哪儿」小程序设计稿

这篇文章介绍了我的一个产品设计的相关理念以及思路:一个 Weekend Project 引发的产品设计思考

产品开发

小程序使用 Taro 框架,利用小程序云开发存储数据并进行前后台交互。整个开发周期约 2 周,并于 8 月中旬上线,中间经历了几次小型的迭代。

整体的构架如下图所示:

前端

小程序的前端页面使用 Taro 框架进行开发,Taro 是一个开放式跨端跨框架解决方案,使用 React 的语法,可以编译出微信、QQ 等平台的小程序。

前端最主要做的就是页面的展示、模块的拆分,项目的大致目录如下:

.
├── app.scss
├── app.tsx
├── assets
├── components
├── constants
├── index.html
├── pages
├── styles
└── utils

其中利用组件化的思想,将一些模块拆分成可复用的组件,例如小程序的弹窗、标签、按钮、提示框等等。

这里我并没有完全使用 Taro-UI,因为引入后会大大增加小程序的体积。大部分的 UI 都是纯手写,通过 SCSS 这类的预编译样式,利用变量、继承、mixin 等一些特性,我可以很方便的抽离出一套属于自己的样式。

// theme.scss
$primary-color: #2F54EB;
$hover-primary-color: #1d39c4;
$second-color: #ADC6FF;
$tag-bg-color: #D6E4FF;

$primary-text-color: #303030;
$second-text-color: #666666;
$grey: #AAAAAA;
$light-grey: #DDDDDD;

$shadow-color: rgba(0,0,0,0.08);
$radius: 12px;

// mixin.scss
@mixin flex($dir: row, $main: start, $cross: flex-start) {
  display: flex;
  flex-direction: $dir;
  justify-content: $main;
  align-items: $cross;
}

小程序的页面和组件都是函数式的,比较轻量级,通过 Taro 提供的 hooks,可以达到与原生小程序一样的生命周期。

import './index.scss'

interface IAvatarProps {
  image: string
  radius: number
  border?: number  
}

function Avatar (props: IAvatarProps) {
  const { image, radius, border} = props
  
  useDidShow(() => {
  })
  
  return (
    <View className='avatar_container'> 
    </View>
  )
}

export default Avatar

云开发

云开发其实就是一套完 Serverless 服务,来降低开发者的成本。目前云开发和小程序结合,可以简化复杂的登录授权、消息订阅、支付等能力。

「同学在哪儿」小程序的所有后台能力都是使用云开发来完成,云函数处理用户的请求逻辑、查询数据、内容合法检测等等,云存储存放用户上传的照片以及头像。

云函数中使用到了 tcb-router 这个轻量级类路由库,可以用于优化服务端函数处理逻辑。比如可以在一个云函数里面,分别对某一个数据库进行增删改查

exports.main = async (event) => {
  const {OPENID} = cloud.getWXContext()
	const app = new TcbRouter({ event })
  const collection = 'info'
  const { info } = event
  app.use(async (ctx, next) => {
		ctx.data = {}
		await next()
  });
  // 添加一条记录
  app.router('add', async (ctx, next) => {
    const now = Date.now()
    const data = await db.collection(collection).add({
      data: {...info, openId: OPENID, createTime: now, updateTime: now}
    })
		ctx.body = { data }
  })
  // 修改个人信息
  app.router('update', async (ctx, next) => {
    const now = Date.now()
    const data = await db.collection(collection).where({
      openId: OPENID
    }).update({
      data: {
        ...info,
        updateTime: now
      }
    })
		ctx.body = { data }
  })
  // 获取个人信息
  app.router('get', async (ctx, next) => {
    const { data } = await db.collection(collection).where({
      openId: OPENID
    }).get()
		ctx.body = { data }
  })
	return app.serve()
}

功能介绍

首页

创建班级

首页可以直接创建班级,填写好相关的信息。如果取消勾选「允许被搜索」选项,用户只能通过分享进入。

信息准确无误后,跳转到创建成功的页面,这时候就可以将创建的班级分享出去。

加入班级

将班级分享到班级群,同学输入正确口令即可加入。

已加入的班级会在首页显示,长按可以退出班级。

完善信息

在加入班级前,会跳转到完善信息的页面,需要同学填好毕业去向以及联系方式,方便其他同学可以及时联系。

个人信息只能被同一班级的同学查看。如需修改信息,可在首页点击头像跳转到修改页。

查看分布地图

如果已经加入一个班级,可以在班级详情页面点击「查看分布地图」按钮,进入到地图页面。

点击具体的头像可以查看更多详细的信息,也可以一键联系对方。

作品体验二维码

视频介绍

「同学在哪儿」视频介绍

团队介绍

阿远:来自关山口男子职业技术学校,性别男,爱好音乐和足球,脑子里时不时会有些灵光一现的想法。

最后一次编辑于  09-17  
点赞 19
收藏
评论

8 个评论

登录 后发表内容