BASE DE DATOS probada y FUNCIONANDO. En este commit hemos creado la c…

…lase Transaction que lo usaremos como algo que se denomina MODELO y que nos sirve para interactuar con la base de datos. También hemos creado el método , save(), y lo hemos probado. En los comentarios dejo capturas de pantalla con los resultados.

src/app/app.component.ts

@@ -3,6 +3,14 @@ import { Platform } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
+// Aquí ahora vamos a importar la instancia recién creada
+// en el archivo , database.ts ,.
+// IMPORTANTE !! Aunque parezca que no importa, en los comentarios
+// del curso, Uriel advierte que, aunque a typeScript no le afecte,
+// hay otros actores(WebPack) en juego a los que sí les afecta el
+// ORDEN de los , import ,.
+import db from '../database';
+
 import { TabsPage } from '../pages/tabs/tabs';
 
 @Component({

src/database.ts

@@ -6,6 +6,16 @@ export class TransactionAppDB extends Dexie{
 // Esta clase nos sirve para crear nuestra base de datos
 // y estpecificar las tablas.
 
+  // IMPORTANTE !!. En el vídeo no lo dice a tiempo
+  // que hay que declarar esta línea así que te puedes
+  // encontrar con un error frustrante. No obstante, en los comentarios,
+  // Uriel nos da esta línea para declarar , transactions ,.
+  // Y un poco más adelante sí que explica esta línea
+  // de declaración de , transactions ,. El tipo de tabla
+  // será , ITransaction , y , number , ES EL TIPO DE DATO
+  // DE LA LLAVE PRIMARIA, en este caso el , id ,.
+  transactions: Dexie.Table<ITransaction, number>;
+
   constructor(){
     // hacemos super porque estamos override el constructor.
     super("MoneyMapAppDB")
@@ -17,6 +27,9 @@ export class TransactionAppDB extends Dexie{
     transactions: '++id,amount,lat,lng,title,imageUrl'
 
   });
+
+  // Aquí enlazamos el MODELO que es la clase construída abajo
+  this.transactions.mapToClass(Transaction);
  }
 }
 
@@ -42,3 +55,35 @@ export interface ITransaction{
   imageUrl: string; // para la imagen, más adelante se explica cómo.
 
 }
+
+// Esta clase será lo que se conoce como MODELO
+export class Transaction implements ITransaction{
+  id?: number;
+  amount: number;
+  lat: number;
+  lng: number;
+  title: string;
+  imageUrl: string;
+
+  constructor(amount:number, title:string, lat?:number, lng?:number,
+              id?:number, imageUrl?:string){
+    this.amount = amount;
+    this.title = title;
+
+    if(lat) this.lat = lat;
+    if(lng) this.lng = lng;
+    if(id) this.id = id;
+    if(imageUrl) this.imageUrl = imageUrl;
+  }
+
+  // Creamos este metodo , save() , que cogerá el modelo y
+  // lo grabará en la base de datos
+    save(){
+    return db.transactions.add(this);
+  }
+}
+
+// Ahora vamos a exportar una instancia a la base de datos
+// que será recogida(importada) dentro del componente
+// principal , app.component.ts ,.
+export let db = new TransactionAppDB();

src/pages/transactions/transactions.ts

@@ -1,6 +1,14 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 
+// Importamos el MODELO
+import { Transaction } from '../../database';
+// Todas las acciones que queramos llevar a cabo
+// con la base de datos se deben hacer a través
+// del uso de este modelo
+// Es una buena práctica y evita errores. Así que es
+// obligatorio para ser productivo
+
 /**
  * Generated class for the TransactionsPage page.
  *
@@ -21,7 +29,17 @@ export class TransactionsPage {
   }
 
   ionViewDidLoad() {
-    console.log('ionViewDidLoad TransactionsPage');
+    // borramos el log que había aquí
+    // Y VAMOS A GENERAR UNA TRANSACCIÓN.
+    // Para ello creamos un nuevo objeto de la
+    // clase , Transaction, y para ello pego aquí el constructor:
+    // constructor(amount:number, title:string, lat?:number, lng?:numer,
+    //             id?:number, imageUrl?:string)
+    let transaction = new Transaction(20, "Primera transacción");
+    // Seguidamente cogemos el objeto recién creado y se lo pasamos
+    // por fin a indexDB.
+    transaction.save();
+
   }
 
 }