【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)

GeorgeGcs
• 阅读 5

【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)

一、前言

1、端云一体化开发是什么? 端云一体化开发是HarmonyOS基于DevEco Studio,以Cloud Foundation Kit(云开发服务)为底座,实现端侧(应用/元服务)与云侧(云端服务)在同一工具内协同开发的模式。

开发者通过云开发工程模板快速创建工程,同步完成两端代码开发、调试,并一键部署云侧工程至AGC云端,最终实现端云联动,聚焦业务逻辑、降本增效。

2、端云一体化开发与传统开发对比 | 区别点 | 传统开发模式 | 端云一体化开发模式 | |--------------|-----------------------------------------------|---------------------------------------------| | 开发工具 | 端侧与云侧需各自工具,需自建服务器,成本高 | 仅需DevEco Studio,无需搭建服务器,成本低 | | 开发人员 | 需不同语言技能,多人协作,沟通成本高、效率低 | 端侧开发者可开发云侧代码,门槛低,人力少 | | 运维 | 需自建运维能力,成本高、负担重 | 接入Cloud Foundation Kit,免运维 |

3、端云一体化开发核心原理

DevEco Studio目前提供通用云开发模板 ([CloudDev]Empty Ability),基于Cloud Foundation Kit搭建基础演示项目(无业务属性),可用于学习基础开发流程,后续可删除预置代码。 端云一体化开发提供的场景化模板,包含预置代码和资源文件,通过工程向导即可快速创建开发工程。

(1)端云一体化开发: 在DevEco Studio内同步开发端侧业务代码与云侧服务代码,支持云侧工程一键部署至AGC云端。

(2)Cloud Foundation Kit支撑: 云侧工程接入该工具,可按需使用云函数、云数据库、云存储等服务,具备开箱即用、一键部署、自动弹性伸缩、免运维等特点。

二、项目创建步骤:

1、首先在AGC平台创建端云一体化开发应用: 这步非常重要,后续IDE创建项目,需要和AGC平台创建好的应用进行绑定。所以要先在AGC平台进行端云一体化开发应用的创建!

// AGC平台地址:
https://developer.huawei.com/consumer/cn/service/josp/agc/index.html

【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 登陆HW账号后,点击进入AGC控制台,按照下图新建项目即可: 【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 2、在IDE创建端云一体化开发模板项目: 打开工程创建向导(欢迎页“Create Project”或菜单栏“File > New > Create Project”),在“Application”页签选择通用云开发模板([CloudDev]Empty Ability),点击“Next”。

IDE - Create Project - Application - [CloudDev Emptry Abiltiy ] 这里我以应用开发举例,元服务操作是类似的。 【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 3、设置模板项目相关配置: 这里需要注意模板项目只能选择手机。并且是否开启云开发,默认是开,不能修改。其他都是很常见的属性,就不展开了。包名要和AGC平台上一致。 【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 4、绑定本地项目和AGC项目: 这步骤非常关键,是对于刚才我们在AGC平台创建的项目,进行绑定。 如下图所示,会显示你登陆在IDE上的账号。根据项目包名,会对应显示AGC平台上项目应用的信息。

【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 5、数据处理位置配置: 项目必须启用中国站点(云服务资源默认部署至此),可在AGC修改配置。

我们看到上图最下方提示,要在AGC平台配置数据所在地,目前端云一体化开发只能在国内。我们点击蓝字跳转过去即可。进入到AGC控制台,针对数据处理位置进行勾选后保存即可。 【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)

如果你的包名,没有在AGC平台上进行配置,会显示如下图: 【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 以上步骤都完成后,项目就创建成功了,会自动install相关的云开发依赖。 DevEco Studio自动同步工程,端侧执行“ohpm install”、云侧执行“npm install”下载依赖

6、以下是小Tips: 在Tools中,我们点击CloudDev。 【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 可以在IDE中非常方便的管理AGC平台上云开发项目的信息。 【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)

三、DEMO运行效果

【HarmonyOS】鸿蒙端云一体化开发入门详解 (一) 鸿蒙端云一体化应用的主入口页面,主要实现了一个导航菜单,用于展示和访问 Cloud Foundation Kit 提供的三大核心云服务:云函数、云数据库和云存储。下面是添加详细注释后的代码:

import { CloudDb } from './CloudDb/CloudDb';  // 导入云数据库功能组件
import { DbInsert } from './CloudDb/DbInsert';  // 导入数据库插入操作组件
import { CloudFunction } from './CloudFunction';  // 导入云函数功能组件
import { CloudStorage } from './CloudStorage';  // 导入云存储功能组件

/**
 * 应用主入口组件
 * 展示端云一体化功能导航菜单,通过按钮跳转到不同的云服务演示页面
 */
@Entry
@Component
struct Index {
  // 提供导航路径管理,用于页面间的导航切换
  @Provide('pathStack') pathStack: NavPathStack = new NavPathStack();

  /**
   * 路径映射构建器
   * 根据路由名称渲染对应的云服务组件
   * @param routeName - 路由名称
   */
  @Builder
  pathMap(routeName: string) {
    if (routeName === 'CloudFunction') {
      CloudFunction();  // 渲染云函数演示页面
    } else if (routeName === 'CloudDb') {
      CloudDb();  // 渲染云数据库演示页面
    } else if (routeName === 'CloudStorage') {
      CloudStorage();  // 渲染云存储演示页面
    } else if (routeName === 'DbInsert') {
      DbInsert();  // 渲染数据库插入操作页面
    }
  }

  /**
   * 主页按钮构建器
   * 创建具有统一样式的导航按钮,点击后跳转到对应云服务页面
   * @param title - 按钮标题资源
   * @param description - 按钮描述资源
   * @param routeName - 目标路由名称
   */
  @Builder
  homeButton(title: Resource, description: Resource, routeName: string) {
    Button({ type: ButtonType.Normal, stateEffect: true }) {
      Column() {
        Text(title)  // 按钮标题
          .fontSize($r('app.float.body_font_size'))
          .margin({ bottom: $r('app.float.number_5'), top: $r('app.float.number_5') })
          .fontWeight(FontWeight.Bold)
        Text(description)  // 按钮描述
          .textAlign(TextAlign.Center)
          .fontSize($r('app.float.body_font_size'))
          .margin({ bottom: $r('app.float.number_5') })
      }
      .width('100%')
    }
    // 按钮样式设置
    .borderRadius($r('app.float.number_5'))
    .margin($r('app.float.number_10'))
    .borderWidth($r('app.float.number_1'))
    .borderColor($r('app.color.body_color'))
    .fontColor($r('app.color.body_color'))
    .backgroundColor($r('app.color.start_window_background'))
    .width('96%')
    .onClick(() => {
      // 点击按钮时,将目标路由压入路径栈实现页面跳转
      this.pathStack.pushPathByName(routeName, null);
    })
  }

  /**
   * 组件构建函数
   * 构建应用主界面,包含导航栏和云服务功能按钮
   */
  build() {
    Navigation(this.pathStack) {  // 使用导航组件管理页面栈
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
        Text($r('app.string.main_page_title'))  // 应用主标题
          .width('100%')
          .fontSize($r('app.float.main_title_font_size'))
          .textAlign(TextAlign.Center)
          .fontColor($r('app.color.body_color'))
          .margin({ bottom: $r('app.float.number_10') })

        // 创建云函数导航按钮
        this.homeButton($r('app.string.cloud_function_title'), $r('app.string.cloud_function_description_main'),
          'CloudFunction');
        // 创建云数据库导航按钮
        this.homeButton($r('app.string.cloudDB_label'), $r('app.string.cloud_db_description_main'),
          'CloudDb');
        // 创建云存储导航按钮
        this.homeButton($r('app.string.cloudStorage_label'), $r('app.string.cloud_storage_description_main'),
          'CloudStorage');
      }
      .height('100%')
      .width('100%')
      .padding($r('app.float.number_10'))
      .backgroundColor($r('app.color.start_window_background'))
    }
    .hideTitleBar(true)  // 隐藏标题栏
    .navDestination(this.pathMap)  // 设置导航目标映射
  }
}
点赞
收藏
评论区
推荐文章
少湖说 少湖说
7个月前
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
使用ArkTs开发Flutter鸿蒙平台插件本文讲述如何开发一个Flutter鸿蒙插件,如何实现Flutter与鸿蒙的混合开发,以及双端消息通信。Flutter侧,编写MethodChanneldartconstMethodChannelmethodCha
陈杨 陈杨
3个月前
鸿蒙海报编辑器APP,分享端云一体化开发的经验!
前言在我工作的日常中,经常会用一些画图编辑器,简单设计一些页面原型。而在去年低代码很火的时候,我在公司就开发了一款大屏可视化编辑器,可以通过拖拉拽生成网页的一个工具。后面也想着自己也开发一个画图的编辑器,可以用来自己平时做图或者设计海报之类的。而这次我将使
DevEco Studio创建端云一体化工程全攻略
HarmonyOSNEXT端云一体化开发提供了两种工程创建方式:一种是在AGC平台先创建应用/元服务,再通过DevEcoStudio关联云资源;另一种是在DevEcoStudio创建工程时逐步完成AGC平台的应用创建和云资源关联。两种方式均通过DevEcoStudio与AGC平台的紧密集成,帮助开发者快速实现端云一体化开发,提升效率。
陈杨 陈杨
1星期前
HarmonyOS5云服务技术分享--云函数预加载文章整理
​​嗨,亲爱的开发者朋友们!​​👋今天咱们来聊聊如何使用​​端云一体化方式开发云函数​​,尤其针对华为的预加载服务。整个过程会手把手带你从零开始,涵盖创建工程、编写代码、调试到部署,帮你轻松掌握关键技巧。文章稍长,但干货满满,建议先收藏再慢慢看哦~​​一
GeorgeGcs GeorgeGcs
1星期前
【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解
【HarmonyOS5入门系列】鸿蒙HarmonyOS示例项目讲解\鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言:移动开发声明式UI框架的技术变革在移动操作系统的发展历程中,UI开发模式经历了从命令式到声明式的重大变革。根据
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】AttributeModifier和AttributeUpdater区别详解
【HarmonyOS5】AttributeModifier和AttributeUpdater区别详解\鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、AttributeModifier和AttributeUpdater的定义和作用1
鸿蒙小林 鸿蒙小林
1星期前
《仿盒马》app开发技术分享-- 新人专享券(2)
​技术栈Appgalleryconnect开发准备上一篇文章中我们实现了项目端云一体化的升级,我们的数据后期就要从云侧的数据库去获取了,现在我们从头开始对项目进行端云一体化的改造。我们在首页已经把新人专享券抽离为公共组件现在我们继续进行功能开发,把这个组建
鸿蒙小林 鸿蒙小林
1星期前
《仿盒马》app开发技术分享-- 首页模块配置(4)
技术栈Appgalleryconnect开发准备上一篇文章中我们实现了项目端云一体化金刚区活动模块,数据也成功的从云端获取,并且我们跟ScrollBar进行关联,能够让用户直观的查看当前滑动的位置。现在我们开始继续向下,随着我们首页的内容越来越多,我们如果
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙应用实现发票扫描、文档扫描输出PDF图片或者表格的功能
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言图(11)HarmonyOS系统提供的核心场景化视觉服务,旨在帮助开发者快速实现移动端文档数字化功能。其核心能力包括:扫描合同、票据、会议记录并保存为PDF分享。拍摄课堂PPT、书
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙应用px,vp,fp概念详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言目前的鸿蒙开发者,大多数是从前端或者传统移动端开发方向,转到鸿蒙应用开发方向。前端开发同学对于开发范式很熟悉,但是对于工作流程和开发方式是会有不适感,其实移动应用开发与前端开发,最
GeorgeGcs
GeorgeGcs
Lv1
男 · 金融头部企业 · 鸿蒙应用架构师
HarmonyOS认证创作先锋,华为HDE专家,鸿蒙讲师,作者。目前任职鸿蒙应用架构师。 历经腾讯,宝马,研究所,金融。 待过私企,外企,央企。 深耕大应用开发领域十年。 AAE,Harmony(OpenHarmony\HarmonyOS),MAE(Android\IOS),FE(H5\Vue\RN)。
文章
64
粉丝
1
获赞
2