Tegenwoordig vinden we heel veel van de functionaliteit die vroeger in de backend werd afgehandeld nu in de frontend. Ik laat je als frontend designer zien hoe je een simpele SPA (Single Page Application) kunt creëren zonder gedoe met onderhoud in de backend.
We maken een eenvoudige CRUD (Create, Read, Update, Delete) applicatie in de vorm van een notitie app. Voor deze demo gebruiken we:VueJS CLI,VueRouter,ElementUI enGoogle Firebase.
Houd er rekening mee dat dit deel één is van een blogpostserie. In dit deel gaan we Firebase opzetten, VueJS lokaal installeren via de command line interface, de nodige views aanmaken en de routing instellen. Onze databaseverbinding wordt beperkt tot 'alleen lezen'. Het aanmaken, bijwerken en verwijderen van notities via onze app zal binnenkort beschikbaar zijn in deel twee van de blogpostserie.
Er zijn veel frameworks en technologieën die geschikt kunnen zijn voor dit project, dus de keuze voor VueJS is een persoonlijke voorkeur. Ik heb VueJS boven andere frameworks gekozen omdat:
Aan de andere kant heeft het ook wat nadelen:
Firebase is een geweldige service waarmee je je kunt richten op wat het belangrijkst is: het maken van fantastische gebruikerservaringen. Firebase gebruiken betekent dat je geen servers hoeft te beheren of API's hoeft te schrijven. Firebase kan je hosting, authenticatietool, API en datastore zijn. Het kan worden aangepast aan veel van je behoeften en bovendien kan het perfect meeschalen met je project als het in de loop van de tijd groeit.
Het 'Spark'-plan, dat helemaal gratis is, biedt je tot 100 gelijktijdige verbindingen, 1GB opslag en een downloadlimiet van 10GB. Genoeg voor een klein project, startups of voor indie-ontwikkelaars die hun idee(ën) gevalideerd willen hebben.
Afhankelijk van je vaardigheidsniveau duurt hetongeveer30 tot 60 minuten omde volgende stappen uit te voeren.
Ga naar https://firebase.google.com/en meld je aan met je Google-account. Zodra dat gedaan is, ga je naar de Firebase console en maak je een nieuw project aan. Ik heb het mijne 'FireNotes' genoemd.
Omdat we de Firestore-database gaan gebruiken, ga je naar het tabblad 'Database' in de zijbalk onder de sectie 'Ontwikkelen' en schakel je databasegebruik in testmodus* in, zoals hieronder te zien is.
* Belangrijkeopmerking: dit geeft iedereen toegang tot je database. Als je van plan bent een project uit te brengen met Firebase, verdiep je dan in dedocumentatie over databaserechten enstel het goed in.
Laten we nu wat notities toevoegen aan onze database. Voeg een nieuwe collectie toe en noem deze 'notes'. Dit wordt de bovenliggende verzameling waar al onze notities in staan. Vul deze met een aantal dummy notities zoals in de schermafbeelding hieronder, met een automatische ID, postdatum, titel en inhoud:
Redelijk eenvoudig tot nu toe, toch? Laten we nu de focus verleggen naar onze applicatie.
Open je console en navigeer naar je projecten map. Ervan uitgaande dat jeNPM al geïnstalleerdhebt, installeer je Vue CLI via het volgende commando:
Laten we vervolgens je project opstarten met het volgende commando:
Dit vraagt je om een keuze voor standaard of handmatige voorinstelling. Laten we nu beginnen met de standaard optie met NPM. Ga na de installatie naar je map firenotes en start je webserver met het volgende commando:
Als u naar het opgegeven IP-adres navigeert (normaal gesproken localhost:8080), ziet u de standaard 'hello world'-weergave die Vue biedt:
Laten we nu visualiseren hoe onze applicatie eruit zou moeten zien. Ik ga in deze blogpost niet door de styling details heen, dus ik gebruik de ElementUI kit om de dingen te versnellen.
Ga naar /src/main.js en voeg de ElementUI imports toe en registreer het in onze VueJS app, direct onder de 'import Vue' zoals hieronder getoond:
Nu kunnen we ElementUI componenten gaan gebruiken in onze sjablonen. Ik heb het Vue-logo vervangen door mijn eigen logo(hier te downloaden) en het App.vue-sjabloon als volgt gewijzigd:
Zo ziet het eruit:
Tot zover alles goed! Vervolgens kunnen we vue-router installeren, wat de officiële VueJS router is. Het integreert diep met de kern van je VueJS-applicatie, waardoor single page-applicaties een fluitje van een cent worden. Met vue-router kunnen we navigeren naar onze notitiepagina, die we later zullen instellen.
Net als ElementUI moet de vue-router worden geïmporteerd en geregistreerd binnen onze VueJS app. Ga naar main.js en vervang deze door de volgende code:
Wat is hier gebeurd? In principe hebben we de URL's van onze twee navigatie-items gespecificeerd en ze toegewezen aan twee verschillende componenten. We hebben ook regels toegevoegd om automatisch naar de homepage te gaan bij het laden of wanneer een URL een niet-geregistreerde route triggert. Last but not least hebben we de routes geregistreerd via 'new VueRouter', die nu is ingebed in de kern van onze applicatie omdat deze wordt doorgegeven aan onze 'new Vue'-instantie.
Dit opslaan zal waarschijnlijk wat fouten veroorzaken, omdat we nog niets gedaan hebben aan de Notes component. Laten we een eenvoudig Notes.vue-bestand maken in de map components.
Vervolgens moeten we ervoor zorgen dat onze app de juiste onderdelen weergeeft op basis van deze gespecificeerde routes. Dit vereist enkele wijzigingen in ons App.vue-bestand voor zowel de navigatie als het inhoudspaneel (el-main).
Hier hebben we router="true" toegevoegd aan het component, waardoor de 's indexen kunnen worden gebruikt als 'pad' om de route-actie te activeren. We hebben ook de introductiekop en paragrafen verplaatst naar HelloWorld.vue (dat zou jij ook moeten doen ;-)) en vervangen door<router-view/>. Nu is de router volledig verantwoordelijk voor welk component wordt weergegeven in dat paneel. Geweldig!
Vervolgens gaan we Notes.vue aanpassen om daadwerkelijk notities weer te geven. Voorlopig is alle inhoud statisch. Later zullen we de notitietabel vullen met gegevens uit onze Firestore-database.
Zo ziet het eruit:
Geweldig! Nu staat alles klaar om de statische applicatie om te zetten naar een Firestore data driven applicatie. Laten we de afhankelijkheden installeren om verbinding te maken met Firebase:
Hier moet je nog de 'apiKey' en 'projectId' invullen, die je kunt vinden onder de link Projectinstellingen via het tandwiel:
Ga vervolgens naar het Notes.vue component waar we de statische array van notities leegmaken en vullen met de notities die we eerder in onze Firestore database hebben aangemaakt. We hebben ook een lege tekst op de tabel gedefinieerd, die zal worden getoond terwijl er gegevens in onze tabel worden geladen.
Dit zorgt ervoor dat de notities die we eerder handmatig hebben toegevoegd in onze Firestore-database te zien zijn in onze applicatie, waardoor deze iets minder statisch wordt. Geweldig succes!
In onze vervolg blogpost over dit onderwerp gaan we verder in op de overige functionaliteiten: het aanmaken, bijwerken en verwijderen van notities in onze Firebase database, volledig aangestuurd door onze VueJS app. Omdat we in de comments een vraag kregen over inlogfunctionaliteit, hebben we die ook toegevoegd als bonus!