Een progressieve webapplicatie met Vue JS, Webpack & Material Design [Deel 2]

[Bijgewerkt op 30-10-2017]

Dit artikel maakt deel uit van een serie die erop gericht is om een ​​eenvoudige maar complete progressieve webapplicatie te bouwen met VueJ's, Webpack & Material Design, stap voor stap en helemaal opnieuw. Als u het nog niet hebt gelezen, kunt u het eerste deel hier vinden.

Codebron beschikbaar op deze GitHub-repository: https://github.com/charlesBochet/vueJSPwa

In deel 1 hebben we geleerd hoe we een toepassing met één pagina kunnen maken met VueJS, Webpack en MDL. We hebben al aan de eerste vereisten van onze PWA-checklist voldaan:

Deze tweede tutorial richt zich op het leveren van snelle en nieuwe gegevens voor onze CropChat-applicatie. Wij gaan:

  • Stel een nieuwe Firebase-database in;
  • Verbind onze Vue-app met Firebase met Vuefire;
  • Plaats en haal foto's op van Firebase.
CropChat met nieuwe gegevens

[DEEL 2] Een realtime PWA met Firebase

Firebase is een NoSQL Realtime Database ontwikkeld door Google. Het wordt gehost in de cloud, dus u hoeft niets op uw server te installeren.

Gegevens worden in realtime gesynchroniseerd met alle clients. Dat maakt Firebase de perfecte tool om een ​​chat te maken: het biedt een eenvoudige manier om een ​​berichtenfeed up-to-date te houden. Plus het is gratis.

Raadpleeg de officiële pagina voor meer informatie over Firebase.

Laten we beginnen.

Configureer firebase

Ga eerst naar de Firebase-console, meld u aan en maak een nieuw project:

We moeten ook de databaseregels wijzigen:

Opmerking: hierdoor is uw database voor iedereen leesbaar en beschrijfbaar, alleen goed voor prototyping.

Firebase-pakket toevoegen aan Cropchat:

npm installeer firebase - opslaan

Dan moeten we een Firebase-verbinding tot stand brengen. Maak een service src / service / firebase.js met de volgende code:

Ga terug naar de Firebase-console en selecteer het tabblad Verificatie. Klik op de knop "WEB SETUP" om de database-informatie te krijgen.

We zijn nu verbonden met onze database.

Vuefire: laat de kracht van Firebase + VueJS los

Configureer VueFire

We zullen VueFire gebruiken, een knooppuntpakket dat is gebouwd om firebase-haken in een vueJS-toepassing te verpakken.

Voeg VueFire toe aan het project:

npm install vuefire - opslaan

Importeer VueFire in onze src / main.js:

Importeer de firebase-service in src / main.js:

We hebben zojuist een haak gemaakt tussen onze app-propkatten en de firebase-node-katten. Vuefire houdt ze voor ons gesynchroniseerd. We voegen .orderByChild ('created_at') toe om de nieuwste kat bovenaan de feed te plaatsen.

Plaats een kat

We kunnen beginnen met pushen naar gegevens in onze firebase-database. Voeg een formulier src / components / PostView.vue toe:

Voeg Vue-resource toe om een ​​HTTP-client voor onze app en een XML-parser te hebben:

npm installeer vue-resource - opslaan
npm installeer xml-parser - opslaan

Importeer Vue-resource in onze src / main.js:

Update PostView.vue mount () functie om een ​​willekeurige kat uit de CatAPI te laden (wat trouwens een geweldige plek is om kattenfoto's te vinden). Deze functie wordt geactiveerd wanneer het PostView-component is gemonteerd:

Voeg ten slotte de functie postCat () toe aan PostView.vue-methoden die deze afbeelding naar de Firebase-instantie pushen:

Dat is het! Blader door uw applicatie, klik op de knop "Plus" om de berichtweergave te openen:

Schermafbeelding van de berichtweergave

En klik op de knop "Plaats een kat". U zou een nieuw item in uw Firebase-dashboard moeten zien:

Toon de kattenlijst

We zijn bijna klaar. We hebben nog wat werk te doen in Home View om de kattenafbeeldingen weer te geven die we in Firebase hebben opgeslagen. Update de HomeView.vue-sjabloon:

Vergeet niet om ons statische gegevensbestand data.js en de importregel in HomeView.vue te verwijderen.

Daar gaan we:

Home View is nu gesynchroniseerd op Firebase

Verder is dit gesynchroniseerd. Open een tweede tabblad met de app, post een kat en zie de magie gebeuren:

Hot-gesynchroniseerd

Werk de detailweergave bij

Lodash toevoegen:

npm installeer lodash - opslaan

En update DetailView.vue:

conclusies

Ik hoop dat ik je heb overtuigd van de mogelijkheden van Firebase en VueJS om je app te verbeteren met snelle en frisse gegevens. Om een ​​lang verhaal kort te maken:

  • Vuefire biedt een snelle manier om een ​​Firebase-database in uw VueJS-app te integreren;
  • Firebase is een zeer krachtig hulpmiddel voor het maken van realtime gegevens in een app en zorgt ervoor dat uw gebruikers altijd over verse en actuele gegevens beschikken.

We hebben een nieuw punt op onze PWA-vereistenchecklist gecontroleerd:

Nog niet gedaan! In deel III leren we hoe we onze Cropchat-app offline kunnen laten werken dankzij servicemedewerkers.