Archivo de la etiqueta: App

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:

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: