Como instalar o Ionic no Fedora 38/37/36

Ionic é uma estrutura popular de fonte aberta para a criação de aplicativos móveis de plataforma cruzada usando tecnologias da Web como HTML, CSS e JavaScript. Aproveita o angular, reagem ou vue.JS para criar interfaces de usuário nativas de alta qualidade e nativas. O Fedora é uma distribuição Linux, orientada pela comunidade, que serve como base para o Red Hat Linux (RHEL) comercial (RHEL). Neste artigo, o guiaremos através do processo de instalação da Ionic no Fedora, além de criar um aplicativo de amostra simples.

Pré -requisitos

Antes de instalar o Ionic no Fedora, verifique se você possui os seguintes pré -requisitos:

• Recomenda -se um sistema que executa o Fedora (versão 33 ou superior).
• Uma conta de usuário com privilégios sudo.

Etapa 1: atualize o sistema

Primeiro, atualize seu sistema Fedora, executando o seguinte comando:

Atualização do sudo dnf -y  

Este comando garantirá que seu sistema tenha as atualizações mais recentes e patches de segurança.

Etapa 2: Instale o nó.JS

Ionic requer o nó.JS, um tempo de execução de JavaScript, para executar. Instale o nó.JS usando o seguinte comando:

Curl -sl https: // rpm.Sodesource.com/setup_18.x | SUDO -E BASH -  sudo dnf install nodejs  

Após a conclusão da instalação, você pode verificar o nó.versão JS executando:

Nó -v  

Etapa 3: Instale a CLI iônica

CLI iônica (interface da linha de comando) é uma ferramenta que ajuda a criar, desenvolver e gerenciar aplicativos iônicos. Instale a CLI iônica globalmente em seu sistema usando o NPM:

sudo npm install -g @ionic/cli  

Depois que a instalação estiver concluída, verifique a versão iônica da CLI executando:

Ionic -v  

Etapa 4: Crie um novo projeto iônico

Agora que você tem instalado iônico, você pode criar um novo projeto iônico. Para fazer isso, execute o seguinte comando:

Ionic Start MysampleApp em branco --type = angular  

Substituir 'MysampleApp' com o nome desejado para o seu aplicativo. Este comando criará um novo diretório com o nome especificado e configurará um projeto iônico com um modelo em branco usando o Angular.

Etapa 5: navegue até o diretório do projeto

Navegue até o recém -criado Diretório do Projeto:

CD mysampleApp  

Etapa 6: execute o aplicativo iônico

Para executar o aplicativo iônico em seu navegador da web, use o seguinte comando:

Ionic Serve  

Este comando abrirá seu navegador padrão e exibirá seu aplicativo iônico.

Etapa 7: Crie um aplicativo de amostra

Para criar um aplicativo de amostra simples, abra o “SRC/App/Home/Home.página.html ” Arquive em seu editor de texto favorito e substitua seu conteúdo pelo seguinte:

Meu aplicativo de amostra meu aplicativo de amostra clique em mim!

12345678910111213141516171819

Meu aplicativo de amostra Meu aplicativo de amostra Clique em mim!

Em seguida, abra o “SRC/App/Home/Home.página.ts ” Arquive em seu editor de texto e substitua seu conteúdo pelo seguinte:

importar componente de '@angular/core'; importar alertController de '@ionic/angular'; @Component (Selector: 'App-Home', templateurl: 'Home.página.html ', styleurls: [' casa.página.SCSS '],) Classe de exportação Página inicial Constructor (public alertController: alertController) async showalert () const alert = aguardar isso.alertController.create (cabeçalho: 'Olá!', mensagem:' Este é um aplicativo iônico de amostra.', botões: [' ok ']); aguarde alerta.presente();

12345678910111213141516171819202122

importar componente de '@angular/core'; importar alertController de '@ionic/angular'; @Component (Selector: 'App-Home', templateurl: 'Home.página.html ', styleurls: [' casa.página.SCSS '],) Classe de exportação Página inicial Constructor (public alertController: alertController) async showalert () const alert = aguardar isso.alertController.create (cabeçalho: 'Olá!', mensagem:' Este é um aplicativo iônico de amostra.', botões: [' ok ']); aguarde alerta.presente();

Neste aplicativo de amostra, adicionamos um botão iônico que, quando clicado, exibe um alerta simples com uma mensagem.

Etapa 8: teste o aplicativo de amostra

Agora que você criou o aplicativo de amostra, execute -o novamente no seu navegador da web executando o seguinte comando no diretório do projeto:

Ionic Serve  

Seu navegador da web deve abrir e exibir o aplicativo iônico atualizado. Clique no “Clique em mim!” botão para ver o alerta com a mensagem.

Conclusão

Neste artigo, demonstramos como instalar o Ionic no Fedora e criar um aplicativo de amostra simples. Agora você está pronto para começar a desenvolver aplicativos móveis de plataforma cruzada usando a estrutura iônica. Com esta fundação, você pode criar interfaces de usuário nativas de alta qualidade para seus aplicativos móveis no Fedora.