Cómo instalar Ionic en Fedora 38/37/36

Ionic es un marco de código abierto popular para construir aplicaciones móviles multiplataforma que utilizan tecnologías web como HTML, CSS y JavaScript. Aprovecha angular, reaccionar o vue.JS para crear interfaces de usuario de alta calidad y similares a. Fedora es una distribución de Linux impulsada por la comunidad que sirve como base para el comercial Red Hat Enterprise Linux (RHEL). En este artículo, lo guiaremos a través del proceso de instalación de Ionic en Fedora, junto con la creación de una aplicación de muestra simple.

Requisitos previos

Antes de que pueda instalar Ionic en Fedora, asegúrese de tener los siguientes requisitos previos:

• Se recomienda un sistema que ejecute Fedora (la versión 33 o superior).
• Una cuenta de usuario con privilegios de sudo.

Paso 1: actualizar el sistema

Primero, actualice su sistema Fedora ejecutando el siguiente comando:

Sudo DNF Update -y  

Este comando asegurará que su sistema tenga las últimas actualizaciones y parches de seguridad.

Paso 2: Instalar nodo.js

Iónico requiere nodo.JS, un tiempo de ejecución de JavaScript, para ejecutar. Instalar nodo.JS usando el siguiente comando:

curl -sl https: // rpm.nodource.com/setup_18.x | sudo -e Bash -  sudo dnf instalar nodejs  

Después de completar la instalación, puede verificar el nodo.Versión JS ejecutando:

nodo -v  

Paso 3: Instale CLI iónico

Ionic CLI (interfaz de línea de comandos) es una herramienta que lo ayuda a crear, desarrollar y administrar aplicaciones iónicas. Instale la CLI iónica globalmente en su sistema usando NPM:

sudo npm install -g @ionic/cli  

Una vez que se complete la instalación, verifique la versión Ionic CLI ejecutando:

iónico -v  

Paso 4: crear un nuevo proyecto iónico

Ahora que tiene instalado Ionic, puede crear un nuevo proyecto Ionic. Para hacer esto, ejecute el siguiente comando:

Inicio iónico mySmpePPP en blanco --Type = Angular  

Reemplazar 'mySampleApp' con el nombre deseado para su aplicación. Este comando creará un nuevo directorio con el nombre especificado y configurará un proyecto iónico con una plantilla en blanco usando Angular.

Paso 5: Navegue al directorio del proyecto

Navegue al directorio de proyectos recién creado:

CD mySampleApp  

Paso 6: ejecute la aplicación iónica

Para ejecutar la aplicación Ionic en su navegador web, use el siguiente comando:

servicio iónico  

Este comando abrirá su navegador web predeterminado y mostrará su aplicación Ionic.

Paso 7: crear una aplicación de muestra

Para crear una aplicación de muestra simple, abra el "SRC/App/Home/Home.página.html " Archivo en su editor de texto favorito y reemplace su contenido con lo siguiente:

Mi aplicación de muestra mi aplicación de muestra haz clic en mí!

12345678910111213141516171819

Mi aplicación de muestra Mi aplicación de muestra Haz click en mi!

A continuación, abra el "SRC/App/Home/Home.página.TS " Archivo en su editor de texto y reemplace su contenido con lo siguiente:

import componente de '@angular/core'; import alertController de '@ionic/angular'; @Component (Selector: 'App-Home', TemplateUrl: 'Inicio.página.html ', styleurls: [' Inicio.página.SCSS '],) Exportar Clase de inicio Constructor (public AlertController: AlertController) async showalert () const alert = espera esto.alertcontroller.Crear (encabezado: 'Hola!', Mensaje:' Esta es una aplicación iónica de muestra.', Botones: [' Ok ']); espera alerta.presente();

12345678910111213141516171819202122

import componente de '@angular/core'; import alertController de '@ionic/angular'; @Component (Selector: 'App-Home', TemplateUrl: 'Inicio.página.html ', styleurls: [' Inicio.página.SCSS '],) Exportar Clase de inicio Constructor (public AlertController: AlertController) async showalert () const alert = espera esto.alertcontroller.Crear (encabezado: 'Hola!', Mensaje:' Esta es una aplicación iónica de muestra.', Botones: [' Ok ']); espera alerta.presente();

En esta aplicación de muestra, hemos agregado un botón iónico que, cuando se hace clic, muestra una alerta simple con un mensaje.

Paso 8: Pruebe la aplicación de muestra

Ahora que ha creado la aplicación de muestra, ejecutarla nuevamente en su navegador web ejecutando el siguiente comando desde el directorio del proyecto:

servicio iónico  

Su navegador web debe abrir y mostrar la aplicación Ionic actualizada. Haga clic en el "Haz click en mi!" botón para ver la alerta con el mensaje.

Conclusión

En este artículo, hemos demostrado cómo instalar Ionic en Fedora y crear una aplicación de muestra simple. Ahora está listo para comenzar a desarrollar aplicaciones móviles multiplataforma utilizando el marco Ionic. Con esta base, puede crear interfaces de usuario nativas de alta calidad para sus aplicaciones móviles en Fedora.