Building a HarmonyOS 6 Travel App: Declarative UI, ArkData & AI Itinerary Planning

Introduction: From Idea to Implementation

Today we want to share the journey of building the "Hongtu Zhidao" travel app and the development insights gained along the way.

Background: the project started on HarmonyOS 5 and later upgraded to 6. Initially there was concern about API changes causing issues, but the migration brought pleasant surprises.

1. Background of Hongtu Zhidao

Before building this product, we researched most travel apps on the market and found they fall into several categories:

All-in-one (e.g., Ctrip, Mafengwo, Gaode) : Cover transport, hotels, ticketing end-to-end, but are bloated and hard to navigate.

Social (e.g., Xiaohongshu) : Rich travel guides and high user retention, but travel-specific features are limited.

AI Q&A (e.g., Doubao) : Can generate itineraries and describe attractions, but guides are scattered in conversations, not easily searchable or editable.

Trip management (e.g., Round Trip) : Focus on pre-trip planning, yet neglect real-time experience optimization during the trip.

We wanted to combine the strengths of each, focusing on the "during-trip" experience — building a "travel toolbox" app.

2. Technology Selection: Why HarmonyOS 6

Choosing HarmonyOS 6 was a deliberate decision based on several factors:

Cross-device adaptation : Travel data needs to sync between phone and tablet; HarmonyOS's distributed capabilities fit this need.

Declarative UI : Prior experience with other declarative frameworks made ArkUI quick to adopt.

Security and privacy : Travel apps handle sensitive location data; HarmonyOS's permission management provides confidence.

Performance optimization : Smooth experience is critical; HarmonyOS 6's rendering and resource management improvements are attractive.

Hongtu Zhidao App Overview

1. App Positioning and Core Features

Hongtu Zhidao is positioned as an "intelligent travel assistant", with core features around user travel needs:

Home Page: Your Travel Intelligence Station

Weather card + daily attraction recommendation + popular rankings — open the app to unlock today's travel inspiration.

On-the-go Guide: Your Personal Tour Guide

Generates personalized voice guidance based on current location, narrating as you walk.

Insight Everything: Point and Know

Point the camera at unknown scenery, architecture, or plants to get instant detailed descriptions.

Guide Sharing: Open Your Travel Inspiration Library

Record travel anecdotes, share niche experiences, and exchange insights with other travelers.

2. Technical Architecture Overview

Hongtu Zhidao adopts a layered architecture:

products/
    entry/   ← entry layer (shell)
features/
    AI/      ← AI guide module
    home/    ← home module
    community/ ← community module
    user/    ← user module
commons/
    basic/   ← common base layer

Challenges and Pain Points During Development

During development, I encountered several practical issues:

1. Multi-Tab + Login State Management

Previously on Android, implementing multiple bottom tabs with login state switching was a nightmare. Activity and Fragment back stacks layered on top of each other; users couldn't find their way back to the home screen via the back button, form data was lost when switching tabs, and after login the navigation stack became a mess.

2. AI Content Loss

Our app had a real problem: users would check a location, then take a call; each time they returned to the AI guide page, previously generated narration content was gone, completely breaking the user experience.

3. Complex State Management

To make AI recommendations, community likes, and favorites all recognize the same user, traditional development required a global UserManager singleton + EventBus + listeners on every page — boilerplate code that was easy to miss.

Practical Application of HarmonyOS 6 New Features

1. Declarative UI: ArkTS + ArkUI Simplify Multi-Tab Implementation

With HarmonyOS, writing with ArkTS + ArkUI feels great. Core code:

@Entry
@Component
struct Index {
    @State currentIndex: number = 0
    @State isAuthenticated: boolean = false
    tabList: iTabModel[] = [
        { text: 'Home', src: $r('app.media.icon_home'), acSrc: $r('app.media.icon_home_active') },
        { text: 'AI Guide', src: $r('app.media.icon_guide'), acSrc: $r('app.media.icon_guide_active') },
        { text: 'Community', src: $r('app.media.icon_community'), acSrc: $r('app.media.icon_community_active') },
        { text: 'Mine', src: $r('app.media.icon_mine'), acSrc: $r('app.media.icon_mine_active') }
    ]
    build() {
        // UI automatically updates when currentIndex changes
    }
}

That's it. currentIndex controls which tab is shown, isAuthenticated controls whether to show the login dialog. State-driven: when state changes, UI updates automatically.

2. Local Storage: ArkData Solves Content Loss

To address AI content loss, I used ArkData's preferences for local persistence:

import { preferences } from '@kit.ArkData'
@ComponentV2
export struct GuidePage {
    @Local stateContent: string = ''
    private pref?: preferences.Preferences
    async aboutToAppear() {
        // On page appear, read from local cache first
        this.pref = await preferences.getPreferences(context, 'ai_guide_content')
        const cached = await this.pref.get('content', '')
        if (cached) {
            this.stateContent = cached
        }
    }
    async saveContent() {
        // Save whenever content changes
        await this.pref?.put('content', this.stateContent)
        await this.pref?.flush()
    }
}

The effect was immediate: users can switch tabs, send the app to background, even have the process killed by the system — the content remains when they return.

3. AI Itinerary Planning: Real-Time Context Feeding to Model

The idea is to take the user's current location, current time, and preferences, compose a prompt, and send it to the backend AI service:

async generatePlan() {
    const now = new Date()
    const currentTime = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`
    const prompt = 
        `I am at ${this.stateCurrentLocation}, current time ${currentTime}, ` +
        `plan to play for ${this.stateSelectedDuration}, help me plan an itinerary, recommend nearby fun places. ` +
        `Return JSON format`
    try {
        const planData = await AIService.getPlan(prompt)
        this.statePlanData = planData
        await this.saveContent() // save while we're at it
    } catch (error) {
        promptAction.showToast({ message: 'Planning failed, try again?' })
    }
}

The benefit: the same location yields different plans in the morning vs. afternoon, giving a feeling of a real person planning for you.

4. Global User State: AppStorageV2 Replaces EventBus

On HarmonyOS 6, AppStorageV2 handles this:

import { AppStorageV2 } from '@kit.ArkUI'
// After login, one line sets it up
const globalUser = AppStorageV2.connect(CurrentUser, () => new CurrentUser())!
globalUser.nickname = user.nickname
globalUser.avatar = user.avatar

Then in any page, just connect to the same CurrentUser — data stays in sync. When state changes, UI updates automatically, no manual event firing needed.

5. Hot Reload

Change a line of UI code, see the effect almost instantly. I'm the type who repeatedly tweaks button spacing and font sizes; previously each change required waiting for compilation and installation, now I can view changes in real-time in the previewer — extremely convenient.

Honestly, compared to real devices and emulators, I prefer the previewer for layout tweaking: set a property and immediately see it on the right.

6. Multi-Device Preview

Hongtu Zhidao must adapt to phones, tablets, and foldables. Previously, adaptation required downloading different-sized emulators, launching them one by one — just waiting for emulators to boot consumed huge time.

Now with Multi-profile Preview in the previewer, phone, tablet, and foldable appear side by side; layout breaks are instantly visible. This was a huge help.

7. Debugging

Breakpoints, variables, call stacks — all present. Combined with ArkTS type information, locating issues is smoother than expected. Basic problems like "why is this page blank on entry" don't require long guesswork.

Of course tools aren't perfect; occasional minor glitches occur. But overall it feels like an IDE specifically optimized for ArkTS/HarmonyOS native apps, not a generic editor pressed into service.

DevEco Studio Development Experience

1. Live Preview: Write a line of UI code, see the effect in milliseconds. Previously each change required compile then install; now real-time in the previewer — experience maxed out.

2. Multi-Device Preview: Hongtu Zhidao adapts to phone, tablet, foldable; Multi-profile Preview shows all three in one card — layout misalignments spotted at a glance.

3. Debugging: Breakpoints, step debugging, call stacks — standard operations work well, enhanced by ArkTS type info and location mapping.

Overall, this is an IDE purpose-built for ArkTS/HarmonyOS native apps.

Project Architecture: Standing on the Shoulders of Giants

I never intended to dump all code into one folder; the architecture follows these principles:

1. Keep the entry layer thin: entry only handles tab layout and routing, no business logic. Changing entry points or product forms later won't touch the shell.

2. Business modules are independent: If the AI guide page needs user info, it doesn't directly import the user module; instead it uses common definitions in commons/basic. This makes extracting a module later easy.

3. Push common capabilities down: Login, Toast, logging — don't copy-paste into each feature. Put them in basic, import with one line. import { iGRouter, CurrentUser } from 'basic' 4. Smooth team collaboration: Different people can own different feature modules; merge conflicts concentrate in the entry layer, while modules remain largely independent.

Technical Insights and Takeaways

Declarative UI is one of my favorite HarmonyOS features. It lets me describe UI intuitively without worrying about underlying implementation details.

During Hongtu Zhidao development, I found declarative UI offers clear advantages: concise code, intuitive layout, easy maintenance. I'm now accustomed to declarative UI and never want to return to imperative development.

HarmonyOS 6's state management also saves effort. Previously manual state synchronization and event firing; now with @State, @Local, AppStorageV2 decorators, state changes trigger automatic UI updates — less code, fewer bugs.

Future Plans and Outlook

Hongtu Zhidao won't stop here; we've planned new features:

1. Smarter AI Recommendations: Provide more precise attraction recommendations based on user history and real-time context.

2. Multi-Device Collaboration: Achieve real-time data sync between phone and tablet.

3. Enhanced Community Features: Allow users to share travel guides and exchange experiences.

Conclusion

Developing Hongtu Zhidao, my deepest realization: technology ultimately serves users, enhancing travel experience.

Hongtu Zhidao is not just an app, but a tool to help users explore the world better.

If you're a HarmonyOS developer or interested in travel app development, feel free to connect and grow together!