Share
Dans le didacticiel d’aujourd’hui, nous allons vous aider à utiliser Firebase en créant une simple application de salle de discussion en utilisant l’API Javascript de Firebase. Cette application vous fournira les éléments de base pour développer des applications en temps réel plus avancées sur vos propres projets..
Pour que Firebase soit opérationnel, vous devrez créer un compte développeur gratuit en visitant leur site web et en vous inscrivant. Une fois que vous vous êtes enregistré avec succès, Firebase vous redirigera vers le tableau de bord de votre compte, où vous aurez accès à tous vos emplacements de données Firebase et à d’autres fonctionnalités intéressantes. Cependant, pour le moment, vous devez sélectionner l’emplacement de données Firebase intitulé, Ma première application. N'hésitez pas à renommer cette application ou à en créer une nouvelle.
Lorsque l'emplacement de données Firebase a été créé, son propre fichier unique lui a été attribué. nom d'hôte. Ce nom d'hôte unique est très important. car c’est là que vos données seront lues et écrites aussi. Nous discuterons plus en détail du nom d’hôte plus loin dans le tutoriel, mais pour le moment:
Premier élément de l’ordre du jour: créez un nouveau fichier HTML faisant référence aux CDN du client Firebase, jQuery et Bootstrap. Il est évident que nous devons faire référence au CDN de Firebase. La raison pour laquelle nous faisons référence à la fois à jQuery et à Bootstrap n’est peut-être pas aussi claire. J'utilise jQuery et Bootstrap à des fins de développement rapide d'applications. Ces deux bibliothèques me permettent de faire les choses très rapidement et ne nécessitent pas beaucoup de codage manuel. Cependant, je ne traiterai pas jQuery ou Bootstrap de manière très détaillée; alors n'hésitez pas à en savoir plus sur ces bibliothèques JavaScript.
Le balisage qui implémente ce que j'ai décrit est le suivant:
Application de discussion Firebase
Maintenant que notre fichier HTML est créé et qu'il référence les bons CDN, commençons à travailler sur le reste de notre application..
Premièrement, nous devons déterminer les fonctionnalités essentielles de cette application. Il semble que la plupart des applications de style salle de conversation présentent deux similitudes: une boîte de message permettant d'envoyer des messages à un serveur et une section contenant les messages d'un serveur. Dans notre cas, ce serveur sera notre emplacement de données Firebase.
Implémentons la boîte de message pour envoyer des messages à un serveur à l'avance. Pour cela, nous devrons créer une interface simple comprenant un contribution terrain et un soumettre bouton enveloppé dans forme Mots clés. Puisque nous référençons la feuille de style Bootstrap, nous avons la possibilité d'utiliser certains styles d'amorçage prédéfinis pour créer l'interface. Comme je l’ai dit plus tôt, c’est très pratique et nous permet d’écrire moins de code à la main.
Alors commençons par placer un div avec l'attribut de classe récipient directement après l'ouverture corps balise dans le fichier HTML. Il s'agit d'une fonctionnalité d'amorçage qui fournit des contraintes de largeur et un remplissage pour le contenu de la page. Dans les balises de conteneur, permet d'ajouter un titre enveloppé dans H1 balises, afin que nous puissions donner à l'application un nom descriptif. Mon titre sera "Application de discussion Firebase". N'hésitez pas à utiliser votre propre créativité lors de la rédaction de votre titre.
Le balisage qui implémente ce que j'ai décrit ci-dessus ressemble à ceci:
Application de discussion Firebase
En outre, nous devons également ajouter un div avec attributs de classe: panneau et panneau par défaut. Un panneau est un composant Bootstrap qui fournit une boîte simple contenant quatre DIV internes: rubrique panneau, titre du panneau, panneau-corps, et panneau pied de page par défaut. Nous n'utiliserons pas rubrique panneau et titre du panneau mais nous allons utiliser les deux panneau-corps et panneau pied de page. le panneau DIV sera utilisé comme conteneur principal pour le client de la salle de discussion..
Le balisage qui implémente ce que j'ai décrit ci-dessus est le suivant:
Application de discussion Firebase
Pour le moment, nous ne travaillerons pas avec le panneau-corps. Cependant, nous devrons utiliser cette section ultérieurement dans le didacticiel pour remplir les messages à partir de notre emplacement de données..
Pour le moment, nous allons nous concentrer sur la division du pied de page du panneau. Le pied de page du panneau contient un champ de saisie, un bouton d'envoi et un bouton de réinitialisation. Nous allons donner au champ d'entrée un identifiant d'attribut de commentaires et le bouton d'envoi d'un identifiant d'attribut soumettre-btn. Ces deux attributs sont très importants et seront nécessaires plus tard dans le tutoriel. N'hésitez pas à modifier les ID d'attribut pour les éléments de formulaire.
Le balisage qui implémente ce que j'ai décrit ci-dessus est le suivant:
Application de discussion Firebase
Maintenant, implémentons le JavaScript qui nous permettra d’envoyer le message à l’emplacement de données de notre Firebase.
Nous devons d’abord ajouter un ensemble de scénario balises directement au-dessus de la fermeture corps balise, dans le fichier HTML. Dans les balises de script, nous devons créer une référence à l'emplacement de données de notre Firebase. Sans cette référence, nous ne pouvons pas écrire de données dans notre emplacement de données. Cela peut être accompli en initialisant le constructeur de Firebase et en transmettant notre emplacement de données en tant que paramètre. N'oubliez pas que l'emplacement des données Firebase a été créé lors de la configuration de Firebase (nom d'hôte unique)..
Le code qui implémente ce que j'ai décrit ci-dessus est le suivant:
Accentsconagua
var fireBaseRef = new Firebase ("VOTRE URL DE DONNEES FIREBASE"); Après l’initialisation de l’objet de référence Firebase, nous devons associer un gestionnaire d’événements click au sélecteur de bouton d'envoi. L'emplacement de ce sélecteur est dans le pied de page du panneau. De plus, nous devons nous assurer que le rappel du gestionnaire d’événements contient un retourne faux instruction en tant que dernière ligne de code. Cela garantira que l'action par défaut de soumission du formulaire ne se produira pas et empêchera l'événement de remonter dans l'arborescence DOM. Cependant, dans certains cas, vous souhaiterez peut-être la propagation d'événements.
Les deux extraits JavaScript ci-dessous implémentent ce qui est décrit ci-dessus:
$ ("# submit-btn"). bind ("click", function () return false;); $ ("# submit-btn"). bind ("click", fonction (event) event.preventDefault (); event.stopPropagation ();); Ensuite, nous définirons une variable qui fait référence au sélecteur de commentaire et une autre variable qui supprime les espaces blancs du début et de la fin de la valeur du commentaire..
Le code qui implémente ce que j'ai décrit ci-dessus est le suivant:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# commentaires"); var comment_value = $ .trim (comment.val ()); return false;) ; Nous devons maintenant déterminer la méthode nécessaire pour écrire ces commentaires dans notre emplacement de données..
L'API de Firebase offre plusieurs méthodes pour écrire des données dans un emplacement de données. Cependant, dans le tutoriel d'aujourd'hui, nous allons nous concentrer sur l'utilisation de la ensemble() et pousser() méthodes. Passons brièvement en revue ce que chacune de ces méthodes nous permet de faire..
ensemble() la méthode écrit les données dans l'emplacement de données et remplace toutes les données actuellement stockées à l'emplacement de données.pousser() La méthode écrit les données dans l’emplacement de données en générant automatiquement un nouvel emplacement enfant avec un nom unique. De plus, ce nom unique sera préfixé par un horodatage. Cela permettra à tous les enfants d'être classés par ordre chronologique..Après avoir examiné les deux ensemble() et pousser() les méthodes; Je pense qu'il est évident que nous devons tirer parti de la pousser() méthode dans notre application. Sinon, nous écraserons en permanence le dernier commentaire à notre emplacement de données et ce ne serait pas amusant.
Pour ce faire, revenons au JavaScript que nous avons précédemment ajouté à notre page. Nous devons maintenant transmettre la valeur du commentaire à notre emplacement de données. Maintenant, gardez à l'esprit qu'il existe différents pousser méthodes qui nous permettent de transmettre des données dans divers formats, tels qu'un objet, un tableau, une chaîne, un nombre, un booléen ou une valeur nulle. Nous allons simplement utiliser un objet qui a une paire clé-valeur d'un commentaire et une valeur de commentaire. En outre, nous attacherons un rappel facultatif à déclencher après le pousser les méthodes sont finies. Le rappel retournera un objet d'erreur en cas d'échec et, en cas de succès, une valeur nulle.
Le code qui implémente ce que j'ai décrit ci-dessus est le suivant:
$ ("# submit-btn"). bind ("clic", fonction () var comment = $ ("# commentaires"); var commentValue = $ .trim (comment.val ()); fireBaseRef.push ( comment: commentValue, function (error) if (error! == null) alert ('Impossible de transférer des commentaires vers Firebase!');); return;)); Ajoutons maintenant quelque chose pour empêcher les utilisateurs de la salle de conversation d’écrire des messages vierges dans notre emplacement de données. Cela peut facilement être accompli en ajoutant un simple sinon déclaration qui vérifie la longueur de la valeur du commentaire.
Le code qui implémente ce que j'ai décrit ci-dessus est le suivant:
$ ("# submit-btn"). bind ("clic", fonction () var comment = $ ("# commentaires"); var commentValue = $ .trim (comment.val ()); if (commentValue.length === 0) alert ('Les commentaires sont obligatoires pour continuer!'); Else _fireBaseRef.push (comment: commentValue, function (error) if (error! == null) alert ('Unable to pousser les commentaires vers Firebase! ');); comment.val (""); return false;); Génial, nous avons terminé avec succès la section de notre application qui permet aux utilisateurs d’écrire des données sur notre emplacement de données. Mais nous manquons toujours de la fonctionnalité qui offre aux utilisateurs une expérience de discussion en temps réel. Ce type d'expérience nécessitera la capacité de lire des données à partir des emplacements enfants, dans l'emplacement de données..
Comme nous l'avons mentionné précédemment, la plupart des applications de style salle de discussion lisent les données d'un serveur, puis remplissent une section de l'interface. Nous devrons faire la même chose dans notre application, en utilisant l'API Firebase..
L'API de Firebase offre plusieurs méthodes pour lire des données à partir d'un emplacement de données. Dans le didacticiel d’aujourd’hui, nous allons nous concentrer sur l’utilisation de la sur() méthode.
le sur() La méthode a plusieurs arguments qui méritent d’être examinés, mais nous allons seulement couvrir les deux premiers arguments: type d'événement et rappeler. Passons en revue les deux.
type d'événement Le "type d'événement"L’argument a plusieurs options. Examinons-les pour pouvoir déterminer laquelle répondra à nos besoins..
valeur"- sera déclenché une fois et lit tous les commentaires. Chaque fois qu’un commentaire est modifié, il sera de nouveau déclenché, ainsi que tous les commentaires lus..ajouté à l'enfant"- sera déclenché une fois pour chaque commentaire, ainsi que chaque fois qu'un nouveau commentaire est ajouté.child_removed"- sera déclenché chaque fois qu'un commentaire est supprimé.enfant_changé"- sera déclenché chaque fois qu'un commentaire est modifié.child_moved"- sera déclenché chaque fois que l'ordre d'un commentaire est modifié.Après avoir examiné les options ci-dessus, il semble évident que nous devrions utiliser "ajouté à l'enfant"comme notre"type d'événement". Ce type pair sera déclenché une fois pour chaque commentaire à notre emplacement de données, ainsi que chaque fois qu’un nouveau commentaire est ajouté. De plus, lorsqu’un nouveau commentaire est ajouté, il ne renvoie pas l’ensemble des commentaires à cet emplacement, C’est exactement ce que nous voulons! Il n’est pas nécessaire de renvoyer l’ensemble des commentaires lorsqu'un nouveau commentaire est ajouté..
rappeler Le "rappeler" pour le sur() Cette méthode fournit un élément appelé «instantané de données» par Firebase et comportant plusieurs fonctions membres; prénom() et val ().
le prénom() La fonction membre nous fournit le nom unique de "l'instantané de données". Si vous vous en souvenez plus tôt, nous avons utilisé le pousser() fonction pour écrire un nouveau commentaire sur notre emplacement de données. Quand pousser() a été appelé, il a généré un nouvel emplacement enfant à l'aide d'un nom unique. Il s'agit du nom qui sera renvoyé via la fonction de membre de rappel.,prénom().
le val () La fonction membre nous fournit la représentation d'objet JavaScript de "l'instantané de données" et avec cet instantané, nous pourrons récupérer un commentaire à partir de notre emplacement de données. Cependant, nous devons revenir en arrière un instant.
Plus tôt dans ce didacticiel, nous avons implémenté le JavaScript nécessaire pour transférer les commentaires vers notre emplacement Firebase. Nous l'avons fait en poussant un objet avec une paire clé / valeur. Dans ce cas, la clé était "commentaire"et la valeur correspond à l'entrée entrée par l'utilisateur. Par conséquent, si nous voulons extraire un commentaire de notre" capture instantanée de données ", nous devons reconnaître le type de données correct. Dans ce cas, nous traitons avec un objet, vous pouvez donc utilisez la notation par points ou par notation entre crochets pour accéder à la propriété spécifiée.
Les deux extraits JavaScript ci-dessous implémentent ce qui est décrit ci-dessus:
fireBaseRef.on ('child_added', function (capture instantanée) var nomUni = capture instantanée.nom (); var comment = capture instantanée.val (). comment;); fireBaseRef.on ('child_added', function (instantané) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); Ensuite, créons un moyen simple mais propre d’afficher chaque commentaire. Ceci peut être facilement réalisé en encapsulant chaque commentaire dans une div et étiqueter chaque commentaire avec son nom unique. Les commentaires portent généralement le nom de l'utilisateur qui a écrit ce commentaire. Dans notre cas, il s'agit d'un client de salle de discussion anonyme..
Le code qui implémente ce que j'ai décrit ci-dessus est le suivant:
var commentsContainer = $ ('# commentaires-conteneur'); $ ('', class:' comment-container ') .html ('Commentaire '+ uniqName +''+ commentaire); Ensuite, nous devons ajouter chaque commentaire au conteneur du commentaire et obtenir la position verticale actuelle de la barre de défilement du conteneur du commentaire, puis faire défiler jusqu'au dernier emplacement. Cela garantira que chaque fois qu'un commentaire est envoyé à Firebase, tous les utilisateurs utilisant l'application de discussion verront le dernier commentaire émis. Tout cela doit être fait dans le rappel.
Ça devrait ressembler a quelque chose comme ca:
var commentsContainer = $ ('# commentaires-conteneur'); $ ('', class:' comment-container ') .html ('Commentaire '+ uniqName +''+ comment) .appendTo (commentsContainer); commentsContainer.scrollTop (commentsContainer.prop ('scrollHeight')); Appliquons maintenant quelques styles CSS simples aux DIV entourées par chaque bloc de commentaires. Cela rendra l'apparence légèrement plus attrayante et conviviale. Ces styles doivent être ajoutés dans les balises de style, situées dans le tête section du HTML.
Le code qui implémente ce que j'ai décrit ci-dessus est le suivant:
.conteneur max-width: 700px; # comments-container border: 1px solid # d0d0d0; hauteur: 400px; débordement-y: faire défiler; .comment-container padding: 10px; marge: 6px; arrière-plan: # f5f5f5; taille de police: 13px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; .comment-container .label margin-right: 20px; .comment-container: dernier type de la page border-bottom: none;
Il est maintenant temps de lancer notre application. Commençons par ouvrir deux instances de notre navigateur moderne préféré et les placer côte à côte sur notre bureau. Nous allons ensuite rechercher l'emplacement de notre fichier que nous avons créé, sur les deux navigateurs. Testez-le en écrivant quelques commentaires et regardez la magie de Firebase.
Il est incroyable que seules quelques lignes de code puissent produire une application aussi puissante. N'hésitez pas à modifier cet extrait de quelque manière que ce soit pour produire les résultats souhaités.
Consultez la démo en ligne pour le voir en action. Vous trouverez ci-dessous le code source complet de l’application de salon de discussion:
Application de discussion Firebase Application de discussion Firebase
Dans le didacticiel d’aujourd’hui, nous avons suivi le processus de mise en œuvre d’une simple application de salle de discussion en utilisant l’API JavaScript de Firebase. Ce faisant, nous avons pu faire l'expérience de la puissance de Firebase et en apprécier la commodité. Vous trouverez ci-dessous certains des éléments clés sur lesquels nous nous sommes penchés aujourd'hui:
pousser méthode.sur méthode avec le type d'événement "ajouté à l'enfant".J'espère que ce tutoriel vous a fourni le point de départ nécessaire pour aller plus loin avec Firebase. Si vous avez des questions ou des commentaires, n'hésitez pas à les laisser ci-dessous. Merci encore pour votre temps et continuez d'explorer les possibilités infinies de l'API Firebase.
