harmonyos app dev

Using the

harmonyos-app-dev skill. This touches three surfaces, so I'm applying its app-structure, UI and network references: Stage model, @kit.* imports, Navigation for page flow (not the deprecated global router), and @kit.NetworkKit for HTTP. Nothing from Android or OpenHarmony is carried over.

What you get

Target: API 12+ (compatibleSdkVersion ≥ 5.0.0(12)), verified unchanged up to SDK 26.0.0.

1. entry/src/main/module.json5 — add the permission

{
  "module": {
    // ...existing fields...
    "requestPermissions": [
      { "name": "ohos.permission.INTERNET" }
    ]
  }
}

Without this every request is rejected at runtime, and nothing in the IDE warns you first.

2. entry/src/main/ets/model/Article.ets

export interface ArticleDto {
  id: number;
  title: string;
  summary: string;
  body: string;
  publishedAt: string;
}

// ArkTS forbids untyped `any` from JSON.parse — parse into a known shape.
export function parseArticles(json: string): ArticleDto[] {
  const raw = JSON.parse(json) as ArticleDto[];
  return raw.map((a): ArticleDto => ({
    id: a.id,
    title: a.title,
    summary: a.summary,
    body: a.body,
    publishedAt: a.publishedAt
  }));
}

3. entry/src/main/ets/service/ArticleService.ets

import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { ArticleDto, parseArticles } from '../model/Article';

const API_URL = 'https://api.example.com/articles';

export async function fetchArticles(): Promise<ArticleDto[]> {
  // One HttpRequest per in-flight call; never reuse it.
  const req: http.HttpRequest = http.createHttp();
  try {
    const res = await req.request(API_URL, {
      method: http.RequestMethod.GET,
      header: { 'content-type': 'application/json' },
      expectDataType: http.HttpDataType.STRING,
      connectTimeout: 10_000,
      readTimeout: 10_000
    });
    if (res.responseCode !== 200) {
      throw new Error(`HTTP ${res.responseCode}`);
    }
    return parseArticles(String(res.result));
  } catch (e) {
    const err = e as BusinessError;
    console.error(`fetchArticles failed: ${err.code} ${err.message}`);
    throw err;
  } finally {
    req.destroy();
  }
}

4. entry/src/main/ets/pages/Index.ets

import { fetchArticles } from '../service/ArticleService';
import { ArticleDto } from '../model/Article';

@Entry
@Component
struct Index {
  @State pathStack: NavPathStack = new NavPathStack();
  @State articles: ArticleDto[] = [];
  @State loading: boolean = true;
  @State error: string = '';

  aboutToAppear(): void {
    this.load();
  }

  async load(): Promise<void> {
    this.loading = true;
    this.error = '';
    try {
      this.articles = await fetchArticles();   // reassign, not push(): triggers re-render
    } catch (e) {
      this.error = 'Could not load articles. Pull down to retry.';
    } finally {
      this.loading = false;
    }
  }

  build() {
    Navigation(this.pathStack) {
      if (this.loading) {
        LoadingProgress().width(48).height(48)
      } else if (this.error !== '') {
        Column({ space: 12 }) {
          Text(this.error).fontSize(16)
          Button('Retry').onClick(() => { this.load() })
        }
      } else {
        List({ space: 8 }) {
          ForEach(this.articles, (item: ArticleDto) => {
            ListItem() {
              Column({ space: 4 }) {
                Text(item.title).fontSize(18).fontWeight(FontWeight.Medium).maxLines(2)
                Text(item.summary).fontSize(14).fontColor('#666666').maxLines(2)
              }
              .alignItems(HorizontalAlign.Start)
              .width('100%')
              .padding(16)
            }
            .onClick(() => {
              this.pathStack.pushPath({ name: 'Detail', param: item });
            })
          }, (item: ArticleDto) => item.id.toString())   // stable key: avoids re-creating every row
        }
        .width('100%')
        .height('100%')
        .divider({ strokeWidth: 1, color: '#EEEEEE' })
      }
    }
    .title('Articles')
    .mode(NavigationMode.Stack)
    .navDestination(this.destinations)
  }

  @Builder
  destinations(name: string, param: object) {
    if (name === 'Detail') {
      ArticleDetail({ article: param as ArticleDto })
    }
  }
}

@Component
struct ArticleDetail {
  article: ArticleDto = { id: 0, title: '', summary: '', body: '', publishedAt: '' };

  build() {
    NavDestination() {
      Scroll() {
        Column({ space: 12 }) {
          Text(this.article.title).fontSize(24).fontWeight(FontWeight.Bold)
          Text(this.article.publishedAt).fontSize(12).fontColor('#999999')
          Text(this.article.body).fontSize(16).lineHeight(24)
        }
        .alignItems(HorizontalAlign.Start)
        .padding(16)
      }
    }
    .title(this.article.title)
  }
}

Android → HarmonyOS NEXT mapping (what changed in the port)

Deliberately

not used: the global router (phased out), @ohos.* imports (older form), and any-typed JSON (rejected by ArkTS strict mode).

Run it

hvigorw assembleHap
hdc install entry/build/default/outputs/default/entry-default-signed.hap

Or the green Run button in DevEco Studio with auto-signing enabled once under

File > Project Structure > Signing Configs.

Next steps

1. Large feeds: switch ForEach to LazyForEach with an IDataSource so only visible rows are built.

Pull-to-refresh: wrap the List in Refresh({ refreshing: $$this.refreshing }) and call load() in onRefreshing.
3.

Offline cache: persist the last response with @kit.ArkData preferences, read it in aboutToAppear() before the network call.
4. Images: add Image(item.coverUrl) to the row; remote images need no extra permission beyond INTERNET.

References: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/http-request (HTTP data request), https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-navigation-navigation (Navigation), https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file (module.json5).