Création d'applications multiplateformes —

Résumé rapide ↬

Quasar est un framework multiplateforme open source basé sur Vue.js qui vous permet, en tant que développeur, de créer facilement des applications pour ordinateur de bureau et mobile en utilisant des technologies telles que Cordova et Electron et en écrivant votre code une fois. L'application que nous allons créer stockera et obtiendra ses données de Firebase, ce qui signifie que nous verrons également comment utiliser Firebase dans Quasar.

Dans cet article, j'expliquerai comment utiliser Quasar Framework et son interface utilisateur de pointe (qui suit les directives Material) pour créer une application de notes. L'application obtiendra ses données et stockera ses données dans Firebase. Ce didacticiel est destiné à toute personne intéressée par la création d'applications multiplateformes qui fonctionnent bien sur tous les appareils simultanément. À la fin de l'article, vous devriez avoir une bonne compréhension de ce qu'est Quasar, comment commencer à créer des applications avec Quasar, et aussi comment utiliser Firebase.

Pour suivre cet article, vous devriez avoir :[19659004]une compréhension de HTML, CSS et JavaScript ;

au moins une petite expérience avec Vue.js ;

Node.js version 10 ou supérieure et npm version 5 ou supérieure installée sur votre ordinateur .

connaissance du fonctionnement de l'interface de ligne de commande (CLI).

L'application déployée est disponible pour l'affichageet le code final est sur Github.[19659009]Qu'est-ce que Quasar Framework ?

Quasar Framework est un framework multiplateforme open source basé sur Vue.js dont la devise est  : « écrivez le code une fois et déployez-le simultanément en tant que site Web, une application mobile et/ou une application Electron ». Il possède de nombreuses fonctionnalités qui vous permettent, en tant que développeur Web, de créer des applications sur ordinateur de bureau et mobile et de créer des applications Web progressives (PWA) à l'aide de technologies telles que Cordova, Electron et le Web (Vue.js).

Pourquoi? Quasar Framework ?

Quasar est un kit d'interface utilisateur facile à utiliser mais puissant comprenant de nombreux composants d'interface utilisateur, des éléments de mise en page et des assistants. Ensemble, ces éléments fournissent un ensemble d'outils complet pour créer des applications frontales réactives, sans que vous ayez à utiliser de nombreuses bibliothèques d'interface utilisateur différentes. Il fait le gros du travail à votre place, vous permettant de vous concentrer sur les fonctionnalités et non sur le standard.

En résumé, Quasar prend en charge de nombreux modes de création, notamment :

• applications à page unique ;
• applications Web progressives ;[19659005]rendu côté serveur ;
• applications mobiles (iOS et Android), utilisant Cordova ou Сapacitor ;
• applications de bureau multiplateformes, utilisant Electron ;
• extensions de navigateur.

Mise en route

Pour commencer, voyons comment installer Quasar sur votre ordinateur local et configurer un projet.

Installation

Il existe trois façons de commencer à utiliser Quasar :

• intégration à un projet existant via un réseau de diffusion de contenu (CDN) ;
• installation à l'aide du plug-in Vue.js CLI Quasar ;
• installation en utilisant la CLI Quasar.

Pour ce didacticiel, nous utiliserons la troisième méthode, qui est la CLI Quasar. La première chose à faire est d'installer la CLI Quasar globalement sur votre ordinateur, ou de vérifier si elle est installée en exécutant les commandes suivantes dans votre CLI :

quasar -v #check si quasar a été installé précédemment

fil global ajouter @quasar/cli
# ou
npm install -g @quasar/cli

Une fois cela fait, vous pouvez maintenant passer à la configuration du projet.

Configuration du projet

Exécutez la commande suivante dans votre CLI :

quasar create 

Suite à cela, on va vous poser quelques questions. Voici ma configuration complète pour l'application que nous allons créer.

Nous pouvons maintenant nous déplacer dans le dossier du projet et démarrer l'application à l'aide des commandes suivantes :

cd 
quasar dev

Une fois les étapes ci-dessus terminées, notre application devrait fonctionner sur http://localhost:8080. Voici ce que nous devrions voir :

Structure de dossiers de Quasar

La structure d'application par défaut de Quasar est destinée à être un excellent point de départ pour les développeurs pour créer tout type d'application. Vous pouvez organiser l'application comme vous le souhaitez et créer des répertoires quand vous en avez besoin.

.
├── public/ # actifs statiques purs (directement copiés)
src/
│ ├── actifs/ # actifs dynamiques (traités par Webpack)
│ ├── composants/ # .vue composants utilisés dans les pages et les mises en page
│ ├── css/ # Fichiers CSS/Stylus/Sass/… pour votre application
│ ├── layouts/ # layout fichiers .vue
│ ├── pages/ # page fichiers .vue
│ ├── boot/ # fichiers de démarrage (code d'initialisation de l'application)
│ ├── routeur/ # Vue Router
├── store/ # Vuex Store
│ ├── App.vue # root composant Vue de votre application
│ └── index.template.html # modèle pour index.html
├── .editorconfig # configuration de l'éditeur
├── .gitignore # GIT ignore les chemins
├── .postcssrc.js # config PostCSS
babel.config.js # Configuration de Babel
├── package.json # scripts et dépendances npm
├── quasar.conf.js # Fichier de configuration de l'application Quasar
└── README.md # readme pour votre application

Le dossier source se compose d'environ sept répertoires principaux dont un débutant devrait se soucier :

• quasar.conf.js
  C'est le cerveau derrière tout Application Quasar, car la plupart des configurations sont effectuées dans ce fichier. Étonnamment, Quasar gère la plupart des configurations complexes nécessaires aux divers outils et packages que vous pouvez utiliser dans une application. Certaines de ces configurations sont pour :
• src/assets
  Le répertoire assets contient vos ressources non compilées, telles que les fichiers Stylus ou Sass, les images et les polices.
• src/components
  C'est là que tous vos composants réutilisables vivront. Ces composants constituent les différentes parties de l'application et peuvent être réutilisés et importés dans vos pages, mises en page et même d'autres composants.
• src/css
  Vous ne trouverez pas cela dans Vue.js, mais Quasar fournit cela afin que nous puissions avoir tous nos CSS mondiaux sous forme Sass. Il se compose de deux fichiers : app.sass est l'endroit où tous nos styles iront, tandis que quasar.variables.sass contient toutes les variables réutilisables que nous voudrions utiliser lorsque styliser notre application. Vous pouvez ignorer le répertoire CSS si vous pensez qu'il ne vous est d'aucune utilité.
• src/layouts
  Cela nous aide à créer des mises en page définies pour une application sans répéter le code. Ceci est utile lorsque vous souhaitez inclure des barres latérales ou des barres inférieures fixes ou avoir des dispositions distinctes pour le mobile et le bureau.
• src/pages
  Le répertoire pages contient les vues et les itinéraires de notre application. Nos pages sont injectées dans l'application et gérées via Vue Router dans /src/router/routes.js. Cela signifie que chaque page doit y être référencée.
• src/router
  Ceci contient la configuration de routage de notre application. Il se compose de deux dossiers :
  • /src/router/index.js contient le code d'initialisation de Vue Router.
  • /src/router/routes.js contient les routes de l'application, chargeant nos mises en page avec le routes ou pages dans l'application.
    Vous n'aurez peut-être pas besoin de faire quoi que ce soit au fichier index.js dans un petit projet, mais si votre projet comporte des routes, vous devrez les ajouter au fichier routes.js.

Création d'une application Notes

Lors de la création d'une application avec Quasar, la première chose que nous voulons faire est de créer une mise en page. Quasar a rendu ce processus beaucoup plus facile que tout autre framework en utilisant un générateur de mise en page. Pour notre application de notes, nous voudrons quelque chose comme ce qui suit, qui est assez similaire à la mise en page par défaut mais avec quelques modifications :

Mise en page de l'application

Dans la barre latérale de la Documentation de Quasarvous verrez l'option "Mise en page et grille". Lorsque vous cliquez dessus, une liste déroulante apparaîtra avec plus d'options, dont l'une est "Layout Builder". Cliquez sur « Layout Builder », qui vous amènera ici :

Cela nous permet de choisir les options que nous voulons et de supprimer celles que nous ne voulons pas. Ensuite, nous générons le code à coller dans le fichier de mise en page.

La première option nous aide à choisir les parties de la mise en page, tandis que la seconde nous permet de configurer les parties de la mise en page. Enfin, nous exportons la mise en page générée.

Si vous voulez exactement la même mise en page que la mienne, utilisez le code ci-dessous :

Supprimez la mise en page par défaut et collez le code ci-dessus ou le code que vous avez généré dans src/layouts/MainLayout.vue.

Le code ci-dessus est divisé en trois sections : l'en-tête (barre de navigation ), le tiroir (barre latérale) et le conteneur de page (qui contient la vue du routeur).

Nous avons utilisé l'interface utilisateur de pointe pour styliser toute la page. Comme je l'ai dit plus tôt, lorsque vous utilisez Quasar, vous n'aurez pas besoin de bibliothèques lourdes supplémentaires telles que Hammer.js, Moment.js ou Bootstrap.

Nous ajouterons des données à la barre latérale et modifierons la barre de navigation. Une fois que vous avez enregistré, vous remarquerez que notre application ressemble maintenant à ceci :

Travaillons sur la mise en page, en ajoutant des éléments à la barre latérale et en modifiant le titre de l'application. Si vous scannez le code de mise en page que nous avons ajouté, vous verrez où nous sommes censés modifier et ajouter ces divers éléments. [19659003]Voici à quoi ressemble ma mise en page après avoir ajouté des éléments à la barre latérale et modifié le titre :

Et voici le code :

Nous avons supprimé le logo de la barre de navigation et modifié le texte, puis ajouté une liste à la barre latérale, en utilisant l'interface utilisateur de pointe de Quasar. Consultez les éléments de la liste et copiez le code de ceux que vous souhaitez utiliser. pour créer une application de notes, et c'est ce que nous allons faire maintenant. Expliquer l'ensemble du processus dans un article comme celui-ci est difficile, mais la section "Style et identité" de la documentation de Quasar le couvre bien.

Ce sera une application d'une page (index.vue), et voici le code, sans aucun style appliqué :

Dans le code ci-dessus, nous avons un champ de saisie de Quasar. Nous avons joint un v-model pour obtenir les données du champ de saisie une fois que vous avez cliqué sur le bouton « Envoyer ». Nous avons également une liste d'éléments qui seront utilisés pour afficher chaque note, et chaque élément de liste a une icône utilisée pour supprimer cet élément particulier lorsque vous cliquez dessus.

Configuration des données locales

À ce stade, la conception de notre l'application est en place. La prochaine chose que nous allons faire est de créer un tableau qui contiendrait toutes nos notes. Nous veillerons à pouvoir ajouter et supprimer de ce tableau avant de configurer Firebase.

Voici le tableau que nous utiliserons dans notre application pour le moment. Plus tard, nous supprimerons ce tableau ou commenterons le code.

notes : [
  {
    id: 1,
    noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam."
  },
  {
    id: 2,
    noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam."
  },
  {
    id: 3,
    noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam."
  }
]

Fetching Data

Nous avons maintenant notre tableau. Ajoutons ces données à notre application. Parce que nous comprenons Vue.js, tout ce que nous ferons est de parcourir ce tableau en utilisant la directive v-ford'utiliser les données obtenues à partir du tableau, puis de placer le contenu où nous voulons qu'il apparaisse.[19659111]

Nous avons également ajouté un gestionnaire d'événements de clic au bouton de suppression, afin qu'il charge cette fonction chaque fois qu'elle est créée.

Ajout de notes

Voyons comment ajouter des notes à notre application en utilisant le champ de saisie . Nous utiliserons les méthodes unShift() de JavaScript, qui ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.

La première chose à faire est d'ajouter un événement click gestionnaire au bouton.

Ensuite, créez cette méthode dans la zone de script.

méthodes : {
  ajouter une note() {
    let newNote = {
      id : this.notes.length + 1,
     remarque : this.newNoteContent
    } ;
    this.notes.unshift(newNote);
    this.newNoteContent = "";
  }
}

Dans le code ci-dessus, nous avons créé un objet pour la nouvelle note, qui comprend l'ID et la note elle-même, puis nous avons ajouté cette newNote au tableau de notes via la méthode unShift().

Suppression de notes

Enfin, avant de continuer à utiliser Firebase dans notre application, voyons comment supprimer une note. La première chose serait d'ajouter un écouteur d'événement à l'icône de suppression :

Et puis nous créerions une méthode :

deleteNote(noteContent) {
  let noteId = noteContent.id;

  //faire ceci pour obtenir l'identifiant réel des notes
  let index = this.notes.findIndex(noteContent => noteContent.id === noteId);
  this.notes.splice(index, 1);
}

Dans ce code, nous avons obtenu l'id de la note particulière que nous voulons supprimer via le paramètre passé à la méthode d'événement click qui a été créée. Ensuite, nous avons utilisé la méthode splice pour supprimer uniquement cet élément du tableau.

Firebase

Maintenant que ces deux fonctionnalités fonctionnent, voyons maintenant comment nous pouvons utiliser Firebase dans Quasar pour ajouter, récupérer et supprimer des données. Firebase nous permettra également de synchroniser les données en temps réel sur tous les appareils. Les données de notre application ne seront pas très nombreuses, car elles sont uniquement destinées à l'apprentissage. Si vous pensez à quelque chose de grand qui serait utilisé par des millions de personnes, consultez la page de tarification.

Firebase est un logiciel de développement d'applications de Google qui nous permet de développer iOS, Android et Web apps.

Configuration de Cloud Firestore

Pour commencer, visitez firebase.google.com et cliquez sur le lien "Aller à la console" dans le coin supérieur droit de votre écran ou sur le lien Bouton "Commencer" (assurez-vous de vous connecter avec votre compte Google).

Cela nous amènera à la zone de la consoleoù nous pouvons créer un projet. Cliquez sur le bouton « Ajouter un projet », et un formulaire pour créer votre projet apparaîtra. La première question demandera le nom du projet, qui pourrait être n'importe quoi ; pour cet article, nous l'appellerons « notesApp ». Désactivons également Google Analytics, car la nôtre est une mini-application.

Cliquez sur le bouton « Créer un projet » (cela peut prendre quelques secondes, alors soyez patient). Ensuite, cliquez sur « Continuer », afin que nous puissions créer notre Firestore cloud.

Dans la barre latérale, cliquez sur « Firestore », puis sur « Créer une base de données ».

Cela fera apparaître un modal. Cliquez sur « Démarrer en mode test », ce qui nous permettra de commencer facilement à travailler avec notre base de données. Gardez à l'esprit que « Les règles de sécurité par défaut du mode test permettent à toute personne disposant de votre référence de base de données d'afficher, de modifier et de supprimer toutes les données de votre base de données pendant les 30 prochains jours ».

Cliquez sur "Suivant", laissez l'emplacement par défaut du Cloud Firestore, puis cliquez sur le bouton "Activer". Une fois chargée, notre base de données sera entièrement prête à être utilisée.

Remarque : La base de données Firebase est composée de collections, et ces collections contiennent des documents, et chaque document est un objet JavaScript contenant des champs.

Commençons par créer une nouvelle collection. pour nos notes.

Pour créer une collection, cliquez sur « Démarrer la collection ». Un modal apparaîtra pour vous permettre de saisir l'ID de la collection, c'est-à-dire un nom. Cliquez ensuite sur le bouton « Suivant ».

Vous pouvez maintenant commencer à créer les documents et les champs pour chaque note. Générez automatiquement l'ID du document pour vous assurer qu'il est unique en cliquant sur "Auto-ID" à côté du champ du document.

Cliquez sur « Enregistrer » et continuez à créer d'autres documents. Au final, voici à quoi ressemble ma base de données :

Maintenant que nous avons terminé, voyons comment connecter Firebase à notre application. Accédez à « Aperçu du projet » dans la barre latérale et ajoutons-le à une application Web en cliquant sur le bouton « Web ».

Un formulaire apparaîtra pour nous pour "Ajouter Firebase" à notre application Web. Nous lui donnerons le même nom, « notesApp », et enregistrerons l'application (ne cochez pas le champ « hébergement Firebase »).

Une fois chargée, elle affichera un SDK pour nous aider à initialiser notre base de données dans l'application. Nous ne procéderons pas de cette façon, bien que nous ayons besoin de certaines informations du SDK généré. La bonne façon de le faire dans Quasar est d'importer les modules dont nous avons besoin et d'utiliser un fichier de démarrage.

Alors, laissez cet onglet ouvert et voyons comment ajouter le SDK Firebase et initialiser Firebase dans notre application Quasar.[19659003]La première chose à faire serait d'installer Firebase dans notre projet avec npm.

npm install --save firebase

Une fois l'installation terminée, nous allons initialiser la connexion de notre application à Firebase en créant un fichier de démarrage , afin que nous ayons un accès immédiat à la base de données lorsque notre application est prête.

Un fichier de démarrage nous aide à exécuter du code avant que le composant racine Vue.js de l'application ne soit instancié. La documentation de Quasar contient plus d'informations sur les fichiers de démarrage et quand utiliser les fichiers de démarrage.

Pour générer un fichier de démarrage, nous exécuterons cette commande dans notre CLI :

quasar new boot firebase

Remarque : Vous n'avez pas besoin d'utiliser Firebase comme nom du fichier de démarrage.

Une fois cela fait, vous remarquerez que le fichier est maintenant créé dans le boot dossier. Pour utiliser ce fichier de démarrage nouvellement créé, nous devrons l'ajouter à la matrice de démarrage du fichier quasar.config.js.

Revenons au fichier de démarrage nouvellement créé. Supprimez tout le code car nous n'en avons pas besoin. Nous importerons les modules dont nous avons besoin et configurerons notre base de données. Collez le code suivant :

import firebase from "firebase/app" ;
importer "firebase/firestore" ;

const firebaseConfig = {
  // ...
} ;

// Initialiser Firebase
firebase.initializeApp(firebaseConfig);

Ici, nous avons importé Firebase lui-même et Firestore, et nous avons initialisé Firebase, en utilisant la configuration, que nous allons ajouter maintenant.

À ce stade, nous sommes presque fini de configurer notre application. Nous devons ajouter notre configuration unique, qui a été fournie dans le SDK généré lorsque nous avons ajouté Firebase à notre application Web. Copiez uniquement la configuration et collez-la dans notre tableau.

Nous devrions maintenant avoir quelque chose comme ceci :

import firebase from "firebase/app" ;
importer "firebase/firestore" ;
const firebaseConfig = {
  apiKey : "AIzaSyDRcq5PXJSi5c5C8rl6Q6nudIJqTFaxXeA",
  authDomain : "notesapp-ffd7c.firebaseapp.com",
  ID de projet : "notesapp-ffd7c",
  StorageBucket : "notesapp-ffd7c.appspot.com",
  messagerieSenderId : "18944010047",
  ID d'application : "1:18944010047:web:ddfb46fc6bc8bba375158a"
} ;
// Initialiser Firebase
firebase.initializeApp(firebaseConfig);

Une dernière chose, puisque nous utilisons Firestore, est que nous devrons initialiser le cloud Firestore en ajoutant ce code à notre fichier de démarrage (la dernière ligne) :

 let db = firebase.firestore();
export default db;

Ce db nous donnera accès à notre base de données Firestore. Nous l'avons également exporté afin que nous puissions l'utiliser n'importe où dans notre application.

À ce stade, vous êtes peut-être encore un peu confus, mais si vous avez suivi ce guide, vous aurez alors correctement initialisé Firebase pour votre application. Vous pouvez en savoir plus sur l'ajout de Firebase à votre projet JavaScript dans la documentation.

Récupération de données à partir de Firebase

Si vous avez suivi le guide jusqu'à présent, tout devrait fonctionner correctement une fois votre application lancée. Maintenant, récupérons les notes créées dans la base de données et affichons-les dans notre application.

Pour cela, nous utiliserons le hook .onSnapshotqui sera déclenché à chaque fois que les données de notre collection changements. Cela nous indiquera si un document a été ajouté, supprimé ou mis à jour. Pour ce guide, nous traiterons uniquement de l'ajout et de la suppression de documents. L'utilisation de crochets comme celui-ci rend possible la synchronisation en temps réel entre les appareils. Commençons.

La première chose à faire serait d'accéder à la base de données en l'important dans la page d'index de notre application.

import db depuis 'src/boot/firebase';

Ensuite, créez un hook monté, car nous voulons récupérer nos données immédiatement après le chargement de l'application.

mount () {
  db.collection("notes").onSnapshot(snapshot => {
    snapshot.docChanges().forEach(change => {

      let noteChange = change.doc.data();

      if (change.type === "ajouté") {
        console.log("Nouvelle note : ", noteChange);
        this.notes.unshift(noteChange);
      }
      if (change.type === "modifié") {
        console.log("Note modifiée : ", noteChange);
      }
      if (change.type === "supprimé") {
        console.log("Remarque supprimée : ", noteChange);
      }
    });
  });
}

Dans le code ci-dessus, nous récupérons simplement notre collection noteset chaque fois qu'il y a un changement dans la collection, la méthode onSnapShot sera déclenchée, ce qui retournera un snapShot de toutes nos données. Toutes ces données seront des objets avec les propriétés type. Ces propriétés type nous indiqueront le type de changement qui s'est produit et nous donneront accès aux données qui ont été soit ajoutées, modifiées ou supprimées.

Cela peut sembler déroutant, mais vous comprendrez ce que nous faites au fur et à mesure que vous lisez.

Si vous enregistrez votre code et vérifiez l'environnement de la console, vous remarquerez que chaque note a été déconnectée. Nous pouvons maintenant pousser ces objets vers le tableau notes que nous avons créé précédemment, afin que nous puissions afficher des données en temps réel dans notre application.

La première chose à faire est de supprimer ou de commenter les objets dans le tableau notesde sorte que nous avons quelque chose comme ceci :

notes : []

Ensuite, transmettez les objets à ce tableau :

this.notes.unshift(noteChange); 

Votre code devrait maintenant ressembler à ceci :

if (change.type === "added") {
  this.notes.unshift(noteChange);
}

À ce stade, si vous chargez l'application, vous remarquerez que vous avez récupéré avec succès vos données depuis Firebase.

Ajout de données à Firebase

Voyons comment ajouter une note à notre collection de notes dans cette application. À ce stade, si vous essayez d'utiliser le champ de saisie pour ajouter une note, cela fonctionnera mais la note disparaîtra une fois la page actualisée car elle n'est stockée dans aucune base de données.

Pour ce faire avec Firebase, tout cela est nécessaire est de mettre à jour la méthode addNote() que nous avons créée précédemment.

addNote() {
  let newNote = {
    // identifiant : this.notes.length + 1,
    remarque : this.newNoteContent
  } ;
  // this.notes.unshift(newNote);

  db.collection("notes")
    .add(nouvelleNote)
    .then(docRef => {
      console.log("Document écrit avec l'ID : ", docRef.id);
    })
    .catch(erreur => {
      console.error("Erreur lors de l'ajout du document : ", erreur);
    });

  this.newNoteContent = "";
},

La première chose que nous avons faite ici a été de supprimer l'ID utilisé lorsque nous avons utilisé le tableau précédent, car nous allons maintenant générer automatiquement l'ID à partir de Firebase. Nous avons également supprimé la méthode unshift() ; ce n'est plus utile car les données sont récupérées pour notre application une fois qu'il y a une mise à jour à l'aide du crochet snapShot.

Si nous regardons le code responsable de la mise à jour du Firestore dbtout ce que nous passons à la collection (notes) est le nouvel objet (newNote), et cette fonction générera automatiquement un identifiant pour chacun de nos documents. La documentation contient plus d'informations sur l'ajout de données à Firebase.

Suppression de données de Firebase

Nous avons presque terminé avec notre application, mais nous devons pouvoir supprimer les données de notre application de Firebase. Actuellement, la fonction delete fonctionne, mais si vous rechargez l'application, les données supprimées réapparaîtront.

Comme nous l'avons fait auparavant, nous allons supprimer ces données (ou documents) de Firebase à l'aide de l'unique ID généré par Firebase.

Actuellement, nous n'avons pas accès à l'ID. Pour y accéder, nous allons l'ajouter à l'objet noteChange :

noteChange.id = change.doc.id;

Une fois cela défini, la suppression des données sera aussi simple que l'ajout. Tout ce que nous avons à faire est d'aller à la méthode deleteNote(noteContent) que nous avons créée précédemment, de supprimer le code précédent et d'utiliser ceci :

deleteNote(noteContent) {
  let noteId = noteContent.id;
  db.collection("notes")
    .doc(noteId)
    .effacer()
    .then(() => {
      console.log("Document supprimé avec succès !");
    })
    .catch(erreur => {
      console.error("Erreur lors de la suppression du document : ", erreur);
    });
}

Cela vérifie la collection de notes pour un document avec l'ID spécifié, puis le supprime. Mais si nous enregistrons notre code maintenant et cliquons sur l'icône de suppression, les données seront supprimées mais ne quitteront pas l'interface de l'application à moins que nous ne rafraîchissions notre code, ce qui signifie que le hook snapshot doit être mis à jour. Accédez au crochet snapshot pour removedet ajoutez ce code :

if (change.type === "removed") {
  console.log("Remarque supprimée : ", noteChange);
  let index = this.notes.findIndex(
    noteContent => noteContent.id === noteChange.id
  );
  this.notes.splice(index, 1);
}

Cela obtient simplement l'ID du message que nous avons supprimé et le supprime de l'interface.

Cela fait, nous avons créé une application avec Quasar qui fonctionne avec Firebase. L'un des principaux avantages de Quasar est qu'il nous permet de déployer simultanément notre projet en tant que site Web, application mobile ou application Electron.

Pour déployer pour iOS, Cordova doit être installé sur notre machine locale. Un MacBook est fortement préférable. Accédez à votre CLI et installez Cordova globalement :

$ npm install - g cordova

Pour installer sur Windows, vous utiliserez Electron. La documentation explique correctement comment procéder.

Conclusion

Dans ce guide, nous avons construit une application de notes à l'aide de Quasar et Firebase. En suivant ce guide, vous êtes désormais en mesure d'améliorer et d'ajouter vos propres fonctionnalités et fonctionnalités. Voici quelques idées pour vous aider à démarrer :

• Implémentez la fonctionnalité pour modifier les notes.
• Ajoutez des dates, afin de pouvoir trier les données par date.
• Stylisez l'application et rendez-la plus créative.[19659005]Ajoutez des images.
• Beaucoup plus.

Ressources utiles