Iniciando con Ionic
Tags: ionic, beginners, mobile
Published: 2023-01-01 23:08:18

## ¿Qué es Ionic?
Es un framework multiplataforma, libre y gratuito que nos da herramientas para crear aplicaciones nativas de iOS y Android, con ayuda de bibliotecas, frameworks conocidos (Angular, React y Vue) y lenguajes de programación conocidos.

## Iniciar
Instalar vía npm: `npm i -g @ionic/cli`
Desinstalar: `npm uninstall -g ionic`

## Estructura del proyecto
src/
> app/
> > app-routing.module.ts
> > app.component.html
> > app.component.spec.ts
> > app.component.ts
> > app.module.ts

> assets/
> environments/
> theme/
> global.scss
> index.html
> main.ts
> polyfills.ts
> test.ts
> zone-flags.ts

El directorio src/app/ contiene los archivos principales que se usarán para editar el proyecto. 

## Comandos básicos
`ionic -v` Devuelve la versión actual de Ionic
`ionic --help` Muestra ayuda
`ionic start project-name` Crea un proyecto
`ionic start project-name template-project` Genera un proyecto con la plantilla indicada (tabs, sidemenu o blank)
`ionic serve` Inicia el proyecto en un servidor local
`ionic generate` Crea una nueva característica (páginas, componentes, servicios, módulos, clases, etc.)
`ionic g tipo-caracerística "nombre"` Atajo para crear una característica dado un nombre

## Plantillas
- tabs: Una vista basada en pestañas
- sidemenu: La vista tendrá un menú lateral
- blank: Un proyecto vacío con una sola página

## Características
### Páginas
`ionic g page mi_pagina` Crear una página
Por defecto, al crearlas, se agregan como hijas de la carpeta app/, si, por ejemplo, estamos usando la plantilla 'tabs' y queremos que 'mi_pagina' sea hija de 'tabs', hay que editar el archivo `app-routing.module.ts`, eliminando la declaración de 'mi_pagina' y agregándola en el archivo `tabs-routing.module.ts`.
Hay que tener cuidado de poner la ruta correctamente.


![Ionic pages organization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ge9ezlnkr31m69ihir9v.png)

### Servicios
Permiten compartir información en todas las páginas ya que sus métodos y atributos son públicos a menos que usemos 'private'. Es recomendable tener un servicio por cada tabla que exista en la base de datos.
`ionic g service folder/mi_servicio` Crea un servicio
Para poder usarlo:
`import { mi_servicioService } from './folder/mi_servicio.service';` Importar el servicio
`mi-variable;` Crear una variable nueva
`constructor (public servicio1: mi_servicioService) {` Crear un objeto en el constructor
`this.mi-variable = this.servicio1.atributo1; }` Almacena el valor de la variable del servicio, en la variable del módulo donde lo estamos importando

### Componentes
Nos sirven para encapsular y reutilizar el código, son la base de la aplicación. Al crear un componente, se crea una carpeta que tiene un archivo HTML, CSS y un TS, esta nueva carpeta se crea dentro del componente principal (app/).
`ng g c folder/mi_componente` Crea un nuevo componente
Para usar el componente, se debe poner su selector (etiqueta HTML) en el archivo HTML y automáticamente se va a importar su contenido.

## Librerías importantes

### Router
Nos permite navegar entre las distintas páginas generadas, para usarlo, necesitamos importarlo en el archivo TypeScript de cada módulo (conjunto de archivos .ts, .html, .css, etc.) de donde queramos usarlo. 
`import { Router } from '@angular/router';´ Importar la librería
`constructor (private router: Router) { }` Crear un objeto de este tipo para poder acceder a su funcionalidad
`this.router.navigate(['página']);` Función para navegar entre páginas

### Alert
Permite enviar alertas al usuario, para usarlo, al igual que la librería anterior, hay que importarlo en el archivo TypeScript.
`import { AlertController } from '@ionic/angular';` Importar la librería
`constructor (public alert: AlertController) {}` Crear el objeto de la librería
```const mi_alerta = await this.alert.create( {
header: 'Mi título',
subheader: 'Mi subtítulo',
message: 'Mi mensaje',
button: ['Botón0', 'Botón1'];``` Crear la alerta personalizada
`await mi_alerta.present();` Ejecutar la alerta

## Conectarse a una API
Podemos usar HttpClient para manejar las peticiones y respuestas externas.
Es recomendable hacerlo en un servicio, así, podemos usarlo en cualquier página de nuestra aplicación.
`import { HttpClient } from '@angular/common/http';` Se importa en el servicio.
`constructor (private http: HttpClient) ` Crear el objeto de la librería
`this.http.get(urlApi).subscribe() ` Accede a la URL y se suscribe a los cambios
`response => console.log(response)` Imprime la respuesta si la petición es correcta
`error => console.error(error) );` Imprime el error y se cierra el paréntesis del 'subscribe' y la llave del constructor

## Documentación oficial
https://ionicframework.com/