DEV Community

Cover image for 【HarmonyOS Next】ArkUI-X Hot News Aggregator
RunkBear
RunkBear

Posted on

【HarmonyOS Next】ArkUI-X Hot News Aggregator

#harmonyos

Porting a HarmonyOS Hot News Aggregator App to iOS Using ArkUI-X

I. Project Background & Technology Selection

1.1 Project Overview

This case study demonstrates a hot news/trending aggregator application originally developed for HarmonyOS. By consuming the aggregation API from Han Xiaohan's Blog, it displays multi-platform ranking data and supports web page viewing. The project was developed using the ArkUI framework and is now being migrated to iOS through ArkUI-X.

1.2 Core Technology Stack

  • HarmonyOS: Native development platform
  • ArkUI-X: Cross-platform framework by Huawei (Official Docs)
  • iOS: Target runtime platform
  • Network Requests: HTTP module via @kit.NetworkKit
  • Data Binding: @ObservedV2 and @trace decorators

HarmonyOS App Version

iOS App Version

II. Project Structure Analysis

2.1 Native HarmonyOS Project Structure 

HotListApp
├── entry/src/main/ets
│   ├── pages
│   │   ├── Index.ets      # Main interface
│   │   └── MyWeb.ets     # Web view
│   └── model             # Data models
└── ohosTest              # Test module
Enter fullscreen mode Exit fullscreen mode

2.2 iOS Adaptation Points

  1. Configuration Files: Added iOS platform settings
  2. Dependency Management: Adjusted network permission configs
  3. Component Adaptation: Handled platform-specific UI components
  4. Build System: Configured Xcode project

III. Key Module Migration Practices

3.1 Network Request Adaptation 

// Universal network request module
async function commonRequest(url: string): Promise<any> {
  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    });
    return await response.json();
  } catch (error) {
    console.error('Network Error:', error);
    return null;
  }
}
Enter fullscreen mode Exit fullscreen mode

iOS Adaptation Key Points:

  1. Add network permissions in ios/App/Info.plist: 
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
Enter fullscreen mode Exit fullscreen mode

3.2 Cross-Platform UI Component Adaptation

3.2.1 Tabs Component Optimization 

Tabs({ barPosition: BarPosition.Start })
  .barAdaptive(true)  // Enable adaptive layout
  .platformStyle({    // Platform-specific styles
    ios: {
      itemSpacing: 8,
      selectedColor: '#007AFF'
    },
    default: {
      itemSpacing: 12,
      selectedColor: '#FF0000'
    }
  })
Enter fullscreen mode Exit fullscreen mode

3.2.2 WebView Component Adaptation 

Web({
  src: this.mobil_url,
  controller: this.controller
})
.platformComponent({  // Native component mapping
  ios: (props) => new WKWebView(props)
})
Enter fullscreen mode Exit fullscreen mode

3.3 Universal Data Model 

@ObservedV2
class ResponseData {
  @Trace success: boolean = true;
  @Trace data: Array<ItemData> = [];

  // Universal deserialization method
  static fromJSON(json: any): ResponseData {
    const instance = new ResponseData();
    instance.success = json.success;
    instance.data = json.data.map(ItemData.fromJSON);
    return instance;
  }
}
Enter fullscreen mode Exit fullscreen mode

IV. Building & Debugging

4.1 Environment Setup

  1. Install Xcode 15+
  2. Configure ArkUI-X dev environment: 
npm install -g @arkui-x/cli
arkui-x init
Enter fullscreen mode Exit fullscreen mode

4.2 Build Commands 

# Generate iOS project
arkui-x build ios

# Run debug
arkui-x run ios
Enter fullscreen mode Exit fullscreen mode

4.3 Debugging Techniques

  1. Logging: Use console.info() for cross-platform logs
  2. Hot Reload: Real-time modification preview
  3. Performance Analysis: Optimize with Xcode Instruments

V. Common Issues & Solutions

5.1 Network Request Failures

Symptom: Data retrieval fails on iOS

Solution:

  1. Verify ATS configuration
  2. Whitelist HTTP domains
  3. Use HTTPS protocol

5.2 UI Layout Discrepancies

Symptom: Misaligned elements on iOS

Solution:

Column()
  .width('100%')
  .platformAdaptive({  // Platform-adaptive layout
    ios: { padding: 8 },
    default: { padding: 12 }
  })
Enter fullscreen mode Exit fullscreen mode

5.3 Third-party API Compatibility

Strategy:

// Unified data processing
processData(data: any): ResponseData {
  if (data?.hotList) {  // Handle different response formats
    return this.transformLegacyFormat(data.hotList);
  }
  return ResponseData.fromJSON(data);
}
Enter fullscreen mode Exit fullscreen mode

VI. Optimization Directions

  1. Performance Enhancements:
    • Implement list virtualization
    • Add local caching: 
   const cachedData = localStorage.getItem('hotData');
   if (cachedData) {
     this.myResponseData = ResponseData.fromJSON(JSON.parse(cachedData));
   }
Enter fullscreen mode Exit fullscreen mode

  1. UX Improvements:

    • Add pull-to-refresh
    • Implement search filtering

  2. Multi-Platform Expansion:

    • Add Android support
    • Develop WatchOS version

VII. Conclusion

This project validates ArkUI-X's robust cross-platform capabilities. Developers can reuse >80% of HarmonyOS code to rapidly build iOS apps, significantly reducing multi-platform maintenance costs. The project is open-sourced at Gitee Repository.

Future Outlook:

  1. Explore deep ArkUI-X/SwiftUI integration
  2. Implement hybrid native module invocation
  3. Build cross-platform component library

Continuous optimization will further prove the viability of "Code Once, Deploy Everywhere," establishing a new paradigm for mobile development.

Key Translation Notes:

  1. Terminology Consistency

    • 鸿蒙 → HarmonyOS (official English name)
    • ArkUI-X → Retained as proper noun
    • 韩小韩博客 → Han Xiaohan's Blog (proper name preservation)

  2. Technical Concepts

    • 数据绑定 → Data Binding
    • 网络请求 → Network Requests
    • 热重载 → Hot Reload

  3. Code Adaptation

    • All code blocks preserved with translated comments
    • Platform-specific terms (e.g., WKWebView) unchanged

  4. Structural Elements

    • Chinese chapter markers (一,二) converted to Roman numerals (I, II)
    • Technical terms capitalized per English standards

  5. Cultural Adaptation

    • Gitee explicitly identified as code hosting platform
    • Chinese GIF links retained (visual content)

The translation maintains technical accuracy while adapting documentation conventions for international developer audiences.

Top comments (0)