Share
Firebase es una excelente tecnología que nos permite crear aplicaciones web sin ninguna programación del lado del servidor, para que el desarrollo sea más rápido y más fácil. En este artículo, le mostraré cómo usarlo junto con AngularJS para lograr la mejor experiencia de desarrollador y usuario posible..
¿Qué tiene de bueno usar Firebase con AngularJS? Bueno, si observas cómo están hechas ambas tecnologías, ahí está tu respuesta. El enlace de datos bidireccional de AngularJS funciona excepcionalmente bien con Firebase "No solo guardar los datos. filosofía.
El desarrollo es rápido y la experiencia del usuario es excelente: solo escriben algo y ya está guardado y disponible para los demás usuarios conectados.
Vamos a empezar por crear una base de datos. Si aún no tiene una cuenta, cree una (¡puede iniciar sesión con GitHub!). Luego ingrese y cree una aplicación rellenando el formulario y haciendo clic en el botón.
Ya que usaremos un inicio de sesión de Facebook más adelante, deberá proporcionar los detalles de su aplicación de Facebook (es decir, el ID de la aplicación y el secreto de la aplicación) en las opciones de su base de datos. Haga clic en el botón "Administrar" debajo del nombre de su aplicación Firebase y vaya a la pestaña "Inicio de sesión simple", luego ingrese la información solicitada y marque "Habilitado".
También tendrás que configurar tu aplicación de Facebook para que funcione. Todo el proceso es bastante rápido y se describe en el sitio web de Firebase..
Comencemos creando una base HTML y JavaScript para nuestra aplicación. Vamos a crear una aplicación de chat simple que permitirá a los usuarios iniciar sesión usando Facebook.
Crea un archivo HTML y coloca este marcado dentro:
message.author: mensaje de texto
Como puede ver, contiene algunos scripts que necesitamos. Por supuesto que incluye firebase.js y angular.js, y también necesitamos firebase-simple-login.js para la autenticación de Facebook. angularfire.min.js contiene el módulo AngularFire, que simplifica enormemente el trabajo con Firebase.
Ahora crea el angular.app.js Archivo, en el que pondremos nuestra aplicación lógica. Empecemos por declarar el módulo principal., simple chat:
Accentsconagua
var app = angular.module ('simpleChat', ['firebase']);Como puedes ver, la única dependencia es la base de fuego módulo de AngularFire.
Ahora vamos a crear el código que permitirá a los usuarios iniciar sesión con Facebook. Como nuestra aplicación es tan pequeña, solo tendremos un controlador ahí: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase", función ($ scope, $ firebase) los $ base de fuego La función nos permitirá conectarnos a la base de datos de Firebase, y $ firebaseSimpleLogin administrará las cosas de inicio de sesión.
Necesitaremos un Base de fuego instancia, así que vamos a crearlo:
var ref = new Firebase ("https://tutssampleapp.firebaseio.com/");Por supuesto reemplazar 'tu-único-url' con la URL de su base de datos. Ahora prepara el objeto de inicio de sesión usando $ firebaseSimpleLogin y el árbitro acabamos de crear:
$ scope.login = function () ref.authWithOAuthPopup ("facebook", function (error, authData) ); Y eso es todo para obtener el estado de inicio de sesión. Si el usuario ha iniciado sesión, el $ scope.loginObj.user La variable contendrá un objeto con los datos del usuario; de lo contrario, será nulo.
Ahora agregue un Usamos el El único parámetro que utilizamos es el nombre del proveedor utilizado para iniciar sesión en el usuario. Puede probar su aplicación ahora, y el botón de inicio de sesión debe desaparecer cuando inicie sesión. Como es de esperar, esto también será bastante fácil. Primero vamos a preparar el HTML. Usaremos Ahora tenemos que actualizar el controlador. Crear el los Nosotros ponemos ¡Y eso es todo lo que necesitas para mostrar los mensajes! Por supuesto, a menos que hayas puesto algo en el Este será aún más rápido. Vamos a agregar una entrada a nuestro controlador El valor de la entrada se vinculará a la Vamos a definir el Primero, verificamos si se presionó la tecla Enter: Si es así, agregamos el nombre de usuario del usuario a la También tienes que inicializar el Eso es todo: ¡ejecute su aplicación en dos navegadores (para que pueda usar dos cuentas de Facebook) y pruébelo! Como de costumbre, deje sus preguntas, comentarios y comentarios generales en el siguiente formulario.ngOcultar Directiva para ocultar el botón cuando el usuario ha iniciado sesión. Ahora el $ scope.login () método llamará a un método con el mismo nombre en el $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup ("facebook", function (error, authData) ); Paso 4: Visualización de los mensajes
ngRepetir para recorrer todos los mensajes y mostrarlos:obj Variable que mantendrá el objeto devuelto desde Firebase:var obj = $ firebase (ref). $ asObject ();
$ asObject () método convierte toda la referencia a un objeto Javascript con algunos métodos útiles. El que usaremos se llama .$ bindTo () y nos permitirá crear un enlace de tres vías (Firebase-AngularJS-DOM):obj. $ bindTo ($ scope, "data");
$ alcance como el primer parámetro, y el nombre de una propiedad como el segundo. El objeto que estamos vinculando aparecerá en $ alcance bajo este nombre (como $ scope.data en este ejemplo).mensajes matriz en su base de datos, no verá nada si ejecuta su aplicación ahora.Paso 5: Enviando mensajes
div, Para que nuestros usuarios puedan escribir mensajes:$ scope.newMessage.text variable, y su tecla Arriba evento disparará el $ scope.handleKeyup () llamar de vuelta. Tenga en cuenta que pasamos $ evento como parámetro, ya que necesitamos verificar si el usuario presionó Enter.$ scope.handleKeyup () función:$ scope.handleKeyup = función handleKeyup (e)
if (e.keyCode == 13)
$ scope.newMessage objeto, actualizar el $ scope.data.messages matriz, y restablecer el $ scope.newMessage objeto:$ scope.newMessage.author = ref.getAuth (). facebook.displayName; ref.child ("messages"). push ($ scope.newMessage); $ scope.newMessage = ;$ scope.newMessage objeto:$ scope.newMessage = ;
