O ecossistema do HarmonyOS NEXT tem atraído uma quantidade crescente de desenvolvedores. Para criar aplicações nativas eficientes, é fundamental configurar corretamente o abmiente de trabalho. Este guia aborda a preparação do DevEco Studio e a implementação prática de uma interface de lista de receitas gastronômicas utilizando o modelo Stage e a linguagem ArkTS.

Preparação do Ambiente de Trabalho

O primeiro passo é obter o DevEco Studio, a IDE oficial da Huawei, compatível com Windows e macOS. Após o download no portal oficial de desenvolvedores, execute o instalador.

Ao iniciar o software pela primeira vez, o assistente de configuração solicitará a instalação do HarmonyOS SDK. Selecione a versão correspondente ao HarmonyOS NEXT (API 12 ou superior) e autorize o download de todas as dependências e ferramentas de compilação necessárias.

Para inicializar o projeto, navegue até a opção de criação de novo projeto e selecione o template "Empty Ability" no modelo Stage. Defina um nome para o projeto, como "GastronomyGuide", escolha o diretório de destino e confirme o HarmonyOS NEXT como plataforma alvo.

Arquitetura do Projeto

No modelo Stage, a estrutura de diretórios é organizada da seguinte forma:

• entry/src/main/ets/: Armazena os arquivos de lógica e interface do usuário escritos em ArkTS.
• entry/src/main/resources/: Diretório para ativos estáticos, incluindo ícones, imagens e arquivos de localização.
• entry/src/main/module.json5: Arquivo de configuração central que define as habilidades (abilities), permissões e metadados do módulo.

Implementação da Interface de Receitas

Para construir a tela principal que exibe os pratos culinários, utilizaremos a sintaxe declarativa do ArkTS. Crie ou modifique o arquivo principle em entry/src/main/ets/pages/Index.ets.

interface CulinaryDish {
  id: number;
  dishTitle: string;
  culinaryDetails: string;
}

@Entry
@Component
struct MenuListView {
  @State menuItems: CulinaryDish[] = [
    { id: 1, dishTitle: "Carne de Porco Assada", culinaryDetails: "Prato tradicional com molho de soja" },
    { id: 2, dishTitle: "Frango com Amendoim", culinaryDetails: "Especialidade da culinária de Sichuan" },
    { id: 3, dishTitle: "Tofu Picante", culinaryDetails: "Combinação de pimenta e grãos fermentados" }
  ];

  build() {
    Column() {
      Text('Guia Gastronômico')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      List({ space: 15 }) {
        ForEach(this.menuItems, (item: CulinaryDish) => {
          ListItem() {
            Column() {
              Text(item.dishTitle)
                .fontSize(18)
                .fontColor('#333333')
              Text(item.culinaryDetails)
                .fontSize(14)
                .fontColor('#888888')
                .margin({ top: 5 })
            }
            .width('100%')
            .padding(15)
            .backgroundColor('#F9F9F9')
            .borderRadius(8)
          }
        }, (item: CulinaryDish) => item.id.toString())
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

Configuração de Rotas

No modelo Stage, o rotemaento de páginas é gerenciado através do arquivo main_pages.json. Localize este arquivo em entry/src/main/resources/base/profile/main_pages.json e registre a página criada:

{
  "src": [
    "pages/Index"
  ]
}

Execução e Depuração

Com a interface e as rotas configuradas, conecte um dispositivo físico com o HarmonyOS NEXT habilitado para depuração ou inicie o emulador local integrado ao DevEco Studio. Clique no ícone de execução na barra de ferramentas superior para compilar o pacote HAP e instalar a aplicação no dispositivo alvo, permitindo a validação visual e interativa da lista de receitas.