Ieșiți la sol cu ​​Vue.js și Firestore

Google Firebase are o nouă posibilitate de stocare a datelor numită „Firestore” (în prezent în stadiu beta), care se bazează pe succesul bazei de date în timp real Firebase , dar adaugă câteva funcții ingenioase. În acest articol, vom configura elementele de bază ale unei aplicații web folosind Vue.js și Firestore.

Să presupunem că aveți această idee grozavă pentru un produs nou (de exemplu, următorul Twitter, Facebook sau Instagram, pentru că nu putem avea niciodată prea multe rețele sociale, nu?). Pentru început, doriți să realizați un prototip sau un produs viabil minim ( MVP ) al acestui produs. Scopul este de a construi nucleul aplicației cât mai repede posibil, astfel încât să o puteți arăta utilizatorilor și să obțineți feedback și să analizați utilizarea. Accentul se pune foarte mult pe viteza de dezvoltare și pe repetarea rapidă.

Dar înainte de a începe să construim, produsul nostru uimitor are nevoie de un nume. Să-i spunem „Amazeballs”. Va fi legen — așteaptă — dary !

Iată o imagine a modului în care mi-l imaginez:

Aplicația noastră Amazeballs se referă, desigur, la a împărtăși cu prietenii informații despre viața personală, în așa-numitele Balls. În partea de sus este un formular de postare Mingi, mai jos sunt Mingile prietenilor tăi.

Când construiți un MVP, veți avea nevoie de instrumente care vă oferă puterea de a implementa rapid caracteristicile cheie, precum și flexibilitatea de a adăuga și modifica rapid funcții mai târziu. Alegerea mea cade pe Vue.js, deoarece este un cadru de redare Javascript, susținut de suita Firebase (de la Google) și noua sa bază de date în timp real numită Firestore.

Firestore poate fi accesat direct folosind metode HTTP normale, ceea ce îl face o soluție completă de backend-as-a-service în care nu trebuie să gestionați niciunul dintre propriile servere, dar încă stocați datele online.

Sună puternic și descurajantă, dar nu transpirați, vă voi ghida prin pașii creării și găzduirii acestei noi aplicații web. Observați cât de mare este bara de derulare pe această pagină; nu este o cantitate mare de pași până la asta. De asemenea, dacă doriți să știți unde să puneți fiecare dintre fragmentele de cod într-un depozit de cod, puteți vedea o versiune completă a Amazeballs pe github.

Să începem

Începem cu Vue.js. Este grozav pentru începătorii cu Javascript, deoarece începeți cu HTML și adăugați treptat logica acestuia. Dar nu subestima; are o mulțime de funcții puternice. Această combinație o face prima mea alegere pentru un cadru front-end.

Vue.js are o interfață de linie de comandă (CLI) pentru proiecte de schele. Vom folosi asta pentru a configura rapid oasele goale. Mai întâi, instalați CLI-ul, apoi utilizați-l pentru a crea un nou proiect bazat pe șablonul „webpack-simple”.

 npm install -g vue-cli vue init webpack-simple amazeballs

Dacă urmați pașii de pe ecran ( npm install și npm run dev ) se va deschide un browser cu un logo Vue.js mare.

Felicitări! A fost ușor.

În continuare, trebuie să creăm un proiect Firebase. Accesați https://console.firebase.google.com/ și creați un proiect. Un proiect începe în planul Spark gratuit, care vă oferă o bază de date limitată (1 GB de date, 50.000 citiri pe zi) și 1 GB de găzduire. Acest lucru este mai mult decât suficient pentru MVP-ul nostru și poate fi actualizat cu ușurință atunci când aplicația câștigă tracțiune.

Faceți clic pe „Adăugați Firebase la aplicația dvs. web” pentru a afișa configurația de care aveți nevoie. Vom folosi această configurație în aplicația noastră, dar într-un mod frumos Vue.js folosind starea partajată.

Mai întâi npm install firebase , apoi creează un fișier numit src/store.js . Acesta este locul în care vom pune starea partajată, astfel încât fiecare componentă Vue.js să o poată accesa independent de arborele componente. Mai jos este conținutul fișierului. Statul conține doar niște substituenți pentru moment.

 import Vue from 'vue'; import firebase from 'firebase/app'; import 'firebase/firestore'; // Initialize Firebase, copy this from the cloud console // Or use mine :) 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); // The shared state object that any vue component can get access to. // Has some placeholders that we'll use further on! export const store = { ballsInFeed: null, currentUser: null, writeBall: (message) => console.log(message) };

Acum vom adăuga părțile Firebase. O bucată de cod pentru a obține datele din Firestore:

 // a reference to the Balls collection const ballsCollection = firebase.firestore() .collection('balls'); // onSnapshot is executed every time the data // in the underlying firestore collection changes // It will get passed an array of references to // the documents that match your query ballsCollection .onSnapshot((ballsRef) => { const balls = []; ballsRef.forEach((doc) => { const ball = doc.data(); ball.id = doc.id; balls.push(ball); }); store.ballsInFeed = balls; });

Și apoi înlocuiți funcția writeBall cu una care execută de fapt o scriere:

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

Observați cum cele două sunt complet decuplate. Când inserați într-o colecție, onSnapshot este declanșat deoarece ați inserat un articol. Acest lucru face managementul statului mult mai ușor.

Acum aveți un obiect de stare partajat la care orice componentă Vue.js poate avea acces ușor. Să-l folosim bine.

Postați chestii!

Mai întâi, să aflăm cine este utilizatorul actual.

Firebase are API-uri de autentificare care vă ajută să vă cunoașteți utilizatorul. Activați-le pe cele corespunzătoare în Consola Firebase în Autentificare → Metodă de conectare. Deocamdată, voi folosi Google Login - cu un buton foarte neflectat.

Firebase nu vă oferă ajutor pentru interfață, așa că va trebui să vă creați propriile butoane „Conectați-vă cu Google/Facebook/Twitter” și/sau câmpuri de introducere a numelui de utilizator/parolă. Componenta dvs. de conectare va arăta probabil cam așa:

 <template> <div> <button @click.prevent="signInWithGoogle">Log in with Google</button> </div> </template> <script> import firebase from 'firebase/app'; import 'firebase/auth'; export default { methods: { signInWithGoogle() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); } } } </script>

Acum mai există o piesă din puzzle-ul de conectare și aceasta obține variabila currentUser în magazin. Adăugați aceste rânduri la magazinul dvs. js :

 // When a user logs in or out, save that in the store firebase.auth().onAuthStateChanged((user) => { store.currentUser = user; });

Datorită acestor trei linii, de fiecare dată când utilizatorul conectat în prezent se modifică (se autentifică sau se deconectează), store.currentUser se schimbă și el. Hai să postăm niște mingi!

Formularul de intrare este o componentă separată Vue.js care este conectată la funcția writeBall din magazinul nostru, astfel:

 <template> <form @submit.prevent="formPost"> <textarea v-model="message" /> <input type="submit" value="DUNK!" /> </form> </template> <script> import { store } from './store'; export default { data() { return { message: null, }; }, methods: { formPost() { store.writeBall(this.message); } }, } </script>

Minunat! Acum oamenii se pot conecta și pot începe să posteze Mingi. Dar stai, ne lipsește autorizația. Dorim ca tu să poți să postezi Mingi doar tu, și aici intervin regulile Firestore . Sunt alcătuite din cod Javascript care definește privilegiile de acces la baza de date. Le puteți introduce prin consola Firestore, dar puteți utiliza și CLI Firebase pentru a le instala dintr-un fișier de pe disc. Instalați și rulați astfel:

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

Veți primi un fișier numit firestore.rules unde puteți adăuga autorizare pentru aplicația dvs. Dorim ca fiecare utilizator să poată introduce propriile mingi, dar să nu le introducă sau să editeze pe ale altcuiva. Exemplul de mai jos merge bine. Permite tuturor să citească toate documentele din baza de date, dar puteți introduce doar dacă sunteți autentificat, iar resursa inserată are un câmp „autor” care este același cu utilizatorul conectat în prezent.

 service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read: if true; allow create: if request.auth.uid != null && request.auth.uid == request.resource.data.author; } } }

Pare doar câteva linii de cod, dar este foarte puternic și poate deveni complex foarte repede. Firebase lucrează la unelte mai bune în jurul acestei părți, dar pentru moment, este încercare și eroare până se comportă așa cum doriți.

Dacă executați firebase deploy , regulile Firestore vor fi implementate și vă vor securiza datele de producție în câteva secunde.

Adăugarea logicii serverului

Pe pagina ta de pornire, vrei să vezi o cronologie cu mingile prietenilor tăi. În funcție de modul în care doriți să determinați ce mingi vede un utilizator, efectuarea acestei interogări direct în baza de date poate fi un blocaj de performanță. O alternativă este să creați o funcție Firebase Cloud care se activează pe fiecare Minge postată și o atașează pe pereții tuturor prietenilor autorului. În acest fel, este asincron, neblocant și în cele din urmă consecvent. Sau, cu alte cuvinte, va ajunge acolo.

Pentru a păstra exemplele simple, voi face o mică demonstrație de ascultare a bilelor create și de modificare a mesajului acestora. Nu pentru că acest lucru este deosebit de util, ci pentru a vă arăta cât de ușor este să puneți în funcțiune funcțiile cloud.

 const functions = require('firebase-functions'); exports.createBall = functions.firestore .document('balls/{ballId}') .onCreate(event => { var createdMessage = event.data.get('message'); return event.data.ref.set({ message: createdMessage + ', yo!' }, {merge: true}); });

Oh, stai, am uitat să-ți spun unde să scrii acest cod.

 firebase init functions

Acest lucru creează directorul de funcții cu un index.js . Acesta este fișierul în care puteți scrie propriile funcții Cloud . Sau copiați și lipiți-l pe al meu dacă sunteți foarte impresionat de el.

Funcțiile cloud vă oferă un loc frumos pentru a decupla diferite părți ale aplicației dvs. și pentru a le face să comunice asincron. Sau, în stil de desen arhitectural:

Ultimul pas: implementare

Firebase are opțiunea de găzduire disponibilă pentru aceasta și o puteți utiliza prin intermediul CLI Firebase.

 firebase init hosting

Alegeți dist ca director public, apoi „Da” pentru a rescrie toate adresele URL în index.html . Această ultimă opțiune vă permite să utilizați vue-router pentru a gestiona adrese URL frumoase din aplicația dvs.

Acum există un mic obstacol: folderul dist nu conține un fișier index.html care să indice versiunea corectă a codului dvs. Pentru a remedia acest lucru, adăugați un script npm la package.json dvs.:

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

Acum rulați npm deploy și CLI-ul Firebase vă va arăta adresa URL a codului dvs. găzduit!

Când să folosiți această arhitectură

Această configurație este perfectă pentru un MVP. Până a treia oară când faci asta, vei avea o aplicație web funcțională în câteva minute - susținută de o bază de date scalabilă care este găzduită gratuit. Puteți începe imediat să construiți funcții.

De asemenea, există mult spațiu pentru a crește. Dacă Cloud Functions nu sunt suficient de puternice, puteți reveni la un API tradițional care rulează pe docker în Google Cloud, de exemplu. De asemenea, puteți să vă actualizați arhitectura Vue.js cu vue-router și vuex și să utilizați puterea pachetului web care este inclus în șablonul vue-cli.

Totuși, nu toate sunt curcubee și unicorni. Cea mai notorie avertizare este faptul că clienții tăi vorbesc imediat cu baza ta de date. Nu există un nivel de middleware pe care să îl puteți utiliza pentru a transforma datele brute într-un format care este mai ușor pentru client. Deci, trebuie să-l stocați într-un mod prietenos cu clienții. Ori de câte ori clienții dvs. solicită o modificare, veți găsi destul de dificil să rulați migrarea datelor pe Firebase. Pentru asta, va trebui să scrieți un client Firestore personalizat care să citească fiecare înregistrare, să o transforme și să o scrie înapoi.

Acordați-vă timp pentru a decide asupra modelului dvs. de date. Dacă trebuie să vă schimbați modelul de date mai târziu, migrarea datelor este singura dvs. opțiune.

„

Deci, care sunt exemplele de proiecte care utilizează aceste instrumente? Printre marile nume care folosesc Vue.js se numără Laravel, GitLab și (pentru olandezi) nu.nl. Firestore este încă în versiune beta, deci nu există încă mulți utilizatori activi, dar suita Firebase este deja folosită de National Public Radio , Shazam și alții. I-am văzut pe colegi implementând Firebase pentru jocul Road Warriors bazat pe Unity, care a fost descărcat de peste un milion de ori în primele cinci zile. Poate dura destul de mult și este foarte versatil cu clienți pentru web, mobil nativ, Unity și așa mai departe.

Unde ma inscriu?!

Dacă doriți să aflați mai multe, luați în considerare următoarele resurse:

• Exemplu de lucru care conține tot codul de mai sus
• Documentație pe Vue.js, vue-router, vue-cli
• Documentație pe Firebase
• Un mod distractiv de a cunoaște mai bine Firebase - blogul lor YouTube

Codare fericită!