app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MisTabsPage } from '../pages/mis-tabs/mis-tabs';
//import { RegistroU } from '../pages/RegistroU/my-form';
import { HomePage } from  '../pages/home/home';
import { DbProvider } from '../providers/db/db';
// importamos nuestro provider también en app.component.ts y vamos a abrir la base de datos

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any= HomePage; //esta sera la primera pagina que se cargue


// crear la tabla en platform.ready para asegurarnos de que el plugin SQlite ya se ha cargado antes de utilizarlo:
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public db : DbProvider) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
  
  //ejecutamos la tabla para crear la tabla*
  
      this.db.openDb()
  .then(() => this.db.CreateTableSitios())
    
    });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';
import {GoogleMaps } from '@ionic-native/google-maps';
import { MyApp } from './app.component';


//import { HomePage } from '../pages/home/home'; este es el import del login




import { HomePage } from '../pages/home/home';
import { RegistroU } from '../pages/RegistroU/my-form';
import {MisTabsPage} from '../pages/mis-tabs/mis-tabs';
import { Inicio } from '../pages/inicio/inicio';
import { Lugares } from '../pages/lugares/lugares';
import { Perfil } from '../pages/perfil/perfil';
import { Favoritos } from '../pages/Favoritos/favoritos';
import { Menu }  from '../pages/Menu/menu';

import { DbProvider } from '../providers/db/db';
import { SQLite } from '@ionic-native/sqlite';
//import { ModalNuevoSitioPage } from '../pages/modal-nuevo-sitio/modal-nuevo-sitio';
import { Camera } from '@ionic-native/camera';


import{LaunchNavigator , LaunchNavigatorOptions} from '@ionic-native/launch-navigator';



@NgModule({
  declarations: [
    MyApp,
   HomePage,
     RegistroU,
    MisTabsPage,
      Inicio,
      Lugares,
      Perfil,
      Favoritos,
     // ModalNuevoSitioPage,
     
      Menu
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
       RegistroU,
      MisTabsPage,
      Inicio,
      Lugares,
      Perfil,
      Favoritos,
       // ModalNuevoSitioPage,
     
      Menu
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    GoogleMaps,
    Camera,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    DbProvider,
    SQLite,
    LaunchNavigator
  
    
  ]
})
export class AppModule {}

db.ts

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

import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

/*
  Generated class for the DbProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class DbProvider {

db : SQLiteObject = null;//creamos la variable mienbro db donde se guardará en manejador de base de datos
  constructor(public sqlite: SQLite) {//inyectamos la dependencia SQLite
    console.log('Hello DbProvider Provider');
  }


//abrimos la base de datos
  public openDb(){
      return this.sqlite.create({//crea una base de datos si no existe y abre la conexion
          name: 'data.db',
          location: 'default' // el campo location es obligatorio
      }) //si crea la base de datos
      .then((db: SQLiteObject) => { //db es de tipos sqlobject, le pasamos como parametro el manejador
       this.db =db;//asignamos el manejador 
     })
     .catch(error =>{
  console.error(error);
     });
  }


  public CreateTableSitios(){
    return this.db.executeSql("create table if not exists eventos( sc_id_evento INTEGER PRIMARY KEY AUTOINCREMENT, lat FLOAT, lng FLOAT, address TEXT, description TEXT, foto TEXT )",{})
 

 }



 public addSitio(sitio){//En la sql definimos el insert con los campos de la tabla que vamos a introducir 
    let sql = "INSERT INTO eventos (lat, lng,address, description,foto) values (?,?,?,?,?)";
  
    return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto]);
  }


    public getSitios(){
    let sql = "SELECT * FROM eventos";
    return this.db.executeSql(sql,{});
  }

}

home.html

<ion-content class="background" >

  <h1>SocialCity</h1>
  <ion-card >

    <ion-card-header>

      LOGIN
    </ion-card-header>

    <ion-card-content><!--aqui se contendran las etiquets y las cajas de texto para el usuario y contra-->

<form [formGroup]="formHome" (ngSubmit)="saveDatalogin()" novalidate>
<ion-list no-lines>

  <ion-item><!--dentro de ion-item siempre van bottones o textos adentro-->
<ion-icon name="person" item-left></ion-icon>
<ion-label stacked>Username</ion-label>
<ion-input formControlName="cta_u" type="text"></ion-input>
  </ion-item>


  <ion-item *ngIf="formHome.get('cta_u').errors && formHome.get('cta_u').dirty">
      <p color="danger" ion-text *ngIf="formHome.get('cta_u').hasError('required')">Campo Requerido</p>
        <p color="danger" ion-text *ngIf="formHome.get('cta_u').hasError('pattern')">Valor no valido</p>
    </ion-item>

<ion-item><!--dentro de ion-item siempre van bottones o textos adentro-->
<ion-icon name="eye" item-left></ion-icon>
<ion-label stacked>Password</ion-label>
<ion-input  formControlName="password" type="password"  ></ion-input>
  </ion-item>

<ion-item *ngIf="formHome.get('password').errors && formHome.get('password').dirty">
      <p color="danger" ion-text *ngIf="formHome.get('password').hasError('required')">Campo Requerido</p>
        <p color="danger" ion-text *ngIf="formHome.get('password').hasError('pattern')">Valor no valido</p>
    </ion-item>

  <ion-item>

    <p>Olvidaste tu contraeña?<a href="#"> Entrar aquí</a></p>
  </ion-item>

<ion-item>

    <button  (click)="goRegistro()" ion-button icon-Rigth outline> Registrate<ion-icon name="contact"></ion-icon>
      </button>
  </ion-item>
<!--propiedades botones: color="color", clear, block,small,large, outline, icon-only-->
  <button (click)="goInicio()" ion-button color="danger"  type="submit" [disabled]="!formHome.valid" block outline>LOGIN</button><!--block-outline hace que ocupe 80 de la pantalla-->

</ion-list>

<b>Entrar con</b>

<button  ion-button  color="primary" ion-left block><!--ion-left acomodamos el icono hacia la izquierda del botton-->
<ion-icon name="logo-facebook"></ion-icon>
<div>
  Entrar con facebook
</div>
</button>

<button   ion-button  color="danger" ion-left block><!--ion-left acomodamos el icono hacia la izquierda del botton-->
<ion-icon name="logo-google"></ion-icon>
<div>
  Entrar con Google
</div>

</button><!--cerramos el botton aqui para que los iconos queden dentro-->

</form>
    </ion-card-content>
  </ion-card>
 
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController ,ViewController} from 'ionic-angular';
import {FormBuilder,FormGroup, Validators } from '@angular/forms';

///importación de las librerías referentes a los plugin que instalamos
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { MisTabsPage } from '../mis-tabs/mis-tabs';
import { RegistroU } from '../RegistroU/my-form';
//import { DbProvider } from '../../providers/db/db';
import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent
} from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

 private formHome: FormGroup;

  constructor(public navCtrl: NavController,
    public geolocation: Geolocation,
    public googleMaps: GoogleMaps,
    private formBuilder :FormBuilder
   
   // private viewCtrl : ViewController
    ) {

 this.formHome = this.myform(); 
  }

private myform(){
/*
  let rg = {
  sc_cta_u : this.sc_cta_u,
 password :this.password


  }
  
  this.db.saveR(rg).then((res)=>{
this.cerrarModal();
 })*/
  return this.formBuilder.group({
  
  cta_u: ['',[Validators.required,Validators.pattern(/^[a-z0-9_-]{3,16}$/)]],
 
    password :['',[Validators.required,Validators.pattern(/^[a-z0-9_-]{6,18}$/)]]



  });


}//cierre funcion myform


saveDatalogin(){
  console.log(JSON.stringify(this.formHome.value));
}
 

 
  goInicio(){
    this.navCtrl.push(MisTabsPage);
  }

   goRegistro() {
    this.navCtrl.push(RegistroU);
  }
/*
  cerrarModal (){
  this.viewCtrl.dismiss();
}*/

}