本文针对华为HarmonyOS智能穿戴产品(即HUAWEI WATCH 3)开发了一款运动健康类的游戏化APP——Fitness,旨在通过游戏化的方式,提升用户运动动机。

一. 客户端开发

开发环境:客户端UI是基于HarmonyOS进行开发的,所以IDE使用的是华为的DevEco-Studio。

语言:采用的编程语言是JavaScript,基于JS扩展的类Web开发范式的方舟开发框架。

核心功能:

  1. 用户的虚拟形象陪伴用户一起做运动;
  2. 每日运动目标(运动时间、消耗卡路里);
  3. 运动中时间、心率、消耗卡路里的记录;
  4. 完成运动获取爱心奖励(可用于在慈善活动中捐献);
  5. 合作:与好友一起运动,共同达成目标,获取奖励;
  6. 挑战、徽章:完成运动挑战,获取徽章或其他奖励;

1. 创建项目(Create Project)


2. 项目结构

(1)各功能模块页面存放在pages文件夹中,每个页面都由.hml、.css、.js三个同名文件组成;

(2)图片资源存放在common/images文件夹中;


3. 功能模块介绍

3.1 登录页 login

用户输入账号密码,点击登录按钮进行登录。

(1)登录失败:提示“用户名或密码错误”。

(2)登录成功:跳转到首页 index。

 

 3.2 首页 index

首页外圈黄色进度条是用户今日的运动时间进度。

首页中间由一个三页的Swiper组成,滑动可以切换页面:最左侧的运动页、最中间的目标页、最右侧的活动页。

(1)目标页:从上到下依次是用户虚拟形象、时钟(当前时间)、用户今日运动消耗的卡路里进度(目前已消耗卡路里/目标消耗卡路里)。

(2)运动页:最上方是开始运动按钮,点击可以选择要做的运动类型 [跳转到 choosesport ] 之后开始记录此次运动。按钮下方是最近的五条运动记录列表,可以上下滑动查看。

(3)活动页:最上方是用户当前参与合作的进度(若用户当前没参加任何合作,则该处显示的是开始合作按钮,点击开始合作按钮可以选择合作目标 [跳转到 chooseteamgoal ] 和要合作的好友,开启一次合作)。中间是系统最新发起的挑战,包括挑战名称、挑战描述。最下方是用户最近获得的八枚徽章列表,可以左右滑动查看。

 3.3 选择运动类型页 choosesport

在首页的运动页点击开始运动后,进入选择运动类型页,该页主要由一个picker组成,用户选择自己要做的运动类型,点击确定即可开始运动,跳转到运动中页 sporting。

 3.4 运动中页 sporting

运动中页显示用户虚拟角色、运动时长、消耗卡路里、当前心率。下方三个按钮分别为“取消”(点击后跳转回首页 index,不记录此次运动)、”暂停“(暂停运动时长记录和卡路里记录)、”完成“(完成此次运动,点击后跳转到运动结束页 sportend,记录此次运动)。

 3.5 运动结束页 sportend

显示此次运动的时间、消耗的卡路里,点击确定按钮跳转到首页 index。

 3.6 选择合作目标页 chooseteamgoal

在首页的活动页点击开始合作后,进入选择合作目标页,该页主要由一个双列picker组成,用户选择目标的运动类型和目标的运动时间,点击下一步,跳转到选择合作好友页 chooseteam。

3.7  选择合作好友页 chooseteam

该页主要由一个picker组成,用户选择想要与之合作的好友,点击确定,跳转到首页 index的合作页,此时已经开始了与此好友的合作。


3. 源码

https://gitee.com/song-ddd/harmony-smartwatch-fitnesshttps://gitee.com/song-ddd/harmony-smartwatch-fitness


二. 服务器端开发

开发环境:服务器端API接口是基于Node.js进行开发的,IDE使用的是VSCode。

语言:采用的编程语言是JavaScript,服务器框架是Koa,数据库是MongoDB。

核心接口:

  1. 用户接口:登录注册、用户个人信息的增删改查、用户好友的增删查;
  2. 运动接口:运动类型的增删改查、用户运动记录的增删查;
  3. 合作接口:用户合作记录的增删改查;
  4. 徽章接口:徽章类型的增删改查、用户获得徽章记录的增删查;
  5. 挑战接口:挑战类型的增删改查、用户挑战记录的增删查;
  6. 慈善接口:慈善活动的增删改查、用户参与慈善捐赠记录的增删查;

1. 创建项目(Create Project)

Vue2+Node.js前后端分离项目创建常用配置及踩坑点_番大茄子的博客-CSDN博客Vue2+Node.js前后端分离项目创建常用配置及踩坑点https://blog.csdn.net/SongD1114/article/details/123955511?spm=1001.2014.3001.5502Node.js中使用Koa创建Web服务器、编写接口_番大茄子的博客-CSDN博客_koajsKoa (基于 Node.js 平台的下一代 web 开发框架 koa (koajs)是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。https://www.koajs.com.cn/https://blog.csdn.net/SongD1114/article/details/124406361?spm=1001.2014.3001.5502


2. 项目结构

采用MVC设计模式划分各模块:models、controllers、routers


3. 数据库表


4. 源码
https://gitee.com/song-ddd/smartwatch-fitnesshttps://gitee.com/song-ddd/smartwatch-fitness

基于HarmonyOS的华为智能手表APP开发实战——Fitness相关推荐

  1. 儿童智能手表APP开发具备哪些功能

    如今,几乎每个小朋友家长都会配智能手表,随着智能产品的发展,这两年智能手环.智能手表设备的出现给人们生活带来了方便,我们在使用儿童智能手表APP开发时候还可以随时查看孩子运动情况之类,家长还能通过AP ...

  2. 鸿蒙如何用JS开发智能手表App

    阅读本文需要3分钟 介绍如何用JS开发智能手表App,首先按下图创建智能手表的工程(工程名是MyFirstWatch). watch工程目录的结构与TV工程的结构类似,只是源代码除了java部分,还有 ...

  3. 智能手表APP方案开发公司那个好

    智能手表在物联网行业也是开发的比较多的一个产品了,而智能手表一般也会配置APP来使用,具体的开发企业如我爱物联网科技,其开发的智能手表APP方案是目前使用的比较多的一个.智能手表APP的功能大都差不多 ...

  4. 智能手表python_鸿蒙如何用JS开发智能手表App

    阅读本文需要3分钟 介绍如何用JS开发智能手表App,首先按下图创建智能手表的工程(工程名是MyFirstWatch). watch工程目录的结构与TV工程的结构类似,只是源代码除了java部分,还有 ...

  5. 鸿蒙系统手表app,华为智能手表鸿蒙系统版本

    华为智能手表鸿蒙系统版本是华为手表最新版本的系统,让每位用户轻松就可以去进行升级使用,用户任何时候都是可以直接去完成使用,尽享更多流畅的使用方式,不仅可以让自己的手表使用到最新的系统,还可以让用户得到 ...

  6. 华为智能手表与鸿蒙,不再是大号手环!华为鸿蒙手表来了:要和苹果抢生态?...

    5 月 27 日上午,华为终端官方微博官宣,WATCH 3 腕上智慧,一表万象,旗舰归来,将于 6 月 2 日晚 20:00 与 HarmonyOS.MatePad Pro 2 等产品一同发布. 依靠 ...

  7. 【链环科技】智能硬件APP开发——通过硬件对接,实现软件与硬件设备的完美结合

    2020年,当物联网.智能家居.5G等科技词汇大范围的进入群体视线时,意味着新型互联网技术的研究和兴起.[重庆链环科技]目前的发展方向"软件开发+硬件对接"这是一种全新的科技概念. ...

  8. 斐讯手表怎么刷机华为系统_华为智能手表想在国内销售只能刷机换系统了

    原标题:华为智能手表想在国内销售只能刷机换系统了 [讯]前不久在MWC2015大展上,华为对外发布了首款手表产品,但是遗憾的首发地区并不含中国.由于采用的是Android Wear标准,在国内无法使用 ...

  9. 基于QT的安卓手机蓝牙APP开发

    摘要:前段时间用QT写了一个串口调试助手,感觉还可以.因为QT是跨平台的,同样一套代码可以在windows上面跑,也可以在linux上面跑,也可以在安卓手机上面跑.而且不需要修改任何东西,编译器会自动 ...

最新文章

  1. 第十三周项目4-数组的排序:冒泡排序
  2. 《剑指offer》二叉树镜像
  3. Python解释器工作原理与jit技术
  4. Tomcat配置及原理文章
  5. 分而治之_编写干净的测试–分而治之
  6. ZOJ 3804 YY's Minions (简单模拟)
  7. Linux Kernel Lock types and their rules
  8. MySQL学习之备份
  9. 'SELECT'语句中的'IF' - 根据列值选择输出值
  10. UnityShader23:顶点动画
  11. jsonready onload 与_漫谈JSONP以及img的onLoad和onEr
  12. php赛车,php调用接口及三分赛车平台搭建出租编写接口
  13. “杜绝电子垃圾,我们需要软件永远更新下去!”
  14. 设计模式7------装饰者模式(Decorator Pattern)-------结构模式
  15. maven 配置阿里云仓库
  16. word脚注、尾注小技巧|怎么删除尾注的横线|怎么快速删除页眉的横线|怎么快速将尾注和脚注转为带方括号的格式
  17. VM虚拟机连接服务器
  18. 【苹果电脑数据恢复】mac超强数据恢复软件免费下载
  19. 国内外视频编解码标准体系-说说MPEG、ITU、AOM、AVS演进历程
  20. 编码与DNA存储——DNA码的构造

热门文章

  1. poj 2942 Knights of the Round Table(双连通分量+tarjan+二分图判定)
  2. 学会做笔记-子弹笔记学习概要一
  3. 浏览淘宝网页背后所发生的事情
  4. 数据中心太耗电,送你一个节能神器
  5. Java Robot对象实现服务器屏幕远程监视(来自:JAVA-CN.COM)
  6. 编辑或删除Word文档脚注中的横线
  7. 如何为你的 Windows 应用程序关联一种或多种文件类型
  8. baby计算机英语怎么读,英语单词baby怎么读,baby的音标是什么,baby是什么意思 - 音标网...
  9. Ubuntu18.04录屏并生成gif图片
  10. Vue全家桶入门精细讲解