Iniciando con Ionic

¿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.

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/