Building a Note App With ArkUI and ArkTS on HarmonyOS
Introduction
In this article, we’ll walk through the creation of a simple Note App using ArkUI and ArkTS on HarmonyOS. We’ll demonstrate how ArkUI’s modern UI capabilities integrate seamlessly with a relational database for efficient data management. By the end of this guide, you’ll have a foundational understanding of how to develop a functional app that allows users to add, update, delete, and view notes in a local database.
Understanding HarmonyOS and its Development Tools
HarmonyOS, developed by Huawei, is designed to provide a seamless experience across a wide range of devices, from smartphones to wearables and smart home products. For developers, HarmonyOS offers a robust set of tools and APIs optimized for creating apps within this ecosystem.
Key tools for HarmonyOS app development include:
- ArkUI: A UI framework for building modern, dynamic user interfaces that allow for easy navigation and interaction.
- ArkTS: A TypeScript-based programming language specifically tailored for HarmonyOS, providing syntax to work with ArkUI and integrate seamlessly with the system’s APIs.
In this tutorial, we’ll focus on using ArkUI and ArkTS to build our Note App, creating a responsive and smooth experience for users on HarmonyOS.
What You Need to Get Started with HarmonyOS App Development
To start developing apps for HarmonyOS, you will need the HarmonyOS SDK and DevEco Studio, which is the recommended IDE. DevEco Studio simplifies the app creation process, from building and debugging to testing.
The SDK provides tools in the following key areas:
- Application Framework: Includes ArkUI for UI development and Ability Kit for program services.
- System Services: Key management and networking libraries.
- Media Services: Tools for managing audio and media files.
- Graphics Services: ArkGraphics for 2D graphics and acceleration.
- Application Services: Libraries for game and location services.
- AI Capabilities: AI tools like the HiAI Foundation Kit.
These tools allow developers to create powerful, cross-platform apps that provide a consistent experience across HarmonyOS devices.
App Overview
Now that we’ve covered the basics of HarmonyOS development, let’s dive into building our Note App using ArkUI and ArkTS. This Note App provides an intuitive, minimalist user interface with a tabbed layout. Users can easily navigate through different sections to add, view, update, and delete notes.
The app’s core features are organized under various tabs, offering a streamlined and straightforward experience. Users can quickly manage their notes, making the app ideal for everyday use.
Note: To build this app, you should use SDK 5.0.0 (12) as the framework and DevEco Studio NEXT Developer Beta1 as the development environment.
Preparing Database Operations
Before diving into the UI, let’s set up the database operations that our Note app will rely on for data management. In this section, we’ll create functions to create, insert, update, delete, and retrieve notes from a local database.
Step 1: Create the Database
Start by creating a new file named DBUtils to encapsulate all database operations. We’ll use ArkData relational database (RDB) APIs in DBUtils.
In DBUtils, we’ll define functions for each key operation in our Note app.
The createDb() function defines the database configuration (STORE_CONFIG) and creates a table named NOTE_TABLE if it doesn’t already exist. This ensures our database is ready for subsequent operations.
Step 2: Insert a New Note
The insertNote() function inserts a new note into the NOTE_TABLE by creating a noteData object, where "NOTE" is the column name, and its value is the note content.
Step 3: Update an Existing Note
The updateNote() function updates an existing note in the NOTE_TABLE. It creates an updatedNoteData object with the new content and applies a condition to match the old content.
Step 4: Delete a Note
The deleteNote() function deletes a note from the NOTE_TABLE. It creates a delete condition based on the note content and executes the delete operation.
Step 5: Get All Notes
The getAllNotes() function retrieves all notes from the NOTE_TABLE. It queries the database and extracts the note content into a list of notes, which is then returned.
Integrating Database Operations in UI Component
Now that our database is set up, we can focus on the UI component, where users will interact with the app, view their notes, and manage them through a tabbed interface.
Step 1: Initial Setup in Index.ets
In the Index.ets file, we initialize core UI elements, tabs, and set up initial states.
State Variables:
- currentIndex: Keeps track of the current tab.
- notes: Stores the list of notes fetched from the database.
- content, buttonText, oldNote: Used for managing note input, button labels, and previous note content for updates.
Step 2: Initializing the Database
The aboutToAppear() method initializes the database when the component first loads. This lifecycle method ensures that the database setup happens just before the app appears on the screen.
Step 3: Loading Notes with loadNotes
The loadNotes() function uses the getAllNotes() method from DBUtils to fetch all notes from the database. It then updates the notes state with the list of notes.
Step 4: Handling Tabs with changeTab
The changeTab function is responsible for switching between different tabs (e.g., “Add Note” and “My Notes”).
Step 5: Building the Tab Bar with tabBarBuilder
The tabBarBuilder() function creates a tab bar with icons and titles for each tab. It allows users to navigate between tabs and highlights the active tab.
Step 6: Saving or Updating Notes with saveOrUpdateNote
The saveOrUpdateNote() function checks whether to save a new note or update an existing one based on the input and button state (“Save” or “Update”).
The function:
- Ensures the content isn’t empty.
- In the update flow, calls updateNote() to modify the note in the database and refresh the list.
- In the save flow, calls insertNote() to add the note to the database.
- Calls resetNoteState() to clear input fields after saving or updating.
Now that all steps have been covered, we hope this guide has provided a clear and complete path to building your own Note App on HarmonyOS.
Conclusion
This Note App demonstrates how to build a functional, user-friendly app using ArkUI and ArkTS on HarmonyOS. By combining ArkUI’s component-based UI design with ArkTS’s powerful data management capabilities, developers can efficiently create apps that deliver smooth and responsive user experiences. With this foundational structure, you are now ready to extend your app with more advanced features or customizations that meet your users’ needs.
Happy coding!
