HarmonyOS 鸿蒙Next 项目规划与环境搭建——玩具店购物应用开发实战（一）

项目规划与环境搭建——玩具店购物应用开发实战（一）

作为一名鸿蒙应用开发者，经过前面的学习，我们已经具备了开发鸿蒙应用的基础知识。现在，我们将开始一个完整的实战项目，开发一款玩具店购物应用。本系列将分为五篇文章，详细介绍应用的开发过程，包括用户注册和登录、商品浏览、多媒体展示、购物车和购买等功能。

一、项目概述

1. 项目背景

随着移动互联网的快速发展，在线购物已经成为人们生活中不可或缺的一部分。玩具市场作为一个充满活力的行业，线上销售也越来越受到重视。本项目旨在开发一款玩具店购物应用，用户可以方便地浏览和购买各类玩具，提升购物体验。

2. 项目目标

• 用户系统：实现用户注册、登录和退出登录功能，保障用户数据的安全性。
• 商品展示：提供玩具商品的列表展示，包括商品名称、价格、缩略图等信息。
• 商品详情：展示商品的详细信息，包括多张高清图片、商品描述、视频演示等。
• 多媒体功能：支持商品视频的播放和图片的放大查看，提升用户的购物体验。
• 购物车和购买：实现购物车功能，用户可以添加商品到购物车，查看购物车并完成购买。

3. 技术栈

• 开发语言：TypeScript（ArkTS）
• 开发框架：ArkUI Declarative范式
• 数据库：本地数据库（SQLite）
• 网络请求：Fetch API
• 多媒体：Video和Image组件
• 数据存储：AppStorage和RDB

二、需求分析

在开始开发之前，需要对应用的功能需求进行详细的分析，以确保开发过程的有序和高效。

1. 功能列表

用户模块

• 用户注册：新用户可以通过邮箱和密码注册账号。
• 用户登录：已注册用户可以通过邮箱和密码登录。
• 用户注销：用户可以退出登录状态。

商品模块

• 商品列表：展示所有玩具商品，支持下拉刷新和分页加载。
• 商品搜索：根据关键词搜索商品。
• 商品筛选：根据类别、价格等条件筛选商品。
• 商品详情：展示商品的详细信息，包括图片、描述、价格、库存等。
• 商品评价：查看其他用户的评价（可选）。

购物车模块

• 添加商品：将商品添加到购物车。
• 修改数量：在购物车中修改商品的购买数量。
• 删除商品：从购物车中移除商品。
• 查看购物车：展示购物车中的所有商品及总价。

订单模块

• 提交订单：从购物车提交订单。
• 订单支付：支持模拟支付流程。
• 订单查询：查看订单状态和历史订单（可选）。

多媒体模块

• 视频播放：在商品详情页播放商品的演示视频。
• 图片放大：支持商品图片的放大和缩放查看。

2. 用户交互流程

注册和登录流程

用户首次使用需要注册账号，注册成功后自动登录。已注册用户可以直接登录。登录状态需要持久化，下次打开应用时自动登录。

购物流程

• 浏览商品列表，点击商品查看详情。
• 在商品详情页，用户可以播放商品视频、放大查看图片。
• 用户可以选择数量，添加商品到购物车。
• 在购物车页面，用户可以修改商品数量或删除商品。
• 用户提交订单，进行模拟支付，完成购买流程。

3. 界面设计

为了确保良好的用户体验，需要对应用的界面进行设计，包括布局、配色、交互方式等。主要页面包括：

• 登录页
• 注册页
• 商品列表页
• 商品详情页
• 购物车页
• 订单确认页

三、项目结构设计

1. 目录结构

ToyStoreApp/
├── entry/
│   └── src/
│       └── main/
│           ├── ets/
│           │   ├── pages/
│           │   │   ├── LoginPage.ets
│           │   │   ├── RegisterPage.ets
│           │   │   ├── ProductListPage.ets
│           │   │   ├── ProductDetailPage.ets
│           │   │   ├── CartPage.ets
│           │   │   └── OrderConfirmationPage.ets
│           │   ├── common/
│           │   │   ├── components/
│           │   │   └── utils/
│           │   ├── model/
│           │   │   ├── UserModel.ets
│           │   │   ├── ProductModel.ets
│           │   │   └── CartModel.ets
│           │   └── app.ets
│           └── resources/
│               ├── base/
│               │   ├── media/
│               │   │   ├── images/
│               │   │   └── videos/
│               │   └── profile/
│               │       └── config.json
│               └── resources.json
└── package.json

2. 数据模型设计

（1）用户模型（UserModel.ets）

export interface User {
  id: number;
  email: string;
  password: string; // 实际开发中应进行加密处理
}

（2）商品模型（ProductModel.ets）

export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  stock: number;
  images: string[]; // 商品图片URL数组
  videoUrl: string; // 商品视频URL
}

（3）购物车模型（CartModel.ets）

import { Product } from './ProductModel';

export interface CartItem {
  product: Product;
  quantity: number;
}

3. 数据库设计

（1）用户表（users）

（2）商品表（products）

（3）购物车表（cart）

4. 路由设计

在app.ets中配置路由，以便在页面之间进行跳转。

import router from '@ohos/router';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import ProductListPage from './pages/ProductListPage';
import ProductDetailPage from './pages/ProductDetailPage';
import CartPage from './pages/CartPage';
import OrderConfirmationPage from './pages/OrderConfirmationPage';

@Entry
@Component
struct App {
  build() {
    router.initRouter([
      { path: 'LoginPage', component: LoginPage },
      { path: 'RegisterPage', component: RegisterPage },
      { path: 'ProductListPage', component: ProductListPage },
      { path: 'ProductDetailPage', component: ProductDetailPage },
      { path: 'CartPage', component: CartPage },
      { path: 'OrderConfirmationPage', component: OrderConfirmationPage },
    ]);

    // 应用启动时，检查登录状态
    if (AppStorage.Get('isLoggedIn')) {
      router.push({ uri: 'ProductListPage' });
    } else {
      router.push({ uri: 'LoginPage' });
    }
  }
}

四、环境搭建

1. 安装开发工具

• 下载并安装DevEco Studio。
• 安装JDK（1.8或以上版本）。
• 安装Node.js。

2. 创建HarmonyOS项目

• 打开DevEco Studio，选择“新建HarmonyOS项目”。
• 选择“Empty Feature Ability”模板，点击“下一步”。
• 填写项目名称ToyStoreApp，包名com.example.toystoreapp。
• 选择支持的设备类型（手机和平板），点击“完成”。

3. 配置项目

（1）配置config.json

在entry/src/main/resources/base/profile目录下，编辑config.json，添加必要的权限：

{
  "app": {
    "bundleName": "com.example.toystoreapp",
    "vendor": "example",
    "version": {
      "code": 1,
      "name": "1.0"
    }
  },
  "module": {
    "package": "com.example.toystoreapp",
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.READ_MEDIA"
      },
      {
        "name": "ohos.permission.WRITE_USER_STORAGE"
      }
    ],
    "abilities": [
      {
        "name": "MainAbility",
        "srcEntrance": "pages/LoginPage",
        "type": "page"
      }
    ]
  }
}

（2）安装依赖

在项目根目录下，使用终端安装必要的npm依赖：

npm install @ohos/data.rdb --save
npm install @ohos/app-storage --save

4. 初始化数据库

在common/utils目录下，创建DatabaseHelper.ets，用于数据库的初始化和连接。

// common/utils/DatabaseHelper.ets
import rdb from '@ohos/data.rdb';

export class DatabaseHelper {
  private static instance: rdb.RdbStore;

  static async getRdbStore(): Promise<rdb.RdbStore> {
    if (!this.instance) {
      const config = {
        name: 'ToyStore.db',
        version: 1,
        onCreate: (db: rdb.RdbStore) => {
          db.executeSql(`
            CREATE TABLE IF NOT EXISTS users (
              id INTEGER PRIMARY KEY AUTOINCREMENT,
              email TEXT UNIQUE,
              password TEXT
            )
          `);

          db.executeSql(`
            CREATE TABLE IF NOT EXISTS products (
              id INTEGER PRIMARY KEY AUTOINCREMENT,
              name TEXT,
              description TEXT,
              price REAL,
              stock INTEGER,
              images TEXT,
              video_url TEXT
            )
          `);

          db.executeSql(`
            CREATE TABLE IF NOT EXISTS cart (
              id INTEGER PRIMARY KEY AUTOINCREMENT,
              user_id INTEGER,
              product_id INTEGER,
              quantity INTEGER,
              FOREIGN KEY (user_id) REFERENCES users(id),
              FOREIGN KEY (product_id) REFERENCES products(id)
            )
          `);
        },
      };
      this.instance = await rdb.getRdbStore(config);
    }
    return this.instance;
  }
}

目前完成了玩具店购物应用的项目规划和环境搭建，包括需求分析、数据模型设计、项目结构和数据库的初始化等。这些准备工作为后续的开发奠定了坚实的基础。在下一篇文章中，我们将详细实现用户注册和登录功能，包括用户输入验证、密码加密、登录状态管理等。