HarmonyOS Developer Toolbox - Timestamp Converter Development Notes

About HarmonyOS 5

HarmonyOS 5 (also known as HarmonyOS Next) is a major milestone in Huawei's distributed operating system. Its microkernel architecture enhances security and enables seamless cross-device collaboration. The developer experience is greatly improved with the new ArkTS language, enhanced UI components, and better debugging tools. Distributed capabilities allow for smooth experiences across smartphones, tablets, TVs, and IoT devices.

About the Author

I am a dedicated HarmonyOS developer from China, with years of experience in the HarmonyOS ecosystem. I focus on cross-platform development and performance optimization, and I enjoy sharing my technical insights and practical experiences with the community.

Basic Knowledge

Before diving into the Timestamp Converter, let's briefly review some basic concepts:

Timestamp: A numeric value representing the number of seconds or milliseconds since the Unix epoch (1970-01-01 00:00:00 UTC).
Date-Time Format: Common formats include ISO 8601, ISO 9075, RFC 3339, etc.
Time Zone: The region or offset that affects how a timestamp is interpreted or displayed.
Milliseconds/Seconds: Timestamps can be in milliseconds (13 digits) or seconds (10 digits).

Preface

Recently, while working on the HarmonyOS Toolbox, I decided to add a timestamp conversion feature. The goal was to convert between timestamps and date-time strings, such as turning "1709123456" into "2024-02-28 12:34:56". At first, I thought it would be simple, but I soon encountered challenges with formats, time zones, and switching between milliseconds and seconds.

During development, I faced many pitfalls, such as time format validation, time zone conversion, and implementing a date picker. After several iterations, the tool became stable and user-friendly.

I. Feature Overview

1.1 Main Features

Convert timestamp to date-time
Convert date-time to timestamp
Support multiple time formats: ISO 8601, ISO 9075, RFC 3339, etc.
Switch between milliseconds and seconds
Quick access to current time
Real-time preview of conversion results
One-click copy of results
Favorites feature

1.2 UI Features

Timestamp input box
Date-time picker
Format selection list
Result display area
Copy button

II. Implementation Process

2.1 Development Stories

At first, I used the system's built-in Date object, but quickly ran into problems. For example, when entering "1709123456", the output was "2024-02-28T12:34:56.000Z", which confused users who wanted "2024-02-28 12:34:56". I realized that different scenarios require different time formats, some with time zones and some without.

Another user wanted the conversion of "2024-02-28 12:34:56" to be "1709123456000" instead of "1709123456". I had to adjust the code several times to convert based on the selected format.

Time zone conversion was also tricky. Initially, I didn't handle time zones, but users insisted on support. Handling daylight saving time and other issues made it even more complex, but after several revisions, it worked well.

The date picker also needed improvement. Users found the system picker inconvenient, so I implemented a custom calendar view for better usability.

2.2 Temporary Solutions

Time Format Validation
- Temporary: Use regex for validation (simple but crude)
- Problem: Sometimes validates incorrect formats, causing errors
- Final: Use specific regex for each format for reliability
Time Zone Conversion
- Temporary: Convert directly to UTC, ignore other zones
- Problem: Incorrect conversions for some zones
- Final: Determine if conversion is needed based on time zone type
Date Picker
- Temporary: Use system date picker
- Problem: Poor usability, users wanted customization
- Final: Implement a custom date picker for better experience
Milliseconds/Seconds Switch
- Temporary: Input timestamp in a text box
- Problem: Inconvenient, users wanted a toggle
- Final: Add a toggle button for easy switching

2.3 Debugging Examples

Time Format Validation

static isValidISO8601(dateStr: string): boolean {
  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/.test(dateStr)
}

static isValidISO9075(dateStr: string): boolean {
  return /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateStr)
}

static isValidRFC3339(dateStr: string): boolean {
  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?[+-]\d{2}:\d{2}$/.test(dateStr)
}

Timestamp Conversion

static timestampToDate(timestamp: string, format: string): string {
  const date = new Date(parseInt(timestamp))
  switch (format) {
    case 'ISO 8601':
      return date.toISOString()
    case 'ISO 9075':
      return date.toISOString().replace('T', ' ').replace('Z', '')
    case 'RFC 3339':
      return date.toISOString()
    default:
      return date.toISOString()
  }
}

static dateToTimestamp(dateStr: string, format: string): string {
  const date = new Date(dateStr)
  return date.getTime().toString()
}

III. Pitfalls and Lessons

3.1 Problems Encountered

Time Format Validation
- Problem: Users enter irregular formats, e.g., multiple separators
- Solution: Add regex validation, auto-handle
- Suggestion: Restrict format at input to avoid trouble
Time Zone Conversion
- Problem: Inaccurate conversion results
- Solution: Judge by time zone type
- Suggestion: Allow user customization
Date Picker
- Problem: Picker not user-friendly
- Solution: Implement custom picker
- Suggestion: Allow custom pickers
Milliseconds/Seconds Switch
- Problem: Inconvenient switching
- Solution: Use toggle button
- Suggestion: Allow custom switching methods

3.2 Optimization Suggestions

Feature Optimization
- Support more formats
- Add history records
- Support batch conversion
- Add format classification, import/export, management, sharing, backup, etc.
Performance Optimization
- Optimize conversion speed
- Reduce memory usage
- Release resources promptly
- Try multithreading, algorithm optimization, result caching, asynchronous processing, etc.
User Experience
- Add usage instructions
- Support keyboard shortcuts
- Add animation effects, themes, sharing, favorites, import, backup, etc.