🔍 HarmonyOS Multi-functional Scanning Application

🛠️ Technology Stack

Application Framework	Development Language	UI Framework
Development Tool	Mobile Services	Data Storage

Xu Youcai

Hu Yixin

• Development Environment:
  • DevEco Studio 3.0 or higher
  • HarmonyOS SDK 3.0 or higher
  • Node.js 14.0 or higher
  • JDK 1.8 or higher
• Runtime Environment:
  • HarmonyOS 3.0 or higher device
  • Minimum memory: 2GB RAM
  • Minimum storage: 100MB available space

1. Download the latest .app file package (containing .hap and .info) from the releases
2. Installation methods:
   • Method A: Locate the downloaded .app file using the file manager on your HarmonyOS device and tap to install
   • Method B: Use the hdc command-line tool:

     hdc install <path-to-app-file>
     

1. Prepare the development environment:

   # Check Node.js version
   node -v  # Should be 14.0 or higher
   
   # Check JDK version
   java -version  # Should be 1.8 or higher
   

2. Clone the repository:

   git clone https://github.com/your-repo/harmony-scan-app.git
   cd harmony-scan-app
   

3. Open the project with DevEco Studio:

   • Launch DevEco Studio
   • Select File -> Open
   • Navigate to the cloned project directory and open

4. Build and install:

   • Connect your device:
     • Physical device: Connect via USB and enable debugging mode
     • Emulator: Start an emulator in DevEco Studio
   • Build steps:
     • Click Build -> Build Hap(s)/APP(s) -> Build Hap(s) in the top menu
     • Select Release mode
     • Wait for the build to complete

5. Verify installation:

   • Check if the application appears in the device's app list
   • Launch the app and confirm basic functionality

1. Installation failures:

   • Check if the device system version meets requirements
   • Ensure the device has sufficient storage space
   • Try uninstalling old versions before reinstalling

2. Build errors:

   • Ensure all environment dependencies are correctly installed
   • Try cleaning the project: Build -> Clean Project
   • Check DevEco Studio's log output

3. Permission issues:

   • Ensure the application has necessary system permissions
   • Check permission settings in the device settings

• Mobile devices:

  • Enable "Allow installation from unknown sources" option
  • Recommended to install over WiFi

• Tablet devices:

  • Supports split-screen installation mode
  • Note read/write permissions for storage paths

• Regularly check for new versions
• Back up personal data before updating
• Follow version update instructions for upgrades

This application utilizes HarmonyOS's responsive layout system, with careful optimizations for different device characteristics:

• Layout Strategy:
  • Single-column compact layout
  • Full-screen immersive scanning interface
  • Bottom navigation bar for quick switching
  • Single-handed operation optimized interactions
• Technical Implementation:
  • Responsive layouts using MediaQuery
  • Display optimization based on screenDensity
  • Flexible adaptation with Flex layout
  • Enhanced touch areas for better operation

• Layout Strategy:
  • Dual-column layout maximizing screen utilization
  • Sidebar navigation for quick access
  • Split-screen support for scanning interface
  • Larger operation area and information display
• Technical Implementation:
  • Flexible columns using GridRow and GridCol
  • Responsive breakpoints with breakpoints
  • Dynamic adaptation for portrait/landscape modes
  • Stylus input optimization

Tablet interface features a dual-column layout, providing larger display area and richer operation space

_{Left: Main Layout - Dual-column design with navigation on the left and content area on the right}

_{Right: Scanning Interface - Optimized viewfinder and intuitive operation buttons}

Mobile interface adopts a compact single-column layout for optimal mobile experience

_{Left to Right: Home Screen - Quick Access | Scanning Interface - Optimized Experience | History Records - Timeline View}

_{Left to Right: User Profile - Information Overview | Settings - Feature Configuration | Scan Results - Instant Processing}

// Responsive Layout Example
@Component
struct ResponsiveLayout {
  @State deviceType: string = 'phone'
  
  aboutToAppear() {
    // Detect device type
    this.deviceType = this.getDeviceType()
  }
  
  // Device type detection
  getDeviceType() {
    return px2vp(screenWidth) >= 600 ? 'tablet' : 'phone'
  }
  
  build() {
    Column() {
      if (this.deviceType === 'tablet') {
        // Tablet layout
        Row() {
          // Sidebar navigation
          Column() {
            // Navigation content
          }
          .width('30%')
          
          // Main content area
          Column() {
            // Page content
          }
          .width('70%')
        }
      } else {
        // Mobile layout
        Column() {
          // Page content
          // Bottom navigation bar
        }
      }
    }
  }
}

Pull Requests and Issues are welcome. Before submitting code, please ensure:

1. Code complies with ESLint standards
2. All tests have been passed
3. Related documentation has been updated

This project is licensed under the MIT License - see the LICENSE file for details