Swift – Aspectos básicos

Constantes y variables

Cualquier tipo de aplicación necesita poder guardar datos temporalmente en la memoria para poder trabajar con ellos. Las constantes y variables son apartados reservados en la memoria del dispositivo para que podamos acceder a la información que contienen durante la ejecución del programa.

En este sentido, se define una variable como un espacio en memoria que puede ser modificado por un algoritmo y una constante como una zona de memoria de solo lectura, que no puede ser modificada una vez se le haya asignado un valor inicial.

Para poder utilizar tanto las variables como las constantes, debemos definir un nombre descriptivo de su contenido y debemos asociarles además un tipo de dato según la información que vayan a contener.

En Swift, para definir una variable debemos utilizar la palabra reservada var mientras que para definir una constante, debemos utilizar la palabra reservada let:

let maxAlumnosGrupo = 30
var numAlumnosGrupo = 26

En el ejemplo anterior estamos declarando una constante con la cantidad máxima de alumnos en una clase. Dado que esa cantidad no variará, es conveniente definirla como una constante. Por otro lado, estamos declarando una variable con la cantidad de alumnos que actualmente se encuentran en la clase, y cuyo valor inicial hemos establecido en 26. Este valor puede ir modificándose a medida que transcurre el tiempo, y por ese motivo debemos utilizar obligatoriamente una variable para guardar este dato.

Hemos mencionado además que las variables y las constantes se asocian a nombres, tipos de datos y valores, pero en el ejemplo anterior sin embargo, no hemos especificado el tipo de dato de la variable o la constante. Esto es posible porque Swift utiliza inferencia de tipos, es decir, que “adivina” el tipo de dato que se quiere guardar en memoria utilizando como referencia el valor que le hayamos asignando inicialmente.

Si observamos el ejemplo anterior, en ambos casos asignamos valores numéricos enteros, por lo tanto Swift infiere que ambos son del tipo Int.

En cualquier caso, si quisiéramos indicar nosotros mismos el tipo de dato de manera explícita podríamos especificarlo después del nombre de la variable utilizando los dos puntos (:) como separador, tal como se observa en el siguiente ejemplo:

let maxAlumnosGrupo: Int = 30
var numAlumnosGrupo: Int = 26
let nombreProfesorInformatica: String = "Fernando"

En el ejemplo podemos observar que escribimos el nombre de la variable o constante, seguida de dos puntos, el tipo de dato y por último el valor que queramos asignar inicialmente.

Imprimiendo valores

Para imprimir el valor de una constante o una variable en la consola, podemos utilizar la función  print(_:separator:terminator:):

let nombreProfesorInformatica: String = "Fernando"
print(nombreProfesorInformatica)

// Imprime: Fernando

La función print es global y nos permite imprimir uno o más valores. Posee dos parámetros que tienen valores por defecto, los cuales son separator y terminator. Esto implica que al momento de invocar a la función print, estos parámetros pueden ser omitidos por completo.

En caso de no especificar nada, esta función añade al final un salto de línea. Si se quiere indicar que el cursor se mantenga en la misma línea, se debe pasar un string vacío al parámetro terminator:

let nombreProfesorInformatica = "Fernando"
print(nombreProfesorInformatica, terminator:"")

// Imprime: Fernando

Una técnica muy utilizada a la hora de imprimir valores usando print, es la de interpolación de cadenas. Gracias a ella se puede especificar un espacio dentro de la cadena de texto para que sea reemplazado por el valor de una variable o constante al momento de ejecutarse. Se utiliza una barra invertida y se encierra la variable o constante entre paréntesis:

let maxAlumnosGrupo = 30
var numAlumnosGrupo = 26
print("De \(maxAlumnosGrupo) alumnos matriculados, hoy han venido \(numAlumnosGrupo)")

// Imprime: De 30 alumnos matriculados, hoy han venido 26

A diferencia de otros lenguajes, Swift no requiere el uso del punto y coma al finalizar una sentencia. Sin embargo, está permitido su uso:

let nombreProfesorInformatica = "Fernando";
print(nombreProfesorInformatica);

// Imprime: Fernando

Comentarios

Es muy común escribir texto dentro del código que no queremos que sea ejecutado pero que nos sirve como anotaciones o recordatorios. Estos comentarios son ignorados por el compilador y no son ejecutados.

Existen dos tipos de comentarios. Por un lado, tenemos a los de línea, quienes comienzan con dos barras o diagonales:

// Esto es un comentario de linea

Por otro lado, tenemos los comentarios multilineas, que se encierran entre /* y */ :

/* Esto es un comentario
de
varias
líneas */

Operadores básicos

Los operadores básicos incluidos en Swift son los siguientes:

  • Adición (+)
  • Sustracción (-)
  • Multiplicación (*)
  • División (/)
  • Resto (%) –> hace referencia al resto de una división. Ej: 10/3 es igual a 3 y sobra 1. Por lo tanto, el resto es 1.
  • Asignación (=) -> Se usa para darle un valor a una variable o constante, como vimos en los ejemplos.
  • Igual a (==)
  • Distinto a (!=)
  • Mayor a (>)
  • Menor a (<)
  • Mayor o igual (>=)
  • Menor o igual (<=)

Tipos de datos

En Swift podemos encontrar los siguientes tipos de dato:

  • Números enteros: Int y UInt
  • Números de coma flotante: Float y Double
  • String y Character
  • Bool
  • Tuplas
  • Tipos de Colección: Array, Set y Dictionary

En este post vamos a ver los usos más comunes de cada uno. Cabe mencionar que los tipos de dato se escriben con Mayúsculas la primer letra.

Números enteros

Los números enteros son aquellos que no poseen parte decimal o fracción, como el 1, 2, 3, 58 y -90. Existen dos tipos:

  • Con signo (signed): Son aquellos que pueden ser negativos, cero o positivos. Existen en sus versiones de 8, 16, 32 y 64 bits llamados de la siguiente manera:
    • Int8
    • Int16
    • Int32
    • Int64

Asimismo, Swift provee una versión adicional llamada Int que coincide en tamaño con aquel que posee la misma cantidad de bits que el sistema en donde se está ejecutando. Esto es, si el sistema es de 32 bits, entonces Int tiene el mismo tamaño que Int32 y, si el sistema es de 64, equivale al Int64.

  • Sin signo (unsigned): Son aquellos que pueden ser cero o positivos. De la misma manera que los anteriores, Swift provee el tipo UInt que coincide con UInt32 o UInt64, dependiendo de la cantidad de bits del sistema. Las otras versiones de 8 y 16 bits también están disponibles.

Si bien ambos tipos están disponibles, es recomendable siempre usar Int.

let numero1 = 5
print(numero1)

// Imprime: 5

let numero2 = numero1 + 6
print(numero2)

// Imprime: 11

var numero3:Int32 = 90
numero3 = numero3 + 40
print(numero3)

// Imprime: 130

Números de coma flotante

Son aquellos números que poseen parte decimal, como por ejemplo: 3.14 o -45.392607. Existen dos tipos:

  • Double: se utiliza para representar un número de coma flotante de 64 bits
  • Float: se utiliza para representar un número de coma flotante de 32 bits

El hecho de que Double sea de 64 bits implica que puede almacenar un mayor rango de valores, con una precisión de al menos 15 decimales, lo que lo hace preferible en cuanto a su uso en casos generales.

String y Character

Un Character es un carácter cualquiera mientras que un String es una cadena de texto o bien, una colección de Characters.

Para poder usar un String, basta con crear una constante o variable y asignarle la cadena de texto que queramos que almacene, encerrado entre comillas dobles:

let texto1 = "Esto es un String"

En algunas implementaciones, es posible necesitar crear un String vacío inicialmente para luego asignarle un valor más adelante. Para lograr ese comportamiento, se puede utilizar una cadena vacía o usar el inicializador que trae String:

var textoVacio = ""
var textoVacio2 = String()

textoVacio = "Hola Mundo!"
textoVacio2 = "Hola Mundo!"

Asimismo, se puede modificar una cadena de texto utilizando el operador +=, siempre que la misma esté declarada como una variable:

var textoVacio = ""
textoVacio += "Hola Mundo!"
textoVacio += " cómo estás?"
print(textoVacio)

// Imprime: Hola Mundo! cómo estás?

Como dijimos anteriormente, un String puede verse también como un conjunto de Characters. Por lo tanto, si queremos concatenar un Character a un String la operatoria es un poco distinta. Si usamos la técnica anterior la misma no va a funcionar ya que un String solo puede concatenarse con otro String. Sin embargo, podemos hacer uso del método append de String para agregar el Character en cuestión. Un punto a tener en cuenta es que para usar una variable de este tipo, es necesario especificar el tipo de dato, ya que de lo contrario Swift inferirá que se trata de un String:

var textoVacio = ""
textoVacio += "Hola Mundo! cómo estás?"
let exclamacion:Character = "!"
textoVacio.append(exclamacion)
print(textoVacio)

// Imprime: Hola Mundo! cómo estás?!

En el ejemplo, se declara una constante exclamación del tipo Character y se le asigna un valor. Como se aclaró previamente, es necesario indicarle al compilador que esta constante es del tipo Character, de lo contrario inferirá que se trata de un String de un solo carácter.

Por último, Swift incorpora una técnica muy utilizada llamada Interpolación de Cadenas (String interpolation) que permite armar una cadena de texto combinando texto, números, funciones, variables y otras expresiones. Cada ítem a incluir en la cadena debe ser encerrada entre paréntesis y precedida por una barra invertida:

let cadena = "El número \(numero3) es más grande que el número \(numero2)"
print(cadena)

// Imprime: El número 130 es más grande que el número 11

Como se puede ver en el ejemplo, estamos usando las variables numero2 y numero3 creados anteriormente para armar un texto que los incorpora en un mismo String resultante. Recordemos que estas variables son del tipo Int, pero al estar dentro de los paréntesis y la barra, se convierte su tipo o salida a String y se concatena al resto de la cadena.

Por lo tanto, para concatenar string en Swift tenemos la opción de usar el operador +=, en el cual a una variable String se le puede adicionar otro a continuación, el operador +, para construir una cadena a partir de otras que se concatenan mediante ese operador, o la interpolación de cadenas, que a su vez nos permite convertir a String valores de otro tipo de dato e insertarlo dentro de una cadena resultante.

Bool

El tipo de dato booleano permite que una constante o variable pueda valer true o false. Son utilizados para tomar decisiones en base a comparaciones lógicas.

let heladeraLlena = false
if heladeraLlena {
    print("A preparar algo para comer!")
} else {
    print("Tenemos que comprar comida")
}

// Imprime: Tenemos que comprar comida

En el ejemplo anterior, se declara una constante indicando que la heladera no se encuentra llena. Luego se pregunta si la misma está llena, pero al no estarlo se ejecuta solo la sentencia encerrada en el else.

Tuplas

Las tuplas permiten agrupar varios valores de cualquier tipo en uno solo.

let ubicacion = (-34.599722, -58.381944)
print("Buenos Aires se encuentra en la longitud \(ubicacion.0)")

// Imprime: Buenos Aires se encuentra en la longitud -34.599722

En el ejemplo anterior, declaramos una tupla del tipo (Double, Double)con las coordenadas de longitud y latitud de la provincia de Buenos Aires. Luego, usamos la longitud haciendo referencia a ella por su posición en la Tupla (el cual empieza por el índice 0) y se imprime su valor dentro de un String más grande usando la técnica de String Interpolation.

Un punto a tener en cuenta es que las tuplas pueden contener cualquier cantidad de elementos y los mismos pueden ser a su vez de distintos tipos, como por ejemplo:

  • (Int, Int)
  • (Int, String)
  • (Bool, String, Int)
  • (Double, Float, Bool, String, Int)

Otra forma de acceder a los valores que contiene la tupla es mediante el nomenclado de sus elementos. De esta manera, al ponerle un nombre a cada uno, simplemente hacemos referencia a ellos por este atributo:

let registro = (nombre: "Fernando", esMayorDeEdad: true)
if registro.esMayorDeEdad {
    print("\(registro.nombre) está autorizado a ingresar al club")
}

// Imrpime: Fernando está autorizado a ingresar al club

En este caso, para poder hacer uso de los datos de la tupla registro, simplemente hacemos referencia a los nombres de sus elementos.

Las tuplas son especialmente útiles cuando se utilizan como valores de retorno en funciones, ya que les da la posibilidad de devolver más de un valor al mismo tiempo.

Tipos de colección

Existen tres tipos de colecciones en Swift: los arrays son colecciones ordenadas de elementos, los Sets son colecciones sin ordenar y con valores únicos y por ultimo, los Diccionarios son listas sin ordenar de elementos clave-valor.

Todos los tipos de colección son claros en cuanto al tipo de dato que almacenan. Esto significa que una vez declaradas las colecciones, solo se podrán agregar elementos del mismo tipo de dato de los que fueron indicados al principio. Por lo tanto, si se dispone de un array de Strings, solo se podrá agregarle Strings y no números enteros o booleanos.

Arrays

Se trata de colecciones ordenadas de elementos, los cuales pueden aparecer más de una vez dentro del array. Como es una lista ordenada, cada elemento ocupa una posición indicado por un índice que comienza con 0. Por lo tanto, el primer elemento ocupa la posición 0, el segundo la posición 1, etcétera.

Para crear un array, se puede inferir su tipo de acuerdo a los datos iniciales que se le asigna (encerrados entre corchetes) o bien, se puede crear un array vacío usando un inicializador al cual se le debe indicar el tipo de dato:

let array1 = ["uno", "dos", "tres"]
print("El primer elemento del array es \(array1.first!)")

// Imprime: El primer elemento del array es uno

var array2 = [Int]()
array2.append(1)
array2.append(4)
array2.append(9)
print("El segundo elemento del array2 es \(array2[1])")

// Imprime: El segundo elemento del array2 es 4

En el primer ejemplo, se infiere que el arreglo será un array de Strings. En cambio en el segundo se crea inicialmente un array de enteros vacío y luego se le agregan 3 datos. Un punto a tener en cuenta es que si queremos ver el primer elemento podemos usar el subíndice 0 o el método first (al cual le agregamos un signo de exclamación por tratarse de un opcional, lo que veremos más tarde). Si queremos ver el segundo elemento, debemos usar el subíndice 1, como se ve en el segundo ejemplo.

Para eliminar un elemento del array, se utiliza el método remove(at:) y se indica el subíndice:

array2.remove(at: 1)
print("El segundo elemento del array2 es \(array2[1])")

// Imprime: El segundo elemento del array2 es 9

Al eliminar el segundo elemento del array, luego su lugar es ocupado por el numero 9 que anteriormente ocupaba el tercer lugar.

Sets

Se trata de un tipo de colección de elementos que no siguen un orden y que solo aparecen una vez dentro de la colección. Es útil cuando justamente el orden no es importante o bien, cuando se requiere asegurar que el listado contenga valores únicos.

De la misma manera que los arrays, podemos crear Sets asignándoles valores al momento de declararlos por primera vez o bien, usar inicializadores para crearlos vacíos:

let coleccion = Set<Int>()
print("Tenemos \(coleccion.count) elementos")

// Imprime: Tenemos 0 elementos

var nombres:Set<String> = ["Juan", "Luis"]

Un punto a tener en cuenta es que si se quiere usar un Set inicializándolo pasándole los datos que va a contener (segundo ejemplo) es necesario indicar el tipo de dato del mismo ya que Swift no puede inferir si se trata de un Set o de un Array. En el ejemplo, se indicó el tipo de dato Set.

Para insertar un valor en la colección se utiliza el método insert(_:) y para eliminar remove(_:):

var alumnos:Set<String> = ["Juan", "Luis"]
nombres.insert("Pedro")
nombres.insert("Javier")

for dato in nombres {
    print("\(dato)")
}

// Imprime:
// Juan
// Luis
// Pedro
// Javier

nombres.remove("Pedro")

for dato in nombres {
    print("\(dato)")
}

// Imprime:
// Juan
// Luis
// Javier

En el ejemplo anterior, usamos el Set nombres creado previamente y le agregamos dos valores adicionales. Para mostrar el contenido de la colección, usamos un for para recorrerlo, en donde se crea una constante temporal llamada dato que contiene el valor de cada elemento según la iteración de la que se trate. Es decir, el for se ejecuta 4 veces y la primera vez que ingresa, la constante dato es igual a “Lionel”. La segunda equivale a “Messi”, y así sucesivamente. Finalmente eliminamos un elemento y volvemos a recorrer la colección para validar.

Diccionarios

Un diccionario permite almacenar asociaciones de pares clave – valor, en donde todas las claves de la colección son del mismo tipo y todos los valores son del mismo tipo pero puede ser distinto que el tipo de la clave. Los elementos aquí guardados no siguen un orden determinado y no pueden repetirse dos elementos con la misma clave.

Se denomina diccionario porque al igual que un diccionario convencional, los valores aquí almacenados son buscados mediante su clave. Es por esto que las claves no pueden repetirse ya que solo se admite devolver un valor al momento de realizar una búsqueda, siempre que la clave exista.

Para poder usar un Diccionario, se debe determinar entre corchetes el par clave – valor, los cuales se separan por dos puntos (:). En el caso de querer indicar el tipo de dato de cada uno de ellos, puede hacerse usando la misma convención.

var monedas: [String:String] = ["ARS":"Peso argentino", "USD": "Dolar americano", "MXN":"Peso Mexicano"]

En este caso, se indicó el tipo de dato [String:String] de manera explícita pero, al asignarle los valores al momento de declarar la variable monedas, es perfectamente válido omitir el tipo de dato ya que el mismo se puede inferir. Es decir, también pudo haberse escrito así:

var monedas = ["ARS":"Peso argentino", "USD": "Dolar americano", "MXN":"Peso Mexicano"]

Para poder acceder al valor de una determinada clave basta con indicar la misma como si se tratase de un subíndice:

let peso = monedas["ARS"]
print("\(peso!)")

//Devuelve:
//Peso argentino

Si se quiere agregar un nuevo valor, se debe usar la misma técnica vista en el ejemplo anterior pero asignándole un valor:

monedas["CRC"] = "Colones"

var colones = monedas["CRC"]
print("\(colones!)")

//Devuelve:
//Colones

Para modificar un valor cuya clave ya existe, se utiliza la misma técnica:

monedas["CRC"] = "Colones Costa Rica"

colones = monedas["CRC"]
print("\(colones!)")

//Devuelve:
//Colones Costa Rica

Ejemplo completo

let cantidadMaximaDeJugadoresPorEquipo = 11
var cantidadDeDelanteros = 2

var nombreDeUsuario: String = "Gabriel"
let cantidadDeMesesEnUnAño: Int = 12

print(nombreDeUsuario);
//Devuelve:
//Gabriel

print(nombreDeUsuario, terminator:"")
//Devuelve:
//Gabriel

print("De los \(cantidadMaximaDeJugadoresPorEquipo), \(cantidadDeDelanteros) están jugando como delanteros")
//Devuelve:
//De los 11, 2 están jugando como delanteros

//Esto es un comentario de linea

/* Esto es un comentario
 de
 varias
 lineas*/

//Números enteros
let numero1 = 5
print(numero1)
//Devuelve:
//5

let numero2 = numero1 + 6
print(numero2)
//Devuelve:
//11

var numero3:Int32 = 90
numero3 =  numero3 + 40
print(numero3)
//Devuelve:
//130

//Números de coma flotante
var numero4:Float = 3.45

//String y Characters
let texto1 = "Esto es un String"

var textoVacio = ""
var textoVacio2 = String()
textoVacio = "Hola Mundo!"
textoVacio2 = "Hola Mundo!"

textoVacio += " cómo están?"
print(textoVacio)
//Devuelve:
//Hola Mundo! cómo están?

let exclamacion:Character = "!"
textoVacio.append(exclamacion)
print(textoVacio)
//Devuelve:
//Hola Mundo! cómo están?!

let cadena = "El número \(numero3) es más grande que el número \(numero2)"
print(cadena)
//Devuelve:
//El número 130 es más grande que el número 11

//Bool
let heladeraLlena = false
if heladeraLlena {
    print("A preparar algo para comer!")
} else {
    print("Tenemos que comprar comida :(")
}
//Devuelve:
//Tenemos que comprar comida

//Tuples
let ubicacion = (-34.599722, -58.381944)
print("Buenos Aires se encuentra en la longitud \(ubicacion.0)")
//Devuelve:
//Buenos Aires se encuentra en la longitud -34.599722

let registro = (nombre: "Gabriel", esMayorDeEdad: true)
if registro.esMayorDeEdad {
    print("\(registro.nombre) está autorizado a ingresar al club")
}
//Devuelve:
//Gabriel está autorizado a ingresar al club


//Array
let arreglo1 = ["uno", "dos" ,"tres"]
print("El primer elemento del arreglo es \(arreglo1.first!)")
//Devuelve:
//El primer elemento del arreglo es uno

var arreglo2 = [Int]()
arreglo2.append(1)
arreglo2.append(4)
arreglo2.append(9)
print("El segundo elemento del arreglo2 es \(arreglo2[1])")
//Devuelve:
//El segundo elemento del arreglo2 es 4

arreglo2.remove(at: 1)
print("El segundo elemento del arreglo2 es \(arreglo2[1])")
//Devuelve:
//El segundo elemento del arreglo2 es 9

//SET
let coleccion = Set<Int>()
print("Tenemos \(coleccion.count) elementos")
//Devuelve:
// Tenemos 0 elementos

var nombres:Set<String> = ["Lionel","Messi"]

nombres.insert("Neymar")
nombres.insert("Iniesta")

for dato in nombres {
    print("\(dato)")
}
//Devuelve:
//Lionel
//Messi
//Neymar
//Iniesta

nombres.remove("Neymar")

for dato in nombres {
    print("\(dato)")
}
//Devuelve:
//Lionel
//Messi
//Iniesta

var monedas: [String:String] = ["ARS":"Peso argentino", "USD": "Dolar americano", "MXN":"Peso Mexicano"]

let peso = monedas["ARS"]
print("\(peso!)")
//Devuelve:
//Peso argentino

monedas["CRC"] = "Colones"
var colones = monedas["CRC"]
print("\(colones!)")
//Devuelve:
//Colones

monedas["CRC"] = "Colones Costa Rica"

colones = monedas["CRC"]
print("\(colones!)")
//Devuelve:
//Colones Costa Rica

App libros Angular 7 + Bootstrap 4 + NodeJS

Instalación

Código fuente disponible aquí.

Servidor

cd servidor
npm install
node app.js

Cliente

cd cliente
npm install
ng serve -o

Peticiones web desde Angular 7

Archivo services/books.service.ts

...

import { HttpClient } from '@angular/common/http';

...

export class BooksService {
  list:any[];

  constructor(public http:HttpClient) { }

  get() {
    this.http.get("http://localhost:8080/libros/").subscribe((data:any) => {
      this.list = data;
      console.log(this.list);
    });    
  }

  add(book:any) {
    this.http.post("http://localhost:8080/libros/", book).subscribe((data:any) => {
      this.get();
    });
  }
}

Archivo pages/home/home.component.ts

...

import { BooksService } from '../../services/books.service';

...

export class HomeComponent implements OnInit {
  constructor(public books:BooksService) { }

  ngOnInit() {
    this.books.get();
  }
}

Archivo pages/home/list.component.ts

...

import { BooksService } from '../../services/books.service';

...

export class ListComponent implements OnInit {
  search:string = '';

  constructor(public books:BooksService) { }

  ngOnInit() {
    this.books.get();
  }
}

Archivo pages/add/add.component.ts

...

import { BooksService } from '../../services/books.service';

...

export class AddComponent implements OnInit {
  book:any = {id:0, titulo:'', autor:'', precio:0, img:'', url:''};

  constructor(public books:BooksService) { }

  ngOnInit() { }

  add() {
    console.log(this.book);
    this.books.add(this.book);
  }
}

App libros Angular 7 + Bootstrap 4

Filtro de libros

<input type="text" class="form-control" [(ngModel)]="search">
...
<a class="card" *ngFor="let book of books.list | includes:search"></a>
ng generate pipe pipes/includes

includes.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'includes'
})
export class IncludesPipe implements PipeTransform {

  transform(books:any, text:string): boolean {
    if (!text.length) return books;
    return books.filter((book:any) => (book.title.includes(text) || book.author.includes(text)));
  }

}

Guardando los libros

ng generate service services/books

books.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class BooksService {
  list:any[] = [
    { id: 1, title:'Cuentos para ser escuchados', author:'Fernando Ruiz Rico', price:3.99, img:'https://images-na.ssl-images-amazon.com/images/I/41Xs%2BVAP-3L._SX331_BO1,204,203,200_.jpg', url:'https://www.amazon.es/dp/8461700511' },
    { id: 1, title:'Cuentos para ser compartidos', author:'Fernando Ruiz Rico', price:3.99, img:'https://images-na.ssl-images-amazon.com/images/I/41eWDLASNJL._SX331_BO1,204,203,200_.jpg', url:'https://www.amazon.es/dp/8409041294' },
    { id: 1, title:'La pandilla digital contra el profesor analógico', author:'Fernando Ruiz Rico', price:3.99, img:'https://images-na.ssl-images-amazon.com/images/I/518Kv-ZvfUL._SX331_BO1,204,203,200_.jpg', url:'https://www.amazon.es/dp/1719898235' }
  ];

  constructor() {
    var storage = localStorage.getItem('books-list');
    if (storage) this.list = JSON.parse(storage);
  }

  add(book:any) {
    this.list.unshift(book);
    this.save();
  }

  delete(item:number) {
    this.list.splice(item, 1);
    this.save();
  }  

  save() {
    localStorage.setItem('books-list', JSON.stringify(this.list));
  }
}

El resultado

Pulsa aquí.

Envío de correos con NodeJS

Installation

npm install nodemailer

routes/correo.js

const express = require('express');
let router = express.Router();

router.post('/', (req, res) => {
  var nodemailer = require('nodemailer');

  var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: '[email protected]',
      pass: '1234'
    }
  });

  var mailOptions = {
    from: '[email protected]',
    to: '[email protected]',
    subject: req.body.subject,
    text: req.body.text
  };

  transporter.sendMail(mailOptions, function(error, info){
    if (error) {
      console.log(error);
    } else {
      console.log('Email sent: ' + info.response);
    }
  });
});

module.exports = router;

Angular 7 + Bootstrap 4

Installation

ng new mybootstrapweb
cd mybootstrapweb
npm i bootstrap

src/styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

Compile and test

ng serve -o

Header / Footer

ng g c template/header
ng g c template/footer

template/header.component.html

<header class="navbar bg-primary">
  <span class="navbar-brand text-light" routerLink="/">Profile</span>
  <span class="ml-auto">
    <button class="btn btn-info mr-2" routerLink="/about">About</button>
    <button class="btn btn-info" routerLink="/contact">Contact</button>
  </span>
</header>

template/footer.component.html

<footer class="navbar fixed-bottom bg-danger">
  <span class="m-auto text-light">Copyright © 2019 - Fernando</span>
</footer>

Home / About / Contact

ng g c pages/home
ng g c pages/about
ng g c pages/contact

pages/home.component.html

<div class="container text-center"> 
  <h1>Fernando Ruiz</h1> 
  <img class="img-fluid" src="../../../assets/fernando.jpeg"> 
</div>

pages/about.component.html

<div class="container">
  <h1>About Me</h1>
  <p>I am passionate about Microsoft .NET technology and likes to share knowledge with the .NET developer's community.</p>
  <p>I am a contributor in Microsoft and the ASP.NET developer community.</p>
    
  <p>MVP Award Winner | Community Author | S/W Developer & Programmer | Blogger | Community Award Winner | Most Valuable Blogger(MVB).</p>
</div>

pages/contact.component.html

<div class="container ">
  <h1>Contact Me</h1>
  Please mail me on the below-mentioned mail-id: [email protected]
</div>

All together

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
    
import {HomeComponent} from './pages/home/home.component';
import {AboutComponent} from './pages/about/about.component';
import {ContactComponent} from './pages/contact/contact.component';

const routes: Routes = [
  {path: '',component: HomeComponent},
  {path: 'about',component: AboutComponent},
  {path: 'contact',component: ContactComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular 7

Installation

npm install -g @angular/cli
ng new myweb
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com   ]

Angular 7 Components

cd miweb
ng serve -o
/app.component.html
/app.component.scss
/app.component.ts
> ng generate component nav
// output

> ng g c about
// output

> ng g c contact
// output

> ng g c home
// output

Angular 7 Templating

app.component.html

<app-nav></app-nav>

<section>
  <router-outlet></router-outlet>
</section>

nav.component.html

<header>
  <div class="container">
    <a routerLink="/" class="logo">My Web</a>
    <nav>
      <ul>
        <li><a routerLink="/">Home</a></li>
        <li><a routerLink="/about">About</a></li>
        <li><a routerLink="/contact">Contact us</a></li>
      </ul>
    </nav>
  </div>
</header>
<!-- From: -->
<a routerLink="/" class="logo">My Web</a>

<!-- To: -->
<a routerLink="/" class="logo">{{ appTitle }}</a>

nav.component.ts

export class NavComponent implements OnInit {

  appTitle: string = 'My Web Site';
  // OR (either will work)
  appTitle = 'My Web Site';

  constructor() { }

  ngOnInit() {
  }

}

/src/styles.scss

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body, html {
    height: 100%;
    margin: 0 auto;
}

body {
    font-family: 'Montserrat';
    font-size: 18px;
}

a {
    text-decoration: none;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 1.3em;
    display: grid;
    grid-template-columns: 30% auto;

    a {
        color: white;
    }
}

section {
    width: 80%;
    margin: 0 auto;
    padding: 2em;
}

nav/component.scss

header {
    background: #7700FF;

    .logo {
        font-weight: bold;
    }

    nav {
        justify-self: right;
    
        ul {
            list-style-type: none;
            margin: 0; padding: 0;

            li {
                float: left;

                a {
                    padding: 1.5em;
                    text-transform: uppercase;
                    font-size: .8em;

                    &:hover {
                        background: #8E2BFF;
                    }
                }
            }
        }
    }
}

Angular 7 Routing

/src/app/app-routing.module.ts

// Other imports removed for brevity

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

// Other code removed for brevity

Angular 7 Event Binding

/src/app/home/home.component.html 

<h1>Home</h1>

<button (click)="firstClick()">Click me</button>

home.component.ts

export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  firstClick() {
    console.log('clicked');
  }

}
(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

(click)="myMethod()"
(dblclick)="myMethod()"

(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"

Angular 7 Class & Style Binding

home.component.html

<h1 [class.gray]="h1Style">Home</h1>

home.component.ts

  h1Style: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  firstClick() {
    this.h1Style = true;
  }

home.component.scss

.gray {
    color: gray;
}

home.component.html

<h1 [ngClass]="{
  'gray': h1Style,
  'large': !h1Style
}">Home</h1>

home.component.scss

.large {
    font-size: 4em;
}

home.component.html

<h1 [style.color]="h1Style ? 'gray': 'black'">Home</h1>

<h1 [ngStyle]="{
  'color': h1Style ? 'gray' : 'black',
  'font-size': !h1Style ? '1em' : '4em'
}">Home</h1>

Angular 7 Services

> ng generate service data

/src/app/data.service.ts

// Other code removed for brevity

export class DataService {

  constructor() { }

  firstClick() {
    console.log('clicked');
  }
}

/src/app/home/home.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private data: DataService) { }

  ngOnInit() {
  }

  firstClick() {
    this.data.firstClick();
  }

}

Angular 7 HTTP Client

/src/app/app.module.ts

// Other imports
import { HttpClientModule } from '@angular/common/http';

...

  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,    // <-- Right here
  ],

/src/app/data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';  // Import it up here

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get('https://reqres.in/api/users');
  }
}

home.component.ts

export class HomeComponent implements OnInit {

  users: Object;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.getUsers().subscribe(data => {
        this.users = data
        console.log(this.users);
      }
    );
  }

}

home.component.html

<h1>Users</h1>

<ul *ngIf="users">
  <li *ngFor="let user of users.data">
    <img [src]="user.avatar">
    <p>{{ user.first_name }} {{ user.last_name }}</p>
  </li>
</ul>

home.component.scss

ul {
    list-style-type: none;
    margin: 0;padding: 0;

    li {
        background: rgb(238, 238, 238);
        padding: 2em;
        border-radius: 4px;
        margin-bottom: 7px;
        display: grid;
        grid-template-columns: 60px auto;

        p {
            font-weight: bold;
            margin-left: 20px;
        }

        img {
            border-radius: 50%;
            width: 100%;
        }
    }
}

Angular 7 Forms

app.module.ts

// other imports
import { ReactiveFormsModule } from '@angular/forms';

// other code
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule  // <- Add here
  ],

 contact.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})

export class ContactComponent implements OnInit {

  messageForm: FormGroup;
  submitted = false;
  success = false;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.messageForm = this.formBuilder.group({
      name: ['', Validators.required],
      message: ['', Validators.required]
    });
  }

  onSubmit() {
    this.submitted = true;

    if (this.messageForm.invalid) {
        return;
    }

    this.success = true;
  }
}

contact.component.html

<h1>Contact us</h1>

<form [formGroup]="messageForm" (ngSubmit)="onSubmit()">

    <h5 *ngIf="success">Your form is valid!</h5>

    <label>
      Name:
      <input type="text" formControlName="name">
      <div *ngIf="submitted && messageForm.controls.name.errors" class="error">
        <div *ngIf="messageForm.controls.name.errors.required">Your name is required</div>
      </div>
    </label>
  
    <label>
      Message:
      <textarea formControlName="message"></textarea>
      <div *ngIf="submitted && messageForm.controls.message.errors" class="error">
        <div *ngIf="messageForm.controls.message.errors.required">A message is required</div>
      </div>
    </label>

    <input type="submit" value="Send message" class="cta">
  
  </form>

  <div *ngIf="submitted" class="results">
    <strong>Name:</strong> 
    <span>{{ messageForm.controls.name.value }}</span>

    <strong>Message:</strong> 
    <span>{{ messageForm.controls.message.value }}</span>
  </div>

contact.component.scss

label {
    display: block;
    
    input, textarea {
        display: block;
        width: 50%;
        margin-bottom: 20px;
        padding: 1em;
    }

    .error {
        margin-top: -20px;
        background: yellow;
        padding: .5em;
        display: inline-block;
        font-size: .9em;
        margin-bottom: 20px;
    }
}

.cta {
    background: #7700FF;
    border: none;
    color: white;

    text-transform: uppercase;
    border-radius: 4px;
    padding: 1em;
    cursor: pointer;
    font-family: 'Montserrat';
}

.results {
    margin-top: 50px;

    strong {
        display: block;
    }
    span {
        margin-bottom: 20px;
        display: block;
    }
}

Angular 1

AngularJS es un Framework desarrollado con JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

AngularJS amplía la funcionalidad en el código HTML

  • La directiva ng-app crea un elemento que contendrá el código web desarrollado con AngularJS.
  • La directiva ng-model enlaza el valor de controles HTML (input, select, textarea) con datos de la página web.
  • La directiva ng-bind enlaza datos de la página web para que puedan ser visualizados en la vista HTML.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Enlaces de datos

  • Los enlaces de datos nos permiten unir expresiones de AngularJS con los datos introducidos en cualquier formulario.
  • En el siguiente ejemplo el campo {{ firstName }} está unido con ng-model="firstName".
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="" ng-init="firstName='John'">

    <p>Name: <input type="text" ng-model="firstName"></p>
    <p>You wrote: {{ firstName }}</p>

  </div>
</body>
</html>
  • A continuación podemos observar rápidamente cómo dos campos de texto se enlazan utilizando dos directivas de tipo ng-model y se utilizan los valores introducidos para realizar una multiplicación en tiempo real:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="" ng-init="quantity=1;price=5">

    Quantity: <input type="number" ng-model="quantity">
    Costs:    <input type="number" ng-model="price">

    Total in dollar: {{ quantity * price }}

  </div>
</body>
</html>

Controladores

  • La directiva ng-controller nos permite definir el controlador del contenido web.
  • Un controlador es un objeto JavaScript, creado a partir de un objeto JavaScript estándar.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
    });
  </script>
</body>
</html>

Filtros

  • Filtro de moneda:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="costCtrl">
    <h1>Price: {{ price | currency }}</h1>
    <h1>Price: {{ price | currency:"USD$" }}</h1> 
    <h1>Price: {{ price | currency:"USD$":0 }}</h1>                  
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('costCtrl', function ($scope) {
      $scope.price = 58.25;
    });
  </script>
  <p>The currency filter formats a number to a currency format.</p>
</body>
</html>
  • Bucles y filtros
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">
  <p>Type a letter in the input field:</p>
  <p><input type="text" ng-model="test"></p>

  <ul>
    <li ng-repeat="x in names | filter:test">{{ x }}</li>
  </ul>
</div>

<script>
  angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = ['Jani','Carl','Margareth','Hege','Joe','Gustav','Birgit','Mary','Kai'];
  });
</script>

<p>The list will only consists of names matching the filter.</p>
</body>
</html>

Validación de formularios

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

  <p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
  </p>

  <p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required. 
  </span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
  </p>

  <p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
  myForm.email.$dirty && myForm.email.$invalid">
  </p>

</form>

<script>
  var app = angular.module('myApp', []);
  app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
  });
</script>

</body>
</html>

Una app muy sencilla para guardar sitios interesantes con ubicaciones y fotografías con IONIC 4+Angular+Cordova

El objetivo: Guardar ubicaciones e imágenes

En este ejercicio vamos a demostrar que puede resultar muy sencillo desarrollar una aplicación que nos permita mantener un registro de lugares interesantes, guardando la ubicación precisa y una imagen identificativa de cada uno.

Será el mismo navegador el que nos proporcione la ubicación actual de forma automática, y nos permita elegir las imágenes a utilizar, de entre las que tengamos en nuestros equipos. Además, al ejecutarla como app en nuestros móviles, podremos utilizar también la cámara en el mismo momento, pudiendo hacer una foto que se quedará guardada en nuestra aplicación. De esa forma, tendremos imágenes asociadas con la latitud y la longitud de los sitios donde hayamos hecho las fotos, pudiendo acceder además al mapa correspondiente con un solo clic.

Con menos de 100 líneas de código

Veremos que al utilizar IONIC 4 + Angular, con menos de 100 líneas de código podemos desarrollar una aplicación multiplataforma, que funcionará perfectamente en cualquier navegador, o instalada como app en nuestros dispositivos móviles. Y todo ello, con el mismo código fuente, sin cambiar ni una sola línea.

La funcionalidad de la aplicación

La aplicación dispondrá de un cuadro de texto donde podamos especificar la descripción del nuevo lugar que queramos registrar.

Si ya hemos introducido alguna descripción, se habilitará un nuevo control para poder elegir una imagen. Si estamos ejecutando la aplicación desde nuestro ordenador de escritorio, podremos elegir cualquier imagen de las que se encuentran en nuestro equipo. Si ejecutamos la aplicación desde nuestros dispositivos móviles, podremos hacer una foto en ese mismo momento.

Una vez introducida la descripción y elegida o hecha la foto, la aplicación obtendrá automáticamente la ubicación en la que nos encontremos y creará un elemento en la lista de lugares en el que aparecerá la foto y la descripción.

Al hacer clic sobre cada elemento de la lista, si estamos utilizando el navegador de nuestro ordenador de escritorio, abrirá la página web correspondiente de Google Maps para mostrarnos la ubicación precisa. Si estamos ejecutando la aplicación desde nuestros dispositivos móviles, nos permitirá elegir qué aplicación se utilizará para visualizar la ubicación.

Además, podremos reordenar los elementos de la lista activando un control por cada elemento, que se podrá ocultar o mostrar mediante un botón ubicado en la barra superior de la aplicación.

Por último, permitiremos borrar cualquier elemento de la lista utilizando un botón oculto que se mostrará al deslizar el elemento correspondiente a la derecha.

Primeros pasos

Código base de la aplicación

Para comenzar a desarrollar nuestra aplicación deberemos partir de un código base generado automáticamente por IONIC. Bastará con ejecutar el siguiente comando para generar los ficheros necesarios:

ionic start lugares blank --type=angular --cordova --no-git --no-link

Al finalizar el proceso, se habrá creado un directorio con el nombre lugares, que constituye el directorio raíz de nuestro proyecto, donde tendremos todo el código necesario para continuar con el desarrollo de nuestra aplicación. Para realizar los siguientes pasos deberemos acceder primero a dicha carpeta:

cd lugares

Como todavía no disponemos de la versión definitiva de IONIC, vamos a instalar la versión beta más estable hasta el momento:

npm install @ionic/[email protected]

Y a partir de ahora ya podemos comenzar a añadir el código específico de nuestra aplicación. Puesto que toda la funcionalidad se encuentra ubicada en una única pantalla, sólo vamos a modificar dos ficheros:

  1. src/app/home/home.page.html: Código HTML.
  2. src/app/home/home.page.ts: Código TypeScript.

Probando la aplicación en el navegador

La misma herramienta de consola de IONIC se puede utilizar como servidor web, lo que nos permitirá  probar nuestra aplicación fácilmente en el navegador. Además, cada vez que realicemos cualquier cambio en el código fuente, veremos cómo se actualiza el resultado automáticamente. Bastará con ejecutar el siguiente comando desde la carpeta raíz del proyecto donde se encuentra nuestra aplicación, dejando el terminal abierto:

ionic serve

Si todo ha ido bien, se compilará la aplicación y deberíamos visualizar en el navegador algo del siguiente estilo:

(bastará con pulsar Ctrl+C en el terminal para finalizar la ejecución del comando)

Código HTML

El encabezado

Como ya viene siendo habitual, colocaremos una barra superior que contenga el título y el botón de reordenar:

<ion-header>
  ...
  <ion-title>Places!</ion-title>
  ...
  <ion-button (click)="reorder=!reorder">
  ...    
</ion-header>

En cada pulsación del botón de reordenar, activaremos o desactivaremos dicha funcionalidad cambiando simplemente el valor del atributo correspondiente.

El formulario para la descripción y la imagen

Utilizaremos un simple cuadro de texto para introducir la descripción del lugar que queramos registrar y un elemento HTML estándar de tipo fichero para elegir la imagen:

<ion-item>
  <ion-input placeholder="Enter description" [(ngModel)]="text"></ion-input>
</ion-item>
<ion-item *ngIf="text.length">
  <input type="file" accept="image/*" (change)="add($event)" />
  <ion-icon slot="end" name="camera" (click)="add()"></ion-icon>
</ion-item>

Debemos destacar de nuevo el uso de la directiva ngModel, que nos permitirá enlazar el valor del atributo text, de forma que cualquier modificación en el código HTML cambiará automáticamente el valor del atributo en el código TypeScript y viceversa.

En segundo lugar, también destacamos el uso de la directiva ngIf, que automatiza la creación del campo de tipo fichero, de forma que dicho campo no existirá hasta que se introduzca algún texto en el campo de la descripción. Además, al inicializar de nuevo la descripción desde el código TypeScript, dicho campo desaparecerá automáticamente.

Por último, al final del cuadro de elección de imagen colocaremos un icono para acceder a la cámara de nuestros dispositivos móviles, utilizando como imagen la fotografía que realicemos en ese momento. Esta funcionalidad no estará operativa cuando utilicemos la aplicación desde el navegador.

Los elementos de la lista

Cada elemento de la lista será un enlace a la página web correspondiente de Google Maps para conocer la ubicación del lugar, de forma que podamos acceder fácilmente con un simple clic en el elemento correspondiente. Para ello bastará con especificar la url mediante el atributo href del elemento <ion-item></ion-item> (más información aquí).

Además, utilizaremos el elemento <ion-thumbnail></ion-thumbnail> para mostrar una miniatura de la imagen. Por último, añadiremos dos botones, uno para reordenar (<ion-reorder></ion-reorder>) y otro para borrar (<ion-item-option></ion-item-option>):

<ion-item [href]='item.url'>
  <ion-thumbnail slot="start"><img [src]="item.img" /></ion-thumbnail>{{item.name}}
  <ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item-options side="start">
  <ion-item-option color="danger" (click)="delete(i)">
    <ion-icon slot="icon-only" name="trash"></ion-icon>
  </ion-item-option>
</ion-item-options>

Mostrando todos los elementos

Vamos a hacer uso del potencial de Angular para mostrar la lista completa de lugares:

<ion-reorder-group [disabled]="!reorder" (ionItemReorder)="move($event.detail)">
  <ion-item-sliding *ngFor="let item of list; let i=index">
    ...
  </ion-item-sliding>
</ion-reorder-group>

En primer lugar utilizaremos la expresión [disabled]="!reorder" para activar o desactivar la opción de reordenar los elementos. Mediante los corchetes enlazamos el valor del atributo reorder de TypeScript para poder acceder a su valor directamente. El evento (ionItemReorder) nos indicará que se ha cambiado de sitio algún elemento, y por lo tanto ejecutaremos el método move(), cuya funcionalidad veremos más adelante.

Por último, sólo necesitamos realizar un bucle utilizando la directiva ngFor, que además nos proporcionará cada elemento item del array que representa la lista, así como el índice i de cada uno de ellos.

El fichero «home.page.html» completo

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Places!</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="reorder=!reorder">
        <ion-icon slot="icon-only" name="reorder"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>       
</ion-header>
<ion-content>
  <ion-list #myList lines="full">
    <ion-item color="light">
      <ion-input placeholder="Enter description" [(ngModel)]="text"></ion-input>
    </ion-item>
    <ion-item color="light" *ngIf="text.length">
      <input type="file" accept="image/*" (change)="add($event)" />
      <ion-icon slot="end" name="camera" (click)="add()"></ion-icon>
    </ion-item>    
    <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="move($event.detail)">
      <ion-item-sliding *ngFor="let item of list; let i=index">
        <ion-item [href]='item.url'>
          <ion-thumbnail slot="start"><img [src]="item.img" /></ion-thumbnail>{{item.name}}
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option color="danger" (click)="delete(i)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-reorder-group>
  </ion-list>
</ion-content>

Código TypeScript

Los atributos

En este ejercicio sólo necesitamos cuatro campos para guardar todos los datos necesarios:

@ViewChild('myList') listRef: List;
reorder: boolean;
list: any;
text: string;

El propósito de cada uno de ellos es el siguiente:

  • listRef: Referencia a la lista de html para poder cerrar todos los elementos antes de borrarlos.
  • reorder: Su valor (falso o verdadero) indicará si se encuentra habilitada o no la funcionalidad de reordenar.
  • list: Array que contendrá todos los lugares.
  • text: Descripción del nuevo lugar que queremos registrar.

Los métodos

  • constructor: Recuperará la lista guardada para que se muestre al iniciar la aplicación.
  • add: Añadirá un nuevo lugar a la lista de lugares.
  • save: Guardará en localStorage el listado de lugares para que no se pierda al cerrar la aplicación o recargar el contenido del navegador.
  • delete: Borrará un elemento de la lista.
  • move: Moverá un elemento de la lista a otra posición.

Obteniendo la ubicación

Para conocer la ubicación desde la que vamos a registrar un nuevo lugar, utilizaremos la funcionalidad de geolocalización de HTML, de forma que consigamos que el código funcione perfectamente tanto en el navegador, como en la app una vez compilada (más información aquí):

navigator.geolocation.getCurrentPosition(pos => {
  let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;
  ...
});

Además, crear un enlace a Google Maps conociendo la ubicación resulta muy sencillo. En nuestro caso especificamos un zoom razonable (z=15), el tipo de mapa satélite (t=k), y la latitud y la longitud (q=…). Se puede obtener más información en la página oficial de Google, o también por ejemplo aquí.

Indicador de ejecución en proceso

Mientras se obtiene la ubicación y se procesa la imagen, resulta conveniente bloquear la aplicación mediante algún indicador para informar al usuario que todavía no se ha completado la acción. Para ello mostraremos un indicador en pantalla utilizando la funcionalidad que nos proporciona IONIC (más información aquí):

async add(event) {
  let loading = await this.loadingController.create();
  loading.present();
  ...
  loading.dismiss();
}

Obteniendo la imagen

Utilizando simple código HTML y JavaScript, podemos obtener la imagen seleccionada en formato base 64, de forma que la podemos guardar como si se tratara de cualquier otra cadena de texto (más información aquí, o aquí):

...
<input type="file" (change)="add($event)" />
...
<img [src]="item.img" />
...
async add(event) {
  let reader = new FileReader();
  reader.onload = (data:any) => {
    item.img = data.target.result;
    ...
  }
  reader.readAsDataURL(event.target.files[0]);
}

Además, añadiremos la funcionalidad necesaria para abrir la cámara cuando ejecutemos la aplicación en nuestros dispositivos móviles (más información en la documentación de IONIC y en Cordova):

...
const options:CameraOptions = {targetWidth:100,destinationType:this.camera.DestinationType.DATA_URL};
this.camera.getPicture(options).then(data => {
  this.list.unshift({name:this.text,img:"data:image/jpeg;base64,"+data,url:url});
  this.save();         
});
...

El fichero «home.page.ts» completo

import { Component, ViewChild } from '@angular/core';
import { List, LoadingController } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  @ViewChild('myList') listRef: List;
  reorder: boolean;
  list: any;
  text: string;

  constructor(public loadingController:LoadingController,private camera:Camera) {
    this.text = "";
    this.list = localStorage.getItem('places-list');
    if (this.list) this.list = JSON.parse(this.list);
    else this.list = [];
  }

  async add(event?) {
    let loading = await this.loadingController.create({duration:15000});
    loading.present();

    navigator.geolocation.getCurrentPosition(pos => {
      let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;

      if (event) {
        let reader = new FileReader();
        reader.onload = (data:any) => {
          this.list.unshift({name:this.text,img:data.target.result,url:url});
          this.save();
          loading.dismiss();
        }
        reader.readAsDataURL(event.target.files[0]);
      }
      else {
        loading.dismiss();
        const options:CameraOptions = {targetWidth:100,destinationType:this.camera.DestinationType.DATA_URL};
        this.camera.getPicture(options).then(data => {
          this.list.unshift({name:this.text,img:"data:image/jpeg;base64,"+data,url:url});
          this.save();         
        });
      }
    });
  }

  save() {
    localStorage.setItem('places-list', JSON.stringify(this.list));
    this.text = "";
  }

  delete(item) {
    this.listRef.closeSlidingItems();
    this.list.splice(item, 1);
    this.save();
  }

  move(indexes) {
    let item = this.list[indexes.from];
    this.list.splice(indexes.from, 1);
    this.list.splice(indexes.to, 0, item);
    this.save();
  }
}

Icono y pantalla de bienvenida

Si queremos cambiar el icono o la pantalla de bienvenida, bastará con actualizar los archivos icon.png y splash.png respectivamente, colocándolos en la carpeta resources de nuestro proyecto (sobrescribiendo los que allí estuvieran, ya que normalmente IONIC nos habrá proporcionado unos por defecto). Después sólo debemos ejecutar el comando correspondiente para que ionic genere o actualice todos los archivos necesarios:

ionic cordova resources

Compilando la aplicación

Plugins de geolocalización y cámara

Para que la aplicación tenga los permisos correctos, y podamos utilizar la funcionalidad nativa para conocer la ubicación, añadiremos el plugin correspondiente (más información aquí):

ionic cordova plugin add cordova-plugin-geolocation --save

Además, para utilizar la cámara también echaremos mano de otro plugin, esta vez utilizando la API nativa que nos proporciona IONIC, ya que sólo podemos acceder a dicha funcionalidad en nuestros dispositivos móviles (más información aquí):

ionic cordova plugin add cordova-plugin-camera --save
npm install --save @ionic-native/camera@beta

Debemos recordar que toda la funcionalidad de la aplicación se encontrará disponible tanto en el navegador como en la app, exceptuando la cámara, ya que es específica del dispositivo, y no estará operativa en el navegador.

También será necesario modificar el archivo app.module.ts para poder acceder a la API de la cámara:

...
import { Camera } from '@ionic-native/camera/ngx';
...
@NgModule({
  ...
  providers: [
    ...
    Camera,
    ...
  ],
  ...
})
export class AppModule {}

El archivo «app.module.ts» completo

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Camera } from '@ionic-native/camera/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Generando el archivo APK

Para instalar la aplicación en nuestros dispositivos móviles, tenemos que compilar el código fuente:

ionic cordova build android --prod

O también lo podemos ejecutar directamente  en el móvil que tengamos conectado a nuestro ordenador:

ionic cordova run android --prod

El resultado

Puedes hacer clic aquí para probar la aplicación propuesta. Se puede observar que el mismo código de la app generada también puede funcionar perfectamente en el navegador como una página web.

Menú lateral con opción de compartir

El objetivo

En esta ocasión añadiremos al ejercicio anterior la opción de compartir, de forma que desde nuestra aplicación podamos enviar la lista de tareas mediante un mensaje de WhatsApp, un correo electrónico, un SMS, etc.

Además, añadiremos el código necesario para disponer de un menú lateral donde podremos añadir más opciones, y donde sugerimos además colocar la opción de borrar la lista de tareas, para que no esté tan accesible desde la pantalla principal:

El menú lateral

Primero añadiremos en la barra superior de la pantalla principal de nuestra aplicación un botón para desplegar el menú lateral:

<ion-header>
  ...
  <ion-menu-button></ion-menu-button>
  ...    
</ion-header>

Como podemos leer en la documentación de IONIC, el elemento <ion-menu-button></ion-menu-button> se encarga de todo, ya que crea automáticamente el icono del botón y añade la funcionalidad necesaria para desplegar el menú en la página actual.

Sólo nos falta añadir el código necesario con el menú lateral, que tendrá su propio encabezado y una lista con las opciones que deseemos. En nuestro caso pondremos la opción de reordenar, de compartir y de borrado de todos los elementos de la lista seleccionada. Además, añadiremos también un botón para volver a ocultar el menú:

<ion-menu>
  <ion-header>
    ...
    <ion-menu-button></ion-menu-button>
    ...
  </ion-header>
  <ion-content>
    <ion-menu-toggle>
      <ion-list>
        <ion-item-divider><ion-label>Reorder and Share</ion-label></ion-item-divider>   
        <ion-item (click)="toggleReorder()">
          <span *ngIf="reorder">Disable reorder</span>
          <span *ngIf="!reorder">Enable reorder</span>
          <ion-icon slot="end" name="reorder"></ion-icon>
        </ion-item>
        <ion-item (click)="share()">
          Share<ion-icon slot="end" name="share"></ion-icon>
        </ion-item>
        ...
      </ion-list>
    </ion-menu-toggle>
  </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

Observaremos que el elemento <ion-menu></ion-menu> también se encarga de todo. Por defecto creará un menú que aparezca desde la izquierda de la pantalla actual, tal como se especifica en la documentación de IONIC. Se podrá ocultar pulsando de nuevo un botón de menú, o con un gesto swipe hacia la izquierda, o incluso pulsando fuera del menú. Además, utilizaremos el elemento <ion-menu-toggle></ion-menu-toggle> para conseguir que al pulsar en cualquier opción, el menú también se cierre automáticamente.

Aprovechando además el potencial que nos proporciona Angular con la directiva ngIf (más detalles aquí), haremos que el texto de la opción de reordenar cambie en función de si se encuentra activada o no, utilizando el atributo reorder :

... 
<span *ngIf="reorder">Disable reorder</span>
<span *ngIf="!reorder">Enable reorder</span>
...

El fichero «home.page.html» completo

<ion-menu>
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>Menu</ion-title>
      <ion-buttons slot="primary">
          <ion-menu-button></ion-menu-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-menu-toggle>
      <ion-list lines="full">
        <ion-item-divider><ion-label>Reorder and Share</ion-label></ion-item-divider>   
        <ion-item (click)="toggleReorder()">
          <ion-icon slot="end" name="reorder"></ion-icon>
          <span *ngIf="reorder">Disable reorder</span>
          <span *ngIf="!reorder">Enable reorder</span>
        </ion-item>
        <ion-item (click)="share()">
          <ion-icon slot="end" name="share"></ion-icon>Share
        </ion-item>
        <ion-item-divider><ion-label>Delete</ion-label></ion-item-divider>
        <ion-item (click)="deleteItem()">
          <ion-icon slot="end" name="trash" color="danger"></ion-icon>Delete all
        </ion-item>
      </ion-list>
    </ion-menu-toggle>
  </ion-content> 
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>ToDo!</ion-title>
    <ion-buttons slot="primary">
      <ion-menu-button></ion-menu-button>
      <ion-button [routerLink]="['/AddEditItem', { tab:tabIndex, item:-1 }]"><ion-icon slot="icon-only" name="add"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>       
</ion-header>
<ion-content>
  <ion-tabs #myTabs color="primary">
    <ion-tab *ngFor="let tab of tabs; let i=index" [label]="tab.label" [icon]="tab.icon" (ionSelect)="setTab(i)">
      <ion-list #myList lines="full">
        <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="moveItem($event.detail)">
          <ion-item-sliding *ngFor="let item of tabs[i].list; let j=index">
            <ion-item [routerLink]="['/AddEditItem', { tab:i, item:j }]">
              <ion-label text-wrap>
                <h2>{{item.task}}</h2>
                <p>{{item.date}}</p>
              </ion-label>
              <ion-icon slot="end" [name]="item.icon"></ion-icon>
              <ion-reorder slot="end"></ion-reorder>
            </ion-item>
            <ion-item-options side="start">
              <ion-item-option color="danger" (click)="deleteItem(j)">
                <ion-icon slot="icon-only" name="trash"></ion-icon>
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>
        </ion-reorder-group>
      </ion-list>
    </ion-tab>
  </ion-tabs>
</ion-content>

La opción de compartir

Utilizaremos la funcionalidad nativa de nuestros dispositivos móviles para poder enviar la lista de tareas a alguno de nuestros contactos. Para añadir el plugin necesario para acceder a dicha funcionalidad, nos colocaremos dentro de la carpeta de nuestro proyecto, y seguiremos los pasos indicados en la documentación de IONIC:

cd tareas
ionic cordova plugin add cordova-plugin-x-socialsharing
npm install --save @ionic-native/social-sharing@beta

Respecto a las modificaciones en el código fuente, en primer lugar deberemos añadir el import y la clase SocialSharing al array providers del archivo app.module.ts, tal como se indica en la documentación de IONIC:

...
import { SocialSharing } from '@ionic-native/social-sharing/ngx';

@NgModule({
  ...
  providers: [
    ...
    SocialSharing,
    ...
  ],
  ...
})
...

A continuación modificaremos el código fuente del archivo home.page.ts para añadir el método share que creará la cadena de texto con todas las tareas, y se la proporcionará al plugin para que pueda ser compartida:

import { SocialSharing } from '@ionic-native/social-sharing/ngx';
...
export class HomePage {
  ...
  constructor(private listService: ListService,
              private alertController: AlertController,
              private socialSharing: SocialSharing){
    ...
  }
  ...
  share() {
    let list:string = this.tabs[this.tabIndex].label + ":\n";
    this.tabs[this.tabIndex].list.forEach((task, index) => {
      list += (index+1) + ". " + task.task + " - " + task.date + "\n";
    });
    this.socialSharing.share(list);
  }
}

En resumen, en este archivo debemos realizar tres modificaciones. La primera de ellas es añadir el import:

import { SocialSharing } from '@ionic-native/social-sharing/ngx';

La segunda, modificar el constructor para recibir el código necesario de la clase SocialSharing:

constructor(private listService: ListService,
            private alertController: AlertController,
            private socialSharing: SocialSharing){
  ...
}

Y por último, crear el método share() cuya funcionalidad será obtener en una única cadena todas las tareas una detrás de otra, separadas por saltos de línea, y llamar a la función share del plugin para mostrar el menú de compartir de nuestros móviles:

share() {
  let list:string = this.tabs[this.tabIndex].label + ":\n";
  this.tabs[this.tabIndex].list.forEach((task, index) => {
    list += (index+1) + ". " + task.task + " - " + task.date + "\n";
  });
  this.socialSharing.share(list);
}

El archivo «app.module.ts» completo

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    SocialSharing,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

El archivo «home.page.ts» completo

import { Component, ViewChild } from '@angular/core';
import { Tabs, List, AlertController } from '@ionic/angular';
import { ListService } from '../list.service';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  @ViewChild('myTabs') tabRef: Tabs;
  @ViewChild('myList') listRef: List;

  tabs: any;
  tabIndex: number;
  reorder: boolean;

  constructor(private listService: ListService,
              private alertController: AlertController,
              private socialSharing: SocialSharing){
    this.tabs = [
      {label: 'School', icon: 'school', list: []},
      {label: 'Home', icon: 'home', list: []}
    ];
    this.tabs.forEach((tab, index) => {
      tab.list = this.listService.getList(index);
    });
    this.tabIndex = 0;
    this.reorder = false;
  }

  ionViewDidEnter() {
    this.tabRef.select(this.tabIndex);
  }

  toggleReorder() {
    this.reorder = !this.reorder;
  }

  setTab(tabIndex) {
    this.tabIndex = tabIndex;
  } 

  async deleteItem(item?) {
    const alert = await this.alertController.create({
      header: item === undefined ? 'Delete all' : 'Delete item',
      message: 'Are you sure?',
      buttons: [
        {
          text: 'OK',
          handler: () => {
            this.listRef.closeSlidingItems();            
            if (item === undefined) {
              this.listService.deleteList(this.tabIndex);
            }
            else {
              this.listService.deleteItem(this.tabIndex, item);              
            }
          }
        },       
        {
          text: 'CANCEL',
          role: 'cancel'
        }
      ]
    });
    await alert.present();
  }

  moveItem(indexes) {
    this.listService.moveItem(this.tabIndex, indexes.from, indexes.to);
  }

  share() {
    let list:string = this.tabs[this.tabIndex].label + ":\n";
    this.tabs[this.tabIndex].list.forEach((task, index) => {
      list += (index+1) + ". " + task.task + " - " + task.date + "\n";
    });
    this.socialSharing.share(list);
  }
  
}

Compilando la aplicación con un solo comando

Debemos recordar que para probar la aplicación en nuestros dispositivos móviles, tenemos que compilar el código fuente. En este ejercicio vamos a utilizar sólo el cliente de IONIC, que nos permite generar el fichero APK en un único comando (más detalles aquí):

ionic cordova build android --prod

O también lo podemos ejecutar directamente  en el móvil que tengamos conectado a nuestro ordenador mediante el siguiente comando (más detalles aquí):

ionic cordova run android --prod

El resultado

Puedes hacer clic aquí para observar el aspecto final que tendrá la aplicación de la lista de tareas.

Lista de tareas con IONIC 4+Angular+Cordova

El objetivo: IONIC + Angular

En los ejercicios que hemos desarrollado hasta ahora sólo hemos utilizado IONIC de manera independiente, sin echar mano de ningún otro framework adicional, ya que hemos interactuado con los nuevos elementos HTML utilizando código JavaScript.

Para aplicaciones sencillas, puede ser una opción completamente válida y muy recomendable, dado el bajo nivel de requerimientos. Sólo necesitamos conocimientos básicos de desarrollo web, y con una simple referencia desde el código HTML, ya tenemos a nuestro alcance todo el potencial ofrecido por IONIC 4.

Sin embargo, si pretendemos desarrollar aplicaciones más complejas, resulta muy recomendable usar la segunda posibilidad que nos ofrece IONIC 4, al permitirnos combinar unos resultados visuales muy buenos, con un estilo de programación muy estructurado, y con amplias posibilidades dentro del desarrollo web.

En este ejercicio vamos a dar un paso adelante, y observaremos el potencial del que disponemos al usar IONIC con un framework tan utilizado y conocido como Angular. Desarrollaremos la misma aplicación que en el ejercicio anterior, pero veremos que el código fuente estará mucho mejor estructurado, y nos ofrecerá muchas más posibilidades que el simple código JavaScript.

Además, al tener la suerte de poder utilizar IONIC 4, disponemos de toda la documentación por duplicado para que podamos escoger la opción que más nos interese. En las versiones anteriores, IONIC se encontraba empaquetado con Angular, con lo que sólo teníamos una alternativa. Ahora mismo tenemos a nuestro alcance las mismas facilidades, tanto si escogemos desarrollar nuestra app utilizando HTML+JavaScript o Angular. Además, sea cual sea la opción por la que nos declinemos, IONIC nos proporciona la funcionalidad y la documentación necesaria para cada uno de sus componentes en ambos casos:

Como opinión personal, me gustaría decir que una vez se aprende Angular, resulta difícil desprenderse de él, ya que se pueden desarrollar aplicaciones más complejas y mucho más estables, con un código fuente más legible y mucho más fácil de mantener y actualizar.

La funcionalidad de la aplicación

La funcionalidad a implementar será la misma que en el ejercicio anterior, aunque en esta ocasión vamos a estructurar mejor el código y dividiremos la aplicación en dos pantallas.

Vamos a enumerar de nuevo los aspectos principales de la aplicación, y observaremos que podemos obtener el mismo resultado desarrollando la aplicación con Angular.

La pantalla principal

  • Gestionar varias listas de tareas independientes.
  • Borrar de golpe todas las tareas de una lista.
  • Borrar una sola tarea de una lista determinada mediante un botón oculto que se visualizará al deslizar hacia la derecha la tarea a borrar.
  • Pedir confirmación antes de borrar cualquier tarea.
  • Permitir ordenar las tareas arrastrando cualquier elemento a una nueva posición.

La pantalla de detalles

  • Añadir tareas indicando la fecha, la descripción de la tarea, y un icono identificativo de la prioridad.
  • Visualizar y editar los detalles de cada tarea haciendo clic sobre el elemento correspondiente de la lista.

Primeros pasos

Requisitos

La mayoría de las aplicaciones de IONIC se crean y desarrollan principalmente utilizando la herramienta de la línea de comandos. A continuación enumeraremos los pasos necesarios para instalar todo el software necesario en nuestros ordenadores para poder desarrollar y compilar desde la consola aplicaciones de IONIC utilizando Angular.

Puesto que pretendemos compilar la aplicación para utilizarla en nuestros dispositivos móviles, tendremos que instalar como mínimo las herramientas de consola de Android (sdk-tools) o el paquete completo con Android Studio, que se pueden descargar desde aquí.

En segundo lugar, deberemos instalar Node.js (la versión 8, tal como se indica en la web, recomendada para la mayoría de usuarios). Podremos comprobar si se ha instalado correctamente de la siguiente forma:

node --version
npm --version

A continuación deberemos instalar cordova y el cliente de IONIC, de la siguiente forma:

npm install -g cordova ionic

La opción  -g significa que se va a instalar de manera global en nuestros equipos, y por lo tanto necesitaremos permisos de administrador. En el caso de utilizar un sistema operativo Windows es recomendable abrir un terminal en modo administrador. Para sistemas operativos Mac/Linux, el comando se deberá ejecutar con sudo.

Código base de la aplicación

Para comenzar a desarrollar nuestra aplicación deberemos partir de un código base generado automáticamente por IONIC. Bastará con ejecutar el siguiente comando para generar los ficheros necesarios:

ionic start tareas blank --type=angular --cordova --no-git --no-link

Al ejecutar el comando, IONIC nos informará del proceso con algún aviso y  si todo va bien veremos algo similar a esto:

[WARN] Error: Could not determine project type (project config: ./ionic.config.json).
       
       - For ionic/angular 4 projects, make sure @ionic/angular is listed as a dependency in package.json.
       - For Ionic Angular 3 projects, make sure ionic-angular is listed as a dependency in package.json.
       - For Ionic 1 projects, make sure ionic is listed as a dependency in bower.json.
       
       Alternatively, set type attribute in ionic.config.json to one of: angular, ionic-angular, ionic1, custom.
       
       If the Ionic CLI does not know what type of project this is, ionic build, ionic serve, and other commands may not 
       work. You can use the custom project type if that's okay.

✔ Preparing directory ./tareas - done!
✔ Downloading and extracting blank starter - done!
> ionic integrations enable cordova --quiet
[INFO] Downloading integration cordova
[INFO] Copying integrations files to project
[OK] Integration cordova added!
...

Al finalizar el proceso, se habrá creado un directorio con el nombre tareas, que constituye el directorio raíz de nuestro proyecto, donde tendremos todo el código necesario para continuar con el desarrollo de nuestra aplicación. Para realizar los siguientes pasos deberemos acceder primero a dicha carpeta:

cd tareas

Como todavía no disponemos de la versión definitiva de IONIC, vamos a instalar la versión beta más estable hasta el momento:

npm install @ionic/[email protected]

Y por último, puesto que la aplicación básica que acabamos de crear sólo dispone de una pantalla principal, procederemos además a añadir una página adicional, y un fichero auxiliar (servicio) donde ubicaremos la funcionalidad básica para gestionar las listas y sus elementos:

ionic generate page AddEditItem
ionic generate service list

Y a partir de ahora ya podemos comenzar a añadir el código específico de nuestra aplicación. Aunque la funcionalidad sea la misma, al utilizar Angular, el código fuente sí tendrá variaciones, que como vamos a observar a continuación, nos permitirán generar un código mejor estructurado y más legible que el de una aplicación del mismo tamaño desarrollada simplemente con JavaScript.

Si hemos ejecutado correctamente los comandos anteriores, IONIC ya nos habrá creado todos los ficheros que vamos a utilizar en este ejercicio:

  1. src/app/list.service.ts: Funciones auxiliares.
  2. src/app/home/home.page.html: Código HTML de la pantalla principal.
  3. src/app/home/home.page.ts: Código TypeScript de la pantalla principal.
  4. src/app/add-edit-item/add-edit-item.page.html: Código HTML de la pantalla con los detalles de las tareas.
  5. src/app/add-edit-item/add-edit-item.page.ts: Código TypeScript de la pantalla con los detalles de las tareas.

Probando la aplicación en el navegador

Una de las primeras ventajas con las que nos encontramos es que la misma herramienta de consola de IONIC se puede utilizar como servidor web, con lo que nos permitirá  probar nuestra aplicación en el navegador al mismo tiempo que se actualiza automáticamente después de realizar cualquier cambio en el código fuente. Bastará con ejecutar el siguiente comando desde la carpeta raíz del proyecto donde se encuentra nuestra aplicación, dejando el terminal abierto:

ionic serve

Si todo ha ido bien, se compilará la aplicación y deberíamos visualizar en el navegador algo del siguiente estilo:

(bastará con pulsar Ctrl+C en el terminal para finalizar la ejecución del comando)

Funciones auxiliares

En el fichero list.service.ts desarrollaremos el código de una clase que contenga un array de listas de tareas y las funciones básicas para acceder a las mismas y a sus elementos:

  1. getList(index): Nos devolverá la lista completa ubicada en la pestaña index (la primera pestaña vendrá indicada por el valor cero).
  2. saveList(listIndex): Guardará la lista indicada de manera permanente utilizando localStorage.
  3. getItem(listIndex, itemIndex): Devolverá una tarea en particular.
  4. setItem(listIndex, item, itemIndex?): Añadirá una tarea a la lista indicada, o si se indica el índice de una tarea concreta, la actualizará en vez de añadirla.
  5. deleteItem(listIndex, itemIndex): Borrará la tarea indicada.
  6. deleteList(listIndex): Borrará una lista entera.
  7. moveItem(listIndex, from, to): Cambiará de orden una tarea, moviéndola de la posición from a la posición to.

El fichero «list.service.ts» completo

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ListService {

  list: any;

  constructor() { 
    this.list = [[]];
  }

  getList(index) {
    let list = localStorage.getItem('todo-list-'+index);
    if (list !== 'undefined' && list !== null) {
      this.list[index] = JSON.parse(list);
    }
    if (index>=this.list.length) this.list.push([]);
    return(this.list[index]);
  }

  saveList(listIndex) {
    localStorage.setItem('todo-list-'+listIndex, JSON.stringify(this.list[listIndex]));
  }

  getItem(listIndex, itemIndex) {
    return(this.list[listIndex][itemIndex]);
  }

  setItem(listIndex, item, itemIndex?) {
    if (itemIndex == undefined) this.list[listIndex].push(Object.assign({}, item));
    else this.list[listIndex][itemIndex] = Object.assign({}, item);
    this.saveList(listIndex);  
  }

  deleteItem(listIndex, itemIndex) {
    this.list[listIndex].splice(itemIndex,1);
    this.saveList(listIndex);
  }

  deleteList(listIndex) {
    this.list[listIndex].length = 0;
    this.saveList(listIndex);    
  }

  moveItem(listIndex, from, to) {
    let element = this.list[listIndex][from];
    this.list[listIndex].splice(from, 1);
    this.list[listIndex].splice(to, 0, element);
    this.saveList(listIndex);    
  }
}

La pantalla principal

En el fichero home.page.ts desarrollaremos el código de una clase que contendrá las variables y las funciones necesarias para manipular las listas y las tareas que se visualizan en la pantalla principal:

  1. constructor(ListService, AlertController): En el constructor inicializaremos el array de objetos con las propiedades que definen las diferentes listas (etiqueta, icono y lista de tareas). Si ya existen tareas al iniciar la aplicación, se leerán para que aparezcan en pantalla.
  2. ionViewDidEnter(): Al arrancar la aplicación, se activará la primera pestaña.
  3. toggleReorder(): Para activar o desactivar el botón de los elementos para reordenarlos.
  4. setTab(tabIndex): Activará la pestaña con el índice indicado.
  5. deleteItem(item?): Después de pedir confirmación, borrará todos los elementos de la lista de tareas activa, o sólo el elemento indicado, si éste se ha pasado por parámetro.
  6. moveItem(indexes): Recibe un objeto con la posición inicial de una tarea en la lista y la posición final donde se debe mover.

Para implementar la barra superior de la pantalla principal, ahora utilizaremos el siguiente código:

<ion-title>ToDo!</ion-title>
<ion-buttons slot="primary">
  <ion-button (click)="deleteItem()" color="danger"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-button>  
  <ion-button (click)="toggleReorder()"><ion-icon slot="icon-only" name="reorder"></ion-icon></ion-button>
  <ion-button [routerLink]="['/AddEditItem', { tab:tabIndex, item:-1 }]"><ion-icon slot="icon-only" name="add"></ion-icon></ion-button>
</ion-buttons>

Ya podemos observar algunas diferencias respecto al código JavaScript. En primer lugar, en vez de utilizar el atributo del evento onclick utilizaremos la sintaxis (click) (más detalles en la documentación de Angular). En segundo lugar, observamos una gran diferencia respecto a la opción de añadir un nuevo elemento. En este caso vamos a diseñar una nueva página (a la que accederemos con la url /AddEditItem) en vez de abrir un cuadro de diálogo modal. La sintaxis de Angular utilizada en este caso, nos permite pasar información ({ tab:tabIndex, item:-1 }) de una página a otra, de forma que sepamos a qué lista debemos añadir la nueva tarea, colocando además el índice del item a -1 para indicar que no queremos modificar ninguna tarea existente, sino añadir una nueva:

...
<ion-button [routerLink]="['/AddEditItem', { tab:tabIndex, item:-1 }]"><ion-icon slot="icon-only" name="add"></ion-icon></ion-button>
...

Para mostrar las diferentes pestañas (tabs) utilizaremos el siguiente código:

<ion-tab *ngFor="let tab of tabs; let i=index" [label]="tab.label" [icon]="tab.icon" (ionSelect)="setTab(i)">
  <ion-list lines="full">
    <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="moveItem($event.detail)">
      <ion-item-sliding *ngFor="let item of tabs[i].list; let j=index">
        <ion-item color="danger" [routerLink]="['/AddEditItem', { tab:i, item:j }]">
          <ion-label text-wrap>
            <h2>{{item.task}}</h2>
            <p>{{item.date}}</p>
          </ion-label>
          <ion-icon slot="end" [name]="item.icon"></ion-icon>
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option color="danger" (click)="deleteItem(j)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-reorder-group>
  </ion-list>
</ion-tab>

Respecto a la versión con JavaScript, la mayor diferencia la observamos en la siguiente línea:

<ion-tab *ngFor="let tab of tabs; let i=index" [label]="tab.label" [icon]="tab.icon" (ionSelect)="setTab(i)">

Utilizando Angular podemos insertar bucles dentro de nuestro código HTML que nos permitirán mostrar muy fácilmente varios elementos que tengan las mismas propiedades (consultar la documentación de angular para más detalles). De esta forma tendremos el mismo código independientemente de la cantidad de listas de tareas que vayamos a utilizar. Bastará con especificar en el constructor las etiquetas y los iconos de cada pestaña utilizando un simple array:

constructor(...) {
  this.tabs = [
    {label: 'School', icon: 'school', list: []},
    {label: 'Home', icon: 'home', list: []}
  ];
  ...
}

Para gestionar el botón de reordenar, también mejora mucho la sintaxis respecto a JavaScript:

<ion-reorder-group [disabled]="!reorder" (ionItemReorder)="moveItem($event.detail)">
...
</ion-reorder-group>

En este caso, la propiedad disabled se encierra entre corchetes para unirla a la variable reorder, y el evento ionItemReorder se encierra entre paréntesis.

El fichero «home.page.html» completo

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>ToDo!</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="deleteItem()" color="danger"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-button>  
      <ion-button (click)="toggleReorder()"><ion-icon slot="icon-only" name="reorder"></ion-icon></ion-button>
      <ion-button [routerLink]="['/AddEditItem', { tab:tabIndex, item:-1 }]"><ion-icon slot="icon-only" name="add"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>       
</ion-header>

<ion-content>
  <ion-tabs #myTabs color="primary">
    <ion-tab *ngFor="let tab of tabs; let i=index" [label]="tab.label" [icon]="tab.icon" (ionSelect)="setTab(i)">
      <ion-list #myList lines="full">
        <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="moveItem($event.detail)">
          <ion-item-sliding *ngFor="let item of tabs[i].list; let j=index">
            <ion-item [routerLink]="['/AddEditItem', { tab:i, item:j }]">
              <ion-label text-wrap>
                <h2>{{item.task}}</h2>
                <p>{{item.date}}</p>
              </ion-label>
              <ion-icon slot="end" [name]="item.icon"></ion-icon>
              <ion-reorder slot="end"></ion-reorder>
            </ion-item>
            <ion-item-options side="start">
              <ion-item-option color="danger" (click)="deleteItem(j)">
                <ion-icon slot="icon-only" name="trash"></ion-icon>
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>
        </ion-reorder-group>
      </ion-list>
    </ion-tab>
  </ion-tabs>
</ion-content>

El fichero «home.page.ts» completo

import { Component, ViewChild } from '@angular/core';
import { Tabs, List, AlertController } from '@ionic/angular';
import { ListService } from '../list.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  @ViewChild('myTabs') tabRef: Tabs;
  @ViewChild('myList') listRef: List;
  tabs: any;
  tabIndex: number;
  reorder: boolean;

  constructor(private listService: ListService,
              private alertController: AlertController){
    this.tabs = [
      {label: 'School', icon: 'school', list: []},
      {label: 'Home', icon: 'home', list: []}
    ];
    this.tabs.forEach((tab, index) => {
      tab.list = this.listService.getList(index);
    });
    this.tabIndex = 0;
    this.reorder = false;
  }

  ionViewDidEnter() {
    this.tabRef.select(this.tabIndex);
  }

  toggleReorder() {
    this.reorder = !this.reorder;
  }

  setTab(tabIndex) {
    this.tabIndex = tabIndex;
  } 

  async deleteItem(item?) {
    const alert = await this.alertController.create({
      header: item === undefined ? 'Delete all' : 'Delete item',
      message: 'Are you sure?',
      buttons: [
        {
          text: 'OK',
          handler: () => {
            this.listRef.closeSlidingItems();
            if (item === undefined) {
              this.listService.deleteList(this.tabIndex);
            }
            else {
              this.listService.deleteItem(this.tabIndex, item);              
            }
          }
        },       
        {
          text: 'CANCEL',
          role: 'cancel'
        }
      ]
    });

    await alert.present();
  }

  moveItem(indexes) {
    this.listService.moveItem(this.tabIndex, indexes.from, indexes.to);
  }

}

El formulario para añadir o editar tareas

En el fichero add-edit-item-page.ts desarrollaremos el código de una clase que contendrá las variables y las funciones necesarias para editar o crear una tarea:

  1. constructor(Router, ActivatedRoute, AlertController, ListService): En el constructor inicializaremos por un lado un array con los nombres de los iconos para indicar las prioridades de las tareas, y a continuación recogeremos los parámetros proporcionados desde la pantalla principal (índices de la lista y elemento a modificar, si es el caso).
  2. error(message): Para mostrar mensajes de error si por ejemplo no se ha especificado ningún texto en la descripción de la tarea y pulsamos el botón de confirmar.
  3. save(): Comprobará si desde la pantalla principal se ha elegido una tarea a modificar o si por el contrario se ha pulsado el botón de nueva tarea, y llamará a la función del servicio, volviendo a la pantalla principal a continuación.

La barra superior de esta pantalla sólo contendrá un título y dos botones, uno para cancelar y otro para confirmar. Ambos nos llevarán de nuevo a la pantalla principal, pero si pulsamos el botón de confirmar, previamente se grabarán los datos introducidos:

<ion-title>ToDo</ion-title>
<ion-buttons slot="primary">
    <ion-button color="danger" href="/home"><ion-icon slot="icon-only" name="close"></ion-icon></ion-button>
    <ion-button color="primary" (click)="save()"><ion-icon slot="icon-only" name="checkmark"></ion-icon></ion-button>
</ion-buttons>

El formulario para introducir los datos de una nueva tarea o modificar los de una existente es muy sencillo:

<ion-list>
  <ion-item>
    <ion-label position="floating">Select date</ion-label>
    <ion-datetime display-format="D MMM YYYY" max="2050-12-31" [(ngModel)]="item.date"></ion-datetime>      
  </ion-item>
  <ion-item>
    <ion-label position="floating">Enter task</ion-label>
    <ion-input [(ngModel)]="item.task"></ion-input>
  </ion-item>
</ion-list>
<ion-segment [(ngModel)]="item.icon">
  <ion-segment-button *ngFor="let button of buttons" [value]="button">
    <ion-icon [name]="button"></ion-icon>
  </ion-segment-button>
</ion-segment>

La novedad a destacar es el uso de [(ngModel)], una de las indudables ventajas que nos ofrece Angular, ya que nos permite enlazar un atributo de la clase con un campo del formulario, de forma que las modificaciones que se produzcan se queden reflejadas en los dos sentidos: el valor que tenga dicho atributo en el código TypeScript se mostrará en el código HTML, y cualquier modificación que hagamos en el formulario, también cambiará el valor del atributo de la clase. Se puede consultar la documentación oficial para más detalles.

Por otro lado, también estamos implementando un bucle para mostrar los posibles iconos indicativos de la prioridad de la tarea, lo que sin duda nos ahorra código HTML:

<ion-segment-button *ngFor="let button of buttons" [value]="button">
    <ion-icon [name]="button"></ion-icon>
</ion-segment-button>

Al igual que en el constructor de la página principal, bastará con especificar mediante un array todos los botones que deseemos visualizar:

constructor(...) { 
  this.buttons = ["radio-button-off", "radio-button-on", "snow", "flame"];
  ...
}

El fichero «add-edit-item.page.html» completo

<ion-header>
  <ion-toolbar>
    <ion-title>ToDo</ion-title>
    <ion-buttons slot="primary">
        <ion-button color="danger" href="/home"><ion-icon slot="icon-only" name="close"></ion-icon></ion-button>
        <ion-button color="primary" (click)="save()"><ion-icon slot="icon-only" name="checkmark"></ion-icon></ion-button>
    </ion-buttons>       
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating">Select date</ion-label>
      <ion-datetime display-format="D MMM YYYY" max="2050-12-31" [(ngModel)]="item.date"></ion-datetime>      
    </ion-item>
    <ion-item>
      <ion-label position="floating">Enter task</ion-label>
      <ion-input [(ngModel)]="item.task"></ion-input>
    </ion-item>
  </ion-list>
  <ion-segment [(ngModel)]="item.icon">
    <ion-segment-button *ngFor="let button of buttons" [value]="button">
      <ion-icon [name]="button"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-content>

El fichero «add-edit-item.page.ts» completo

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertController } from '@ionic/angular';
import { ListService } from '../list.service';

@Component({
  selector: 'app-add-edit-item',
  templateUrl: './add-edit-item.page.html',
  styleUrls: ['./add-edit-item.page.scss'],
})

export class AddEditItemPage {

  item: any;
  tabIndex: number;
  itemIndex: number;
  buttons: Array<string>;

  constructor(private router: Router,
              private route: ActivatedRoute,
              public alertController: AlertController,
              private ListService: ListService) { 
    this.buttons = ["radio-button-off", "radio-button-on", "snow", "flame"];

    this.tabIndex = +this.route.snapshot.paramMap.get('tab');
    this.itemIndex = +this.route.snapshot.paramMap.get('item'); 
    if (this.itemIndex >= 0) {
      this.item = Object.assign({}, this.ListService.getItem(this.tabIndex, this.itemIndex));
      this.item.date = new Date(this.item.date).toISOString();
    }
    else {
      this.item = { date: new Date().toISOString(), task: '', icon: 'radio-button-off'};
    } 
  }

  async error(message) {
    const alert = await this.alertController.create({
      message: message,
      buttons: ['OK']
    });

    await alert.present();
  }

  save() {
    if (!this.item.task.length) {
      this.error('The task cannot be empty');
    }
    else {
      this.item.date = document.querySelector('.datetime-text').innerHTML;
      if (this.itemIndex >= 0) {
        this.ListService.setItem(this.tabIndex, this.item, this.itemIndex);
      }
      else {
        this.ListService.setItem(this.tabIndex, this.item);      
      }
      this.router.navigate(['/home']);
    }
  }

}

Generando el archivo APK

Desde el directorio principal, bastará con ejecutar los siguiente comandos:

ionic cordova platform add android
ionic build --engine cordova --platform android --prod
cordova build android

Si la aplicación se ha compilado correctamente, al final nos indicará la ruta completa donde se encuentra el archivo APK.

Además, también podemos lanzar la ejecución de la aplicación directamente en el emulador (si lo tenemos instalado):

cordova emulate android

o en el móvil (si lo tenemos conectado a nuestro ordenador y se encuentra configurado correctamente):

cordova run android --device

Icono y pantalla de bienvenida

Otra de las ventajas de utilizar la consola de IONIC es la facilidad en el proceso de generar los archivos necesarios para utilizar un icono y una pantalla de bienvenida elegidos por nosotros.

Una vez dispongamos de los respectivos archivos icon.png y splash.png, bastará con colocarlos en la carpeta resources de nuestro proyecto (sobrescribiendo los que allí estuvieran, ya que normalmente IONIC nos habrá proporcionado unos por defecto). Después  un simple comando generará los archivos necesarios:

ionic cordova resources

De esta forma, el cliente de IONIC automáticamente enviará los dos ficheros a sus servidores, generará las imágenes con todas las resoluciones necesarias para utilizar la aplicación en cualquier dispositivo, y los escribirá en las rutas específicas. Si todo va bien, nos mostrará por pantalla algo del estilo:

Fernandos-MacBook-Pro:tareas fernandoruizrico$ ionic cordova resources
✔ Collecting resource configuration and source images - done!
✔ Filtering out image resources that do not need regeneration - done!
✔ Uploading source images to prepare for transformations: 2 / 2 complete - done!
✔ Generating platform resources: 18 / 18 complete - done!
✔ Modifying config.xml to add new image resources - done!

A continuación bastará con compilar la aplicación de nuevo para hacer efectivos los cambios:

ionic build --engine cordova --platform android --prod
cordova build android

El resultado

El resultado de esta aplicación supera obviamente al de la anterior, ya que ahora no sólo hemos mejorado a nivel de código, sino que hemos agilizado el proceso de desarrollo y actualización, obteniendo además una app que no requiere Internet, ya que ahora IONIC no se encuentra enlazado directamente como librería, sino empaquetado dentro de la propia aplicación.

Puedes hacer clic aquí para observar que el mismo código de la app generada también puede funcionar perfectamente en el navegador como una página web.