Fermer

avril 11, 2018

Frappez le terrain en courant avec Vue.js et Firestore


Google Firebase dispose d'une nouvelle possibilité de stockage de données appelée «Firestore» (actuellement en phase bêta) qui s'appuie sur le succès de la Firebase Realtime Database mais ajoute quelques fonctionnalités intéressantes. Dans cet article, nous allons mettre en place les bases d'une application web en utilisant Vue.js et Firestore.

Disons que vous avez cette excellente idée pour un nouveau produit (par exemple le prochain Twitter, Facebook ou Instagram, parce que nous pouvons jamais trop social, n'est-ce pas?). Pour commencer, vous voulez faire un prototype ou M inimum V iable P roduct (MVP) de ce produit. L'objectif est de créer le cœur de l'application aussi rapidement que possible afin de pouvoir le montrer aux utilisateurs et obtenir des commentaires et analyser l'utilisation. L'accent est mis sur la vitesse de développement et l'itération rapide.

Mais avant de commencer à construire, notre produit étonnant a besoin d'un nom. Appelons-le "Amazeballs". Il va être legen – attendez-le – dary !

Notre application Amazeballs est – bien sûr – tout sur le partage des morceaux de fromage de votre personnel la vie avec des amis, dans ce qu'on appelle des boules. En haut se trouve un formulaire pour poster des balles, ci-dessous les balles de vos amis.

Lors de la construction d'un MVP, vous aurez besoin d'outils vous permettant d'implémenter rapidement les fonctionnalités clés ainsi que la flexibilité pour ajouter rapidement et changer les fonctionnalités plus tard. Mon choix tombe sur Vue.js car c'est un framework de rendu Javascript, soutenu par la suite Firebase (par Google) et sa nouvelle base de données en temps réel appelée Firestore.

Firestore est directement accessible via les méthodes HTTP normales ce qui en fait un solution complète de backend-as-a-service dans laquelle vous n'avez pas besoin de gérer vos propres serveurs mais de stocker des données en ligne.

Semble puissant et décourageant, mais pas de sueur, je vais vous guider à travers les étapes de créer et héberger cette nouvelle application web. Notez la taille de la barre de défilement sur cette page. il n'y a pas énormément de marches à faire. En outre, si vous voulez savoir où placer chaque extrait de code dans un référentiel de code, vous pouvez voir une version d'Amazeballs exécutée sur github .

Commençons

Nous commençons avec Vue.js . C'est génial pour les débutants Javascript, car vous commencez avec du HTML et ajoutez progressivement de la logique. Mais ne sous-estimez pas; il contient beaucoup de fonctionnalités puissantes. Cette combinaison en fait le premier choix pour un framework front-end.

Vue.js a une interface de ligne de commande (CLI) pour les projets d'échafaudages . Nous allons utiliser cela pour obtenir la mise en place des os nus rapidement. Tout d'abord, installez l'interface de ligne de commande, puis utilisez-la pour créer un nouveau projet basé sur le modèle "webpack-simple".

 npm install -g vue-cli

vue init webpack-simple amazeballs

Si vous suivez les étapes à l'écran ( npm install et npm run dev ) un navigateur s'ouvrira avec un grand logo Vue.js.

Félicitations! C'était facile.

Ensuite, nous devons créer un projet Firebase. Rendez-vous sur https://console.firebase.google.com/ et créez un projet. Un projet commence dans le plan Spark gratuit, qui vous donne une base de données limitée (1 Go de données, 50K lectures par jour) et 1 Go d'hébergement. C'est plus que suffisant pour notre MVP, et facilement évolutif lorsque l'application gagne en popularité.

Cliquez sur le bouton "Ajouter Firebase à votre application Web" pour afficher la configuration dont vous avez besoin. Nous utiliserons cette config dans notre application, mais de façon agréable Vue.js en utilisant l'état partagé .

Première npm install firebase puis crée un fichier appelé src / store.js . C'est l'endroit où nous allons placer l'état partagé afin que chaque composant Vue.js puisse y accéder indépendamment de l'arbre des composants. Voici le contenu du fichier. L'état ne contient que des espaces réservés pour l'instant.

 import Vue de 'vue';
importer firebase à partir de 'firebase / app';
importer 'firebase / firestore';

// Initialise Firebase, copiez-le depuis la console cloud
// Ou utilisez le mien :)
var config = {
  apiKey: "AIzaSyDlRxHKYbuCOW25uCEN2mnAAgnholag8tU",
  authDomain: "amazeballs-by-q42.firebaseapp.com",
  databaseURL: "https://amazeballs-by-q42.firebaseio.com",
  projectId: "amazeballs-by-q42",
  storageBucket: "amazeballs-by-q42.appspot.com",
  messagingSenderId: "972553621573"
}
firebase.initializeApp (config);

// L'objet d'état partagé auquel n'importe quel composant vue peut accéder.
// A quelques espaces réservés que nous utiliserons plus loin!
export const store = {
  ballsInFeed: null,
  currentUser: null,
  writeBall: (message) => console.log (message)
}

Maintenant, nous allons ajouter les parties Firebase. Un morceau de code pour obtenir les données du Firestore:

 // une référence à la collection Balls
const ballsCollection = firebase.firestore ()
  .collection ('balles');

// onSnapshot est exécuté à chaque fois que les données
// dans les modifications de collection de firestore sous-jacentes
// Il passera un tableau de références à
// les documents correspondant à votre requête
ballesCollection
  .onSnapshot ((ballsRef) => {
    boules de const = [];
    ballsRef.forEach ((doc) => {
      boule de const = doc.data ();
      ball.id = doc.id;
      balls.push (balle);
    });
    store.ballsInFeed = balles;
  }); 

Et puis remplacez la fonction writeBall par celle qui exécute réellement une écriture:

 writeBall: (message) => ballsCollection.add ({
  createdOn: new Date (),
  auteur: store.currentUser,
  message
}) 

Remarquez comment les deux sont complètement découplés. Lorsque vous insérez dans une collection, le onSnapshot est déclenché car vous avez inséré un élément. Cela rend la gestion d'état beaucoup plus facile.

Vous avez maintenant un objet d'état partagé auquel n'importe quel composant de Vue.js peut facilement accéder. Mettons-nous à profit.

Post Stuff!

Tout d'abord, identifions l'utilisateur actuel.

Firebase possède des API d'authentification qui vous aident à connaître votre utilisateur. Activez les options appropriées sur la [Firebase Console] dans Authentification Méthode de connexion . Pour l'instant, je vais utiliser Google Login – avec un bouton très non-fantaisie.


 Capture d'écran de la page de connexion avec l'authentification Google
Authentification avec Google Login

Firebase ne vous fournit aucune aide sur l'interface, vous devrez donc créer vos propres boutons "Connexion avec Google / Facebook / Twitter" et / ou les champs de saisie nom d'utilisateur / mot de passe. Votre composant de connexion ressemblera probablement un peu à ceci:

   

Maintenant, il y a un morceau de plus du puzzle de connexion, et cela obtient la variable currentUser dans le magasin. Ajoutez ces lignes à votre store.js :

 // Lorsqu'un utilisateur se connecte ou se déconnecte, enregistrez-le dans le magasin
firebase.auth (). onAuthStateChanged ((utilisateur) => {
  store.currentUser = utilisateur;
}); 

En raison de ces trois lignes, chaque fois que l'utilisateur actuellement connecté change (se connecte ou déconnecte), store.currentUser change également. Posons quelques balles!


 Capture d'écran de l'option de déconnexion
L'état de connexion est stocké dans le fichier store.js

Le formulaire d'entrée est un composant Vue.js séparé qui est relié à la fonction writeBall dans notre magasin, comme ceci:

   

Génial! Maintenant, les gens peuvent se connecter et commencer à poster des balles. Mais attendez, il nous manque l'autorisation. Nous voulons que vous ne puissiez publier que Balls, et c'est là qu'interviennent Firestore Rules . Ils sont constitués de code JavaScript-ish qui définit les privilèges d'accès à la base de données. Vous pouvez les entrer via la console Firestore, mais vous pouvez également utiliser la CLI Firebase pour les installer à partir d'un fichier sur le disque. Installez et exécutez-le comme ceci:

 npm install -g firebase-tools
connexion firebase
firebase init firestore 

Vous obtiendrez un fichier nommé firestore.rules où vous pouvez ajouter une autorisation pour votre application. Nous voulons que chaque utilisateur puisse insérer ses propres balles, mais pas pour insérer ou éditer quelqu'un d'autre. L'exemple ci-dessous fait bien. Il permet à tous de lire tous les documents de la base de données, mais vous ne pouvez les insérer que si vous êtes connecté, et la ressource insérée possède un champ "auteur" identique à celui de l'utilisateur actuellement connecté.

 service cloud. firestore {
  match / databases / {base de données} / documents {
    match / {document = **} {
      autoriser read: si vrai;
      autoriser create: if request.auth.uid! = null && request.auth.uid == request.resource.data.author;
    }
  }
} 

Il ressemble à quelques lignes de code, mais il est très puissant et peut se complexifier très rapidement. Firebase travaille sur de meilleurs outils autour de cette partie, mais pour l'instant, c'est un essai et une erreur jusqu'à ce qu'il se comporte comme vous le souhaitez.

Si vous exécutez firebase deploy les règles Firestore seront déployées. sécurisation de vos données de production en quelques secondes.

Ajout de la logique du serveur

Sur votre page d'accueil, vous voulez voir une chronologie avec les boules de vos amis. En fonction de la manière dont vous voulez déterminer quelles billes un utilisateur voit, exécuter cette requête directement sur la base de données peut être un goulot d'étranglement des performances. Une alternative consiste à créer une fonction Cloud Firebase qui s'active sur chaque Balle postée et l'ajoute aux murs de tous les amis de l'auteur. De cette façon, il est asynchrone, non bloquant et finalement cohérent. Ou, en d'autres termes, il y arrivera.

Pour garder les exemples simples, je ferai une petite démonstration d'écoute des boules créées et de modification de leur message. Ce n'est pas parce que cela est particulièrement utile, mais pour vous montrer à quel point il est facile de faire fonctionner les fonctions du cloud.

 const functions = require ('firebase-functions');

exports.createBall = functions.firestore
  .document ('balls / {ballId}')
  .onCrée (événement => {
    var createdMessage = event.data.get ('message');
    return event.data.ref.set ({
      message: createdMessage + ', yo!'
    }, {merge: true});
}); 

Oh, attends, j'ai oublié de te dire où écrire ce code

 firebase init functions 

Cela crée le répertoire functions avec un index.js . C'est le fichier dans lequel vous pouvez écrire votre propre Cloud Functions . Ou copiez-collez le mien si vous êtes très impressionné.

Cloud Functions vous donne un bon endroit pour découpler différentes parties de votre application et les faire communiquer de manière asynchrone. Ou, dans le style de dessin architectural:


 Schéma architectural logique du serveur des fonctions du nuage
Communication asynchrone entre les différents composants de votre application

Dernière étape: Déploiement

Firebase a son option d'hébergement disponible pour cela, et vous pouvez l'utiliser via la CLI Firebase

 firebase init hosting 

Choisir dist comme un public , puis "Oui" pour réécrire toutes les URL à index.html . Cette dernière option vous permet d'utiliser vue-router pour gérer de jolies URL dans votre application.

Maintenant, il y a un petit obstacle: le dossier dist ne contient pas de index.html fichier qui pointe vers la bonne version de votre code. Pour résoudre ce problème, ajoutez un script npm à votre package.json :

 {
  "scripts": {
    "deploy": "npm run build && mkdir dist / dist && mv dist /*.* dist / dist / && cp index.html dist / && firebase deploy"
  }
} 

Maintenant, lancez npm deploy et l'interface CLI de Firebase vous montrera l'URL de votre code hébergé!

Quand utiliser cette architecture

Cette configuration est parfaite pour un MVP. La troisième fois que vous l'avez fait, vous disposez d'une application Web opérationnelle en quelques minutes, soutenue par une base de données évolutive hébergée gratuitement. Vous pouvez immédiatement commencer à créer des objets.

En outre, il y a beaucoup de place pour grandir. Si Cloud Functions n'est pas assez puissant, vous pouvez revenir à une API traditionnelle s'exécutant sur docker dans Google Cloud par exemple. En outre, vous pouvez mettre à niveau votre architecture Vue.js avec vue-router et vuex et utiliser la puissance du webpack inclus dans le modèle vue-cli.

Tout n'est pas tout arcs-en-ciel et licornes, cependant. La mise en garde la plus notoire est le fait que vos clients parlent immédiatement à votre base de données. Il n'y a pas de couche de middleware que vous pouvez utiliser pour transformer les données brutes dans un format plus facile pour le client. Donc, vous devez le stocker de manière conviviale. Chaque fois que vos clients demandent une modification, vous allez avoir du mal à exécuter des migrations de données sur Firebase. Pour cela, vous devez écrire un client Firestore personnalisé qui lit chaque enregistrement, le transforme et le réécrit.

Prenez le temps de décider de votre modèle de données. Si vous avez besoin de changer votre modèle de données plus tard, la migration de données est votre seule option.

Alors, quels sont les exemples de projets utilisant ces outils? Parmi les grands noms qui utilisent Vue.js sont Laravel GitLab et (pour les Hollandais) nu.nl . Firestore est toujours en version bêta, donc pas beaucoup d'utilisateurs actifs, mais la suite Firebase est déjà utilisée par National Public Radio Shazam et d'autres. J'ai vu des collègues mettre en œuvre Firebase pour le jeu basé sur l'unité Road Warriors qui a été téléchargé plus d'un million de fois au cours des cinq premiers jours. Il peut prendre beaucoup de charge, et il est très polyvalent avec les clients pour le web, le mobile natif, Unity, etc.

Où puis-je m'inscrire?

Si vous voulez en savoir plus, pensez aux ressources suivantes:

Heureux codage!

 Éditorial brisant (da, ra, hj, il)






Source link