() translation by (you can also view the original English article)
Firebase es una excelente tecnología que nos permite crear aplicaciones web sin llevar a cabo ningún tipo de programación del lado del servidor, de manera que el desarrollo se vuelve más rápido y sencillo. En este artículo te mostraré cómo usar Firebase junto con AngularJS para lograr la mejor experiencia posible, tanto para el usuario como para el desarrollador.
¿Qué hay de bueno en el uso de Firebase con AngularJS? Bueno, si observas cómo se crean ambas tecnologías, ahí tienes tu respuesta. El enlace de datos bidireccional de AngularJS funciona excepcionalmente bien con la filosofía "No solamente guardes datos. Sincronízalos" de Firebase.
El desarrollo es rápido y la experiencia de usuario es excelente: los usuarios simplemente escriben algo y esa información se guarda y está disponible de inmediato para los demás usuarios conectados.
Paso 1: Configuración de la base de datos
Comencemos creando una base de datos. Si aún no tienes una cuenta, crea una (¡puedes registrarte con GitHub!). Luego inicia sesión y crea una aplicación rellenando el formulario y haciendo clic en el botón.
Dado que usaremos un inicio de sesión de Facebook más adelante, deberás proporcionar los detalles de tu aplicación de Facebook (es decir, el ID y la clave secreta de la aplicación) en las opciones de tu base de datos. Haz clic en el botón "Administrar" debajo del nombre de tu aplicación de Firebase y ve a la pestaña "Inicio de sesión simple", luego escribe la información solicitada y haz clic en "Habilitado".
También deberás configurar tu aplicación de Facebook para que funcione. El proceso completo es bastante rápido y se describe en el sitio web de Firebase.
Paso 2: Configuración de una aplicación de Angular
Comencemos creando código de base en HTML y JavaScript para nuestra aplicación. Crearemos una aplicación de chat simple que permitirá a los usuarios iniciar sesión usando Facebook.
Crea un archivo HTML y coloca este marcado en su interior:
1 |
<html>
|
2 |
<head>
|
3 |
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> |
4 |
<script src="https://code.angularjs.org/1.3.8/angular.js"></script> |
5 |
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script> |
6 |
<script src="angular.app.js"></script> |
7 |
</head>
|
8 |
<body ng-app="simpleChat"> |
9 |
<div ng-controller="MessagesCtrl"> |
10 |
<button ng-click="login()" ng-hide="authData">Log In</button> |
11 |
<input ng-model="newMessage.text" ng-keyup="handleKeyup($event)"> |
12 |
<div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div> |
13 |
</div>
|
14 |
</body>
|
15 |
</html>
|
Como puedes ver, este contiene algunos scripts que necesitamos. Por supuesto, incluye firebase.js y angular.js, y también necesitamos firebase-simple-login.js para la autenticación con Facebook. angularfire.min.js contiene el módulo AngularFire, que simplifica enormemente el trabajo con Firebase.
Ahora crea el archivo angular.app.js, en el que colocaremos la lógica de nuestra aplicación. Comencemos declarando el módulo principal, simpleChat:
1 |
var app = angular.module('simpleChat', ['firebase']); |
Como puedes ver, la única dependencia es el módulo firebase de AngularFire.
Paso 3: Inicio de sesión simple
Ahora creemos el código que permitirá a los usuarios iniciar sesión con Facebook. Dado que nuestra aplicación es muy pequeña, solamente tendremos un controlador en su interior: MessagesCtrl.
1 |
app.controller('MessagesCtrl', ["$scope", "$firebase", |
2 |
function ($scope, $firebase) { |
La función $firebase nos permitirá conectarnos a la base de datos de Firebase, y $firebaseSimpleLogin administrará las tareas de inicio de sesión.
Necesitaremos una instancia de Firebase, así que vamos a crearla:
1 |
var ref = new Firebase("https://tutssampleapp.firebaseio.com/"); |
Por supuesto, debes reemplazar 'your-unique-url' con la URL de tu base de datos. Ahora prepara el objeto de inicio de sesión usando $firebaseSimpleLogin y ref, que acabamos de crear:
1 |
$scope.login = function(){ |
2 |
ref.authWithOAuthPopup("facebook", function(error, authData) { |
3 |
});
|
4 |
}
|
Y básicamente eso es todo para obtener el estado de inicio de sesión. Si el usuario ha iniciado sesión, la variable $scope.loginObj.user contendrá un objeto con los datos de dicho usuario; de lo contrario, su valor será null.
Ahora, dentro de la sección body de tu página agrega un <div> con nuestro controlador y un botón para permitir que el usuario se registre:
1 |
<div ng-controller="MessagesCtrl"> |
2 |
<button ng-click="login()" ng-hide="authData">Log In</button> |
3 |
<input ng-model="newMessage.text" ng-keyup="handleKeyup($event)"> |
4 |
<div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div> |
5 |
</div>
|
Hemos usado la directiva ngHide para ocultar el botón cuando el usuario ya haya iniciado sesión. Ahora el método $scope.login() simplemente llamará a un método con el mismo nombre en $scope.loginObj:
1 |
$scope.login = function(){ |
2 |
ref.authWithOAuthPopup("facebook", function(error, authData) { |
3 |
});
|
4 |
}
|
El único parámetro que usamos es el nombre del proveedor utilizado para iniciar la sesión del usuario. Ahora puedes probar tu aplicación, y el botón de inicio de sesión debería desaparecer cuando hayas realizado dicha acción.
Paso 4: Visualización de los mensajes
Como es de esperar, esto también será bastante sencillo. En primer lugar, preparemos el HTML. Usaremos ngRepeat para recorrer todos los mensajes y mostrarlos:
1 |
<div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div> |
Ahora tenemos que actualizar el controlador. Crea la variable obj que contendrá el objeto por Firebase:
1 |
var obj = $firebase(ref).$asObject(); |
El método $asObject() convierte toda la referencia a un objeto de JavaScript con algunos métodos útiles. El método que vamos a usar se llama .$bindTo(), y nos permitirá crear un enlace de tres vías (Firebase-AngularJS-DOM):
1 |
obj.$bindTo($scope, "data"); |
Colocamos $scope como el primer parámetro, y el nombre de una propiedad como el segundo. El objeto que estamos enlazando aparecerá en $scope con este nombre (como $scope.data, en este ejemplo).
¡Y eso es todo lo que necesitas para mostrar los mensajes! Por supuesto, a menos que hayas colocado algo en la matriz messages en tu base de datos, no verás nada si ejecutas tu aplicación en este momento.
Paso 5: Envío de mensajes
Este paso será aún más rápido. Agreguemos un elemento input al div de nuestro controlador, para que nuestros usuarios puedan escribir mensajes:
1 |
<input ng-model="newMessage.text" ng-keyup="handleKeyup($event)"> |
El valor del input estará enlazado con la variable $scope.newMessage.text, y su evento keyup activará la devolución de llamada $scope.handleKeyup(). Observa que enviamos $event como parámetro, ya que necesitamos verificar si el usuario presionó la tecla Intro.
Definamos la función $scope.handleKeyup():
1 |
$scope.handleKeyup = function handleKeyup(e) { |
Primero verificamos si se presionó la tecla Intro:
1 |
if (e.keyCode == 13) { |
Si es así, añadimos el nombre para mostrar del usuario al objeto $scope.newMessage, actualizamos la matriz $scope.data.messages y restablecemos el objeto $scope.newMessage:
1 |
$scope.newMessage.author = ref.getAuth().facebook.displayName; |
2 |
ref.child("messages").push($scope.newMessage); |
3 |
$scope.newMessage = {}; |
También debes inicializar el objeto $scope.newMessage:
1 |
$scope.newMessage = {}; |
Eso es todo. Abre tu aplicación en dos navegadores (para que puedas usar dos cuentas de Facebook) ¡y pruébala! Como de costumbre, por favor deja cualquier pregunta, comentario y retroalimentación general en el formulario a continuación.
