Share
Firebase est une technologie de pointe qui nous permet de créer des applications Web sans aucune programmation côté serveur, afin que le développement devienne plus rapide et plus facile. Dans cet article, je vais vous montrer comment l'utiliser avec AngularJS pour obtenir la meilleure expérience de développeur et d'utilisateur possible..
Pourquoi utiliser Firebase avec AngularJS? Eh bien, si vous regardez comment les deux technologies sont fabriquées, voici votre réponse. La liaison de données bidirectionnelle de AngularJS fonctionne exceptionnellement bien avec Firebase "Ne vous contentez pas de sauvegarder des données. Synchronisez-les". philosophie.
Le développement est rapide et l'expérience utilisateur est formidable: il suffit de taper quelque chose qui est déjà enregistré et disponible pour les autres utilisateurs connectés.
Commençons par créer une base de données. Si vous n'avez pas encore de compte, créez-en un (vous pouvez vous connecter avec GitHub!). Puis connectez-vous et créez une application en remplissant le formulaire et en cliquant sur le bouton.
Dans la mesure où nous utiliserons une connexion Facebook plus tard, vous devrez fournir les détails de votre application Facebook (c'est-à-dire son identifiant et son secret) dans les options de votre base de données. Cliquez sur le bouton "Gérer" sous le nom de votre application Firebase et allez à l'onglet "Connexion simple", puis entrez les informations demandées et cochez "Activé"..
Vous devrez également configurer votre application Facebook pour la faire fonctionner. L'ensemble du processus est assez rapide et est décrit sur le site Web de Firebase..
Commençons par créer un code HTML et JavaScript de base pour notre application. Nous allons créer une application de discussion simple qui permettra aux utilisateurs de se connecter à l'aide de Facebook..
Créez un fichier HTML et mettez ce balisage à l'intérieur:
message.author: message.text
Comme vous pouvez le constater, il contient quelques scripts dont nous avons besoin. Bien sûr, cela comprend firebase.js et angular.js, et nous avons aussi besoin firebase-simple-login.js pour l'authentification Facebook. angularfire.min.js contient le module AngularFire, ce qui simplifie grandement l'utilisation de Firebase.
Maintenant, créez le angular.app.js fichier, dans lequel nous allons mettre notre logique d'application. Commençons par déclarer le module principal, simpleChat:
Accentsconagua
var app = angular.module ('simpleChat', ['firebase']);Comme vous pouvez le constater, la seule dépendance est la base de feu module de AngularFire.
Créons maintenant le code qui permettra aux utilisateurs de se connecter avec Facebook. Puisque notre application est si petite, nous n’aurons qu’un seul contrôleur: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase", function ($ scope, $ firebase) le $ firebase fonction nous permettra de nous connecter à la base de données Firebase, et $ firebaseSimpleLogin va gérer les trucs de connexion.
Nous aurons besoin d'un Base de feu Par exemple, créons-le:
var ref = new Firebase ("https://tutssampleapp.firebaseio.com/");Bien sûr remplacer 'your-unique-url' avec l'URL de votre base de données. Maintenant, préparez l'objet de connexion en utilisant $ firebaseSimpleLogin et le ref nous venons de créer:
$ scope.login = function () ref.authWithOAuthPopup ("facebook", fonction (erreur, authData) ); Et c'est à peu près tout pour obtenir le statut de connexion. Si l'utilisateur est connecté, le $ scope.loginObj.user variable contiendra un objet avec les données de l'utilisateur; sinon, ce sera nul.
Maintenant, ajoutez un Nous avons utilisé le Le seul paramètre que nous avons utilisé est le nom du fournisseur utilisé pour connecter l'utilisateur. Vous pouvez tester votre application maintenant, et le bouton de connexion devrait disparaître lorsque vous vous connectez.. Comme vous vous en doutez, ce sera également assez facile. Commençons par préparer le code HTML. Nous utiliserons Nous devons maintenant mettre à jour le contrôleur. Créer le le nous mettons Et c'est tout ce dont vous avez besoin pour afficher les messages! Bien sûr, à moins que vous n'ayez mis quelque chose dans le Celui-ci sera encore plus rapide. Ajoutons une entrée à notre contrôleur La valeur de l'entrée sera liée à la Définissons le Premièrement, nous vérifions si la touche Entrée a été enfoncée: Si tel est le cas, nous ajoutons le nom d'affichage de l'utilisateur au Vous devez également initialiser le Ça y est - ouvrez votre application dans deux navigateurs (pour pouvoir utiliser deux comptes Facebook) et essayez-la! Comme d'habitude, s'il vous plaît laissez des questions, commentaires et commentaires généraux dans le formulaire ci-dessous.ngHide directive pour masquer le bouton lorsque l'utilisateur est connecté. Maintenant, le $ scope.login () méthode appellera simplement une méthode portant le même nom sur le $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup ("facebook", fonction (erreur, authData) ); Étape 4: Affichage des messages
ngRepeat pour parcourir tous les messages et les afficher:obj variable qui contiendra l'objet renvoyé par Firebase:var obj = $ firebase (ref). $ asObject ();
$ asObject () method convertit la référence entière en un objet Javascript avec quelques méthodes utiles. Celui que nous utiliserons s'appelle .$ bindTo () et nous permettra de créer une liaison à trois voies (Firebase-AngularJS-DOM):obj. $ bindTo ($ scope, "data");
$ scope en tant que premier paramètre et le nom d'une propriété en tant que second. L'objet que nous lions apparaîtra dans $ scope sous ce nom (comme $ scope.data dans cet exemple).messages tableau dans votre base de données, vous ne verrez rien si vous exécutez votre application maintenant.Étape 5: Envoi de messages
div, afin que nos utilisateurs puissent taper des messages:$ scope.newMessage.text variable, et sa keyup l'événement déclenchera le $ scope.handleKeyup () rappeler. Notez que nous avons passé $ événement en tant que paramètre, car nous devons vérifier si l'utilisateur a appuyé sur Entrée.$ scope.handleKeyup () une fonction:$ scope.handleKeyup = fonction handleKeyup (e)
if (e.keyCode == 13)
$ scope.newMessage objet, mettre à jour le $ scope.data.messages tableau et réinitialiser le $ scope.newMessage objet:$ scope.newMessage.author = ref.getAuth (). facebook.displayName; ref.child ("messages"). push ($ scope.newMessage); $ scope.newMessage = ;$ scope.newMessage objet:$ scope.newMessage = ;
