En progressiv webapplikation med Vue JS, Webpack & Material Design [Del 2]

[Opdateret 10/30/2017]

Denne artikel er del af en serie, der sigter mod at opbygge en grundlæggende, men komplet progressiv webapplikation med VueJs, Webpack & Material Design, trin for trin og fra bunden. Hvis du endnu ikke har læst den, kan du finde den første del her.

Kodekilde tilgængelig på dette GitHub-lager: https://github.com/charlesBochet/vueJSPwa

I del 1 har vi lært, hvordan man opretter en enkelt sides applikation med VueJS, Webpack og MDL. Vi har allerede opfyldt de første krav i vores PWA-checkliste:

Denne anden tutorial fokuserer på at levere hurtige og friske data til vores CropChat-applikation. Vi skal:

  • Opret en ny Firebase-database;
  • Tilslut vores Vue-app til Firebase med Vuefire;
  • Post og hent billeder fra Firebase.
CropChat med friske data

[DEL 2] En realtids-PWA med Firebase

Firebase er en NoSQL Realtime-database, der er udviklet af Google. Det er Cloud vært, så du ikke behøver at installere noget på din server.

Data synkroniseres på tværs af alle klienter i realtid. Det gør Firebase til det perfekte værktøj til at oprette en chat: det giver en nem måde at holde en meddelelsesfeed up-to-date. Plus det er gratis.

For at lære mere om Firebase, se venligst den officielle side.

Lad os begynde.

Konfigurer ildbase

Gå først til Firebase Console, tilmeld dig og opret et nyt projekt:

Vi er også nødt til at ændre databasereglerne:

Bemærk: Dette gør din database læsbar og skrivbar af alle, kun god til prototype.

Tilføj Firebase-pakke til Cropchat:

npm installere ildbase - gem

Så er vi nødt til at etablere Firebase-forbindelse. Opret en servicesrc / service / firebase.js, der indeholder følgende kode:

Gå tilbage til Firebase Console, og vælg fanen Autentificering. Klik på knappen “WEB SETUP” for at få databaseoplysningerne.

Vi er nu forbundet til vores database.

Vuefire: frigør kraften fra Firebase + VueJS

Konfigurer VueFire

Vi vil bruge VueFire, en knudepakke, der er bygget til at pakke ildkrabber i en vueJS-applikation.

Føj VueFire til projektet:

npm installere vuefire - spar

Importer VueFire til vores src / main.js:

Importer ildstedstjenesten til src / main.js:

Vi har netop oprettet en krog mellem vores app-propkatte og ildkatsknuderkatte. Vuefire holder dem synkroniseret for os. Vi tilføjer .orderByChild ('oprettet_at') for at have den nyeste kat øverst på foderet.

Send en kat

Vi kan begynde at skubbe til data i vores firebase-database. Tilføj en formular src / komponenter / PostView.vue:

Tilføj Vue-ressource for at have en HTTP-klient til vores app og en xml-parser:

npm installer vue-resource - gem
npm installere xml-parser - gem

Importer Vue-ressource til vores src / main.js:

Opdater funktionen PostView.vue monteret () for at indlæse en tilfældig kat fra CatAPI (som er et godt sted at finde kattebilleder forresten). Denne funktion udløses, når PostView-komponenten er monteret:

Endelig tilføj funktionen postCat () til PostView.vue-metoder, der skubber dette billede til Firebase-forekomst:

Det er det! Gennemse din applikation, klik på “Plus” -knappen for at få adgang til postvisningen:

Skærmbillede fra visningen Indlæg

Og klik på knappen "Send en kat". Du skal se en ny post i dit Firebase-betjeningspanel:

Vis kattelisten

Vi er næsten færdige. Vi har stadig noget arbejde at gøre i Home View for at få vist de katbilleder, vi har gemt i Firebase. Opdater skabelonen HomeView.vue:

Glem ikke at fjerne vores statiske datafil data.js og importlinje i HomeView.vue.

Nu sker det:

Hjemvisning synkroniseres nu på Firebase

I fremtiden er dette hot-synkroniseret. Åbn en anden fane med appen, send en kat, og se magien ske:

Hot-synkroniseret

Opdater detaljevisningen

Tilføj lodash:

npm installere lodash - spar

Og opdater DetailView.vue:

konklusioner

Jeg håber, at jeg har overbevist dig om mulighederne i Firebase og VueJS til at forbedre din app med hurtige og friske datas. For at kortlægge en lang historie:

  • Vuefire tilbyder en hurtig måde at integrere en Firebase-database i din VueJS-app;
  • Firebase er et meget kraftfuldt værktøj til at oprette data i realtid i en app, og sørg for, at dine brugere altid har friske og ajourførte data.

Vi kontrollerede et nyt punkt på vores PWA-checkliste:

Endnu ikke færdig! I del III lærer vi, hvordan vi får vores Cropchat-app til at fungere offline takket være servicemedarbejdere.