Archivo de la etiqueta: libro ionic espa帽ol

Como crear componentes personalizados con Ionic

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En posts anteriores hemos aprendido a crear nuestras apps multiplataforma con Ionic.
Ionic nos ofrece un mont贸n de componentes ya creados para utilizar en nuestras apps y realmente nos permiten con poco esfuerzo crear una interfaz funcional para nuestras aplicaciones.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

Sin embargo hay momentos que puede interesarnos crear nuestros propios componentes personalizados.

Un componente es simplemente algo que podemos mostrar las veces que queramos en la pantalla, como si fuese una etiqueta html, solo que a su vez un componente puede estar formado por etiquetas html y otros componentes.

Para ver mejor como podemos crear nuestro propios componentes personalizados en Ionic vamos a crear un proyecto de prueba al que vamos a llamar miComponente:

ionic start miComponente blank

Una vez creado el proyecto si聽 entramos en home.ts veremos esto:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

  constructor(public navCtrl: NavController) {

  }

}

En Ionic todo son componentes, de hecho las p谩ginas de nuestra aplicaci贸n son componentes, si nos fijamos tiene un decorador @Component por lo que podemos ver que la propia pagina es un componente聽 que tiene el selector 鈥page-home鈥 y como plantilla utiliza el archivo home.html.

Vamos a crear un sencillo componente al que vamos a llamar saludar, para ello vamos a echar mano de ionic generator, nos situamos dentro la carpeta de聽 nuestro proyecto en la consola de comandos y tecleamos lo siguiente:

ionic g component saluda

Con esto se habr谩 creado una nueva carpeta llamada components y dentro una carpeta llamada saluda que al igual que las p谩ginas contiene un archivo .ts como controlador, un archivo .scss para los estilos y su plantilla .html.

Si observamos lo que contiene el archivo saluda.html vemos que simplemente muestra el contenido de la variable text dentro de un div:

<!-- Generated template for the SaludaComponent component -->
<div>
  {{text}}
</div>

Vemos que text est谩 definida en el controlador saluda.ts y contiene la famosa frase 鈥淗ello Word鈥

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

/**
聽* Generated class for the SaludaComponent component.
聽*
聽* See https://angular.io/api/core/Component for more info on Angular
聽* Components.
*/
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hello World';
  }

}

Como vemos el controlador de un componente es pr谩cticamente igual que el de una p谩gina.

Tenemos el decorador聽@Component聽donde se indica que su selector es ‘saluda‘ y la plantilla que utiliza es saluda.html.

Para poderlo utilizar tenemos que importar y declarar el componente en app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SaludaComponent } from '../components/saluda/saluda';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SaludaComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Para utilizarlo en la p谩gina home editamos el archivo home.html y a帽adimos la etiqueta con el componente que acabamos de crear:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <saluda></saluda>
</ion-content>

As铆 de f谩cil.

Si ejecutamos nuestra app de ejemplo con ionic serve -l veremos algo similar a esto:

 

A nuestro componente le podemos a帽adir tambi茅n atributos personalizados.
Por ejemplo podemos pasarle un atributo que se llame nombre de esta manera:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <saluda nombre="Eduardo"></saluda>
</ion-content>

Luego en el controlador definimos el par谩metro de entrada con el decorador Input de la siguiente manera:

import { Component, Input } from '@angular/core';

/**
聽* Generated class for the SaludaComponent component.
聽*
聽* See https://angular.io/api/core/Component for more info on Angular
聽* Components.
*/
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hello World';
  }

}

Para poder utilizar el decorador Input debemos importarlo primero.

Ahora podemos hacer que en lugar de saludar al mundo con “Hello Word” salude a la persona que recibamos en el par谩metro nombre:

import { Component, Input } from '@angular/core';

/**
聽* Generated class for the SaludaComponent component.
聽*
聽* See https://angular.io/api/core/Component for more info on Angular
聽* Components.
*/
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hola '+this.nombre;
  }

}

Bien, si como en el ejemplo hemos pasado “Eduardo” al par谩metro nombre cabr铆a esperar ver en pantalla “Hola Eduardo”, sin embargo comprobamos que muestra聽“Hola undefined”, a no ser que tus padres te hayan puesto de nombre undefined hay algo que no est谩 funcionando.

Eso eso es porque estamos accediendo a la variable this.nombre desde el constructor, y en el momento que se ejecuta el constructor aun no est谩n accesibles los par谩metros que recibimos en nuestro componente,聽para ello utilizamos ngOnInit:

/**
聽* Generated class for the SaludaComponent component.
聽*
聽* See https://angular.io/api/core/Component for more info on Angular
聽* Components.
聽*/
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

聽聽text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
  }


  ngOnInit(){
    this.text = 'Hola '+this.nombre;
  }


}

Ahora podemos comprobar que muestra el nombre que le hayamos pasado.

Tambi茅n podemos utilizar la la variable nombre directamente en la plantilla de nuestro componente de esta manera:

<!-- Generated template for the SaludaComponent component -->
<div>
  Hola {{ nombre }}
</div>

Por ultimo si en lugar de pasarle directamente el nombre al componente queremos utilizar una variable debemos poner el par谩metro entre corchetes , por ejemplo imaginemos que tenemos un array de usuarios聽 y queremos saludarles a todos, en home.ts definiriamos un array de usuarios:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

  usuarios: any = [
    { 
      nombre: 'Eduardo',
      edad: 41
    },
    { 
      nombre: 'Pedro',
      edad: 28
    },
    { 
      nombre: 'Francisco',
      edad: 34
    },
    { 
      nombre: 'Maria',
      edad: 43
    }
  ]

  constructor(public navCtrl: NavController) {

  }

}

Ahora en home.html podemos recorrer el array con *ngFor y mostrar nuestro componente saludo pas谩ndole la variable usuario.nombre:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <saluda  *ngFor="let usuario of usuarios" [nombre]="usuario.nombre"></saluda>
</ion-content>

Como podemos ver en este caso el par谩metro nombre va entre corchetes []聽聽ya que lo que le pasamos no es un texto literal sino una variable.

Si probamos este ejemplo veremos algo como esto:

Este ejemplo es muy sencillo y es solo para explicar como funcionan los componentes en Ionic, evidentemente no merece la pena crear un componente que solo contenga un div y un texto, pero podemos ampliar nuestro componente a帽adiendo una imagen o una ficha completa con los datos del usuario, o cualquier otro elemento que se nos ocurra.

Espero que estos sencillos ejemplos sirvan para comprender como crear componentes personalizados en Ionic.

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Como crear una app multi idioma con Ionic

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos, hoy vamos a aprender como crear una app multi idioma con Ionic.

Como siempre vamos a crear una app de ejemplo as铆 que desde consola creamos un nuevo proyecto al que vamos a llamar ejemploidioma:

ionic start ejemploidioma blank --cordova

Con –cordova le indicamos que incluya apache cordova para poder generar el c贸digo para android e ios.

Para crear un app multi idioma con Ionic vamos a instalar la librer铆a聽聽ngx-translate:

npm install npm install @ngx-translate/core @ngx-translate/http-loader --save

Ahora en聽app.module.ts聽tenemos que a帽adir los siguientes imports:

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http";

Justo debajo de los imports, antes de @NgModule a帽adimos el siguiente c贸digo:

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, "../assets/i18n/", ".json");
}

Por 煤ltimo declaramos dentro de imports lo que esta marcado en amarillo:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
      })
 
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

El c贸digo completo de聽app.module.ts聽quedar铆a de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http";

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, "../assets/i18n/", ".json");
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
      })
 
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Ahora vamos a editar聽app.component.ts聽 y a帽adimos el siguiente c贸digo:

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 { TranslateService } from '@ngx-translate/core';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private translateService: TranslateService) {
    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.
      this.translateService.setDefaultLang('es');
      this.translateService.use('es');

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Con this.translateService.setDefaultLang(‘es’);聽le idicamos que el idioma por defecto es el espa帽ol y con this.translateService.use(‘es’);聽hacemos que sea el idioma seleccionado.

Dentro de la carpeta聽src/assets聽vamos a crear una carpeta llamada聽i18n聽y dentro de esta situaremos los archivos con los literales en los diferentes idiomas, en este ejemplo vamos a usar ingl茅s y espa帽ol, por lo que vamos a crear dos archivos llamados en.json para ingl茅s y es.json para espa帽ol:

En en.json聽pondremos聽 lo siguiente:

{
  "HOLA": "Hi {{ value }}",
  "IDIOMA": "Language",
  "BIENVENIDO" : "Welcome"
}

 

Y en es.json:

{
  "HOLA": "Hola {{ value }}",
  "IDIOMA": "Idioma",
  "BIENVENIDO" : "Bienvenido"
}

 

Como puedes observar es un archivo en formato json donde la clave es lo que escribiremos en la vista y聽 el valor es lo que se mostrar谩 en funci贸n del idioma seleccionado.

Como puedes ver HOLA se traduce como “Hola {{ value }}”, donde value se sustituir谩 por el valor pasado, veremos un poco m谩s adelante como se utiliza.

Ya estamos preparados para traducir聽 nuestra app.

Vamos a modificar home.html聽y vamos a crear un ejemplo sencillo donde vamos a tener un elemento ion-card que simplemente nos da la Bienvenida y nos saluda y un selector para cambiar de idioma:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ejemplo Idioma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header text-center>
      {{ 'BIENVENIDO' | translate }}
    </ion-card-header>
      
    <ion-card-content>
      <p text-center>
        {{ 'HOLA' | translate:{value: 'Eduardo'} }} 
      </p>
    </ion-card-content>
  </ion-card>

  <ion-item>
    <ion-label>{{ 'IDIOMA' | translate }} </ion-label>
    <ion-select [(ngModel)]="idioma" (ionChange)="cambioIdioma($event)">
      <ion-option value="es">Espa帽ol</ion-option>
      <ion-option value="en">Ingl茅s</ion-option>
    </ion-select>
  </ion-item>
</ion-content>

Como vemos en la etiqueta ion-select le decimos que en el evento聽(ionChange) llame a la funci贸n cambioIdioma($event), $event contendr谩 la opci贸n seleccionada.

Para traducir las cadenas al idioma seleccionado utilizamos en pipe o barra vertical ‘|’聽seguido de la palabra translate聽que es filtro que se aplica.

Como coment茅 antes podemos pasarle un valor al filtro translate de la siguiente manera:

{{ ‘HOLA’ | translate:{value: ‘Eduardo’} }}

Con esto le estamos diciendo que traduzca la cadena HOLA y le pase al fintro el value ‘Eduardo’.

Al ir a buscar el valor en el archivo json sustituir谩 val煤e por ‘Eduardo’:

“HOLA”: “Hi {{ value }}”,

Esto puede servirnos de ayuda cuando queremos traducir cadenas mostrando un valor que dependiendo del idioma se debe mostrar en una posici贸n diferente de la cadena, por ejemplo la frase “Este es el coche de Eduardo” en ingl茅s ser铆a “this is Eduardo’s car”.

Por lo tanto en ingl茅s podr铆amos pasarle el nombre y traducirlo as铆:
“this is {{ value }}’s car”,

Mientras que en espa帽ol ser铆a
“Este es el coche de {{ value }}”

Bien, ahora solo nos queda definir la funci贸n聽cambioIdioma聽en el controlador home.ts,聽para poder cambiar de idioma necesitaremos importar TranslateService聽e inyectarlo en el constructor:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

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

  constructor(public navCtrl: NavController, private translateService: TranslateService) {

  }

  cambioIdioma(selectedValue){
    this.translateService.use(selectedValue);
  }

}

Con selectedValue es el idioma que hemos seleccionado en el select y con聽this.translateService.use(selectedValue)聽le estamos diciendo que utilice el idioma que le pasamos.

Ya podemos probar nuestro peque帽o ejemplo, ejecutando ionic serve -l聽desde consola veremos algo como esto en nuestro navegador:

Ejemplo de app multi idioma con ionic
Ejemplo de app multi idioma con ionic

Por 煤ltimo, como extra si desde el controlador necesitamos traducir una cadena podemos utilizar聽this.translateService.instant().

Por ejemplo si queremos mostrar un loading y que se muestra cargando en el idioma seleccionado, teniendo ya definido el literal cargando en los ficheros .json podemos hacer lo siguiente:
this.loading = this.loadingCtrl.create({
      content: this.translateService.instant('Cargando'),
      spinner: 'dots',
    });
Hay que tener e cuenta que聽 translate.instant es s铆ncrono, por lo que tenemos que estar seguros de que聽 los archivos lang聽 han sido cargados para obtener traducciones.
En su lugar tambi茅n se puede utilizar translate.get, que devuelve un elemento observable.
Para saber m谩s sobre聽ngx-translate podeis visitar su p谩gina oficial en http://www.ngx-translate.com/
Eso es todo por hoy, espero que te sea de utilidad.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Directiva para mostrar y ocultar men煤 al hacer scroll en Ionic

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

Hola a todos:

El post de hoy es por cortes铆a de Miguel Escribano.

Miguel ha realizado una app en ionic para consultar las noticias de men茅ame que est谩 realmente bien y que pod茅is encontrar en google play en el siguiente enlace:

https://play.google.com/store/apps/details?id=com.miguelescribano.meneame

Bi茅n, Miguel聽聽que ha querido colaborar aportando una directiva para mostrar u ocultar un men煤 o barra de herramientas al hacer scroll:

Una directiva es un tipo de componente pensado para cambiar el comportamiento de un elemento ya existente en el DOM. 聽A diferencia de un componente normal este no necesita de una plantilla sino que se incrustara en una existente para manipularla.

El objetivo aqu铆 es esconder una barra de navegaci贸n al hacer scroll hacia abajo y que aparezca cuando hacemos scroll hacia arriba.

En ionic el evento de scroll se produce en el content, por tanto dicha barra ha de encontrarse dentro de ion-content.

Vamos a crear un proyecto de prueba para mostrar como funciona esta directiva:

ionic start hideMenu blank

Vamos a editar home.ts聽y le vamos a a帽adir un array con los items que mostraremos en el listado, por ejemplo una lista de videojuegos:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

  items = [
    'Pokemon Yellow',
    'Super Metroid',
    'Mega Man X',
    'The Legend of Zelda',
    'Pac-Man',
    'Super Mario World',
    'Street Fighter II',
    'Half Life',
    'Final Fantasy VII',
    'Star Fox',
    'Tetris',
    'Donkey Kong III',
    'GoldenEye 007',
    'Doom',
    'Fallout',
    'GTA',
    'Halo',
    'Warcraft II'
  ];

  constructor(public navCtrl: NavController) {

  }

}

Ahora vamos a editar home.html y a帽adimos el siguiente c贸digo en amarillo en ion-content para generar la toolbar y los items de prueba:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content hide-menu>

      <ion-toolbar no-border-top class='show-header'>
          <ion-segment color='secondary' [(ngModel)]="section">
            <ion-segment-button value="portada">
              Portada
            </ion-segment-button>
            <ion-segment-button  value="nuevas" >
              Nuevas
            </ion-segment-button>
            <ion-segment-button  value="populares">
              Populares
            </ion-segment-button>
            <ion-segment-button  value="mas_visitadas">
              + Visitadas
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

    <ion-list>
      <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
        {{ item }}
      </button>
    </ion-list>
</ion-content>

Como pod茅is ver en la etiqueta ion-content hemos a帽adido hide-menu聽 que es el nombre de la directiva que vamos a crear.

Despu茅s hemos a帽adido una聽 ion-toolbar con ion-segment聽 y cuatro opciones que ser谩 la barra de men煤 que vamos a mostrar u ocultar.

Por ultimo mostramos un listado donde mostramos con *ngFor los items que hemos definido en el controlador.

V茅ase que de entrada la barra tiene la clase show-header. Incluiremos esta y hide-header en la listado.scss con la intenci贸n de hacerla aparecer y desaparecer respectivamente.

Tambi茅n necesitamos definir la posici贸n de聽ion-tollbar como fixed.

Suponiendo que nuestro header principal (ion-header) tiene la altura 56px por defecto incluiremos lo siguiente en listado.scss:

page-home {

    ion-toolbar {
        position:fixed;
    }

    .hide-header{
        top: 0px;
    }

    .show-header{
        top: 56px;
    }
   
 }

Ya solo queda crear la directiva, para ello vamos a utilizar ionic generator:

ionic g directive hide-menu

Al generar la directiva nos habr谩 creado una carpeta directives y dentro estar谩 la carpeta hide-menu con la directiva que acabamos de crear.

Necesitamos declarar la directiva en app.module.ts,聽por lo tanto lo editamos y a帽adimos lo siguiente:

import { BrowserModule } from '@angular/platform-browser';
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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HideMenuDirective } from '../directives/hide-menu/hide-menu';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    HideMenuDirective
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Ahora editamos el archivo hide-menu.ts聽de nuestra directivay vamos a importar聽e inyectar en el constructor ElementRef,聽 Renderer2, que necesitaremos para manipular los elementos de la vista:

import { Directive, ElementRef, Renderer2  } from '@angular/core';

/**
聽* Generated class for the HideMenuDirective directive.
聽*
聽* See https://angular.io/api/core/Directive for more info on Angular
聽* Directives.
聽*/
@Directive({
  selector: '[hide-menu]' // Attribute selector
})
export class HideMenuDirective {

  constructor(public element:ElementRef, public renderer:Renderer2) {
    console.log('Hello HideMenuDirective Directive');
  }

}

Vemos que en el decorador @Directive viene definido el selector que es el que tenemos que poner en el elemento de la vista al que queremos aplicar la directiva.

Ahora en la definici贸n de la directiva a la propiedad聽host聽le vamos a asignar el evento ionScroll聽y le indicamos que ejecute la funci贸n handleScroll que definiremos despu茅s. Host hace referencia al elemento donde estamos aplicando la directiva, en este caso se lo estamos asignando al elemento ion-content:

@Directive({
  selector: '[hide-menu]', // Selector de la directiva
  host: {
    '(ionScroll)': 'handleScroll($event)' // Captura el evento scroll (ionScroll) dentro de ion content y env铆a el evento a su manejador handleScroll
  }
})

Ahora necesitamos definir tres variables:

toolBarRef – Hace referencia a la toolbar que vamos a mostrar u ocultar.
storedScroll – Guardar谩 la posici贸n del scroll.
threshold – Contendr谩 la distancia que tenemos que mover el scroll para que se oculte la barra.
export class HideMenuDirective {


  private toolBarRef:any;

  private storedScroll: number = 0;
  private threshold: number = 10;


  constructor(public element:ElementRef,
              public renderer:Renderer2) {
  }

Una vez definidas las variables en ngOnInit 聽hacemos que toolBarRef聽 referencie al elemento del DOM que contiene la barra,聽聽ngOnInit聽se ejecuta una 煤nica vez al iniciar,聽 es parecido al constructor:

ngOnInit() {
    //Con esto conseguimos referenciar la barra de navegacion mediante su clase.
    this.toolBarRef = this.element.nativeElement.getElementsByClassName("toolbar")[0];
  }

Una vez hecho esto ya podemos definir la funci贸n handleScroll聽que como hemos indicado se ejecutar谩 al hacer scroll sobre el elemento ion-content al que hemos asignado la directiva:

handleScroll(event) {
    if (event.scrollTop - this.storedScroll > this.threshold) {
      //al hacer scroll down hace desaparecer la barra mediante clases
      this.renderer.addClass(this.toolBarRef,'hide-header');
      this.renderer.removeClass(this.toolBarRef,'show-header');
    } else if (event.scrollTop - this.storedScroll < 0) {
       //al hacer scroll up la hace aparecer de nuevo
      this.renderer.removeClass(this.toolBarRef,'hide-header');
    }
    //actualizmos la ultima posicion conocida del scroll proveniente del evento
    this.storedScroll = event.scrollTop;
  }

En esta funci贸n comprobamos si la posici贸n actual del scroll (event.scrollTop) menos la posici贸n anterior es mayor que el limite (threshold), si es as铆 es que estamos haciendo scroll hacia abajo por lo tanto con this.renderer.addClass le a帽adimos a la toolbar la clase hide-header que har谩 que se oculte la barra y con removeClass eliminamos la clase show-header que tenia.

En caso contrario significa que estamos haciendo scroll hacia arriba por lo tanto eliminamos la clase hide-header que oculta la barra, lo que har谩 que esta se vuelva a mostrar.

El c贸digo completo de la directiva quedar铆a as铆:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[hide-menu]', //selector de la directiva
  host: {
    '(ionScroll)': 'handleScroll($event)' //Captura el evento scroll (ionScroll) dentro de ion content y envia el evento a su manejador handleScroll
  }
})
export class HideMenuDirective {

  //Varaibles para referenciar la barra 
  private toolBarRef:any;

  //Variables para saber la direccion del scroll
  private storedScroll: number = 0;
  private threshold: number = 10;


  constructor(public element:ElementRef,
              public renderer:Renderer2) {
  }

  ngOnInit() {
    //Con esto conseguimos referenciar la barra de navegacion mediante su clase.
    this.toolBarRef = this.element.nativeElement.getElementsByClassName("toolbar")[0];

  }

  handleScroll(event) {
    if (event.scrollTop - this.storedScroll > this.threshold) {
      //al hacer scroll down hace desaparecer la barra mediante clases
      this.renderer.addClass(this.toolBarRef,'hide-header');
      this.renderer.removeClass(this.toolBarRef,'show-header');
    } else if (event.scrollTop - this.storedScroll < 0) {
       //al hacer scroll up la hace aparecer de nuevo
      this.renderer.removeClass(this.toolBarRef,'hide-header');
    }
    //actualizmos la ultima posicion conocida del scroll proveniente del evento
    this.storedScroll = event.scrollTop;
  }
}

Si ejecut谩is el ejemplo con ionic serve -l obtendreis algo como esto:

Bien, eso es todo por hoy, solo me resta agradecer a Miguel Escribano por su aporte y recomendaros que descargu茅is su app meneame.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Mostrar un mapa offline en Ionic con Leaflet

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En posts anteriores vimos como mostrar un mapa de Google maps en ionic, sin embargo 驴que pasa si queremos mostrar informaci贸n en un mapa sin conexi贸n?, google maps no nos podr谩 mostrar el mapa.

En lugar de utlizar Google maps en esta ocasi贸n vamos a utilizar Leaflet para mostrar un mapa.

Leaflet聽 es una biblioteca javascript de c贸digo abierto que nos permite crear mapas.

Lanzado por primera vez en 2011,聽es compatible con la mayor铆a de las plataformas m贸viles y de escritorio, y es compatible con聽HTML5聽y聽CSS3聽.

Es una de las bibliotecas de mapas de JavaScript m谩s populares y es utilizada por los sitios web como聽FourSquare聽,聽Pinterest聽y聽Flickr聽.

Para poder mostrar un mapa offline es necesario tener alojados loc谩lmente los titles que forman el mapa, si quieres mostrar un mapa de todo el mundo offline a d铆a de hoy podemos afirmar聽 que es inviable ya que eso supondr铆a much铆simos gigas de informaci贸n, sin embargo si que puede ser viable mostrar un mapa offline de una ciudad.

Si por ejemplo est谩s desarrollando una aplicaci贸n de turismo de una ciudad concreta donde vas a mostrar en un mapa聽 los monumentos que merece la pena visitar en dicha ciudad, o cualquier otra informaci贸n geolocalizada en un mapa, puede ser interesante el poder mostrar un mapa sin necesidad de tener conexi贸n a Internet en ese preciso momento.

Vamos a ver como podemos solucionar esto en ionic 3, y como siempre la mejor manera de verlo es con un ejemplo.

Lo primero que vamos ha hacer es crear un nuevo proyecto en ionic que vamos a llamar mapaoffline:

ionic start mapaoffline blank

Una vez creado el en proyecto entramos en la carpeta con:

cd mapaoffline

Ahora vamos a descargar Leaflet, para ello descargamos la 煤ltima versi贸n desde聽 la secci贸n de descargas de su p谩gina oficial en el siguiente enlace:

http://leafletjs.com/download.html

Se habr谩 descargado un archivo .zip, antes de nada debemos descomprimirlo para extraer su contenido:

 

Ahora vamos a crear una carpeta llamada leaflet en src/assets y dentro vamos a copiar la carpeta images y el archivo leaflet.css.

Una vez hecho esto vamos a cargar el archivo leaflet.css en index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
聽聽
聽聽聽聽if ('serviceWorker' in navigator) {
聽聽聽聽聽聽navigator.serviceWorker.register('service-worker.js')
聽聽聽聽聽聽聽聽.then(() => console.log('service worker installed'))
聽聽聽聽聽聽聽聽.catch(err => console.error('Error', err));
聽聽聽聽}
聽聽-->

  <link href="build/main.css" rel="stylesheet">
  <link href="assets/leaflet/leaflet.css" rel="stylesheet">


</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
聽聽聽聽聽聽聽It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>


  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

Ahora vamos a instalar leaflet desde consola con los siguiente comandos:

npm install leaflet --save
npm install @types/leaflet --save

Ahora que ya tenemos instalado leaflet necesitamos descargar los tiles del mapa que vamos a mostrar, para ello vamos a echar mano de una herramienta llamada Mobile Atlas Creator (MOBAC), para descargarla accedemos al siguiente enlace:聽http://mobac.sourceforge.net/聽y bajamos en la p谩gina hasta encontrar Download y pulsamos en latest stable version聽para descargar la aplicaci贸n.

Una vez descargada tenemos que descomprimir el archivo zip y dentro encontraremos el archivo ejecutable.

Al ejecutar Mobile Atlas Creator nos pide introducir un nombre para el atlas (en este caso le llamamos simplemente mapa) y el formato, tenemos que seleccionar Osmdroid ZIP.

 

Pulsamos Aceptar y nos mostrar谩 un mapa, podemos mover zoom para ver mejor la zona que queremos seleccionar. Si hacemos doble click en un punto el mapa har谩 zoom y se centrar谩 en ese punto, por ello para localizar la zona que queremos mostrar es mejor partir de un zoom que nos permita ver donde estamos e ir haciendo doble click hasta obtener la localizaci贸n y zoom que nos interesa.

En el panel de la izquierda en la secci贸n map source tenemos los mapas de los que podemos obtener los tiles, muchos son solo de una zona en concreto, yo para este ejemplo voy a utilizar OpenStreetMap4UMaps.eu聽que nos ofrece un mapa de todo el mundo.

Debajo del panel Map Source tenemos聽 el panel Zoom Levels, aqui debemos seleccionar los niveles de zoom que queremos que tenga el mapa, cabe mencionar que cuantos m谩s niveles de zoom mas tiles necesitaremos y por ende mas espacio ocupar谩n las im谩genes.

Marcamos por ejemplo 11,12,13,14, y 15.

Ahora tenemos que seleccionar la porci贸n del mapa que queremos descargar:

En la parte de arriba del mapa tenemos una barra de zoom que podemos mover para ver mejor la parte del mapa que queremos seleccionar. Con el rat贸n sobre el mapa seleccionamos un 谩rea.

Yo por ejemplo he seleccionado la zona de Bilbao, de est谩 manera podr茅 mostrar un mapa de Bilbao sin conexi贸n.

Ahora debajo del panel Zoom Levels tenemos el panel Atlas content, aqu铆 vamos a pulsar en el bot贸n聽Add Selection聽lo que nos crear谩 un Layer聽 que si lo desplegamos vemos que contiene dentro los niveles de zoom que hemos seleccionado.

Bien, una vez que hemos seleccionado el 谩rea que queremos descargar tenemos que seleccionar Create Atlas聽y聽acto seguido comenzar谩 a generar el atlas:

El atlas que se ha generado ser谩 un archico .zip con el nombre que le hemos dado al atlas en este caso mapa seguido de la fecha y hora en la que ha sido generado y lo encontrar谩s en la carpeta atlases聽dentro de la carpeta聽 donde tengas Mobile Atlas Creator.

Bien, ahora vamos descomprimir el archivo zip que nos ha generado, al descomprimir vemos que dentro de la carpeta que nos ha creado hay otra carpeta llamada 4uMaps, vamos a cambiarle el nombre a la carpeta por simplemente聽mapa聽y a copiar esta carpeta dentro de la carpeta assets de nuestro proyecto:

 

Una vez que tenemos Los tiles copiados en la carpeta assets de nuestro proyecto ya podemos mostrarlos en el mapa.

Vamos a editar home.html聽e igual que hac铆amos cuando creamos un mapa con google maps vamos a crear un div con id=”map” donde se renderizar谩 el mapa:

<ion-header>
<ion-navbar>
  <ion-title>
    Ionic Blank
  </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<div id="map"></div>
</ion-content>

Ahora le vamos a definir el tama帽o para que ocupe toda la pantalla por lo tanto editamos home.scss y a帽adimos lo siguiente:

page-home {
聽聽聽聽#map{
聽聽聽聽聽聽聽聽width:100%;
聽聽聽聽聽聽聽聽height: 100%;
    }
}

Ahora en home.ts vamos a ver como se crea un mapa con leaflet:

Lo primero que debemos hacer es importar leaflet:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as L from 'leaflet';

Ahora vamos a crear una variable de clase llamada map donde guardaremos la instancia del mapa que vamos a crear:

...

export class HomePage {

  map : any;

  constructor(public navCtrl: NavController) {

  }

...

Ahora cuando se haya cargado la p谩gina en el m茅todo onViewDidLoad vamos a crear el mapa de la siguiente manera:

ionViewDidLoad() {

   this.map = L.map('map').
     setView([ 43.2603479, -2.9334110],
     12);

   L.tileLayer('assets/mapa/{z}/{x}/{y}.png', {    maxZoom: 15  }).addTo(this.map);

   L.marker([ 43.2603479,-2.9334110],{draggable: true}).addTo(this.map);

 }

Para crear un mapa con Leaflet utilizamos L.map(‘map’), ‘map’ es el id del div que hemos creado en la vista home.html y que es donde se va a renderizar el mapa.

Despu茅s con el metodo .setView le indicamos las coordenadas donde se tiene que posicionar el mapa, en este caso son las del centro de Bilbao.

Con L.tileLayer()聽a帽adimos al mapa una capa de tiles que va a contener los tiles del mapa que hemos descargado, como primer par谩metro le pasamos la ruta donde se encuentran los tiles que puede ser una url si estamos utilizando un mapa online o la ruta donde se encuentrar alojados los archivos para mostrar el mapa offline como es el caso.

Si nos fijamos en la ruta vemos que es ‘assets/mapa/{z}/{x}/{y}.png’,聽聽聽z, x e y hacen referencia respectivamente al nivel de Zoom, tiles en el eje X y tiles en el eje Y.

Obtendr谩n el valor correspondiente autom谩ticamente en funci贸n de la posici贸n del mapa y al tener la carpeta de los tiles ordenada por estos par谩metros no te tienes que preocupar.

Despues con聽L.marker聽 creamos un marcador en en las coordenadas indicadas y le decimos que sea聽 arratrable (draggable) y con .addTo(this.map) lo a帽adimos a nuestro mapa.

El c贸digo completo de home.ts quedar铆a as铆:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as L from 'leaflet';

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

  map;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {

    this.map = L.map('map').
      setView([ 43.2603479, -2.9334110],
      12);

    L.tileLayer('assets/mapa/{z}/{x}/{y}.jpg', {    maxZoom: 15  }).addTo(this.map);

    L.marker([ 43.2603479,-2.9334110],{draggable: true}).addTo(this.map);

  }

}

Ahora si ejecutamos nuestra app aunque no tengamos conexi贸n a internet podemos mostrar un mapa:

 

Eso es todo por hoy, como siempre espero que os sea de utilidad.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Firmar el apk para subirlo a Google Play

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos,

Como el t铆tulo del post indica hoy vamos a ver c贸mo generar un archivo .apk firmado para poder subirlo a google play.

Este es el 煤ltimo paso que debemos dar una vez tenemos desarrollada y lista nuestra aplicaci贸n para poder subirla a la tienda de aplicaciones de Google.

Android exige que todos los APK se firmen digitalmente con un certificado para poder instalarse.

Cuando firmas un APK se adjunta a este el certificado de clave p煤blica que asocia el APK contigo y con tu clave privada correspondiente. Esto es necesario para poder lanzar cualquier actualizaci贸n de la app asegur谩ndose que provenga del autor original, por eso es important铆simo que guardemos el archivo聽keystore generado a buen recaudo para poder lanzar futuras actualizaciones聽ya que todas las aplicaciones deben usar el mismo certificado durante su vida 煤til.

Un keystore es un campo binario que contiene una o m谩s claves privadas.

Si desarrollas una app nativa puedes generar el keystore firmar el apk desde Android studio, nosotros vamos a ver como firmar una aplicaci贸n聽 聽generada desde ionic o apache cordova desde consola.

Para poder firmar el apk desde consola debemos seguir una serie de pasos que vamos a ver a continuaci贸n:

Lo primero que necesitamos es generar聽 el keystore:

Si por ejemplo nuestra app se llama miapp para generar un keystore聽 abrimos聽 una terminal, nos situamos en la carpeta de nuestro proyecto y escribimos el siguiente comando:

keytool -genkey -v -keystore miapp.keystore -alias miapp -keyalg RSA -keysize 2048 -validity 10000

miapp.keystore es el archivo que se va a generar, el alias es un nombre de identificaci贸n para tu clave, en este caso le hemos llamado miapp.

Con keysize le indicamos que el tama帽o de la clave sea de 2048 bits, es recomendavle dejarlo en este valor.

Por 煤ltimo con -validity聽fijamos el per铆odo de validez de tu clave en a帽os, creo que聽 con 10000 a帽os ser谩 suficiente ;-P.

Al ejecutar el comando nos pide que introduzcamos una serie de datos:

Introduzca la contrase帽a del almac茅n de claves:聽

Volver a escribir la contrase帽a nueva: 

驴Cu谩les son su nombre y su apellido?

驴Cu谩l es el nombre de su unidad de organizaci贸n?

驴Cu谩l es el nombre de su organizaci贸n?

驴Cu谩l es el nombre de su ciudad o localidad?

驴Cu谩l es el nombre de su estado o provincia?

驴Cu谩l es el c贸digo de pa铆s de dos letras de la unidad?

Te pide dos veces la contrase帽a, es importante que recuerdes la contrase帽a que has introducido ya que la necesitar谩s despu茅s.

Al final te muestra los datos que has introducido y te pide confirmaci贸n, le decimos que si:

驴Es correcto CN=Eduardo, OU=Revilla, O=revigames, L=Abadi帽o, ST=Bizkaia, C=ES?

[no]:Si

Lo que os sale debe ser algo parecido a la siguiente imagen:

Bien, con esto ya hemos generado un archivo llamado miapp.keystore en la raiz de nuestro proyecto.

Ahora vamos a crear un nuevo archivo en la聽raiz del proyecto llamado build.json, lo creamos con nuestro editor de c贸digo y dentro escribimos el siguiente c贸digo:

{
     "android": {
         "debug": {
             "keystore": "miapp.keystore",
             "storePassword": "XXXXX",
             "alias": miapp",
             "password" : "XXXX",
             "keystoreType": ""
         },
         "release": {
             "keystore": "miapp.keystore",
             "storePassword": "XXXX",
             "alias": "miapp",
             "password" : "XXXX",
             "keystoreType": ""
         }
     }
 }

El primero es para la versi贸n de debug y “release” es para la versi贸n final que vas a subir a la play store.

En el campo keystore debes poner la ruta del archivo .keystore que acabamos de generar, si lo has generado en la ra铆z solo debes de poner el nombre del archivo, en este caso miapp.keystore.

En alias ponemos el alias que hemos puesto al crear el archivo

Despu茅s en storePassword debe poner la聽contrase帽a del almac茅n de claves que indicaste al crear el archivo.

En password debemos poner la contrase帽a.

Guardamos el archivo y ya solo nos queda generar el apk firmado con el siguiente comando:

ionic cordova build android --release

Si no ha detectado errores y se ha compilado bien podr谩s encontrar el apk firmado que debes subir a play store en la siguiente ruta dentro de tu aplicaci贸n:

/platforms/android/build/outputs/apk/android-release.apk

Eso es todo por hoy, espero que os haya sido de utilidad y ver vuestras apps triunfando en la play store pronto ;-).

Aprovecho para deciros que si has creado alguna app con ionic y la tienes en la play store puedes compartirlo en los comentarios, as铆 servir谩 como inspiraci贸n para que otras personas puedan ver lo que se puede crear con ionic y al mismo tiempo seguro que gan谩is alguna descarga extra que siempre viene bien 馃槈

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Libro: Desarrollo de aplicaciones m贸viles multiplataforma y PWAs con Ionic y Firebase desde cero.

Hola a todos,

Como dir铆a Francisco Umbral, 隆He venido a hablar de mi libro! ;-P

Hoy vengo a anunciaros que por fin he publicado en Amazon mi libro para aprender a programar aplicaciones multiplataforma con ionic.

Ionic es un framework que nos permite crear de una manera r谩pida y sencilla aplicaciones m贸viles multiplataforma (Android, IOS, Windows, PWAs…) utilizando tecnolog铆as web (HTML, JAVASCRIPT, CSS), por lo que si eres desarrollador web podr谩s reciclar tus conocimientos y crear aplicaciones m贸viles de una manera sencilla.

En este libro aprender谩s de una manera sencilla y con una curva de aprendizaje suave todo lo necesario para crear aplicaciones m贸viles con ionic desde cero.

La principal ventaja de utilizar Ionic es que es multiplataforma, es decir que con un mismo c贸digo podemos generar apps para Android, IOS y Windows, por lo que el tiempo y coste de desarrollo y mantenimiento de una app se reduce sensiblemente.

Otra ventaja es que si dispones de conocimientos previos en desarrollo web frontend ya tienes medio camino andado ya que la curva de aprendizaje ser谩 mucho menor.
Adem谩s Ionic dispone de muchos componentes ya creados para que sin apenas esfuerzos puedas desarrollar una app de apariencia profesional sin necesidad de ser un gran dise帽ador.

El libro est谩 en espa帽ol por lo que ser谩 de especial utilidad para aquellos que no se arreglen bien con el ingl茅s.

El prop贸sito del libro es hacer la curva de aprendizaje lo m谩s suave posible, empezando a desarrollar cosas pr谩cticas desde el principio y aprendiendo cosas nuevas seg煤n las vamos necesitando en lugar de abrumaros con mucha teor铆a al principio sin ver su aplicaci贸n pr谩ctica, ya creo que esto puede hacer que muchos desistan por el camino.

En cambio es mucho m谩s motivador ver que nada m谩s empezar se puede hacer cosas que funcionan aunque sean sencillas y ir sobre la marcha aprendiendo conceptos a medida que los vamos necesitando.

Para que te hagas una idea del contenido del libro te muestro el 铆ndice con el contenido del mismo:

  • Introducci贸n
    • 驴Qu茅 es ionic?
    • Ventajas de utilizar ionic para desarrollar apps
    • Desventajas de utilizar ionic para desarrollar apps
    • Diferencia entre Ionic 1, ionic 2 y 3 e Ionic 4
  • C贸mo obtener el c贸digo de los ejemplos de este libro
  • Instalar ionic y las herramientas necesarias para el desarrollo
    • Instalar Node.js
    • Instalar ionic
    • Instalar Android studio.
    • En windows
    • Instalar Android Studio en Mac
    • Instalar un editor de c贸digo compatible con TypeScript
  • Hola Mundo en Ionic
  • Estructura de un proyecto Ionic
  • Modificando nuestro hola mundo
  • Mini Juego de acertar n煤meros
  • Personalizando el dise帽o de nuestra aplicaci贸n
    • Variables SASS y Variables CSS4
    • Colores
    • Utilidades CSS – Estilos predefinidos
    • Alineaci贸n del texto
    • Transformaci贸n de texto
    • Atributos de Texto seg煤n tama帽o de pantalla
    • Emplazamiento de elementos
    • Elementos float
    • Elementos Flotantes seg煤n tama帽o de pantalla
    • Visualizaci贸n de elementos
    • Visualizaci贸n u ocultaci贸n de elementos en funci贸n del tama帽o de la pantalla
    • Espaciado del contenido
    • Padding
    • Margin
  • Navegaci贸n
    • Ionic Generator
    • Navegar entre p谩ginas utilizando routerLink en la plantilla html
    • Navegar entre p谩ginas program谩ticamente
    • Volver a la p谩gina anterior
    • Pasando datos entre p谩ginas
    • Men煤 lateral
    • Navegaci贸n por Tabs
  • Pipes
  • Creando una aplicaci贸n para guardar nuestros sitios geolocalizados
    • Descripci贸n de la aplicaci贸n
    • Mostrando el mapa
    • Promesas y Async/Await
    • Iniciando el mapa
    • A帽adiendo un marcador al mapa
    • A帽adiendo FAB
    • Modales
    • Creando el formulario
    • Utilizando la c谩mara
    • Creando un Service
    • Probando nuestra aplicaci贸n misSitios en el m贸vil
    • Ejecutar nuestra aplicaci贸n en un dispositivo android:
    • Ejecutar nuestra aplicaci贸n en un dispositivo iOS:
    • Guardando nuestros sitios en una base de datos local
    • Ionic storage
    • Mostrar el detalle del sitio
    • Modificar nuestros sitios
    • Eliminar un sitio desde el listado deslizando el item con 鈥淚temSliding鈥
    • Alerts
  • Preparar la app para la publicaci贸n usando capacitor
    • Generar el splash screen y los iconos en Android
    • Generar el splash screen y los iconos en iOS
    • Generar ejecutable firmado para poder subirlo a google play.
  • Ionic Native y Capacitor
  • Componentes personalizados
  • Peticiones http
    • http.get
    • Promesas y Observables
    • http.post
  • Firebase
    • Autenticaci贸n con correo y contrase帽a
    • Alta de usuarios
    • Login de usuarios
    • Guards: Guardi谩n de navegaci贸n
    • Logout
    • Database: Cloud Firestore 鈥 Guardar nuestros sitios en la nube
    • Obtener listado de sitios de firestore.
  • Apache Cordova
    • A帽adiendo plataformas
    • Ejecutando nuestra app en el dispositivo m贸vil
    • Ionic Native
    • Preparar la app para la publicaci贸n usando cordova
    • Generar el splash screen y los iconos
    • Configurando nuestra app: Modificando el archivo config.xml
    • Evitar rotaci贸n de pantalla
    • Firmar el apk para subirlo a Google Play
  • Generar una PWA (Aplicaci贸n Web Progresiva)
    • 驴Que es una PWA?
    • Creando un hola mundo de ejemplo
    • Configurar la PWA
    • Preparar la aplicaci贸n para el entorno de producci贸n
    • Alojar nuestra aplicaci贸n en Firebase Hosting:
  • Ahora te toca a t铆

Si te ha gustado el contenido sobre ionic que he compartido en este blog y quieres tenerlo m谩s completo y mejor organizado y de paso apoyarme ya puedes comprar este libro en amazon:

Lo puedes encontrar en versi贸n tapa blanda:

https://www.amazon.es/dp/1700622722

Tambi茅n est谩 disponible en Kindle:

 

No quiero aburriros m谩s as铆 que muchas gracias a todos los que me hab茅is apoyado 馃檪

Un saludo y hasta el pr贸ximo post.

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Como mejorar el rendimiento de ionic en iOS y soluci贸n al problema de las peticiones http CORS

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

Esta semana he estado trabajando en una aplicaci贸n con ionic para un cliente.

La aplicaci贸n funcionaba estupendamente en todos los dispositivos Android donde la he probado, evidentemente en dispositivos m谩s antiguos el funcionamiento era un poco menos fluido pero aceptable en cualquier caso, sin embargo a la hora de probar la app en un dispositivo iOS, concretamente en un iPhone 6 que tengo para probar las apps en un dispositivo real me he llevado una decepci贸n.

La aplicaci贸n tiene que mostrar una lista con im谩genes e informaci贸n bastante grande, adem谩s tiene un buscador para filtrar el listado por varios campos.

El scroll no iba muy fino a pesar de utilizar [virtualScroll] para el listado, cuando filtraba el listado por algunos campos a la hora de refrescar el contenido del listado iba a trompicones y tardaba en responder… en fin, la experiencia de usuario dejaba bastante que desear.

Lo primero que he hecho es pulir el c贸digo todo lo que he podido intentando que sea lo m谩s eficiente posible, pero no ha sido suficiente.

Investigando un poco en el blog oficial de ionic me he encontrado con WKWebView.

Pod茅is leer la entrada del blog de ionic en este enlace:

http://blog.ionic.io/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/

Como sabemos ionic utiliza apache cordova que a su vez utiliza la webview del sistema para mostrar el contenido de nuestra aplicaci贸n.

Actualmente, la plataforma iOS proporciona dos webviews diferentes.

Est谩 la webview m谩s antigua (y m谩s lenta) llamada “UIWebView” y otra mas nueva llamada “WKWebView“.

El navegador web predeterminado de iOS es Safari, internamente Safari utiliza WKWebView, sin embargo ionic聽debido a diversas incompatibilidades y problemas 聽t茅cnicos utiliza UIWebView.

WKWebView es m谩s r谩pida que UIWebView,聽adem谩s Apple proporciona actualizaciones en cada versi贸n de iOS.

Para utilizar聽WKWebView聽solo tenemos que instalar en nuestra aplicaci贸n un plugin que proporciona ionic-team.

Para instalar el plugin desde consola ejecutamos el siguiente comando:

ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git --save

Solo con instalar este plugin mi aplicaci贸n iba much铆simo mas fluida en mi iPhone.

Probad vuestra aplicaci贸n con este plugin y si todo va bien perfecto, sin embargo yo tuve problemas con聽CORS 聽(Cross Origin Resource Sharing)聽al hacer peticiones al servidor ya que yo no tenia acceso para cambiar nada en el servidor y por lo tanto no pod铆a cambiar las cabeceras de respuesta del servidor para aceptar peticiones cross origin.

Esto lo podemos resolver de dos maneras, utilizando en plugin de ionic native HTTP: https://ionicframework.com/docs/native/http/

El 煤nico problema es que s贸lo funciona en el dispositivo y no proporciona toda la potencia del servicio Http de Angular.

Para solucionar esto podemos utilizar聽ionic-native-http-connection-backend聽que pod茅is encontrar en github:聽https://github.com/sneas/ionic-native-http-connection-backend

La forma de instalarlo ser铆a:

npm install ionic-native-http-connection-backend --save
ionic cordova plugin add cordova-plugin-http2

Despu茅s en app.module.ts聽tendr铆amos que a帽adir lo siguiente:

import { NgModule } from '@angular/core';
import { NativeHttpFallback, NativeHttpModule } from 'ionic-native-http-connection-backend';
import { RequestOptions, Http } from '@angular/http';

@NgModule({
聽聽聽聽declarations: [],
聽聽聽聽imports: [
聽聽聽聽聽聽聽聽NativeHttpModule
聽聽聽聽],
聽聽聽聽bootstrap: [],
聽聽聽聽entryComponents: [],
聽聽聽聽providers: [
聽聽聽聽聽聽聽聽{provide: Http, useClass: Http, deps: [NativeHttpFallback, RequestOptions]}
聽聽聽聽],
})
export class AppModule {
}

Una vez hecho esto ya podemos realizar peticiones http sin problemas, si quieres saber como relizar peticiones http con ionic puedes consultar el siguiente post: Tutorial de Ionic 鈥 Peticiones http 鈥 API聽REST

Con estas dos cosas he conseguido que la aplicaci贸n funcione correctamente y con una fluidez mas que aceptable en iOS.

Bueno, por hoy aqu铆 lo dejo con estos peque帽os consejos, espero que os sea 煤til.

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Tutorial de Ionic – Firebase – parte 2: Database – Guardar nuestros sitios en la nube.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

El el post anterior vimos como autenticar un usuario en firebase con email y contrase帽a, hoy vamos ha ver como utilizar Firebase Database para guardar nuestros sitios en la nube.

Para ello vamos a crear un provider para gestionar nuestros sitios en firebase Database, por lo tanto desde consola nos situamos dentro de la carpeta de nuestro proyecto y creamos en nuevo provider:

ionic g provider firebaseDb

Ahora editamos el archivo firebase-db.ts que se acaba de generar dentro de la carpeta providers/firebase-db, eliminamos el import Http y rxjs/add/operator/map e importamos AngularFireDatabase,FirebaseListObservable 聽y nuestro provider AuthProvider聽quedando de la siguiente manera:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AuthProvider } from '..auth/auth';
/*
聽聽Generated class for the FirebaseDbProvider provider.

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

  constructor(public afDB: AngularFireDatabase, public auth: AuthProvider) {
    console.log('Hello FirebaseDbProvider Provider');
  }
}

Como necesitamos el id del usuario lo primero que vamos ha hacer es a帽adir la funci贸n getUser al provider auth que creamos en el post anterior, por lo tanto editamos auth.ts y a帽adimos esta funci贸n:

// Obtenemos el id de usuario.
 getUser(){
    return this.afAuth.auth.currentUser.uid;
 }

Bien, ahora que ya podemos obtener el id de usuario vamos a a帽adir en el archivo聽firebase-db.ts聽un m茅todo para guardar nuestros sitios en Firebase database:

guardaSitio(sitio){
     sitio.id  = Date.now();
     return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio)
  }

Como vemos la funci贸n recibe como par谩metros 聽sitio que ser谩 un objeto con los datos de nuestro sitio.

Al objeto sitio le a帽adimos un campo id para identificarlo y as铆 poder luego modificarlo. Como necesitamos que el id sea diferente cada vez vamos a utilizar Date.now() que nos devuelve los milisegundos transcurridos desde el 1 de enero de 1970, con esto 聽nos aseguramos que no se repita el id, a no ser que seas capaz de guardar dos sitios en menos de un milisegundo ;-P.

En firebase se guarda la informaci贸n con estructura de 谩rbol en formato JSON. Para acceder a ella tenemos que hacer referencia a la “ruta” a la que queremos acceder.

En este caso le estamos diciendo que guarde nuestro sitio con esta estructura ‘sitio/_id_usuari_/_id_sitio_/_sitio_’.

El id de usuario lo obtenemos con la funci贸n que acabamos de definir en 聽AuthProvide 聽this.auth.getUser().

Dentro de sitio colgar谩n los diferentes id de usuarios de los cuales a su vez colgar谩n los diferentes sitios de cada usuarios.

Para verlo mas claro en el modal nuevo-sitio vamos a modificar el m茅todo guardarSitio聽para que en lugar de guardar el sitio en la base de datos local SQlite lo guarde en firebase y podamos ver la estructura de como se guarda la informaci贸n en firebase.

Editamos聽modal-nuevo-sitio.ts y hacemos los siguientes cambios:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController  } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
聽* Generated class for the ModalNuevoSitioPage page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/

@IonicPage()
@Component({
  selector: 'page-modal-nuevo-sitio',
  templateUrl: 'modal-nuevo-sitio.html',
})
export class ModalNuevoSitioPage {

  coords : any = { lat: 0, lng: 0 }
  address: string;
  description: string = '';
  foto: any = '';

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private viewCtrl : ViewController,
    private camera: Camera,
    // private db: DbProvider
    private dbFirebase :FirebaseDbProvider,
  ) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalNuevoSitioPage');
      this.coords.lat = this.navParams.get('lat');
      this.coords.lng = this.navParams.get('lng');
       this.getAddress(this.coords).then(results=> {
        this.address = results[0]['formatted_address'];
      }, errStatus => {
          // Aqu铆 ir铆a el c贸digo para manejar el error
      });
  }

  cerrarModal(){
    this.viewCtrl.dismiss();
  }

  getAddress(coords):any {
    var geocoder = new google.maps.Geocoder();

    return new Promise(function(resolve, reject) {
        geocoder.geocode({'location': coords} , function (results, status) { // llamado asincronamente
            if (status == google.maps.GeocoderStatus.OK) {
                resolve(results);
            } else {
                reject(status);
            }
        });
    });
  }

  sacarFoto(){

    let cameraOptions : CameraOptions = {
聽聽聽聽聽聽聽聽quality: 50,
聽聽聽聽聽聽聽聽encodingType: this.camera.EncodingType.JPEG,
聽聽聽聽聽聽聽聽targetWidth: 800,
聽聽聽聽聽聽聽聽targetHeight: 600,
聽聽聽聽聽聽聽聽destinationType: this.camera.DestinationType.DATA_URL,
聽聽聽聽聽聽聽聽sourceType: this.camera.PictureSourceType.CAMERA,
聽聽聽聽聽聽聽聽correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarSitio(){
    let sitio = {
聽聽聽聽聽聽lat: this.coords.lat,
聽聽聽聽聽聽lng: this.coords.lng ,
聽聽聽聽聽聽address: this.address,
聽聽聽聽聽聽description: this.description,
聽聽聽聽聽聽foto: this.foto
    }
  
this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio guardado en firebase:');
        this.cerrarModal();
    })
   }
}

Como ahora vamos a guardar nuestros sitios en firebase he comentado el import de DbProvider ya que ahora no lo vamos a utilizar, y en la funci贸n guardarSitio hemos sustituido la linea this.db.addSitio… por聽this.dbFirebase.guardaSitio…

Como vemos llamamos a la funci贸n guardaSitio del provider聽FirebaseDbProvider聽que hemos creado m谩s arriba y le pasamos como par谩metro el objeto sitio con los datos de nuestro sitio.

Ahora ejecutamos nuestra aplicaci贸n y vamos a la consola de firebase, antes de guardar ning煤n sitio si seleccionamos Database en el men煤 de la izquierda de la consola de firebase veremos algo como esto:

Ahora vamos a guardar un nuevo sitio desde nuestra app, rellenamos los campos del formulario del modal nuevo sitio y le damos a guardar, si todo ha ido bien ahora en la consola de firebase veremos algo como esto (pulsa en el icono ‘+’ para desplegar los campos):

Como vemos los datos de guardan en una estructura de 谩rbol, en el primer nivel esta sitio, de sitio ‘cuelga’ los id de usuario, en este caso solo tenemos el nuestro pero si distribu铆s la aplicaci贸n por cada usuario habr谩 un nodo, de cada usuario ‘cuelgan’ los ids de cada sitio, y de cada id a su vez cuelgan los campos del sitio.

Ahora que ya podemos guardar nuestros sitios en firebase vamos a ver como podemos obtener todos los sitios que tenemos guardados para mostrarlos en el listado:

Lo primero que vamos ha hacer es crear una funci贸n en firebase-db.ts聽para obtener el listado de sitios guardados en firebase database:

getSitios(){
    return this.afDB.list('sitios/'+this.auth.getUser()).valueChanges();
  }

Para obtener el listado de sitios guardados utilizamos el m茅todo list聽de AngularFireDatabase pasando como par谩metro la ruta a partir de la cual queremos obtener los datos, en este caso queremos obtener todo lo que cuelgue de sitios/id_usuario, 聽es decir todos los sitios de nuestro usuario, el id de usuario una vez m谩s lo obtenemos con this.auth.getUser()聽que hemos creado en nuestro provider AuthProvider.

Con聽.valueChanges()聽devolvemos un observable cuando se produzcan cambios en la base de datos.

Bien, llegados a este punto vamos a modificar el controlador de la p谩gina listado para que en lugar de obtener los datos de la base de datos local los obtenga directamente de firebase.

Editamos listado.ts聽e importamos FirebaseDbProvider:

import { Component } from '@angular/core';
import { AlertController, IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
聽* Generated class for the ListadoPage page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/

@IonicPage()
@Component({
  selector: 'page-listado',
  templateUrl: 'listado.html',
})
export class ListadoPage {

  sitios: any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public db : DbProvider,
    public modalCtrl : ModalController,
    public alertCtrl : AlertController,
    public dbFirebase :FirebaseDbProvider,

  ) {

  }

Ahora en la funci贸n ionViewDidEnter()聽vamos a sustituir this.db.getSitios().then((res)=>{…})聽por lo siguiente:

ionViewDidEnter(){
   
    this.dbFirebase.getSitios().subscribe(sitios=>{
      this.sitios = sitios;
    })

}

La funci贸n getSitios() que como hemos visto a su vez llama al m茅todo list de AngularFireDatabase nos devuelve un observable, por lo que nos suscribimos al resultado. Aqu铆 podemos ver claramente la diferencia entre un observable y una promesa.

Guardamos en this.sitios la lista de sitios que obtenemos lo que har谩 que se refresque autom谩ticamente en la vista del listado.

Como ya sabemos una promesa ejecuta lo que tengamos definido en 聽then(res=>{ …}) una vez tenga listo el resultado, pero esto se ejecuta una 煤nica vez, sin embargo un observable va a ejecutar lo que tengamos definido en .subscribe(res=>{…})聽cada vez que haya un cambio en el resultado. Por ejemplo si desde la consola de firebase cambiamos a mano el campo description de nuestro sitio, este se ver谩 autom谩ticamente reflejado en nuestra aplicaci贸n, es interesante hacer la prueba.

En este momento ya podemos guardar sitios en firebase y mostrarlos en el listado:

Lo siguiente que vamos ha hacer es la modificaci贸n de los sitios guardados.

Para ello primero vamos ha hacer una peque帽a modificaci贸n a la funci贸n guardaSitio() de nuestro provider firebase-db.ts:

guardaSitio(sitio){
   if(!sitio.id){
      sitio.id  = Date.now();
    }
    return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio)
  }

Hemos a帽adido un if para comprobar si el sitio que recibimos en la funci贸n tiene el campo id definido.

Como utilizamos el id del sitio para establecer la ruta del registro, si el sitio que recibimos para guardar no tiene id significa que es un sitio nuevo y entonces le damos un id, si ya tiene un id significa que es un sitio que ya existe y hay que modificar.

Modificar un registro en firebase se hace exactamente igual que crear uno nuevo, si la ruta a la que hacemos referencia no existe crea el registro, si ya existe entonces modifica el registro existente en firebase.

Ahora vamos a 聽modificar el archivo modal-detalle-sitio.ts聽para hacer que al guardar los cambios al editar un sitio existente se guarden los cambios en firebase, para ello vamos a importar FirebaseDbProvider para poder llamar a la funci贸n guardaSitio que acabamos de modificar, y vamos tambi茅n a modificar la funci贸n guardarCambios聽para que guarde los cambios en firebase en lugar de en la base de datos local:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LaunchNavigator } from '@ionic-native/launch-navigator';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';

/**
聽* Generated class for the ModalDetalleSitioPage page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/

@IonicPage()
@Component({
  selector: 'page-modal-detalle-sitio',
  templateUrl: 'modal-detalle-sitio.html',
})
export class ModalDetalleSitioPage {

  sitio: any;
  edit : boolean = false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private viewCtrl : ViewController,
    private launchNavigator : LaunchNavigator,
    private camera: Camera,
  //  private db: DbProvider,
    private dbFirebase :FirebaseDbProvider

  ) {
     this.sitio = this.navParams.data;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalDetalleSitioPage');
  }

  cerrarModal(){
    this.viewCtrl.dismiss();
  }

  comoLlegar(){
    let destino = this.sitio.lat+', '+this.sitio.lng;
    this.launchNavigator.navigate(destino)
    .then(
      success => console.log('Launched navigator'),
      error => console.log('Error launching navigator', error)
    );
 }

 editar(){
   this.edit = true;
 }

 sacarFoto(){

    let cameraOptions : CameraOptions = {
聽聽聽聽聽聽聽聽quality: 50,
聽聽聽聽聽聽聽聽encodingType: this.camera.EncodingType.JPEG,
聽聽聽聽聽聽聽聽targetWidth: 800,
聽聽聽聽聽聽聽聽targetHeight: 600,
聽聽聽聽聽聽聽聽destinationType: this.camera.DestinationType.DATA_URL,
聽聽聽聽聽聽聽聽sourceType: this.camera.PictureSourceType.CAMERA,
聽聽聽聽聽聽聽聽correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.sitio.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarCambios(){

     let sitio = {
      id : this.sitio.id,
聽聽聽聽聽聽lat: this.sitio.lat,
聽聽聽聽聽聽lng: this.sitio.lng ,
聽聽聽聽聽聽address: this.sitio.address,
聽聽聽聽聽聽description: this.sitio.description,
聽聽聽聽聽聽foto: this.sitio.foto
    }

    this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio modificado en firebase');
        this.cerrarModal();
    })
   }

}

Hemos comentado el import de聽DbProvider porque ya no lo estamos utilizando.

Ahora si pruebas la aplicaci贸n con el panel de firebase abierto podr谩s ver que si modificas un sitio que tengas guardado autom谩ticamente se ver谩 reflejado este cambio en el registro de firebase.

Para concluir solo nos queda eliminar sitios.

Vamos a a帽adir a 聽FirebaseDbProvider en el聽archivo firebase-db.ts聽una funci贸n para eliminar un sitio de la base de datos de firebase:

public borrarSitio(id){
        this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+id).remove();

}

Como puedes ver es muy sencillo, solo necesitamos recibir el id del sitio que queremos eliminar y haciendo referencia a la ruta de nuestro sitio (que una vez m谩s es sitios/_id_usuario_/id_sitio) utilizamos la funci贸n remove() para eliminar el sitio.

Ahora en el listado solo tenemos que sustituir la llamada a borrarSitio()聽de la base de datos local聽聽de聽DbProvider聽por la funci贸n que acabamos de crear en聽FirebaseDbProvider, por lo tanto editamos el archivo listado.ts聽y dejamos la funci贸n borrarSitio() de la siguiente manera:

borrarSitio(id){

    let alert = this.alertCtrl.create({
      title: 'Confirmar borrado',
      message: '驴Est谩s seguro de que deseas eliminar este sitio?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // Ha respondido que no as铆 que no hacemos nada
          }
        },
        {
          text: 'Si',
          handler: () => {
               // Aqu脥 borramos el sitio en firebase
              this.dbFirebase.borrarSitio(id);
           }
        }
      ]
    });

    alert.present();

 }

Como podemos observar ya no necesitamos obtener de nuevo los sitios una vez borrado para que se refresque el listado ya que al ser firebase una base de datos en tiempo real el listado se actualiza autom谩ticamente.

Pod茅is probar a borrar un sitio y ver茅is como el sitio se elimina autom谩ticamente en el panel de firebase y el listado se actualiza.

Eso es todo por hoy, con esto ya podemos hacer muchas cosas interesantes utilizando firebase, seguro que se os ocurren grandes ideas para realizar apps utilizando firebase como backend. Pod茅is dejarme en los comentarios 聽esas grandes ideas, no se lo contar茅 a nadie ;-P

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Tutorial de Ionic – Estructura de un proyecto Ionic

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el post anterior聽vimos como crear un proyecto en ionic 2 creando el famoso “Hola Mundo”.

Hoy vamos a ver la estructura de carpetas y archivos que se general al crear un proyecto ionic.

Al crear un proyecto con ionic 2 se crea聽una carpeta con el nombre del proyecto y dentro de ella una estructura de archivos y directorios que contiene todos los elementos del proyecto.

Vamos a echar un vistazo a la estructura de archivos y carpetas que se ha generado al crear nuestro proyecto hola-mundo:

Estructura de carpetas de un proyecto Ionic 2
Estructura de carpetas de un proyecto Ionic 2

Veamos que contiene cada carpeta:

hooks: Contiene scripts que se ejecutan en el proceso de construcci贸n de la app y que pueden ser creados por el propio sistema de compilaci贸n para personalizar comandos de cordova, automatizar procesos, etc. Normalmente no tendremos que modificar nada aqu铆.

node_modules:聽La carpeta node_modules se genera autom谩ticamente al instalar las dependencias npm con “npm install”. Este comando explora el archivo package.json para todos los paquetes que necesitan ser instalados. No necesitamos tocar nada en esta carpeta.

platforms: En esta carpeta se generar谩 los proyectos nativos para cada plataforma que hayas a帽adido previamente. Si hemos a帽adido la plataforma IOS y Android se crear谩 聽una carpeta llamada ios y otra llamada android 聽y dentro tendr谩n los archivos y carpetas con la estructura de un proyecto nativo. En MAC se suele crear por defecto la plataforma IOS al crear un proyecto, en Windows cuando creas un proyecto no aparecer谩 esta carpeta hasta que a帽adas alguna plataforma,veremos m谩s adelante c贸mo se a帽aden plataformas.

Estas carpetas se actualizan cada vez que compilas o ejecutas el proyecto en un emulador o en un dispositivo. Salvo excepciones no tendremos que modificar nada en estas carpetas.

plugins: Contiene los plugins de Cordova que hayamos instalado. Se crean autom谩ticamente en esta carpeta al instalar un plugin as铆 聽que tampoco tendremos que modificar nada en esta carpeta a mano.

resources:聽Contiene el icono y la “splash screen” (pantalla de presentaci贸n) de la aplicaci贸n con la que despu茅s podremos crear autom谩ticamente todas las im谩genes聽en todos los tama帽os necesarios para cada plataforma, lo que nos ahorrar谩 mucho tiempo al no tener que generar a mano todos los tama帽os de imagen necesarios del icono y la聽pantalla de presentaci贸n. Veremos m谩s adelante como se generan autom谩ticamente.

src: Esta es la carpeta m谩s importante y donde realizaremos la mayor parte de nuestro trabajo. Aqu铆 es donde est谩n los archivos con el contenido de nuestra aplicaci贸n, donde definimos las pantallas, el estilo y el comportamiento que tendr谩 nuestra aplicaci贸n.

www:聽 Esta carpeta聽se genera autom谩ticamente y contiene la聽versi贸n actual del c贸digo聽cada vez que efectuamos un cambio. Si hab铆as trabajado anteriormente con ionic 1 puede que tengas la tentaci贸n de editar el contenido de esta carpeta pero聽NO debemos cambiar nada aqu铆 ya que todo lo que cambiemos en esta carpeta se machacar谩 con cada cambio que realicemos en la carpeta src que es 聽donde realmente debemos editar nuestra aplicaci贸n.

Veamos ahora varios聽archivos que se generan al crear un proyecto con ionic 2.

.editorconfig y .gitignore聽son dos archivos ocultos, as铆 que dependiendo de tu sistema puede que no los veas, est谩n relacionados con la configuraci贸n del editor de c贸digo y Git, en principio no tenemos que preocuparnos por ellos.

config.xml:聽El archivo config.xml contiene par谩metros que se utilizan cuando se construye聽un proyecto nativo a partir de un proyecto ionic. Aqu铆 deberemos indicar los permisos especiales que necesite la aplicaci贸n y otras configuraciones聽que puedan ser necesarias.

Ionic.config.json:聽 Contiene informaci贸n b谩sica sobre la configuraci贸n nuestro聽proyecto, se utiliza si vas a subir tu aplicaci贸n a la plataforma Ionic.io.

package.json: Contiene paquetes y dependencias de nodeJS.

tsconfig.json y tslint.json:聽Son archivos que contienen informaci贸n necesaria a la hora de compilar聽TypeScript, no necesitamos editar estos archivos.

Aunque pueda parecer complicado en realidad la mayor铆a de los elementos los gestiona autom谩ticamente Ionic y nosotros solo tenemos que preocuparnos de la carpeta src que es donde se va a situar nuestro c贸digo. Ocasionalmente puede que tengamos que editar alg煤n archivo fuera del directorio src como el archivo config.xml.

Ahora que ya hemos visto la estructura de un proyecto en ionic 2 vamos a modificar nuestro hola-mundo para que realmente diga “hola mundo”.

Si desplegamos el directorio src聽podemos ver la carpeta pages, en est谩 carpeta es donde se van a alojar todas la p谩ginas que contenga nuestra aplicaci贸n. Para que nos entendamos una p谩gina ser谩 como una vista o un pantalla de nuestra aplicaci贸n.

Al crear un proyecto con la plantilla blank ionic genera por defecto un p谩gina llamada home, que como su propio nombre indica es la p谩gina inicial que se va a mostrar al iniciar nuestra aplicaci贸n. Esta p谩gina la podemos mantener como p谩gina principal y modificarla, o podemos eliminarla y crear otra con el nombre que nosotros queramos. De momento vamos a mantener la que nos ha creado por defecto y vamos a modificar su contenido.

Carpeta pages dentro de src.
Carpeta pages dentro de src.

Como podemos ver dentro de la carpeta de la p谩gina home que nos ha creado hay tres archivos:

El archivo home.html que contiene la plantilla html de la p谩gina.
El archivo home.scss que contiene el archivo sass donde podremos modificar el estilo de los componentes de la p谩gina.
El archivo home.ts que es el archivos typescript que contiene el controlador de la p谩gina, donde definiremos el comportamiento de la misma, como por ejemplo la funci贸n con la l贸gica a ejecutarse cuando se pulse sobre un bot贸n de la p谩gina etc. Veremos mas adelante en profundidad cada una de las partes de una p谩gina.

Modificando nuestro hola mundo

Si abrimos el archivo home.html veremos que contiene algo como esto:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

Contenido home.html.

Las p谩ginas se pueden crear utilizando html puro, sin embargo aqu铆 podemos ver algunas etiquetas que no corresponden con las etiquetas html “est谩ndar”. Lo que vemos aqu铆 son componentes de ionic.

Ionic nos ofrece una amplia gama de componentes listos para utilizar聽y que nos facilitar谩n la labor de crear nuestra interfaz de usuario con un estilo atractivo y profesional.
Iremos viendo 聽diferentes componentes de ionic seg煤n los vayamos necesitando a lo largo de este tutorial. En este enlace pod茅is consultar en la documentaci贸n oficial de ionic los componentes disponibles con peque帽os ejemplos de como implementarlos: https://ionicframework.com/docs/v2/components/

Todos los componentes de ionic comienzan con el prefijo聽“ion-“.

Como ionic est谩 basado en Angular 2 聽si en alg煤n caso no nos es suficiente聽con los componentes que nos ofrece ionic podr铆amos聽crear nuestros propios componentes personalizados de la misma manera que en angular 2, aunque en la mayor铆a de los casos no ser谩 necesario ya que ionic nos ofrece una amplia gama de componentes para poder desarrollar nuestras aplicaciones.
Veremos mas sobre componentes en posteriores cap铆tulos.

En la p谩gina principal (y 煤nica de momento) de nuestro proyecto hola-mundo vemos que tenemos los siguientes componentes:

  • ion-header: Cabecera.
  • ion-navbar: Barra de navegaci贸n.
  • ion-title:聽T铆tulo.
  • ion-content: Contenido de la p谩gina.

Bien, vamos a cambiar el contenido de ion-title por “Hola Mundo”, tambi茅n vamos a borrar todo lo que hay dentro de la etiqueta ion-content y vamos a poner orgullosos “<h1>隆隆隆隆Hola mundo!!!!<h1>”, as铆 el c贸digo de home.html deber铆a quedar de la siguiente manera:

<ion-header>
  <ion-navbar>
    <ion-title>
      Hola Mundo
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <h1>隆隆隆隆Hola Mundo!!!!</h1>
</ion-content>

Contenido modificado de home.html.

聽Si desde el terminal,escribimos ionic serve -l para ver desde el navegador como queda en las tres plataformas nuestra aplicaci贸n veremos algo como esto:

Nuestro Hola Mundo en acci贸n.
Nuestro Hola Mundo en acci贸n.

Ahora ya si podemos ver nuestro Autentico Hola Mundo en acci贸n.

En el siguiente capitulo veremos como implementar la l贸gica de una p谩gina en el controlador, para ello construiremos un minijuego de acertar n煤meros con ionic.

 
Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso: