Construire un traceur utilisateur en temps réel avec wordpress, firebase et AngularJS

Lorsque vous éditez du contenu dans WordPress, fermez d’abord le site jusqu’à ce que vous appuyiez sur update. Vous pouvez utiliser Javascript pour forcer les mises à jour pendant un certain temps, mais cela peut devenir ennuyeux. Ajax – une autre façon de le gérer est d’utiliser Ajax. Définit la plage pour saisir les données du serveur et mettre à jour la table. Mais si rien n’avait changé? Pourquoi s’inquiéter de cette demande dans Ajax? Que se passe – t – il si je ne peux mettre à jour les données que si elles changent? Ceci est facilement réalisé par firebase et l’Association AngularJS. Au fur et à mesure que les données changent dans firebase, le tableau contenant les informations de l’utilisateur est automatiquement mis à jour.
Étape 1: créer un compte firebase gratuit firebase firebase est une base de données en ligne en temps réel – C’est essentiellement un objet json que vous pouvez facilement accéder et mettre à jour. Il a plusieurs utilisations, mais je l’utilise pour codecavary afin que les utilisateurs puissent interagir immédiatement entre eux. Firebase est facile à utiliser: il suffit de créer un compte gratuit et de créer une application. Je vais créer une application appelée roylivecontent. Vous devez copier l’URL de l’application pour une utilisation ultérieure. Mon URL est: http:\/\/roylivecontent.firebaseIO.com – Oui. Après avoir configuré l’application, vous devriez être en mesure de l’ouvrir et de voir les données. Votre écran devrait ressembler à ceci: Votre application firebase est maintenant prête.
Étape 2: créer un plug – in de base que vous utilisiez à partir de zéro ou que vous utilisiez des modèles à partir de zéro, il y a quelque chose dont vous avez besoin pour créer un plug – in: un répertoire de modèles qui stocke des fichiers HTML ajoute un script commun – la Bibliothèque JS firebase \
Dans la file d’attente du script) et l’URL de l’application firebase que vous venez de créer pour enregistrer. Vous pouvez le tester en mettant à jour votre administrateur et en regardant la console pour voir s’il y a de nouveaux objets mondialisés. Étape 5: localiser l’objet de données – bien public, nous allons maintenant aborder les aspects publics ou axés sur le client. Nous commencerons par un autre objet localisé, mais cette fois dans le script de rappel public WP _ enqueue afin que vous puissiez accéder à cet objet global lors de la visualisation du site.
Dans une fonction de file d’attente de script public, créez un objet localisé qui aura les données suivantes: l’URL firebase (option site) ID utilisateur, l’ID d’article du nom d’utilisateur. Si l’utilisateur est connecté, vous pouvez utiliser WP _ get current user pour retourner l’utilisateur actuel. Si oui, je passe l’ID et le nom d’utilisateur (Login utilisateur) à mon objet de localisation. Alternativement, je peux définir l’utilisateur à false pour calculer rapidement s’il y a des utilisateurs en utilisant des booléens, ce qui sera utile plus tard. Ajouter un emplacement géographique
En plus des données des utilisateurs et de l’emplacement actuel, il est important de connaître l’emplacement géographique des visiteurs. Il existe de nombreuses API publiques gratuites qui peuvent être utilisées pour obtenir ces données en fonction de l’adresse IP de l’utilisateur. J’ai choisi d’utiliser http:\/\/www.telize.com\/geoip , passe l’IP et renvoie l’objet json avec l’emplacement géographique. Pour obtenir cette information dans l’objet localisé, nous effectuons WP _ Safe Remote get. Comme l’API renvoie json, nous devons encapsuler le corps de la réponse dans une fonction PHP appelée json _ Decode qui convertit l’objet json en un tableau PHP.
Étape 6 JavaScript commun: envoyer des données aux étapes 4 et 5 de firebase peut être échangé, parfois j’aime d’abord créer une interface de gestion et utiliser des données (passer à des objets localisés), parfois j’aime d’abord utiliser c
Vérifiez tout le contenu commun et effectuez toutes les opérations de contrôle de code connexes. Je vais continuer à utiliser cette méthode. La première partie de l’utilisation de firebase est d’envoyer des données à un objet json stocké sur firebase. AngularJS n’a pas besoin d’envoyer des données à firebase, il suffit de votre bibliothèque JavaScript. La première chose que nous faisons en JavaScript est de vérifier si la variable de localisation de l’URL firebase existe, sinon nous retournons parce que continuer n’a aucun sens. Si l’URL firebase est définie, nous continuerons à définir et à soumettre les données. Définissez le paramètre par défaut de l’utilisateur pour le recul c’est là que les objets localisés nous aideront. Tout d’abord, nous devons créer quelques paramètres par défaut à envoyer à firebase. J’envoie l’ID utilisateur à un nombre aléatoire entre 1000 et 1500 et le nom d’utilisateur à 0. Définir les données de l’utilisateur une fois définies, nous commençons à saisir les données réelles. Vérifiez d’abord s’il y a des utilisateurs basés sur des objets localisés, si l’ID utilisateur et le nom d’utilisateur sont définis aux données appropriées. Deuxièmement, si elle existe, nous définissons l’emplacement géographique; sinon, nous définissons False. Enfin, nous allons définir l’emplacement actuel et l’ID du billet. C’est firebase qui envoie les données à firebase, et heureusement il a quelques fonctionnalités intégrées puissantes pour gérer tout cela. Prima vous permet de gérer les paramètres des objets lorsque les utilisateurs sont en ligne. [JS] var userref = new firebase (livetracker _ data.firebase URL + ‘\/ Status \/’ + user id); Numéro de référence de l’utilisateur. Set ({inline: True, user: Boolean (livetracker _ data.user), user id: parseint (User ID), user name: username username, display: Current loc, Browser: $. Browser, Geographical location: User location,}); [\/ JS] dans le code ci – dessus, nous définissons les données de l’utilisateur, essentiellement l’objet après que l’utilisateur est en ligne. Je suis en ligne à True, vous pouvez sauter
Parce qu’il est sûr de supposer que si les données existent, l’utilisateur est en ligne, mais c’est toujours un bon contrôle. Si vous ne voulez pas supprimer les données lorsqu’un utilisateur se déconnecte de votre site, vous pouvez simplement les changer de True à false pour voir la dernière page et l’emplacement de l’utilisateur spécifique. Une autre chose à noter est que nous utilisons l’URL firebase avec \/ presence \/, de sorte que le tableau des objets utilisateurs en ligne est stocké dans un endroit séparé avec d’autres données dont vous pourriez avoir besoin. Quand j’ai commencé à utiliser firebase, j’ai créé une application séparée pour chaque tableau d’objets, mais j’ai réalisé que vous pouviez tout avoir dans une application, et que chaque tableau était une URL unique. Que se passe – t – il si l’utilisateur se déconnecte en fermant le site ou en quittant le site? Même le Code pour gérer la déconnexion de l’utilisateur est très simple [JS] var amonline = new firebase (livetracker _ data.firebase URL + ‘\/. Info \/ Connected’); Amonline. On (‘Value’, Function (snapshot) {if (snapshot.val () {userref.ondisconnect (). Remove ();}}); Le Code [\/ JS] Supprime l’utilisateur des données. Comme indiqué ci – dessus, vous pouvez simplement modifier l’objet pour obtenir des données sur sa dernière position sur le site. Un autre exemple pourrait être l’horodatage qui stocke la dernière connexion, ou si vous changez les données de l’utilisateur pour d’autres opérations dans firebase, vous pourriez voir leur dernière activité. Je vous recommande de ne le faire que pour les utilisateurs connectés, car les anonymes (ou les visiteurs pré – enregistrés) peuvent obtenir deux identifiants uniques à partir du générateur d’identifiants utilisateur par défaut. Firebase reçoit maintenant des données chaque fois qu’un utilisateur se connecte. Pour le tester, connectez – vous à votre compte firebase et visualisez l’application que vous avez créée. Visitez n’importe quelle page du site et une fois chargée, vous devriez inclure votre d
Utilisateur sur la ligne $firebase Object (ref), il y a donc une connexion instantanée entre firebase et les applications AngularJS. C’est vraiment une chose magique, parce que lorsque les utilisateurs se connectent, se déplacent et se déconnectent, les données de firebase changent, $Scope. En ligne _ l’utilisateur changera pour refléter ces changements. Le dernier point de la directive est de définir un modèle, un fichier HTML. J’ai stocké le mien dans le répertoire des modèles du plug – in. Nous utilisons les propriétés de l’objet localisé du modèle admin _ pour obtenir l’URL. Étape 8 le modèle AngularJS puisqu’il entre dans la zone de gestion du site, nous voulons nous assurer qu’il est bien adapté. Je vais utiliser la table pour rendre ma vie plus facile. [php]

Informations du Navigateur