Fermer

avril 11, 2018

Frappez le terrain en courant avec Vue.js et Firestore13 minutes de lecture



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: