• Puedo ver todos los libros publicados por cada usuario
• Puedo agregar un nuevo libro a mi biblioteca
• Puedo proponer una operación y esperar a que el otro usuario acepte la operación.

Firebase

Firebase es una base de datos en la nube NoSQL en tiempo real (pero también servicio de almacenamiento y mensajería en la nube y servicio de autenticación y, vea aquí ) que lo ayuda a crear aplicaciones sin crear el backend (o permitiéndole agregar a alguien más tarde), vea las funciones ). Puede guardar y recuperar objetos JSON , crear autenticación de usuario y obtener actualizaciones de datos en tiempo real a través de dispositivos conectados en milisegundos : los datos permanecen disponibles si su aplicación se desconecta , proporcionando una excelente experiencia de usuario independientemente de la conectividad de la red.

Configuración de Firebase

exportar entorno const = {
	producción : verdadera ,
	base de fuego : {
	apiKey : ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’ ,
	authDomain : ‘fcc-book-trading-173021.firebaseapp.com’ ,
	databaseURL : ‘https://fcc-book-trading-173021.firebaseio.com’ ,
	projectId : ‘fcc-book-trading-173021’ ,
	storageBucket : ‘fcc-book-trading-173021.appspot.com’ ,
	messagingSenderId : ‘763399536402’
	}
	} ;

{
“reglas”: {
“.read”: “auth == null”,
“.write”: “auth == null”
}
}

Angular

Procedamos creando una nueva solución angular (siempre usando la sorprendente CLI angular)

npm i -g @ angular / cli @ latest // si aún no está instaladong new fcc-book-trading

Soy fanático de los observables y de todas las API que proporcionan una notación fluida: por lo tanto, utilizaremos la biblioteca angular oficial para Firebase, es decir angularfire2.

cd fcc-book-trading /npm i firebase angularfire2

Usaremos Firebase con la ayuda de los observables: estos nos permitirán tener una interfaz receptiva y aprovechar al máximo las actualizaciones en tiempo real proporcionadas por este maravilloso conjunto de tecnologías.

Aquí hay un ejemplo de un componente simple que muestra una lista de objetos de libros proporcionados en tiempo real por una base de datos de Firebase (cópielos y péguelos en su src/app/app.module.ts):

importar { Componente } desde ‘@ angular / core’ ;
	importar { AngularFireDatabase , FirebaseListObservable } desde ‘angularfire2 / database’ ;
	Libro de clase {
	constructor ( título público ) { }
	}
	@ Componente ( {
	selector : ‘app-root’ ,
	plantilla : `
	<ul>
	<li * ngFor = “let book of books | async”>
	<pre> {{libro | json}} </pre>
	</li>
	</ul>
	“
	} )
	clase de exportación AppComponent {
	libros públicos : FirebaseListObservable < Libro [ ] > ;
	constructor ( db : AngularFireDatabase ) {
	esta . libros = db . lista ( ‘/ libros’ ) ;
	}
	}

importar { BrowserModule } desde '@ angular / platform-browser' ;
	importar { NgModule } desde '@ angular / core' ;
	importar { AngularFireModule } desde 'angularfire2' ;
	importar { AngularFireDatabaseModule } desde 'angularfire2 / database' ;
	importar { AppComponent } desde './app.component' ;
	importar { entorno } desde '../environments/environment' ;
	@ NgModule ( {
	declaraciones : [
	AppComponent
	] ,
	importaciones : [
	BrowserModule ,
	AngularFireModule . initializeApp ( entorno . firebase , 'fcc-book-trading' ) ,
	AngularFireDatabaseModule
	] ,
	proveedores : [ ] ,
	bootstrap : [ componente de la aplicación ]
	} )
	clase de exportación AppModule { }

@ Componente ( {
	selector : ‘app-root’ ,
	plantilla : `
	<! – contenido anterior ->
	<button (click) = “AddBook ()”> ¡Agregue un libro! </button>
	“
	} )
	clase de exportación AppComponent {
	// contenido anterior
	bookCounter privado = 0 ;
	AddBook público ( ) : vacío {
	let newBook = new Book ( `Mi libro # $ { this . bookCounter ++ } ` ) ;
	esta . los libros . empujar ( libro nuevo ) ;
	}
	}

Aquí agregamos un botón y un método simple que empuja un nuevo libro en la lista de libros: verifique el comportamiento de su solución y vea si el nuevo libro se publica inmediatamente en la lista. Ahora haga lo mismo con dos o más instancias de un navegador: obtendrá una actualización inmediata de la lista en cada instancia 😎!

---

Consultas de Firebase

Dado que Firebase siempre devuelve un observable, podríamos aplicar una cadena de operadores (mapa, filtro, etc.) para obtener el resultado deseado: sin embargo, es mejor restringir una gran lista de elementos directamente mediante una consulta específica en lugar de delegar al cliente para sincronizar los datos y aplicar un filtro

Desafortunadamente, Firebase no proporciona un conjunto adecuado de operadores para componer y ejecutar consultas complejas ( vea aquí los documentos ): en mi opinión, si Google invierte en este dominio, esta tecnología podría convertirse en un conjunto de APIs asesinas para el desarrollo de POCs / medium- pequeñas aplicaciones web o para el rápido desarrollo de back-end para aplicaciones móviles (ver más adelante Cloud Firestore vs Realtime Database).

Podemos intentar importar este JSON de muestra en la base de datos para hacer algo de práctica (solo guarde el archivo y use la función de importación de la consola Firebase).

La estructura es muy simple: en el archivo encontrará 3 libros con una variedad de autores asignados. Ahora imaginemos hacer un filtro simple de libros disponibles por título: agreguemos un botón para filtrar los resultados y analizar el código de función del filtro

@ Componente ( {
	selector : ‘app-root’ ,
	plantilla : `
	<ul>
	<li * ngFor = “let book of books | async”>
	<pre> {{libro | json}} </pre>
	</li>
	</ul>
	<button (click) = “addBook ()”> ¡Agregue un libro! </button>
	<button (click) = “filterBooks ()”> Filtrar libros </button>
	“
	} )
	clase de exportación AppComponent {
	libros públicos : FirebaseListObservable < Libro [ ] > ;
	bookCounter privado = 0 ;
	filtro privado = ” ;
	constructor ( db privado : AngularFireDatabase ) {
	esta . libros = db . lista ( ‘/ libros’ ) ;
	}
	addBook público ( ) : vacío {
	const newBook = new Book ( `Mi libro # $ { this . bookCounter ++ } ` ) ;
	esta . los libros . empujar ( libro nuevo ) ;
	}
	public filterBooks ( ) : void {
	esta . libros = esto . db . lista ( ‘/ libros’ , {
	consulta : {
	orderByChild : ‘título’ ,
	equalTo : ‘Mi libro # 1’ ,
	}
	} ) ;
	}
	}

Como puede ver, hemos pasado una consulta con el orderByChildoperador al especificar que filtre el campo titlepara My book #1: después de invocar la filterBooksfunción, obtendremos una nueva instancia de la lista y una actualización de la interfaz (para evitar este comportamiento desagradable y usar todas las funciones proporcionado por Angular correctamente; en mi caso, utilicé la sinergia Pipes & Observables para obtener el resultado, consulte el repositorio aquí y aquí ).

¡La buena noticia lamentablemente termina aquí! Si quisiéramos filtrar los libros hechos (en nuestro ejemplo) por ‘John Doe’, descubriríamos uno de los muchos límites de Firebase: la incapacidad de concatenar operadores para realizar consultas complejas 😢. Para alcanzar el objetivo, deberíamos exponer la relación entre autores y libros a otra lista, simplificando (pero en realidad duplicando) la información que se filtrará … pero hay esperanza: ¡consulte Cloud Firestore vs Realtime Database y mi artículo sobre Cloud Firestore  🎉!