TSM - Realizarea unei aplicații online folosind Nuxt, Vuex, Node.js și MongoDB (I)

Ovidiu Mățan - Fondator @ Today Software Magazine


Aplicația de față va crea un Address Book simplu, va oferi funcționalitățile CRUD prin folosirea frameworkului Nuxt / Vue, iar pentru afișare va utiliza Vuetify. Principalele avantaje sunt reprezentate de codul relativ simplu, definirea și refolosirea componentelor, realizarea unui storage intern al aplicației. Serviciul va rula ca o aplicație SPA în browserul utilizatorului urmând ca în ediția următoare a revistei să publicăm și o integrare cu un server Node.js și MongoDB.

Arhitectura aplicației

Conține următoarele elemente principale:

Primii pași

Pornim la drum prin crearea unui nou proiect în Nuxt și răspundem la întrebările wizardului

npx create-nuxt-app AddressBook

Lansăm proiectul nou creat: npm run dev și deschidem http://localhost:3000/

Tema default este dark, vă propun să avem o pagină mai luminoasă și să realizăm buildul doar pentru client. Pentru acestea vom modifica nuxt.config.js astfel:

....

mode: 'spa',
…

theme: {

dark: false,

…

Vuetify.js

Pentru cei care venim din zona de backend, utilizarea unui framework care face să arate bine toate componentele de UI este un mare plus. Vuetify realizează acest lucru și este direct integrat în Nuxt. Vă invit să vă uitați peste componentele puse la dispoziție.

Vom folosi componenta v-list pentru a afișa lista de contacte. Pornim de la un exemplu existent și înlocuim conținutul fișierului pages/Index.vue cu următorul:

<template>
 <div>
   <v-card max-width=”500” 
      class=”mx-auto”>
     <v-toolbar color=”indigo” 
       dark>
       <v-app-bar-nav-icon>
       </v-app-bar-nav-icon>
       <v-toolbar-title>Inbox
       </v-toolbar-title>
       <v-spacer></v-spacer>
       <v-btn icon>
         <v-icon>mdi-magnify
         </v-icon>
       </v-btn>
       <v-btn icon>
         <v-icon>
            mdi-dots-vertical
         </v-icon>
       </v-btn>
     </v-toolbar>
     <v-list>
       <v-list-item 
        v-for=”item in items” 
        :key=”item.name”>
         <v-list-item-content>
           <v-list-item-title 
            v-text=”item.name”>
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
     </v-list>
   </v-card>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       items: [
         {name: ‚Jason Oner’},
         {name: ‚Travis Howard’},
         {name: ‚Ali Connors’},
         {name: ‚Cindy Baker’},
       ],
     }
   }
 }
</script>

Câteva observații în legătură cu codul de mai sus. Sunt afișate toate elementele definite în array-ul items folosind ''. Numele fiecărui element este obținut citind cheia 'name' a fiecărui element.

Observăm în pagina noastră elementele de demo generate în cadrul proiectului de care nu avem nevoie. Vom modifica layoutul aplicației definită în layouts/default.vue astfel încât să rămână:

<template>
 <v-app dark>
     <v-container>
       <nuxt />
     </v-container>
   </v-app>
</template>

Definirea unei componente

Creăm o nouă componentă în folderul components pe care o numim Contact.vue. Vom înlocui afișarea numelui fiecărui contact:

<v-list-item-title v-text="item.name">
</v-list-item-title>

cu noua componentă în Index.vue

<Contact
 :firstname=item.firstname
 :lastname=item.lastname>
</Contact>

Observați folosirea acum a firstname și lastname pentru un mai bun control. Pentru aceasta a trebuit să redefinim json-ul inițial

items: [
{firstname: 'Jason', lastname:'Oner'},
 ...
],

Revenim la componenta Contact.vue și codul sursă al acesteia:

<template>
 <div onclick=””>
   <v-row>
     <v-col align=”center”>
   {{lastname}}  {{firstname}}
     </v-col>
     <v-col align=”right”>
       <v-dialog  v-model=”dialog” 
         persistent max-width=”600px”>
         <template v-slot:activator=”{on, attrs}”>
           <v-btn
             elevation=”0”
             v-bind=”attrs”
             v-on=”on”>
             <v-icon large color=”blue darken-2”>
              mdi-message-text
             </v-icon>
           </v-btn>

         </template>
         <v-card>
           <v-form v-model=”valid”>
             <v-card-title>Contact edit
             </v-card-title>
             <v-card-text>
               <v-row>
                 <v-col>
                   <v-text-field
                     v-model=”firstname”
                     label=”First Name” required>
                   </v-text-field>
                 </v-col>
               </v-row>
               <v-row>
                 <v-col>
                   <v-text-field v-model=”lastname”
                     label=”Last Name” required>
                   </v-text-field>
                 </v-col>
               </v-row>
             </v-card-text>
             <v-card-actions>
               <v-btn @click.stop=”dialog=false”>
                 Cancel
               </v-btn>
               <v-spacer></v-spacer>

             <v-btn elevation=”0”
              style=”background-color: white; text-
                     align: center” @click=”update()”
                     :disabled=”!valid”>Update
              </v-btn>

             </v-card-actions>
           </v-form>
         </v-card>
       </v-dialog>
     </v-col>
   </v-row>
 </div>
</template>

<script>
   export default {
       name: „Contact”,
     props:[‚firstname’,’lastname’],
     data:()=>({
       dialog: false,
     }),
     methods:{
         update(){
           this.dialog=false;
         }
     }

   }
</script>

<style scoped>

</style>

A se remarca modul în care definim în props[] și folosim pentru afișare proprietățile componentei first/lastname. În cazul în care se modifică, valorile acestea vor fi reflectate în lista noastră. Din păcate, modificarea directă a proprietăților afișate nu este cea mai bună practică. Soluția este realizarea unui store intern unde vom modifica datele.

Stocarea datelor

Vom folosi componenta Vuex, valorificând următoarele concepte legate de persistența datelor:

Concret, mai jos este codul sursă al fișierului store/contact.js. Se poate observa separarea logicii între cele trei nivele și nivelul getters de export al valorii datelor. Contactele sunt definite ca json și sunt stocate în tabloul list. O observație: operația de update a elementelor din list a fost implementată ca un delete + add, deoarece o simplă modificare în interiorul elementelor nu propagă modificările spre componentele vue. Nivelul actions exportă operațiile CUD și tot aici am mutat metoda de pre-populare a datelor.

export const state =()=>({
 list:[]
})
export const mutations={
 add(state,contact){
   if (contact.id==null) {
     contact[„id”] = state.list.length + 1;
   }
   state.list.push(contact);
 },
 delete(state, contact){
   let index=state.list.findIndex((value, index)
    => (value.id===contact.id));
   if (index>=0){
     state.list.splice(index,1);
   }
 },
 update(state,contact){
  this.commit(„contacts/delete”,contact);
  this.commit(„contacts/add”,contact);
 }
}

export const getters={
contact:(state)=>(id)=>(state.list.filter((value)=>(value.id===id)).slice(0))  
   ,contacts:(state) =>(state.list.slice(0)
   .sort((a, b) => 
    ((‚’+a.firstname).localeCompare(b.firstname)))),
}

export const actions={

init({commit}){
 commit(„add”,{firstname: ‚Jason’, lastname:’Oner’})
 commit(„add”,{firstname: ‚Travis’,lastname:’Howard’})
 commit(„add”,{firstname: ‚Ali’,lastname:’Connors’})
 commit(„add”,{firstname: ‚Cindy’, lastname:’Baker’})
},
 update({commit},contact){
   commit(„update”,contact);
 },

 delete({commit}, contact){
   commit(„delete”,contact);
 },

 add({commit},contact){
   commit(„add”,contact);
 }
}

Pagina principală

Revenim la pages/Index.vue unde aplicația integrează citirea datelor din contacts.js:

export default {
 components: {ContactForm, Contact},
 fetch(){
   this.$store.dispatch(‚contacts/init’);
 },
 computed:{
   ...mapGetters({
     contacts:’contacts/contacts’
   }),
 },
}

Sunt folosite două componente: ContactForm pentru adăugarea unui nou contact și Contact pentru afișarea unei înregistrări. De asemenea, în metoda fetch() lansăm acțiunea de inițializare prin metoda dispatch(). Prin ...mapGetter() avem acces la citirea listei de contacte. A se remarca cele trei puncte din față: spread operator

În ceea ce privește template-ul html, am inclus componenta noastră ContactForm.

<v-toolbar color=”indigo” dark>
 <v-toolbar-title>Address Book</v-toolbar-title>
 <v-spacer></v-spacer>
 <ContactForm></ContactForm>
</v-toolbar>

Afișarea listei de contacte se realizează prin parcurgerea listei contacts și afișarea fiecărui rând prin componenta Contact.

<v-list-item  
  v-for=”item in contacts” :key=”item.name”>
 <v-list-item-content>
   <Contact :id=item.id 
            :firstname=item.firstname
            :lastname=item.lastname>
   </Contact>
 </v-list-item-content>
</v-list-item>

Adăugarea unui nou element

ContactForm ne permite adăugarea de noi elemente. Așa cum se vede în codul de mai jos, componenta acceptă trei parametri: id, firstname și lastname. Prezența id-ului indică faptul că avem o operație de update, iar în caz contrar vom avea o operație de definire a unui contact. Datele folosite sunt:

  1. dialog - controlează afișarea ferestrei modale;

  2. contact_log - este o variabilă de transport. O vom folosi pentru copierea datelor de contact astfel încât să nu modificăm direct proprietățile.
export default {
 name: „ContactForm”,
 props: [‚id’, ‚firstname’, ‚lastname’],
 data: () => ({
   dialog: false,
   contact_local:{
     firstname:’’,
     lastname:’’
   }
 }),
 computed: {
   contact_copy()
   {
     this.contact_local.firstname= this.firstname;
     this.contact_local.lastname = this.lastname;
     return this.contact_local;
   },
 },

Folosim metoda $store.dispatch() pentru a apela acțiunea de update din store.

update() {
 this.$store.dispatch(‚contacts/update’, {
   id: this.id,
   firstname: this.contact_local.firstname,
   lastname: this.contact_local.lastname
 });
 this.closeForm();
},

Procedăm similar și pentru cazul de ștergere:

deleteContact() {
 this.$store.dispatch(‚contacts/delete’, {
   id: this.id
 });
 this.closeForm();
},

În codul html afișăm semnul de editare sau un plus în funcție de prezența id-ului contactului.

<v-dialog v-model=”dialog” persistent max-width=”600px”>
 <template v-slot:activator=”{on, attrs}”>
   <v-btn 
     style=”!important;background-color: transparent”
          elevation=”0”
          v-bind=”attrs”
          v-on=”on”>
     <div v-if=”id!=null”>
       <v-icon large color=”blue darken-2”>
         mdi-message-text</v-icon>
     </div>
     <div v-else>
       <v-icon large>mdi-plus</v-icon>
     </div>
   </v-btn>

 </template>
 <v-card>
   <v-form>
     <v-card-title>Contact info</v-card-title>
     <v-card-text>
       <v-row>
         <v-col>
           <v-text-field
             v-model=”contact_copy.firstname”
             label=”First Name” required>
             </v-text-field>
         </v-col>
       </v-row>
….

Codul sursă

Codul sursă poate fi descărcat de pe GitHub și rulat în felul următor:

git clone https://github.com/ovidiumatan/addrbk.git
npm install
npm run dev

Concluzie

Aceasta a fost o scurtă introducere în Nuxt și Vuetify. Sper că v-am făcut curioși. Vă sugerez să descărcați codul sursă pentru o mai bună înțelegere. Timpul de învățare este relativ scurt, iar un programator de backend poate să se înțeleagă mult mai ușor cu tot ce înseamnă UI.