Smart Note-taking Application with Cross-device Clipboard and Dragging in HarmonyOS Next

In today's era of digital office work, collaborative office work across multiple devices has become a key requirement for improving efficiency. This article will introduce in detail how to develop a smart note-taking application based on HarmonyOS Next. This application supports cross-device copying/pasting/dragging of texts and pictures between mobile phones, tablets, and PCs, and enables automatic data synchronization, thus significantly improving the efficiency of cross-device office work.

Architecture Design of the Smart Note-taking Application

Core Functions

Note Editing: Provide users with an intuitive and convenient note editing interface, supporting basic operations such as text input, format settings (such as font, font size, color, etc.), and picture insertion to meet users' diverse needs for note-taking.
Cross-device Copying and Pasting: With the help of the cross-device clipboard function of HarmonyOS Next, users can freely copy and paste contents such as texts and pictures between different devices. For example, a user copies an important meeting minutes on a mobile phone and then directly pastes it on a tablet for further editing.
Dragging Pictures/Texts: Support cross-device dragging operations. Users can directly drag pictures or texts on the local device into the notes on other devices. For instance, when editing notes on a PC, drag a local picture into the note-taking application on a mobile phone.
Automatic Synchronization: Ensure that the note contents are synchronized in real-time between different devices. No matter which device the user makes modifications on, other devices can be updated in a timely manner to ensure the consistency and timeliness of the data.

Selection of Distributed Capabilities in HarmonyOS Next

Clipboard: The cross-device clipboard is the core capability for realizing the copying and pasting of texts and pictures. By calling the getSystemPasteboard() method, the application can obtain the system clipboard object and achieve the transmission of data between different devices.
Dragging: The cross-device dragging function provides users with a more intuitive and convenient operation method. Using the onDragStart() and onDrop() events, users can directly drag pictures or texts from one device into the notes on another device.
Application Continuation: Although it is not a core function in this application, application continuation can enhance the user experience to a certain extent. For example, when a user is editing notes on a mobile phone and suddenly needs to use a tablet, the note can be migrated to the tablet for continued editing through the application continuation function.

Design of the Data Synchronization Architecture

Clipboard Data: For the data copied and pasted through the cross-device clipboard, the system will automatically handle the transmission and synchronization of the data. The application only needs to focus on how to correctly write to and read from the clipboard.
Distributed Data Objects: In order to achieve the automatic synchronization of note contents, we can use the distributed data objects of HarmonyOS Next. Distributed data objects provide an efficient and reliable data synchronization mechanism to ensure that the note contents are updated in real-time between different devices.

Realizing the Flow of Note Contents between Multiple Devices

Realizing Cross-device Text Synchronization Using getSystemPasteboard()

The following is a simple code example to show how to use getSystemPasteboard() to achieve cross-device text synchronization:

import pasteboard from '@ohos.pasteboard';
import { BusinessError } from '@ohos.base';

// Copy text to the clipboard
export async function copyTextToClipboard(text: string): Promise<void> {
    let pasteData: pasteboard.PasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
    let systemPasteBoard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
    await systemPasteBoard.setData(pasteData).catch((err: BusinessError) => {
        console.error(`Failed to set pastedata. Code: ${err.code}, message: ${err.message}`);
    });
}

// Get text from the clipboard
export async function getTextFromClipboard(): Promise<string | null> {
    let systemPasteBoard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
    return new Promise((resolve, reject) => {
        systemPasteBoard.getData((err: BusinessError, data: pasteboard.PasteData) => {
            if (err) {
                console.error(`Failed to get pastedata. Code: ${err.code}, message: ${err.message}`);
                resolve(null);
            } else {
                let primaryText: string = data.getPrimaryText();
                resolve(primaryText);
            }
        });
    });
}

Using onDragStart() + onDrop() to Allow Users to Drag Pictures into Notes on Different Devices

The following is a simple code example to show how to use onDragStart() and onDrop() to achieve cross-device picture dragging:

import { DragEvent, DropEvent } from '@ohos.arkui';

// Set the image component as draggable
Image($r('app.media.image'))
  .draggable(true)
  .onDragStart((event: DragEvent) => {
        // Set the image data to be transmitted
        event.data.setData(pasteboard.MIMETYPE_IMAGE_PNG, getImageData());
    })

// Set the note area to receive the dragging event
Text('Note Area')
  .onDrop((event: DropEvent) => {
        let data = event.data;
        let mimeType = data.getPrimaryMimeType();
        if (mimeType === pasteboard.MIMETYPE_IMAGE_PNG) {
            let imageData = data.getPrimaryImage();
            // Insert the image data into the note
            insertImageToNote(imageData);
        }
    })

Automatically Adapting to Different Data Formats (Plain Text vs. Picture) by Combining getPrimaryMimeType()

When handling clipboard data or dragged data, we can use the getPrimaryMimeType() method to determine the type of data, thus automatically adapting to different data formats:

import pasteboard from '@ohos.pasteboard';

// Handle clipboard data
export async function handleClipboardData(): Promise<void> {
    let systemPasteBoard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
    systemPasteBoard.getData((err: BusinessError, data: pasteboard.PasteData) => {
        if (err) {
            console.error(`Failed to get pastedata. Code: ${err.code}, message: ${err.message}`);
            return;
        }
        let mimeType = data.getPrimaryMimeType();
        if (mimeType === pasteboard.MIMETYPE_TEXT_PLAIN) {
            let text = data.getPrimaryText();
            // Handle plain text data
            insertTextToNote(text);
        } else if (mimeType === pasteboard.MIMETYPE_IMAGE_PNG) {
            let imageData = data.getPrimaryImage();
            // Handle image data
            insertImageToNote(imageData);
        }
    });
}

Optimizing the Data Synchronization Experience and Improving Smoothness

Optimizing the Data Transmission Method under Wi-Fi / Bluetooth / Local Area Network

Wi-Fi: In a Wi-Fi environment, give priority to using Wi-Fi for data transmission because Wi-Fi has a high bandwidth and stability. The data transmission rate and method can be dynamically adjusted according to the Wi-Fi signal strength and network speed.
Bluetooth: When Wi-Fi is not available, Bluetooth can be used for data transmission. Bluetooth has the characteristics of low power consumption and short-distance communication, making it suitable for transmitting small amounts of data. When using Bluetooth to transmit data, mechanisms such as data packetization and retransmission can be adopted to ensure the integrity of the data.
Local Area Network: If multiple devices are in the same local area network, the high-speed network of the local area network can be utilized for data transmission. Transmitting data through the local area network can reduce network latency and improve the efficiency of data transmission.

Caching Mechanism: How to Reduce the Latency of the Cross-device Clipboard

In order to reduce the latency of the cross-device clipboard, we can introduce a caching mechanism. When the user copies data, the application first caches the data locally and simultaneously initiates the data transmission task. During the data transmission process, if the user needs to paste the data, the data can be obtained from the local cache first to avoid waiting for the data transmission to complete.

Security Optimization: Preventing Unauthorized Data Sharing (Permission Management)

Permission Application: When the application is launched, apply to the user for the necessary permissions, such as ohos.permission.READ_PASTEBOARD and ohos.permission.WRITE_PASTEBOARD, etc. The application can only access the clipboard data with the user's authorization.
Data Encryption: During the data transmission process, encrypt sensitive data to prevent the data from being stolen or tampered with during transmission. Symmetric encryption algorithms or asymmetric encryption algorithms can be used to encrypt the data.
Device Authentication: When performing cross-device data transmission, authenticate the devices to ensure that the data is only transmitted between authorized devices. Device ID, fingerprint recognition, face recognition, and other methods can be used for device authentication.

Through the above architecture design and implementation solutions, we can develop a powerful, efficient, and stable smart note-taking application that supports cross-device clipboard and dragging functions, realizes the flow and automatic synchronization of note contents between multiple devices, and provides users with a convenient and secure cross-device office experience.

DEV Community