Para que nuestra aplicación reciba mensajes de Fanout y se muestre en la pantalla tendremos que crear tres «proveedores» en nuestra aplicación. No te desanimes por el nombre «proveedor» en Ionic2 y Angular2, ya que en realidad son sólo otro nombre para lo que se conoce como «servicios» en otros marcos – objetos que encapsulan un conjunto específico de funcionalidades para tener una mejor separación de las preocupaciones y evitar la duplicación de código en una aplicación.
Para nuestra aplicación, esos 3 proveedores son para alertas, configuración y Fanout. Podemos añadirlos fácilmente usando el comando iónico «generador», así:
123 Proveedor de generación de iones AlertaProveedor de generación de iones ConfiguraciónProveedor de generación de iones Proveedor FanoutProveedor
bash
Con nuestros proveedores creados tendremos que modificarlos para satisfacer nuestras necesidades. Yo uso VS Code para desarrollar aplicaciones Ionic2 debido a su buen soporte para TypeScript, pero puedes usar cualquier editor con el que te sientas más cómodo.
En tu editor favorito, abre el archivo alert-provider.ts en la carpeta /app/providers/alert-provider . Reemplaza el contenido de ese archivo con esto:
12345678910111213141516importar{inyectable}de"@angular/núcleo";importar{Controlador Naval,Alerta}de "ionic-angular";@inyectable()exportclassProveedor de Alertas{constructor(){}presentarDismissAlert(title:string, subtitle:string, navCtrl:NavController){let alert =Alerta. create({ title: título, subTitle: subtitle, buttons:["Dismiss"]}); navCtrl.present(alert);}}tipografía
Nuestro proveedor de alertas nos permitirá mostrar fácilmente mensajes de alerta en la pantalla al usuario cuando se reciban los mensajes de Fanout.
A continuación, abra el archivo configuration-provider.ts en la carpeta /app/providers/configuration-provider y reemplace el contenido de ese archivo por:
12345678910import{Injectable}de"@angular/núcleo";@Injectable()exportclassConfigurationProvider{public fanoutUrl:string;constructor(){this.fanoutUrl="http://your-realm-id-here.fanoutcdn.com/bayeux";}}tipografía
Ahora abre el archivo fanout-provider.ts en la carpeta /app/providers/fanout-provider y reemplaza el contenido con:
123456789101112131415161718192021222324252627import{Injectable}de"@angular/núcleo";import{Http}de"@angular/http";import "rxjs/add/operador/mapa";import{ConfigurationProvider}de".. /configuration-provider/proveedor de configuración";@Injectable()exportclassFanoutProvider{ data:any; client:any; clientUrl:string;constructor(private http:Http,private configurationProvider:ConfigurationProvider){este. data=null;this.clientUrl= configurationProvider.fanoutUrl;this.client=newFaye.Client(this.clientUrl);}subscribe(callback:any, channelName:string){this.client.subscribe("/"+ channelName,function(data){callback(data);console.log("received data: "+ data);});}}tipografía
Este archivo es un poco más complicado ya que aquí es donde nuestra aplicación se conecta al servicio Fanout. Este proveedor utiliza el ConfigurationProvider para obtener la URL que se utiliza para conectarse a Fanout. Sin embargo, para que las diferentes partes de nuestra aplicación puedan acceder a los proveedores que hemos creado, necesitamos registrar esos proveedores en el framework.
Para ello, navega al archivo app.ts en la carpeta /app . Actualiza el contenido de ese archivo a esto:
123456789101112131415161718192021222324importar{Componente}de"@angular/núcleo";importar{Plataforma, ionicBootstrap }de "ionic-angular";importar{StatusBar}de "ionic-nativo";importar{HomePage}de". /pages/home/home";import{ConfigurationProvider}from"./proveedores/proveedor de la configuración/proveedor de la configuración";import{AlertProvider}from". /proveedores/alerta-proveedor/alerta-proveedor";@Componente({plantilla:$0027<ion-nav [root]="rootPage"³;</ion-nav ];$0027, proveedores:[ConfigurationProvider,AlertProvider]})exportclassMyApp{ rootPage_any=HomePage;constructor(platform:Platform){plataforma. ready().then(()=. Bien, así que la plataforma está lista y nuestros plugins están disponibles.// Aquí puedes hacer cualquier cosa nativa de nivel superior que puedas necesitar.StatusBar.styleDefault();});}}ionicBootstrap(MyApp);tipografía
Concretamente, lo que estamos haciendo aquí es mostrar el marco en el que se encuentran los proveedores, los nombres de los proveedores que queremos que se carguen, y luego registrarlos como proveedores para que sean accesibles en todo el marco?
¿Por qué el FanoutProvider no se registra también aquí? Eso es porque sólo queremos registrar globalmente a los proveedores que probablemente sean utilizados en muchas partes diferentes de la aplicación – los proveedores de alerta y configuración son buenos ejemplos de proveedores ampliamente utilizados. El FanoutProvider, por otro lado, sólo puede ser utilizado en unos pocos lugares, por lo que sólo lo registraremos donde sea necesario – como en nuestro componente Home, que es en lo que trabajaremos a continuación.