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

这篇具有很好参考价值的文章主要介绍了基于HarmonyOS的华为智能手表APP开发实战——Fitness。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

一. 客户端开发

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

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

核心功能:

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

1. 创建项目(Create Project)

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

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


 2. 项目结构

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

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

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


3. 功能模块介绍

3.1 登录页 login

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

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

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

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

 3.2 首页 index

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

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

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

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

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

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

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

 3.3 选择运动类型页 choosesport

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

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

 3.4 运动中页 sporting

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

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

 3.5 运动结束页 sportend

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

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

 3.6 选择合作目标页 chooseteamgoal

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

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

3.7  选择合作好友页 chooseteam

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

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


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

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


3. 数据库表

基于HarmonyOS的华为智能手表APP开发实战——Fitness文章来源地址https://www.toymoban.com/news/detail-476222.html


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

到了这里,关于基于HarmonyOS的华为智能手表APP开发实战——Fitness的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS实战开发DLP-如何实现一个安全类App。

    本示例是一个安全类App,使用@ohos.dlpPermission 接口展示了在eTS中普通文件加密受限的过程。 使用说明: 1.启动应用后点击“+”按钮可以添加一个普通文件; 2.长按点击加密按钮,出现加密权限弹窗,选择需要设置的权限并点击确定; 3.点击加密文件,跳转到文本编辑应用,如果设

    2024年04月13日
    浏览(36)
  • 华为手表开发:WATCH 3 Pro(10)获取心率_java 华为手表获取心跳

    文章浏览阅读1.2k次。鸿蒙开发,获取手表心跳,按钮点击后触发的方法,我们将跳转页面的代码写在这个位置就可以实现点击按钮进行跳转页面的动作。在HTML文件“index.hml”,添加按钮,这里按钮用到是标签。在文本框中输入页面名称(showHeartbeat)名称可以自己拟定。佩戴

    2024年01月16日
    浏览(42)
  • 初识基于鸿蒙系统(HarmonyOS)的App开发

    网传鸿蒙系统的下一个版本不再支持安卓,这几天看了一遍基于鸿蒙系统的App开发,现在二刷,顺便总结一下写一些心得或笔记吧。 先说IDE,IDE支持主流的Windows、Mac,包括M系列芯片的Mac,使用M芯片Mac的小伙伴看见有专门支持的软件,心里还是比较开心的,至少我是,嘿嘿。

    2024年01月19日
    浏览(61)
  • 华为手表开发:WATCH 3 Pro(8)获取位置服务

    希望能写一些简单的教程和案例分享给需要的人 鸿蒙可穿戴开发 系统:window 设备:HUAWEI WATCH 3 Pro 开发工具:DevEco Studio 3.0.0.800 鸿蒙开发 文件夹: entry :项目文件夹 js :前端文件夹 pages :页面文件夹 index :首页文件夹 文件 index.css :首页样式 index.hml :首页 index.js :首页脚本 新增

    2024年02月15日
    浏览(35)
  • 基于STM32的智能手表

      本设计由STM32单片机作为控制中枢,来驱动温度采集模块、液晶显示系统、记步模块、血氧心率检测模块等一系列系统。由用户操作屏幕,手环进行一系列的功能。 1、通过DS3231时钟模块实现日期显示功能。 2、通过MAX30100传感器实时监测血氧数据。 3、通过ADXL345检测使用者

    2024年02月06日
    浏览(35)
  • 毕业设计--智能环境监测系统基于harmonyOS的移动端应用开发

    目录 第一章 绪论 1.1 引言 1.2 智能环境监测APP概述 1.3 课题设计思路 第二章 项目开发环境 2.1 鸿蒙介绍 2.1.1 鸿蒙的发展史 2.1.2 鸿蒙应用开发的意义 2.1.3 HUAWEI DevEco Studio 介绍 2.1.4 HUAWEI DevEco Studio 环境安装 2.1.5 HarmonyOS系统技术架构 2.1.6 HUAWEI dececo studio 使用 2.1.7 Harmony编程语言

    2024年02月15日
    浏览(32)
  • 详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第五节 (基于uni-app封装鸿蒙接口请求库)

      随着鸿蒙系统的兴起,越来越多的app会采用鸿蒙开发。而鸿蒙开发必不可少的就是调用各种接口服务。为了简化接口的调用流程,我们通常会做一层封装。今天就来讲解一下,如何用uni-app封装鸿蒙的接口请求库。   首先我们要新建一个鸿蒙项目啦!当然选择第一个空白项

    2024年02月02日
    浏览(45)
  • 【Harmony OS】【JAVA UI】鸿蒙智能手表开发,如何判断未联网

     在手表开发过程中,手表是否连接网络怎么判断呢?下面我们就来学习一下 【问题描述】 harmony智能手表开发,如何判断未联网(包括 wifi 和 数据业务) 【解决方案】 鸿蒙暂无判断联网的相关API。 我们可以调用http的网络请求的接口,比如下载前,可以先get或者post的接口

    2024年02月16日
    浏览(43)
  • 基于STM32的OLED多级菜单GUI实现(简化版智能手表)

             前言: 本文的 OLED多级菜单UI 为一个 综合性 的STM32 小项目 ,使用 多传感器 与 OLED显示屏 实现 智能终端 的效果。项目中的多级菜单UI使用了较为常见的 结构体索引法 去实现功能与功能之间的来回切换,搭配 DHT11,RTC,LED,KEY 等器件实现高度智能化一体化操作

    2024年02月03日
    浏览(32)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 轻量级智能穿戴 体验应用、构建布局、绘制样式​​​​​​​和交互事件

    目录 体验应用 构建布局 绘制样式​​​​​​​ 交互事件 HelloWorld工程目录如下图所示: 图1  目录结构 pages/index/index.hml

    2024年02月01日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包